fix: 241211 몇가지 수정 #patch (#64)

* 고양이 선택 부분 gap 조정 * yarn audit fix 실행 * 입력한 고양이 이름이 아닌 고정값으로 * template 이미지 적용 * 휴식대기 화면 상단 마진 축소 하단의 휴식 시작하기 버튼과 겹침을 방지하기 위함 * 최소화 창 사이즈 높이 더 줄이기 * 최소화 화면의 글자 이미지에 맞춰 중앙정렬 * 휴식 화면 간격 조정하면서 다른 화면도 비슷하게 수정 * 상하단 패딩 수정 * 창을 닫았다 다시 열면 ipc 통신이 원할하지 않는 부분 수정 트레이의 종료 버튼을 누르기 전까지 계속 실행되도록 수정
Nexters · Dec 16, 2024 · 922bcba · 922bcba
1 parent c7ff384
commit 922bcba
Show file tree

Hide file tree

Showing 9 changed files with 512 additions and 491 deletions.
diff --git a/package.json b/package.json
@@ -12,15 +12,15 @@
     "lint": "eslint --ext .ts,.tsx ."
   },
   "devDependencies": {
-    "@electron-forge/cli": "^7.4.0",
-    "@electron-forge/maker-deb": "^7.4.0",
-    "@electron-forge/maker-rpm": "^7.4.0",
-    "@electron-forge/maker-squirrel": "^7.4.0",
-    "@electron-forge/maker-zip": "^7.4.0",
-    "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
-    "@electron-forge/plugin-fuses": "^7.4.0",
-    "@electron-forge/plugin-vite": "^7.4.0",
-    "@electron-forge/publisher-github": "^7.4.0",
+    "@electron-forge/cli": "^7.6.0",
+    "@electron-forge/maker-deb": "^7.6.0",
+    "@electron-forge/maker-rpm": "^7.6.0",
+    "@electron-forge/maker-squirrel": "^7.6.0",
+    "@electron-forge/maker-zip": "^7.6.0",
+    "@electron-forge/plugin-auto-unpack-natives": "^7.6.0",
+    "@electron-forge/plugin-fuses": "^7.6.0",
+    "@electron-forge/plugin-vite": "^7.6.0",
+    "@electron-forge/publisher-github": "^7.6.0",
     "@electron/fuses": "^1.8.0",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
@@ -38,10 +38,10 @@
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.6",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.16",
     "ts-node": "^10.0.0",
     "typescript": "~4.5.4",
-    "vite": "^5.0.12",
+    "vite": "^5.4.11",
     "vite-plugin-svgr": "^4.2.0"
   },
   "author": {
@@ -88,5 +88,10 @@
     "update-electron-app": "^3.0.0",
     "usehooks-ts": "^3.1.0",
     "vaul": "^0.9.1"
+  },
+  "resolutions": {
+    "cross-spawn": "^7.0.3",
+    "path-to-regexp": "^0.1.10",
+    "body-parser": "^1.20.3"
   }
 }
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -12,19 +12,24 @@ updateElectronApp({
   },
 });
 
+let mainWindow: BrowserWindow | null = null;
+let tray: Tray | null = null;
+let forceQuit = false;
+
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (require('electron-squirrel-startup')) {
+  forceQuit = true;
   app.quit();
 }
 
 const WindowSizeMap = {
-  minimized: { width: 400, height: 220 },
+  minimized: { width: 400, height: 200 },
   normal: { width: 400, height: 720 },
 };
 
 const createWindow = () => {
   // Create the browser window.
-  const mainWindow = new BrowserWindow({
+  const browserWindow = new BrowserWindow({
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       webSecurity: false,
@@ -39,25 +44,34 @@ const createWindow = () => {
 
   // and load the index.html of the app.
   if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
-    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
+    browserWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
   } else {
-    mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
+    browserWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
   }
 
   // // Open the DevTools.
-  // mainWindow.webContents.openDevTools();
+  // browserWindow.webContents.openDevTools();
 
   // @note: 외부 링크 클릭 시 별도 브라우저로 열도록 설정함
   // 외부 링크 여부는 url이 https://로 시작하는지로 판단함
-  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+  browserWindow.webContents.setWindowOpenHandler(({ url }) => {
     if (url.startsWith('https://')) {
       shell.openExternal(url);
       return { action: 'deny' };
     }
     return { action: 'allow' };
   });
 
-  return mainWindow;
+  // @see: https://stackoverflow.com/questions/38309240/object-has-been-destroyed-when-open-secondary-child-window-in-electron-js/39135293
+  // 창이 닫히지 않고 숨겨지도록 설정함
+  browserWindow.on('close', (event) => {
+    if (!forceQuit) {
+      event.preventDefault();
+      browserWindow?.hide();
+    }
+  });
+
+  return browserWindow;
 };
 
 const trayIconMap: Record<string, string> = {
@@ -72,7 +86,11 @@ const trayIconMap: Record<string, string> = {
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADoSURBVHgB3ZIxDoIwFIb/Eg7gEWBxldFNiLOJR+AG6g3AY+Cio6NxcDK66cgN8AawmLjVV62JkhYrOBi/5IWmr+/j5bXAr8N0Cc55Rh9HmdytgeMWuJwLMGvO4mRSKSSZL8qUss3yLnvtK2bTJBIrC2o86EgPik0+eqx0wh5q8nmH3b5qd6EV0vwc6C5DEAwAt72n6Re3AKf5zcba8yQc8mpy8VMZrXK9rXD6qEZIMrk+UbjPSdUMOzBn9fYENyeCCeJRU4Qy8kYyw24j1IEKva/JpLD8fEI0QXRTR2ZX5AoZAWMsxd9wBR1E9hNu08zLAAAAAElFTkSuQmCC',
 };
 const getTrayIcon = (icon: string): NativeImage => {
-  return nativeImage.createFromDataURL(trayIconMap[icon] ?? trayIconMap.default);
+  const image = nativeImage.createFromDataURL(trayIconMap[icon] ?? trayIconMap.default);
+  // https://stackoverflow.com/questions/41664208/electron-tray-icon-change-depending-on-dark-theme
+  // @note: 템플릿 이미지 설정을 해줘야 배경에 맞춰 자동으로 아이콘 색상 변경됨
+  image.setTemplateImage(true);
+  return image;
 };
 
 const createTray = (mainWindow: BrowserWindow) => {
@@ -88,15 +106,18 @@ const createTray = (mainWindow: BrowserWindow) => {
       },
     },
     { type: 'separator' },
-    { label: '종료', role: 'quit' },
+    {
+      label: '종료',
+      click: () => {
+        forceQuit = true;
+        app.quit();
+      },
+    },
   ]);
   tray.setContextMenu(contextMenu);
   return tray;
 };
 
-let mainWindow: BrowserWindow | null = null;
-let tray: Tray | null = null;
-
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
@@ -109,6 +130,7 @@ app.on('ready', () => {
 // explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
+    forceQuit = true;
     app.quit();
   }
 });
@@ -154,7 +176,7 @@ app.whenReady().then(() => {
   });
   ipcMain.handle('get-minimized', () => {
     const [, height] = mainWindow?.getMinimumSize() || [0, 0];
-    return height === 220;
+    return height === WindowSizeMap.minimized.height;
   });
   ipcMain.handle('set-minimized', (event, isMinimized: boolean) => {
     if (isMinimized) {

diff --git a/src/renderer/pages/pomodoro.tsx b/src/renderer/pages/pomodoro.tsx
@@ -21,7 +21,7 @@ import { FocusScreen, HomeScreen, RestScreen, RestWaitScreen } from '@/widgets/p
 
 // @note: 개발할 때, 초과시간까지 빠르게 테스트하기 위해 설정함
 // 원래대로 하고 싶으면 false로 변경해서 사용하면 됩니다
-const isFastForward = import.meta.env.DEV;
+const isFastForward = false; //import.meta.env.DEV;
 const taping = (ms: number) => (isFastForward ? Math.floor(ms / 60) : ms);
 
 const focusExceedMaxTime = taping(minutesToMs(60));

diff --git a/src/renderer/pages/selection.tsx b/src/renderer/pages/selection.tsx
@@ -35,6 +35,11 @@ const alarmMessageMap: Record<CatType, string> = {
   BLACK: '어디갔나옹...',
   THREE_COLOR: '내가 여기있는데 어디갔냐옹!',
 };
+const typeNameMap: Record<CatType, string> = {
+  CHEESE: '치즈냥',
+  BLACK: '까만냥',
+  THREE_COLOR: '삼색냥',
+};
 const RIVE_STATE_MACHINE_NAME = 'State Machine_selectCat';
 
 const Selection = () => {
@@ -49,6 +54,7 @@ const Selection = () => {
         no: cat.no,
         name: cat.name,
         type: cat.type,
+        typeName: typeNameMap[cat.type],
         id: String(cat.no),
         iconName: iconNameMap[cat.type],
         adjective: adjectiveMap[cat.type],
@@ -95,7 +101,7 @@ const Selection = () => {
       <Frame>
         <Frame.NavBar title="고양이 선택" onBack={handleClickBackButton} />
 
-        <div className="flex w-full flex-col gap-[42px]">
+        <div className="flex w-full flex-col gap-[24px]">
           <div className="flex flex-col gap-1">
             <h1 className="header-3 text-text-primary">어떤 고양이와 함께할까요?</h1>
             <p className="body-r text-text-secondary">언제든지 다른 고양이와 함께할 수 있어요</p>
@@ -148,7 +154,8 @@ const Selection = () => {
                     selectedCatId === cat.id ? 'text-text-primary' : 'text-text-secondary',
                   )}
                 >
-                  {cat.name}
+                  {/* @note: 유저가 입력한 고양이 이름이 아닌 종류에 대한 이름을 보여준다 */}
+                  {cat.typeName}
                 </span>
               </SelectGroupItem>
             ))}

diff --git a/src/renderer/widgets/pomodoro/ui/focus-screen.tsx b/src/renderer/widgets/pomodoro/ui/focus-screen.tsx
@@ -68,7 +68,7 @@ export const FocusScreen = ({
           </div>
         </header>
         <div className="flex items-center p-6 pt-3">
-          <div>
+          <div className="flex flex-col items-start justify-center">
             <h2 className="body-sb flex gap-1 text-text-tertiary">
               <Icon name={getCategoryIconName(currentCategory)} size="sm" />
               {currentCategory}
@@ -78,14 +78,16 @@ export const FocusScreen = ({
               seconds={seconds}
               className="mb-1 mt-2 gap-xs text-[40px] font-bold leading-[48px] tracking-[-.02em] text-text-primary"
             />
-            <div className={cn('flex items-center gap-xs', isExceed ? 'opacity-100' : 'opacity-0')}>
-              <Time
-                minutes={exceedMinutes}
-                seconds={exceedSeconds}
-                className="header-5 gap-0 text-text-accent-1"
-              />
-              <span className="header-5 text-text-accent-1">초과</span>
-            </div>
+            {isExceed && (
+              <div className="flex items-center gap-xs">
+                <Time
+                  minutes={exceedMinutes}
+                  seconds={exceedSeconds}
+                  className="header-5 gap-0 text-text-accent-1"
+                />
+                <span className="header-5 text-text-accent-1">초과</span>
+              </div>
+            )}
           </div>
           <div className="flex-1" />
           <img src={hairballImage} width="86" height="86" />
@@ -97,7 +99,7 @@ export const FocusScreen = ({
   return (
     <SimpleLayout>
       <div className="relative flex h-full flex-col">
-        <header className="flex p-4">
+        <header className="flex px-4 py-2">
           <div className="subBody-sb flex w-[80px] gap-sm rounded-xs bg-background-secondary p-md text-text-tertiary">
             <Icon name={getCategoryIconName(currentCategory)} size="sm" />
             {currentCategory}
@@ -148,22 +150,22 @@ export const FocusScreen = ({
               <Time
                 minutes={exceedMinutes}
                 seconds={exceedSeconds}
-                className="header-4 gap-0 text-text-accent-1"
+                className="header-4 gap-0 text-text-accent-red"
               />
-              <span className="header-4 text-text-accent-1">초과</span>
+              <span className="header-4 text-text-accent-red">초과</span>
             </div>
           </div>
         </main>
-        <div className="flex w-full flex-col items-center pb-5">
+        <div className="flex w-full flex-col items-center gap-2 pb-5">
           <Button
             variant={isExceed ? 'primary' : 'secondary'}
-            className="w-[200px] p-xl"
+            className="h-[60px] w-[200px] p-xl"
             size="lg"
             onClick={handleRest}
           >
             휴식하기
           </Button>
-          <Button variant="text-secondary" size="md" onClick={handleEnd}>
+          <Button variant="text-secondary" size="md" className="h-[40px]" onClick={handleEnd}>
             집중 끝내기
           </Button>
         </div>

diff --git a/src/renderer/widgets/pomodoro/ui/rest-screen.tsx b/src/renderer/widgets/pomodoro/ui/rest-screen.tsx
@@ -71,7 +71,7 @@ export const RestScreen = ({
           </div>
         </header>
         <div className="flex items-center p-6 pt-3">
-          <div>
+          <div className="flex flex-col items-start justify-center">
             <h2 className="body-sb flex gap-1 text-text-tertiary">
               <Icon name={getCategoryIconName(currentCategory)} size="sm" />
               {currentCategory}
@@ -81,14 +81,16 @@ export const RestScreen = ({
               seconds={seconds}
               className="mb-1 mt-2 gap-xs text-[40px] font-bold leading-[48px] tracking-[-.02em] text-text-primary"
             />
-            <div className={cn('flex items-center gap-xs', isExceed ? 'opacity-100' : 'opacity-0')}>
-              <Time
-                minutes={exceedMinutes}
-                seconds={exceedSeconds}
-                className="header-5 gap-0 text-text-accent-1"
-              />
-              <span className="header-5 text-text-accent-1">초과</span>
-            </div>
+            {isExceed && (
+              <div className="flex items-center gap-xs">
+                <Time
+                  minutes={exceedMinutes}
+                  seconds={exceedSeconds}
+                  className="header-5 gap-0 text-text-accent-1"
+                />
+                <span className="header-5 text-text-accent-1">초과</span>
+              </div>
+            )}
           </div>
           <div className="flex-1" />
           <img src={hairballImage} width="86" height="86" />
@@ -100,7 +102,7 @@ export const RestScreen = ({
   return (
     <SimpleLayout>
       <div className="relative flex h-full flex-col">
-        <header className="flex p-4">
+        <header className="flex px-4 py-2">
           <div className="subBody-sb flex h-[40px] items-center gap-sm rounded-xs bg-background-secondary px-3 py-2 text-text-tertiary">
             <Icon name={getCategoryIconName(currentCategory)} size="sm" />
             {currentCategory}
@@ -122,7 +124,7 @@ export const RestScreen = ({
           </div>
         </header>
 
-        <main className="flex flex-1 flex-col items-center justify-center gap-5">
+        <main className="flex flex-1 flex-col items-center justify-center gap-4">
           <Tooltip
             content={!isExceed ? '쉬는게 제일 좋다냥' : '이제 다시 사냥놀이 하자냥!'}
             color="white"
@@ -185,11 +187,16 @@ export const RestScreen = ({
           </div>
         </main>
 
-        <div className="flex w-full flex-col items-center pb-5">
-          <Button variant="secondary" className="w-[200px]" size="lg" onClick={handleFocus}>
+        <div className="flex w-full flex-col items-center gap-2 pb-5">
+          <Button
+            variant="secondary"
+            className="h-[60px] w-[200px]"
+            size="lg"
+            onClick={handleFocus}
+          >
             한번 더 집중하기
           </Button>
-          <Button variant="text-secondary" size="md" onClick={handleEnd}>
+          <Button variant="text-secondary" size="md" className="h-[40px]" onClick={handleEnd}>
             집중 끝내기
           </Button>
         </div>

diff --git a/src/renderer/widgets/pomodoro/ui/rest-wait-screen.tsx b/src/renderer/widgets/pomodoro/ui/rest-wait-screen.tsx
@@ -38,7 +38,7 @@ export const RestWaitScreen = ({
   return (
     <SimpleLayout>
       <div className="flex h-full flex-col">
-        <header className="h-[56px]" />
+        <header className="h-[16px]" />
         <main className="flex flex-1 flex-col items-center justify-center gap-5">
           <div className="flex flex-col items-center justify-center gap-sm">
             <CategoryChip category={currentCategory} />
@@ -110,11 +110,16 @@ export const RestWaitScreen = ({
             </SelectGroup>
           </div>
         </main>
-        <div className="flex w-full flex-col items-center pb-5">
-          <Button variant="primary" className="w-[200px] p-xl" size="lg" onClick={handleRest}>
+        <div className="flex w-full flex-col items-center gap-2 pb-5">
+          <Button
+            variant="primary"
+            className="h-[60px] w-[200px] p-xl"
+            size="lg"
+            onClick={handleRest}
+          >
             휴식 시작하기
           </Button>
-          <Button variant="text-secondary" size="md" onClick={handleEnd}>
+          <Button variant="text-secondary" size="md" className="h-[40px]" onClick={handleEnd}>
             집중 끝내기
           </Button>
         </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -134,6 +134,7 @@ module.exports = {
           inverse: colors.white,
           accent: {
             1: colors.orange[500],
+            red: colors.red[300],
           },
         },