feat: 트레이 아이콘 모드에 따라 변경 #patch (#61)

* changeTrayTitle 인터페이스 추가

* 타이머 모드에 따라 트레이 아이콘 변경

Author: young-do

src/main/main.ts

@@ -56,12 +56,18 @@ const createWindow = () => {
 };
 
 const trayIconMap: Record<string, string> = {
-  cat: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEuSURBVHgB1ZRNTsMwEIXfmBCxzBF8A1hCYeFIlC1HCNyAI7QnQNygR8i+IFcCdd0bEG7QJVRNhiENKM4PoemGvoXljD3fOOMZA/9dVDXw9MIAmYHnTyicJU1ObE811uoGjJiu5otWID+d34H5vlhJoPywCs1hmbIC0xuDCmn4Mvte99zQuC7NxXFl2ZoQ74XtSCZlWB6YIxlbgMRaNsOBpqtXHBbfqUKXund0S7cDGQF2VPWEPYAcNALZDk7QT1ouLqgBsWaDfgqQfpg6ELRz/lygkkLuq4ySBqAfy7jEtpKOKrffD1BabCll84DtNXb5FfHj2UTMEf4ixpiG89GvwHzfdDCSs0dOz7pe8jcHt3T5HNeX2oJvXhUjUKlPOhbLV37f5HWJ4XmLPEV7qU80zGLwaU45uQAAAABJRU5ErkJggg',
+  default:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACoSURBVHgB7ZPhCcIwEIVfigPUDTKCG5gNWydQJ+gIukHdwBWywfmKUdIj1Bz2Zz84ynH3vhJCgA0R6eTNmdUW5i3rlna6X7Igc8ZcmmSj2gm5Y6ecXvUH1iSI/MY090sZLSzhYaD5J1zKNFgZLTzCzizj8ma6MtiJzrn9mkJQ+PXoI99h55E3WniFndPilKcepJ4BNXCxr5D1sMCAZ13U232mnwVsfHgBY9vO9YovS8sAAAAASUVORK5CYII=',
   focus:
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF5SURBVHgBxZRBTsJAGIXfTEkJEWNJ3LiyG1dugJWCizbGvTcQb4AnQE+AnoB7iKRdaHRXbiBx44qAG40F+jttLdgMbYGNL5nm78ybN99kJgP8l+i+VibL0LN8HCuIevW2cDqYTTpZXpYaZBmaCLFEVV50cpOdPdrYiNCbtGJhAQK1sAlhSOeOls9it+z06QprEU6n5cQxoiZ1j5vrBeamA6SJsTZ1TwypW1rc3yqgMdMe0EPN37KGZI2hqBXfu5SQrCMdnuuIZoWrsz7SpYUHl0BIvVoHhAbWlaKWBOU4RhjQbRLmy3PPo3KxZY8biRMKe8D2AZIDoUdlDlkqVUSr/rqLwMiRPYz6MiH3bMnoU0VhQXh1OamSlwOZ+TIQXztm3DmUJxelwLvEawNldinOfT4IpkISzy9q36uo17Hhvz8BJffMeejnmxzoDiO3DR5c6nEsAwkSd7IBXrjAbt3A1n7Y+fUODJ9tfH/cpD1hmSKnqdNrR1/F+wOB4H1F8tsNAAAAAABJRU5ErkJggg==',
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADQSURBVHgBzZMNDcMgEEZPQiVUQiVMQiUgoQ5WCXPQOZgEJEwCEirhdmRH9o1Qftol60tIyAGPuwsQ/QtmHugXiKiTsfAbQ0dQ2ZM/WDoCZIZMtAfNLsUqo6dW5NCFt3H+wlZhz3nq+qkio3NXkE4lWQeSpUK4ZkuXxevGISPj1pwlf7+5wAjr98T6khPGzBr3GfreYkuqhLjZaSw8H6fC+DmZnHCON0aXzBqzEOtzQiwplU3IesILssimQaWhZ4iFSsoyzBTmo5b44D1/+HS8AOKXTqS+H4j4AAAAAElFTkSuQmCC',
+  'focus-exceed':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEfSURBVHgB1ZExbgIxEEXHq0hRuhyBI1Cm3Ch1JI7gNEkZ5wLBcAGSFiGxnIAjLB0l3ABuABWCBjMWY2lkeQdTIb402tnx7POfWYBbyTnXzulTGaBnfAwwNMaHUqpyv59dgKM5E4pK9YY/WUCC1RjB3Qzs1xIPTOSrp/pD67MCZA0YzKuExyeTuPo7ZMUFdxqulOQw/RNe3lLVSUgeoFnrZPX1HWC/A1jOAQ67LY7yr/oj20jBUVsYmvKVk2VAkt8bg4wzgBvadSOw2/CRxvi72iUeLhIfdNh5lTgfS8BYlureod8tX0kWkDevqFaGdwKWEVBLQBs3RpdYqtWs1pKAfKSUm+Da8AtEYVOboGFnXDWb5DKMO2V5h0aciuPdjU5dl93ybLvnUgAAAABJRU5ErkJggg==',
+  rest: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACqSURBVHgB3ZTbDcMgDEUvVQboCOkEzQh0g46QUTJKN2i7STeADZoNXKP6Kw/skPwkR7KEBD5cAQLYLUQUKE+aP1tlnmzUw97TjLOBzsM5F2GBd36WpMsJgyJ7LZHVejjyc/1TZ6idX88VZePRLVcTDR55kiTIOHJdoCS8ws5bXUF2Olig/6Nupb6rZMa0HUrgxmYzmQjvA1mLNaQ0JbIqM9dL3fgT+OAw/AAIe3FCMXAQxAAAAABJRU5ErkJggg==',
+  'rest-exceed':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADoSURBVHgB3ZIxDoIwFIb/Eg7gEWBxldFNiLOJR+AG6g3AY+Cio6NxcDK66cgN8AawmLjVV62JkhYrOBi/5IWmr+/j5bXAr8N0Cc55Rh9HmdytgeMWuJwLMGvO4mRSKSSZL8qUss3yLnvtK2bTJBIrC2o86EgPik0+eqx0wh5q8nmH3b5qd6EV0vwc6C5DEAwAt72n6Re3AKf5zcba8yQc8mpy8VMZrXK9rXD6qEZIMrk+UbjPSdUMOzBn9fYENyeCCeJRU4Qy8kYyw24j1IEKva/JpLD8fEI0QXRTR2ZX5AoZAWMsxd9wBR1E9hNu08zLAAAAAElFTkSuQmCC',
 };
 const getTrayIcon = (icon: string): NativeImage => {
-  return nativeImage.createFromDataURL(trayIconMap[icon] ?? trayIconMap['cat']);
+  return nativeImage.createFromDataURL(trayIconMap[icon] ?? trayIconMap.default);
 };
 
 const createTray = (mainWindow: BrowserWindow) => {
@@ -127,6 +133,9 @@ app.whenReady().then(() => {
   ipcMain.handle('change-tray-icon', (event, icon: string) => {
     tray?.setImage(getTrayIcon(icon));
   });
+  ipcMain.handle('change-tray-title', (event, title: string) => {
+    tray?.setTitle(title);
+  });
   ipcMain.handle('get-always-on-top', () => {
     return mainWindow?.isAlwaysOnTop();
   });

src/preload/preload.ts

@@ -8,6 +8,7 @@ const electronAPI: IElectronAPI = {
   showWindow: () => ipcRenderer.send('show-window'),
   getMachineId: () => ipcRenderer.invoke('get-machine-id'),
   changeTrayIcon: (icon: string) => ipcRenderer.invoke('change-tray-icon', icon),
+  changeTrayTitle: (title: string) => ipcRenderer.invoke('change-tray-title', title),
   getAlwaysOnTop: () => ipcRenderer.invoke('get-always-on-top'),
   setAlwaysOnTop: (isAlwaysOnTop: boolean) =>
     ipcRenderer.invoke('set-always-on-top', isAlwaysOnTop),

src/renderer/features/pomodoro/hooks/use-pomodoro.ts

@@ -1,8 +1,11 @@
+import { useEffect } from 'react';
+
 import { useLocalStorage } from 'usehooks-ts';
 
 import { PomodoroCycle, PomodoroEndReason, PomodoroMode, PomodoroTime } from '@/entities/pomodoro';
 import { LOCAL_STORAGE_KEY } from '@/shared/constants';
 import { useInterval } from '@/shared/hooks';
+import { msToTime, padNumber } from '@/shared/utils';
 
 // == usePomodoro 로직에 대한 description
 
@@ -64,6 +67,23 @@ const updateCycles = (cycles: PomodoroCycle[], nextCycle?: PomodoroCycle): Pomod
   ].filter(isNotNil);
 };
 
+const getFormattedTime = (goalTime: number, { elapsed, exceeded }: PomodoroTime) => {
+  const isExceed = exceeded > 0;
+  const { minutes, seconds } = msToTime(isExceed ? exceeded : goalTime - elapsed);
+  const time = `${padNumber(minutes)}:${padNumber(seconds)}`;
+  return { isExceed, time };
+};
+
+const getTrayIcon = (mode: PomodoroMode, isExceed: boolean) => {
+  if (mode === 'focus') {
+    return isExceed ? 'focus-exceed' : 'focus';
+  }
+  if (mode === 'rest') {
+    return isExceed ? 'rest-exceed' : 'rest';
+  }
+  return '';
+};
+
 export const getPomodoroTime = (cycle: PomodoroCycle): PomodoroTime => {
   const now = cycle.endAt ?? Date.now();
   const maxElapsedTime = cycle.goalTime + cycle.exceedMaxTime;
@@ -171,6 +191,24 @@ export const usePomodoro = ({
     pomodoroCycles.length > 0 ? 250 : null,
   );
 
+  useEffect(() => {
+    const currentCycle = pomodoroCycles[pomodoroCycles.length - 1];
+    if (!currentCycle) {
+      window.electronAPI.changeTrayIcon('');
+      window.electronAPI.changeTrayTitle('');
+      return;
+    }
+
+    const { isExceed, time: trayTitle } = getFormattedTime(currentCycle.goalTime, pomodoroTime);
+    const mode = currentCycle.mode;
+    // 휴식 대기 중에는 직전의 집중 시간을 표시하기 위함
+    if (mode !== 'rest-wait') {
+      const trayIcon = getTrayIcon(mode, isExceed);
+      window.electronAPI.changeTrayIcon(trayIcon);
+      window.electronAPI.changeTrayTitle(trayTitle);
+    }
+  }, [pomodoroCycles, pomodoroTime]);
+
   return {
     pomodoroCycles,
     pomodoroTime,

src/shared/type.ts

@@ -1,8 +1,9 @@
 // @see: https://www.electronjs.org/docs/latest/tutorial/context-isolation#usage-with-typescript
 export interface IElectronAPI {
   showWindow: () => void;
-  changeTrayIcon: (icon: string) => void;
   getMachineId: () => Promise<string>;
+  changeTrayIcon: (icon: string) => void;
+  changeTrayTitle: (title: string) => void;
   getAlwaysOnTop: () => Promise<boolean>;
   setAlwaysOnTop: (isAlwaysOnTop: boolean) => Promise<void>;
   getMinimized: () => Promise<boolean>;