feat: 상단 고정 & 화면 축소 기능 추가 (#60)

* pin, minimize 버튼 추가 * 집중, 휴식 최소화 화면 ui만 추가 * 최소화, 고정모드 기능 추가 * 이미지 영역 털뭉치 이미지로 적용 * 타이틀바 숨기고 drag, nodrag 영역 설정 * 축소 ui에도 drag 영역 설정 * pin off시 한번 focus 되도록 Co-authored-by: halang <[email protected]> --------- Co-authored-by: halang <[email protected]>
Nexters · Nov 24, 2024 · 939f72b · 939f72b
1 parent a4bf244
commit 939f72b
Show file tree

Hide file tree

Showing 21 changed files with 519 additions and 242 deletions.
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -29,6 +29,7 @@ const createWindow = () => {
     height: 800,
     minHeight: 800,
     title: '',
+    titleBarStyle: 'hidden',
   });
 
   // and load the index.html of the app.
@@ -126,4 +127,28 @@ app.whenReady().then(() => {
   ipcMain.handle('change-tray-icon', (event, icon: string) => {
     tray?.setImage(getTrayIcon(icon));
   });
+  ipcMain.handle('get-always-on-top', () => {
+    return mainWindow?.isAlwaysOnTop();
+  });
+  ipcMain.handle('set-always-on-top', (event, isAlwaysOnTop: boolean) => {
+    if (isAlwaysOnTop) {
+      mainWindow?.setAlwaysOnTop(true, 'screen-saver');
+    } else {
+      mainWindow?.focus();
+      mainWindow?.setAlwaysOnTop(false);
+    }
+  });
+  ipcMain.handle('get-minimized', () => {
+    const [, height] = mainWindow?.getMinimumSize() || [0, 0];
+    return height === 220;
+  });
+  ipcMain.handle('set-minimized', (event, isMinimized: boolean) => {
+    if (isMinimized) {
+      mainWindow?.setMinimumSize(400, 220);
+      mainWindow?.setSize(400, 220);
+    } else {
+      mainWindow?.setMinimumSize(400, 800);
+      mainWindow?.setSize(400, 800);
+    }
+  });
 });
diff --git a/src/preload/preload.ts b/src/preload/preload.ts
@@ -8,6 +8,11 @@ const electronAPI: IElectronAPI = {
   showWindow: () => ipcRenderer.send('show-window'),
   getMachineId: () => ipcRenderer.invoke('get-machine-id'),
   changeTrayIcon: (icon: string) => ipcRenderer.invoke('change-tray-icon', icon),
+  getAlwaysOnTop: () => ipcRenderer.invoke('get-always-on-top'),
+  setAlwaysOnTop: (isAlwaysOnTop: boolean) =>
+    ipcRenderer.invoke('set-always-on-top', isAlwaysOnTop),
+  getMinimized: () => ipcRenderer.invoke('get-minimized'),
+  setMinimized: (isMinimized: boolean) => ipcRenderer.invoke('set-minimized', isMinimized),
 };
 
 contextBridge.exposeInMainWorld('electronAPI', electronAPI);
diff --git a/src/renderer/app/index.css b/src/renderer/app/index.css
@@ -100,3 +100,13 @@
     @apply text-[12px] font-normal leading-[16px] tracking-[-.01em];
   }
 }
+
+.drag-region {
+  -webkit-app-region: drag;
+}
+.drag-region > *:not(.drag-region) {
+  -webkit-app-region: no-drag;
+}
+.no-drag-region {
+  -webkit-app-region: no-drag;
+}
diff --git a/src/renderer/pages/pomodoro.tsx b/src/renderer/pages/pomodoro.tsx
@@ -8,8 +8,8 @@ import { TimeoutDialog } from '@/features/pomodoro/ui/timeout-dialog';
 import { useFocusNotification } from '@/features/time';
 import { useUser } from '@/features/user';
 import { MINUTES_GAP } from '@/shared/constants';
-import { useDisclosure } from '@/shared/hooks';
-import { SidebarLayout, SimpleLayout, useToast } from '@/shared/ui';
+import { useAlwaysOnTop, useDisclosure, useMinimize } from '@/shared/hooks';
+import { useToast } from '@/shared/ui';
 import {
   createIsoDuration,
   isoDurationToMs,
@@ -54,6 +54,8 @@ const Pomodoro = () => {
   const { data: user } = useUser();
   const { mutate: updateCategory } = useUpdateCategory();
   const { mutate: savePomodoro } = useAddPomodoro();
+  const { minimized, setMinimized } = useMinimize();
+  const { alwaysOnTop, setAlwaysOnTop } = useAlwaysOnTop();
 
   const [currentCategory, setCurrentCategory] = useState(categories?.[0]);
   const currentCategoryTitle = currentCategory?.title || '';
@@ -138,71 +140,77 @@ const Pomodoro = () => {
     setSelectedNextAction(undefined);
   };
 
+  useEffect(() => {
+    // 휴식 대기중이거나 시작 대기전에는 최소화 및 항상 위에 표시를 해제
+    if (mode !== 'focus' && mode !== 'rest') {
+      setMinimized(false);
+      setAlwaysOnTop(false);
+    }
+  }, [mode]);
+
   if (mode === 'focus')
     return (
-      <SimpleLayout>
-        <FocusScreen
-          currentFocusTime={currentFocusTime}
-          elapsedTime={Math.min(pomodoroTime.elapsed, currentFocusTime)}
-          exceededTime={pomodoroTime.exceeded}
-          currentCategory={currentCategoryTitle}
-          handleRest={() => {
-            startRestWait();
-          }}
-          handleEnd={() => {
-            endPomodoro();
-          }}
-        />
-      </SimpleLayout>
+      <FocusScreen
+        currentFocusTime={currentFocusTime}
+        elapsedTime={Math.min(pomodoroTime.elapsed, currentFocusTime)}
+        exceededTime={pomodoroTime.exceeded}
+        currentCategory={currentCategoryTitle}
+        minimized={minimized}
+        alwaysOnTop={alwaysOnTop}
+        handleRest={startRestWait}
+        handleEnd={endPomodoro}
+        setMinimized={setMinimized}
+        setAlwaysOnTop={setAlwaysOnTop}
+      />
     );
 
   if (mode === 'rest-wait')
     return (
-      <SimpleLayout>
-        <RestWaitScreen
-          elapsedTime={Math.min(latestFocusTime?.elapsed ?? 0, currentFocusTime)}
-          exceededTime={latestFocusTime?.exceeded ?? 0}
-          currentCategory={currentCategoryTitle}
-          currentFocusMinutes={currentFocusMinutes}
-          selectedNextAction={selectedNextAction}
-          setSelectedNextAction={setSelectedNextAction}
-          handleRest={() => {
-            updateCategoryTime('focusTime', currentFocusMinutes);
-            startRest();
-          }}
-          handleEnd={() => {
-            updateCategoryTime('focusTime', currentFocusMinutes);
-            endPomodoro();
-          }}
-        />
-      </SimpleLayout>
+      <RestWaitScreen
+        elapsedTime={Math.min(latestFocusTime?.elapsed ?? 0, currentFocusTime)}
+        exceededTime={latestFocusTime?.exceeded ?? 0}
+        currentCategory={currentCategoryTitle}
+        currentFocusMinutes={currentFocusMinutes}
+        selectedNextAction={selectedNextAction}
+        setSelectedNextAction={setSelectedNextAction}
+        handleRest={() => {
+          updateCategoryTime('focusTime', currentFocusMinutes);
+          startRest();
+        }}
+        handleEnd={() => {
+          updateCategoryTime('focusTime', currentFocusMinutes);
+          endPomodoro();
+        }}
+      />
     );
 
   if (mode === 'rest')
     return (
-      <SimpleLayout>
-        <RestScreen
-          currentRestTime={currentRestTime}
-          elapsedTime={Math.min(pomodoroTime.elapsed, currentRestTime)}
-          exceededTime={pomodoroTime.exceeded}
-          currentCategory={currentCategoryTitle}
-          currentRestMinutes={currentRestMinutes}
-          selectedNextAction={selectedNextAction}
-          setSelectedNextAction={setSelectedNextAction}
-          handleFocus={() => {
-            updateCategoryTime('restTime', currentRestMinutes);
-            startFocus();
-          }}
-          handleEnd={() => {
-            updateCategoryTime('restTime', currentRestMinutes);
-            endPomodoro();
-          }}
-        />
-      </SimpleLayout>
+      <RestScreen
+        currentRestTime={currentRestTime}
+        elapsedTime={Math.min(pomodoroTime.elapsed, currentRestTime)}
+        exceededTime={pomodoroTime.exceeded}
+        currentCategory={currentCategoryTitle}
+        currentRestMinutes={currentRestMinutes}
+        selectedNextAction={selectedNextAction}
+        minimized={minimized}
+        alwaysOnTop={alwaysOnTop}
+        setSelectedNextAction={setSelectedNextAction}
+        handleFocus={() => {
+          updateCategoryTime('restTime', currentRestMinutes);
+          startFocus();
+        }}
+        handleEnd={() => {
+          updateCategoryTime('restTime', currentRestMinutes);
+          endPomodoro();
+        }}
+        setMinimized={setMinimized}
+        setAlwaysOnTop={setAlwaysOnTop}
+      />
     );
 
   return (
-    <SidebarLayout>
+    <>
       <HomeScreen
         startTimer={startFocus}
         currentCategory={currentCategoryTitle}
@@ -220,7 +228,7 @@ const Pomodoro = () => {
           description={timeoutMessageMap[timeoutMode].description}
         />
       )}
-    </SidebarLayout>
+    </>
   );
 };
 

diff --git a/src/renderer/shared/assets/images/hairball.png b/src/renderer/shared/assets/images/hairball.png
diff --git a/src/renderer/shared/assets/svgs/minimize-off.svg b/src/renderer/shared/assets/svgs/minimize-off.svg
diff --git a/src/renderer/shared/assets/svgs/minimize-on.svg b/src/renderer/shared/assets/svgs/minimize-on.svg
diff --git a/src/renderer/shared/assets/svgs/pin-off.svg b/src/renderer/shared/assets/svgs/pin-off.svg
diff --git a/src/renderer/shared/assets/svgs/pin-on.svg b/src/renderer/shared/assets/svgs/pin-on.svg
diff --git a/src/renderer/shared/hooks/index.ts b/src/renderer/shared/hooks/index.ts
@@ -7,3 +7,5 @@ export * from './use-disclosure';
 export * from './use-notification';
 export * from './use-rive-cat';
 export * from './use-interval';
+export * from './use-minimize';
+export * from './use-always-on-top';
diff --git a/src/renderer/shared/hooks/use-always-on-top.ts b/src/renderer/shared/hooks/use-always-on-top.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+export const useAlwaysOnTop = () => {
+  const [alwaysOnTop, setAlwaysOnTop] = useState(false);
+
+  useEffect(() => {
+    const run = async () => {
+      const realAlwaysOnTop = await window.electronAPI.getAlwaysOnTop();
+      if (realAlwaysOnTop !== alwaysOnTop) {
+        await window.electronAPI.setAlwaysOnTop(alwaysOnTop);
+        setAlwaysOnTop(alwaysOnTop);
+      }
+    };
+
+    run();
+  }, [alwaysOnTop]);
+
+  return { alwaysOnTop, setAlwaysOnTop };
+};
diff --git a/src/renderer/shared/hooks/use-minimize.ts b/src/renderer/shared/hooks/use-minimize.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+export const useMinimize = () => {
+  const [minimized, setMinimized] = useState(false);
+
+  useEffect(() => {
+    const run = async () => {
+      const realMinimized = await window.electronAPI.getMinimized();
+      if (realMinimized !== minimized) {
+        await window.electronAPI.setMinimized(minimized);
+        setMinimized(minimized);
+      }
+    };
+
+    run();
+  }, [minimized]);
+
+  return { minimized, setMinimized };
+};
diff --git a/src/renderer/shared/ui/dialog.tsx b/src/renderer/shared/ui/dialog.tsx
@@ -30,7 +30,7 @@ export const Dialog = ({
       <DialogPrimitive.Portal>
         <DialogPrimitive.Overlay
           className={cn(
-            'fixed inset-0 z-50',
+            'no-drag-region fixed inset-0 z-50',
             !fullScreen && 'bg-black/80',
             animated &&
               'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',

diff --git a/src/renderer/shared/ui/drawer.tsx b/src/renderer/shared/ui/drawer.tsx
@@ -24,7 +24,7 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
-    className={cn('fixed inset-0 z-50 bg-black/80', className)}
+    className={cn('no-drag-region fixed inset-0 z-50 bg-black/80', className)}
     {...props}
   />
 ));

diff --git a/src/renderer/shared/ui/icon.tsx b/src/renderer/shared/ui/icon.tsx
@@ -13,9 +13,13 @@ import ClockIcon from '@/shared/assets/svgs/clock.svg';
 import CloseIcon from '@/shared/assets/svgs/close.svg';
 import FocusTimeIcon from '@/shared/assets/svgs/focus-time.svg';
 import MenuIcon from '@/shared/assets/svgs/menu.svg?react';
+import MinimizeOff from '@/shared/assets/svgs/minimize-off.svg';
+import MinimizeOn from '@/shared/assets/svgs/minimize-on.svg';
 import MinusIcon from '@/shared/assets/svgs/minus.svg';
 import MinusSvgIcon from '@/shared/assets/svgs/minus.svg?react';
 import PenIcon from '@/shared/assets/svgs/pen.svg';
+import PinOff from '@/shared/assets/svgs/pin-off.svg';
+import PinOn from '@/shared/assets/svgs/pin-on.svg';
 import PlaceholderIcon from '@/shared/assets/svgs/placeholder.svg';
 import PlayIcon from '@/shared/assets/svgs/play.svg';
 import PlusIcon from '@/shared/assets/svgs/plus.svg';
@@ -50,6 +54,10 @@ const icons = {
   clock: ClockIcon,
   readyForStat: ReadyForStatIcon,
   clockLine: ClockLineIcon,
+  pinOff: PinOff,
+  pinOn: PinOn,
+  minimizeOff: MinimizeOff,
+  minimizeOn: MinimizeOn,
 } as const;
 const sizes = {
   xs: 16,

diff --git a/src/renderer/shared/ui/layouts.tsx b/src/renderer/shared/ui/layouts.tsx
@@ -10,7 +10,12 @@ export type SimpleLayoutProps = {
 };
 
 export const SimpleLayout = ({ children }: SimpleLayoutProps) => {
-  return <div className="m-auto h-dvh max-w-md bg-background-primary">{children}</div>;
+  return (
+    <div className="relative m-auto h-dvh max-w-md bg-background-primary">
+      <div className="drag-region fixed left-0 right-0 top-0 h-[28px]" />
+      <div className="absolute bottom-0 left-0 right-0 top-[28px]">{children}</div>
+    </div>
+  );
 };
 
 export type SidebarLayoutProps = {
@@ -21,11 +26,11 @@ export type SidebarLayoutProps = {
 export const SidebarLayout = ({ title, children }: SidebarLayoutProps) => {
   return (
     <div className="relative h-dvh w-full">
-      <div className="absolute bottom-0 left-0 top-0 w-[68px] bg-background-secondary pt-[52px]">
+      <div className="drag-region absolute bottom-0 left-0 top-0 w-[68px] bg-background-secondary pt-[52px]">
         <DesktopSidebar />
       </div>
-      <div className="absolute left-[68px] right-0 top-0 h-[52px] bg-background-primary">
-        <h1 className="body-sb flex h-full items-center pl-3 text-text-primary">{title}</h1>
+      <div className="drag-region absolute left-[68px] right-0 top-0 h-[52px] bg-background-primary">
+        <h1 className="body-sb inline-flex h-full items-center pl-3 text-text-primary">{title}</h1>
       </div>
       <div className="absolute bottom-0 left-[68px] right-0 top-[52px] bg-background-primary">
         {children}