[Feat] 예외 케이스 : 타이머 상세 페이지 [미션 중일 때 앱을 껐다 킬 경우] 대응

src/app/home/home.hooks.ts

@@ -1,7 +1,10 @@
 import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
 import { useGetMissions } from '@/apis/mission';
 import { type MissionItemType, MissionStatus } from '@/apis/schema/mission';
 import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
+import { ROUTER } from '@/constants/router';
+import { STORAGE_KEY } from '@/constants/storage';
 
 const INIT_SIZE = 10;
 
@@ -10,10 +13,39 @@ export const useMissions = () => {
   const missionList = data?.content ?? [];
 
   useRequireMission(data?.content);
+  useLeaveMissionCheck();
 
   return { missionList, isLoading };
 };
 
+// 스톱워치 부분에서 예기치 못하게 종료된 미션 기록 확인
+const useLeaveMissionCheck = () => {
+  const router = useRouter();
+  const { triggerSnackBar } = useSnackBar();
+
+  const checkLeaveMission = () => {
+    const startedMissionId = localStorage.getItem(STORAGE_KEY.STOPWATCH.MISSION_ID);
+
+    if (startedMissionId) {
+      triggerSnackBar({
+        variant: 'text-button',
+        message: '인증을 완료해 주세요!',
+        buttonText: '바로가기',
+        offset: 'appBar',
+        onButtonClick: () => {
+          router.push(ROUTER.MISSION.STOP_WATCH(startedMissionId));
+        },
+      });
+    }
+  };
+
+  useEffect(() => {
+    checkLeaveMission();
+    console.log('useLeaveMissionCheck: ', useLeaveMissionCheck);
+  }, []);
+};
+
+// 미션 임시 인증만 진행, 미션 인증을 진행하지 않은 경우
 const useRequireMission = (missionList?: MissionItemType[]) => {
   const { triggerSnackBar } = useSnackBar();
 

src/app/mission/[id]/stopwatch/index.hooks.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { STORAGE_KEY } from '@/constants/storage';
 import useInterval from '@/hooks/useInterval';
@@ -12,29 +12,29 @@ export const useGetCategory = () => {
 };
 
 export function useUnloadAction(time: number) {
-  const onSaveTime = () => {
+  const onSaveTime = useCallback(() => {
     eventLogger.logEvent(EVENT_LOG_NAME.STOPWATCH.MID_SAVE, EVENT_LOG_CATEGORY.STOPWATCH, { time });
     localStorage.setItem(STORAGE_KEY.STOPWATCH.TIME, String(time));
-  };
+  }, [time]);
 
   useVisibilityState(onSaveTime);
 }
 
 function useVisibilityState(onAction: VoidFunction) {
-  useEffect(() => {
-    const onVisibilityChange = () => {
-      if (document.visibilityState === 'hidden') {
-        onAction();
-      }
-    };
+  const onVisibilityChange = useCallback(() => {
+    if (document.visibilityState === 'hidden') {
+      onAction();
+    }
+  }, [onAction]);
 
+  useEffect(() => {
     document.addEventListener('visibilitychange', onVisibilityChange);
 
     // 컴포넌트가 언마운트될 때 이벤트 리스너를 제거합니다.
     return () => {
       document.removeEventListener('visibilitychange', onVisibilityChange);
     };
-  }, []); // 빈 의존성 배열을 전달하여 이 훅이 컴포넌트가 마운트되거나 언마운트될 때만 실행되도록 합니다.
+  }, [onVisibilityChange]); // 빈 의존성 배열을 전달하여 이 훅이 컴포넌트가 마운트되거나 언마운트될 때만 실행되도록 합니다.
 }
 
 export function useRecordMidTime(time: number) {
@@ -43,7 +43,6 @@ export function useRecordMidTime(time: number) {
     localStorage.setItem(STORAGE_KEY.STOPWATCH.TIME_2, String(time));
   };
 
-  // 카운터 속도 증가
   useInterval(() => {
     onSaveTime();
   }, 10000);

src/app/mission/[id]/stopwatch/page.tsx

@@ -32,7 +32,7 @@ export default function StopwatchPage() {
   const category = useGetCategory();
 
   const { step, prevStep, stepLabel, onNextStep } = useStopwatchStatus();
-  const { seconds, minutes, stepper, isFinished } = useStopwatch(step);
+  const { seconds, minutes, stepper, isFinished, isPending: isStopwatchPending } = useStopwatch(step);
 
   const time = Number(minutes) * 60 + Number(seconds);
   const logData = {
@@ -46,15 +46,24 @@ export default function StopwatchPage() {
 
   useCustomBack(openMidOutModal);
 
-  useUnloadAction(time);
   useRecordMidTime(time);
+  useUnloadAction(time);
+
+  const resetStopwatchStorage = () => {
+    localStorage.removeItem(STORAGE_KEY.STOPWATCH.MISSION_ID);
+    localStorage.removeItem(STORAGE_KEY.STOPWATCH.TIME);
+    localStorage.removeItem(STORAGE_KEY.STOPWATCH.TIME_2);
+    localStorage.removeItem(STORAGE_KEY.STOPWATCH.START_TIME);
+  };
 
   // isError 처리 어떻게 할것인지?
   const { mutate, isPending: isSubmitLoading } = useRecordTime({
     onSuccess: (response) => {
       const missionRecordId = String(response.missionId);
       router.replace(ROUTER.RECORD.CREATE(missionRecordId));
       eventLogger.logEvent('api/record-time', 'stopwatch', { missionRecordId });
+
+      resetStopwatchStorage();
     },
     onError: (error) => {
       // TODO
@@ -101,6 +110,7 @@ export default function StopwatchPage() {
   // 뒤로가기 버튼 눌렀을 때
   const onExit = () => {
     router.push(ROUTER.MISSION.DETAIL(missionId));
+    resetStopwatchStorage();
   };
 
   const onFinish = () => {
@@ -134,9 +144,16 @@ export default function StopwatchPage() {
   };
 
   const onStart = () => {
-    eventLogger.logEvent(EVENT_LOG_NAME.STOPWATCH.CLICK_START, EVENT_LOG_CATEGORY.STOPWATCH, { category });
     onNextStep('progress');
+    // 중도 재시작
+    if (time > 0) {
+      eventLogger.logEvent(EVENT_LOG_NAME.STOPWATCH.CLICK_RESTART, EVENT_LOG_CATEGORY.STOPWATCH);
+      return;
+    }
+    // 초기시작
+    eventLogger.logEvent(EVENT_LOG_NAME.STOPWATCH.CLICK_START, EVENT_LOG_CATEGORY.STOPWATCH);
     const startTime = new Date().toISOString();
+    localStorage.setItem(STORAGE_KEY.STOPWATCH.MISSION_ID, missionId);
     localStorage.setItem(STORAGE_KEY.STOPWATCH.START_TIME, startTime);
   };
 
@@ -166,7 +183,7 @@ export default function StopwatchPage() {
         </section>
         <section className={buttonContainerCss}>
           {step === 'ready' && (
-            <Button variant="cta" size="large" type="button" onClick={onStart}>
+            <Button variant="cta" size="large" type="button" onClick={onStart} disabled={isStopwatchPending}>
               시작
             </Button>
           )}

src/constants/eventLog.ts

@@ -18,6 +18,7 @@ export const EVENT_LOG_NAME: Record<EventLogCategoryType, Record<string, string>
     CLICK_CANCEL: 'click/cancel',
     CLICK_STOP: 'click/stop',
     CLICK_START: 'click/start',
+    CLICK_RESTART: 'click/restart',
     MID_SAVE: 'mid-save',
     MID_SAVE_2: 'mid-save-2',
     CLICK_BACK: 'click/back',

src/constants/storage.ts

@@ -3,5 +3,6 @@ export const STORAGE_KEY = {
     TIME: 'stopwatch-time', // 웹 이탈 시 체크
     TIME_2: 'stopwatch-time-2', // 테스트 용
     START_TIME: 'stopwatch-start-time',
+    MISSION_ID: 'stopwatch-mission-id',
   },
 };

src/hooks/mission/stopwatch/useStopwatch.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { STORAGE_KEY } from '@/constants/storage';
 import { formatMMSS } from '@/utils/time';
 
 import { type StepType } from './useStopwatchStatus';
@@ -7,13 +8,12 @@ const INIT_SECONDS = 0;
 const MAX_SECONDS = 60 * 60; // max 1 hour
 
 const DEFAULT_MS = 1000;
-const TEST_MS = 1;
+const TEST_MS = 50;
 
-// 좀 더 의미론적.... useStopwatch
 export default function useStopwatch(status: StepType) {
   const [second, setSecond] = useState(INIT_SECONDS); // 남은 시간 (단위: 초)
+  const [isPending, setIsPending] = useState(true);
   const [isFinished, setIsFinished] = useState(false);
-
   const { formattedMinutes, formattedSeconds } = formatMMSS(second);
 
   const stepper = second < 60 ? 0 : Math.floor(second / 60 / 10);
@@ -29,12 +29,22 @@ export default function useStopwatch(status: StepType) {
 
     if (status === 'progress') {
       timer = setInterval(() => {
-        setSecond((prev) => prev + 1);
+        setSecond((prev) => (prev >= MAX_SECONDS ? prev : prev + 1));
       }, TEST_MS);
     }
 
     return () => clearInterval(timer);
   }, [second, status]);
 
-  return { minutes: formattedMinutes, seconds: formattedSeconds, stepper, isFinished };
+  useEffect(() => {
+    // init time setting
+    const initSecondString = localStorage.getItem(STORAGE_KEY.STOPWATCH.TIME);
+    const initSeconds = Number(initSecondString);
+    if (initSeconds && initSeconds < MAX_SECONDS) {
+      setSecond(initSeconds);
+    }
+    setIsPending(false);
+  }, []);
+
+  return { minutes: formattedMinutes, seconds: formattedSeconds, stepper, isFinished, isPending };
 }

src/hooks/mission/stopwatch/useStopwatchStatus.ts

@@ -17,8 +17,8 @@ const STOPWATCH_STATUS = {
   },
 } as const;
 
-function useStopwatchStatus() {
-  const [step, setStep] = useState<StepType>('ready');
+function useStopwatchStatus(initStatus?: StepType) {
+  const [step, setStep] = useState<StepType>(initStatus ?? 'ready');
   const [prevStep, setPrevStep] = useState<StepType>('ready');
 
   const stepLabel = STOPWATCH_STATUS[step];