fix: 스프린트 1 QA 이슈 중 일부 수정 (#63) #patch

* 폰트관련 오타 수정 * 기본 창 높이 720으로 축소 * 툴팁 메시지 텍스트 드래그 방지 * 툴팁 위치 20px 더 아래로 이동 * 나머지 고양이 툴팁 위치도 변경 * 서비스 가이드에 대한 디자인 맞추기
Nexters · Dec 4, 2024 · 5c8b7da · 5c8b7da
1 parent d9adaef
commit 5c8b7da
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 80 deletions.
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -17,17 +17,22 @@ if (require('electron-squirrel-startup')) {
   app.quit();
 }
 
+const WindowSizeMap = {
+  minimized: { width: 400, height: 220 },
+  normal: { width: 400, height: 720 },
+};
+
 const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       webSecurity: false,
     },
-    width: 400,
-    minWidth: 400,
-    height: 800,
-    minHeight: 800,
+    width: WindowSizeMap.normal.width,
+    minWidth: WindowSizeMap.normal.width,
+    height: WindowSizeMap.normal.height,
+    minHeight: WindowSizeMap.normal.height,
     title: '',
     titleBarStyle: 'hidden',
   });
@@ -153,11 +158,11 @@ app.whenReady().then(() => {
   });
   ipcMain.handle('set-minimized', (event, isMinimized: boolean) => {
     if (isMinimized) {
-      mainWindow?.setMinimumSize(400, 220);
-      mainWindow?.setSize(400, 220);
+      mainWindow?.setMinimumSize(WindowSizeMap.minimized.width, WindowSizeMap.minimized.height);
+      mainWindow?.setSize(WindowSizeMap.minimized.width, WindowSizeMap.minimized.height);
     } else {
-      mainWindow?.setMinimumSize(400, 800);
-      mainWindow?.setSize(400, 800);
+      mainWindow?.setMinimumSize(WindowSizeMap.normal.width, WindowSizeMap.normal.height);
+      mainWindow?.setSize(WindowSizeMap.normal.width, WindowSizeMap.normal.height);
     }
   });
 });
diff --git a/src/renderer/pages/mycat.tsx b/src/renderer/pages/mycat.tsx
@@ -43,27 +43,25 @@ const MyCat = () => {
       <Frame>
         <Frame.NavBar title="나의 고양이" onBack={() => navigate(PATH.MY_PAGE)} />
 
-        <div className="flex h-full items-center justify-center">
-          <div className="flex w-full flex-col">
-            <Tooltip
-              content="사냥놀이를 하고싶다냥"
-              color="white"
-              sideOffset={-20}
-              rootProps={{ open: true }}
-              arrowProps={{ width: 14, height: 9 }}
-            />
+        <div className="flex h-full flex-col items-center justify-center">
+          <Tooltip
+            content="사냥놀이를 하고싶다냥"
+            color="white"
+            sideOffset={-40}
+            rootProps={{ open: true }}
+            arrowProps={{ width: 14, height: 9 }}
+          >
+            <RiveComponent className="h-[240px] w-[240px] select-none" />
+          </Tooltip>
 
-            <RiveComponent className="h-[240px] w-full select-none" />
-
-            <div className="flex w-full items-center justify-center">
-              <button
-                className="flex items-center justify-center gap-1 p-3"
-                onClick={handleClickEditNameButton}
-              >
-                <span className="header-4 text-text-secondary">{user?.cat?.name}</span>
-                <Icon name="pen" size="md" />
-              </button>
-            </div>
+          <div className="flex w-full items-center justify-center">
+            <button
+              className="flex items-center justify-center gap-1 p-3"
+              onClick={handleClickEditNameButton}
+            >
+              <span className="header-4 text-text-secondary">{user?.cat?.name}</span>
+              <Icon name="pen" size="md" />
+            </button>
           </div>
         </div>
 

diff --git a/src/renderer/pages/naming.tsx b/src/renderer/pages/naming.tsx
@@ -44,39 +44,40 @@ const Naming = () => {
     <SimpleLayout>
       <Frame>
         <Frame.NavBar onBack={handleClickBackButton} />
-        <div className="flex h-full items-center justify-center">
-          <div className="flex w-full flex-col gap-10">
-            <Tooltip
-              content="반갑다냥! 내 이름을 지어줄래냥?"
-              color="white"
-              sideOffset={-20}
-              rootProps={{ open: true }}
-              arrowProps={{ width: 14, height: 9 }}
-            />
+        <div className="flex h-full w-full flex-col items-center justify-center gap-10">
+          <Tooltip
+            content="반갑다냥! 내 이름을 지어줄래냥?"
+            color="white"
+            sideOffset={-40}
+            rootProps={{ open: true }}
+            arrowProps={{ width: 14, height: 9 }}
+          >
             <RiveComponent
-              className="h-[240px] w-full cursor-pointer select-none"
+              className="h-[240px] w-[240px] cursor-pointer select-none"
               onClick={() => {
                 clickCatInput?.fire();
               }}
             />
-            <div className="relative flex flex-col gap-2">
-              <label className="subBody-4 text-text-secondary">내 고양이의 이름</label>
-              <input
-                value={typedCatName}
-                placeholder={selectedCatName}
-                className="body-sb rounded-sm p-lg text-text-primary caret-text-accent-1 placeholder:text-text-disabled"
-                onChange={(e) => setTypedCatName(e.target.value)}
-              />
-              {errorMessage && (
-                <div className="absolute bottom-[-8px] left-0 w-full">
-                  <div className="caption-r absolute left-0 top-0 text-accent-red">
-                    {errorMessage}
-                  </div>
+          </Tooltip>
+
+          <div className="relative flex w-full flex-col gap-2">
+            <label className="subBody-r text-text-secondary">내 고양이의 이름</label>
+            <input
+              value={typedCatName}
+              placeholder={selectedCatName}
+              className="body-sb rounded-sm p-lg text-text-primary caret-text-accent-1 placeholder:text-text-disabled"
+              onChange={(e) => setTypedCatName(e.target.value)}
+            />
+            {errorMessage && (
+              <div className="absolute bottom-[-8px] left-0 w-full">
+                <div className="caption-r absolute left-0 top-0 text-accent-red">
+                  {errorMessage}
                 </div>
-              )}
-            </div>
+              </div>
+            )}
           </div>
         </div>
+
         <Frame.BottomBar>
           <Button className="w-full" disabled={!!errorMessage} onClick={handleClickCompleteButton}>
             확인

diff --git a/src/renderer/pages/selection.tsx b/src/renderer/pages/selection.tsx
@@ -139,7 +139,7 @@ const Selection = () => {
                 value={cat.id}
                 className="flex h-[80px] flex-1 flex-col gap-1"
               >
-                <span className="subBody-4 flex gap-1 text-text-tertiary">
+                <span className="subBody-r flex gap-1 text-text-tertiary">
                   {cat.adjective} <Icon size="xs" name={cat.iconName} />
                 </span>
                 <span

diff --git a/src/renderer/shared/ui/guide.tsx b/src/renderer/shared/ui/guide.tsx
@@ -81,7 +81,7 @@ export const Guide = ({ steps, handler }: TGuideProps) => {
       {/* 3. 툴팁 메세지 */}
       <div
         className={cn(
-          'transition-position rounded-xs bg-white p-md text-text-secondary duration-300',
+          'transition-position body-sb w-max rounded-xs bg-white px-4 py-3 text-text-secondary duration-300',
           isAnimating ? 'translate-y-4 opacity-0' : 'translate-y-0 opacity-100',
         )}
         style={{

diff --git a/src/renderer/shared/ui/tooltip.tsx b/src/renderer/shared/ui/tooltip.tsx
@@ -33,7 +33,7 @@ export const Tooltip = ({
           className={cn(
             color === 'black' && 'bg-gray-900 text-white',
             color === 'white' && 'bg-white text-gray-600',
-            'shadow-xs body-sb z-50 rounded-xs px-lg py-md',
+            'shadow-xs body-sb z-50 select-none rounded-xs px-lg py-md',
             'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
             className,
           )}

diff --git a/src/renderer/widgets/pomodoro/ui/focus-screen.tsx b/src/renderer/widgets/pomodoro/ui/focus-screen.tsx
@@ -122,16 +122,18 @@ export const FocusScreen = ({
           <Tooltip
             content={isExceed ? toolTipContentMap.exceed : toolTipContentMap.default}
             color="white"
-            sideOffset={-20}
+            sideOffset={-40}
             rootProps={{ open: true }}
             arrowProps={{ width: 14, height: 9 }}
-          />
-          <RiveComponent
-            className="h-[240px] w-full cursor-pointer select-none"
-            onClick={() => {
-              clickCatInput?.fire();
-            }}
-          />
+          >
+            <RiveComponent
+              className="h-[240px] w-[240px] cursor-pointer select-none"
+              onClick={() => {
+                clickCatInput?.fire();
+              }}
+            />
+          </Tooltip>
+
           <div className="mt-xl flex flex-col items-center">
             <div className="flex gap-xs">
               <Icon name="focusTime" width={20} height={20} />

diff --git a/src/renderer/widgets/pomodoro/ui/home-screen.tsx b/src/renderer/widgets/pomodoro/ui/home-screen.tsx
@@ -81,14 +81,15 @@ export const HomeScreen = ({
             sideOffset={-40}
             rootProps={{ open: !showGuide }}
             arrowProps={{ width: 14, height: 9 }}
-          />
-          <RiveComponent
-            className="h-[240px] w-full cursor-pointer select-none"
-            onClick={() => {
-              showRandomMessage();
-              clickCatInput?.fire();
-            }}
-          />
+          >
+            <RiveComponent
+              className="h-[240px] w-[240px] cursor-pointer select-none"
+              onClick={() => {
+                showRandomMessage();
+                clickCatInput?.fire();
+              }}
+            />
+          </Tooltip>
 
           <div className="header-4 text-text-tertiary">{user?.cat?.name}</div>
           <div className="flex flex-col gap-md p-lg">

diff --git a/src/renderer/widgets/pomodoro/ui/rest-screen.tsx b/src/renderer/widgets/pomodoro/ui/rest-screen.tsx
@@ -126,16 +126,18 @@ export const RestScreen = ({
           <Tooltip
             content={!isExceed ? '쉬는게 제일 좋다냥' : '이제 다시 사냥놀이 하자냥!'}
             color="white"
-            sideOffset={-20}
+            sideOffset={-40}
             rootProps={{ open: true }}
             arrowProps={{ width: 14, height: 9 }}
-          />
-          <RiveComponent
-            className="h-[240px] w-full cursor-pointer select-none"
-            onClick={() => {
-              clickCatInput?.fire();
-            }}
-          />
+          >
+            <RiveComponent
+              className="h-[240px] w-[240px] cursor-pointer select-none"
+              onClick={() => {
+                clickCatInput?.fire();
+              }}
+            />
+          </Tooltip>
+
           <div className="flex flex-col items-center py-3">
             <div className="flex gap-xs">
               <Icon name="restTime" width={20} height={20} />