fix: 뽀모도로 로그 중복 요청 이슈 수정 (#72, #patch)

* 뽀모도로 로그 중복 요청 이슈 수정

main process에서 뽀모도로 종료 이벤트를 보내면
이벤트 리스너를 통해 기록을 서버에 보냄
그런데 ipcRenderer에 대한 이벤트 리스너 등록만 있고
리스너 해제는 구현하지 않아 중복으로 요청을 보냄
이를 해결하기 위해 이벤트 리스너 해제 로직을 추가함

* guide 안보이던 이슈 수정

Author: young-do

src/preload/preload.ts

@@ -22,12 +22,14 @@ const electronAPI: IElectronAPI = {
   startRest: () => ipcRenderer.invoke('start-rest'),
   endPomodoro: (reason) => ipcRenderer.invoke('end-pomodoro', reason),
 
-  onTickPomodoro: (callback) =>
-    ipcRenderer.on('tick-pomodoro', (_, cycles, time) => callback(cycles, time)),
-  onEndPomodoro: (callback) =>
-    ipcRenderer.on('end-pomodoro', (_, cycles, reason) => callback(cycles, reason)),
-  onOnceExceedGoalTime: (callback) =>
-    ipcRenderer.on('once-exceed-goal-time', (_, mode) => callback(mode)),
+  onTickPomodoro: (callback) => ipcRenderer.on('tick-pomodoro', callback),
+  offTickPomodoro: (callback) => ipcRenderer.off('tick-pomodoro', callback),
+
+  onEndPomodoro: (callback) => ipcRenderer.on('end-pomodoro', callback),
+  offEndPomodoro: (callback) => ipcRenderer.off('end-pomodoro', callback),
+
+  onOnceExceedGoalTime: (callback) => ipcRenderer.on('once-exceed-goal-time', callback),
+  offOnceExceedGoalTime: (callback) => ipcRenderer.off('once-exceed-goal-time', callback),
 };
 
 contextBridge.exposeInMainWorld('electronAPI', electronAPI);

src/renderer/features/category/ui/category-chip.tsx

@@ -3,13 +3,15 @@ import { Icon } from '@/shared/ui';
 import { cn, getCategoryIconName } from '@/shared/utils';
 
 type CategoryChipProps = {
+  id?: string;
   category: Category;
   onClick?: () => void;
 };
 
-export const CategoryChip = ({ category, onClick }: CategoryChipProps) => {
+export const CategoryChip = ({ id, category, onClick }: CategoryChipProps) => {
   return (
     <div
+      id={id}
       className={cn(
         'subBody-sb flex min-w-[80px] select-none gap-sm rounded-xs bg-background-secondary p-md text-text-tertiary',
         onClick && 'cursor-pointer',

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

@@ -1,6 +1,14 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { PomodoroCycle, PomodoroEndReason, PomodoroManagerConfig, PomodoroTime } from 'shared/type';
+import {
+  EndPomodoroCallback,
+  OnceExceedGoalTimeCallback,
+  PomodoroCycle,
+  PomodoroEndReason,
+  PomodoroManagerConfig,
+  PomodoroTime,
+  TickPomodoroCallback,
+} from 'shared/type';
 
 export type UsePomodoroParams = Omit<PomodoroManagerConfig, 'onTickPomodoro'>;
 
@@ -19,16 +27,20 @@ export const usePomodoroByMain = (params: UsePomodoroParams) => {
   callbacksRef.current = callbacks;
 
   useEffect(() => {
-    window.electronAPI.onTickPomodoro((cycles, time) => {
+    const tickPomodoroCallback: TickPomodoroCallback = (_, cycles, time) => {
       setPomodoroCycles(cycles);
       setPomodoroTime(time);
-    });
-    window.electronAPI.onEndPomodoro((cycles, reason) => {
+    };
+    const endPomodoroCallback: EndPomodoroCallback = (_, cycles, reason) => {
       callbacksRef.current.onEndPomodoro(cycles, reason);
-    });
-    window.electronAPI.onOnceExceedGoalTime((mode) => {
+    };
+    const onceExceedGoalTimeCallback: OnceExceedGoalTimeCallback = (_, mode) => {
       callbacksRef.current.onceExceedGoalTime?.(mode);
-    });
+    };
+
+    window.electronAPI.onTickPomodoro(tickPomodoroCallback);
+    window.electronAPI.onEndPomodoro(endPomodoroCallback);
+    window.electronAPI.onOnceExceedGoalTime(onceExceedGoalTimeCallback);
 
     window.electronAPI.setupPomodoro({
       focusTime,
@@ -37,6 +49,12 @@ export const usePomodoroByMain = (params: UsePomodoroParams) => {
       restTime,
       restExceedMaxTime,
     });
+
+    return () => {
+      window.electronAPI.offTickPomodoro(tickPomodoroCallback);
+      window.electronAPI.offEndPomodoro(endPomodoroCallback);
+      window.electronAPI.offOnceExceedGoalTime(onceExceedGoalTimeCallback);
+    };
   }, [focusTime, focusExceedMaxTime, restWaitExceedMaxTime, restTime, restExceedMaxTime]);
 
   const startFocus = () => {

src/renderer/widgets/pomodoro/ui/home-screen.tsx

@@ -108,6 +108,7 @@ export const HomeScreen = ({
           <div className="header-4 text-text-tertiary">{user?.cat?.name}</div>
           <div className="flex flex-col items-center gap-md p-lg">
             <CategoryChip
+              id="categoryButton"
               category={currentCategory}
               onClick={() => {
                 changeCategoryDrawerProps.onOpen();

src/shared/type/electron.ts

@@ -6,6 +6,21 @@ import {
   PomodoroTime,
 } from './pomodoro';
 
+export type TickPomodoroCallback = (
+  event: Electron.IpcRendererEvent,
+  cycles: PomodoroCycle[],
+  time: PomodoroTime,
+) => void;
+export type EndPomodoroCallback = (
+  event: Electron.IpcRendererEvent,
+  cycles: PomodoroCycle[],
+  reason: PomodoroEndReason,
+) => void;
+export type OnceExceedGoalTimeCallback = (
+  event: Electron.IpcRendererEvent,
+  mode: PomodoroMode,
+) => void;
+
 // @see: https://www.electronjs.org/docs/latest/tutorial/context-isolation#usage-with-typescript
 export interface IElectronAPI {
   showWindow: () => void;
@@ -24,7 +39,10 @@ export interface IElectronAPI {
   startRest: () => Promise<void>;
   endPomodoro: (reason: PomodoroEndReason) => Promise<void>;
 
-  onTickPomodoro: (callback: (cycles: PomodoroCycle[], time: PomodoroTime) => void) => void;
-  onEndPomodoro: (callback: (cycles: PomodoroCycle[], reason: PomodoroEndReason) => void) => void;
-  onOnceExceedGoalTime: (callback: (mode: PomodoroMode) => void) => void;
+  onTickPomodoro: (callback: TickPomodoroCallback) => void;
+  offTickPomodoro: (callback: TickPomodoroCallback) => void;
+  onEndPomodoro: (callback: EndPomodoroCallback) => void;
+  offEndPomodoro: (callback: EndPomodoroCallback) => void;
+  onOnceExceedGoalTime: (callback: OnceExceedGoalTimeCallback) => void;
+  offOnceExceedGoalTime: (callback: OnceExceedGoalTimeCallback) => void;
 }