Merge pull request #1075 from woowacourse-teams/FE/dev

[FE] 🚀 타이머 시간 변경 오류 해결
woowacourse-teams · Feb 4, 2025 · f5d0d93 · f5d0d93
2 parents 42865e9 + 4dd607d
commit f5d0d93
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/frontend/src/components/PairRoom/TimerCard/TimerCard.tsx b/frontend/src/components/PairRoom/TimerCard/TimerCard.tsx
@@ -23,7 +23,11 @@ interface TimerCardProps {
 }
 
 const TimerCard = ({ defaultTime, defaultTimeLeft, onTimerStop }: TimerCardProps) => {
-  const { timeLeft, isActive, handleStart, handlePause } = useTimer(defaultTime, defaultTimeLeft, onTimerStop);
+  const { duration, timeLeft, isActive, handleStart, handlePause } = useTimer(
+    defaultTime,
+    defaultTimeLeft,
+    onTimerStop,
+  );
 
   const timeLeftRef = useRef(timeLeft);
   timeLeftRef.current = timeLeft;
@@ -38,12 +42,12 @@ const TimerCard = ({ defaultTime, defaultTimeLeft, onTimerStop }: TimerCardProps
           isActive={isActive}
           minutes={minutes}
           seconds={seconds}
-          progress={(timeLeft / defaultTime) * 100}
+          progress={(timeLeft / duration) * 100}
           handleStart={handleStart}
           handlePause={handlePause}
         />
         <S.ProgressBar
-          $progress={(timeLeft / defaultTime) * 100}
+          $progress={(timeLeft / duration) * 100}
           role="timer"
           aria-label={`현재 남은 시간은 ${minutes}분 ${seconds}초 입니다.`}
         >

diff --git a/frontend/src/hooks/PairRoom/useTimer.ts b/frontend/src/hooks/PairRoom/useTimer.ts
@@ -1,8 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useQueryClient } from '@tanstack/react-query';
-
 import { AlarmSound } from '@/assets';
 
 import useSocketStore from '@/stores/socketStore';
@@ -13,8 +11,6 @@ import { subscribeTopic } from '@/apis/websocket/websocket';
 
 import useNotification from '@/hooks/PairRoom/useNotification';
 
-import { QUERY_KEYS } from '@/constants/queryKeys';
-
 enum TimerStatus {
   COMPLETE = 'complete',
   START = 'start',
@@ -25,11 +21,11 @@ enum TimerStatus {
 
 const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: () => void) => {
   const navigate = useNavigate();
-  const queryClient = useQueryClient();
 
   const { client, isConnected, accessCode } = useSocketStore();
   const { addToast } = useToastStore();
 
+  const [duration, setDuration] = useState(defaultTime);
   const [timeLeft, setTimeLeft] = useState(defaultTimeLeft);
   const [isActive, setIsActive] = useState(false);
 
@@ -67,7 +63,7 @@ const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: ()
     setTimeLeft(timeLeft);
   };
 
-  const handleTimerStatusEvent = (status: TimerStatus) => {
+  const handleTimerStatusEvent = (status: TimerStatus, data: number | null) => {
     switch (status) {
       case TimerStatus.COMPLETE:
         navigate(`/room/${accessCode}/retrospectForm`, { state: { valid: true } });
@@ -86,8 +82,11 @@ const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: ()
         break;
 
       case TimerStatus.UPDATE:
-        queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_PAIR_ROOM_TIMER] });
-        addToast({ status: 'WARNING', message: '타이머 시간이 변경되었습니다.' });
+        if (data) {
+          setDuration(data);
+          setTimeLeft(data);
+          addToast({ status: 'WARNING', message: '타이머 시간이 변경되었습니다.' });
+        }
         break;
 
       default:
@@ -101,8 +100,10 @@ const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: ()
       subscribeTopic<{ data: number }>(client, `/topic/${accessCode}/timer`, (body) => handleTimerEvent(body.data));
 
       // 타이머 상태
-      subscribeTopic<{ data: TimerStatus }>(client, `/topic/${accessCode}/timer/status`, (body) =>
-        handleTimerStatusEvent(body.data),
+      subscribeTopic<{ status: TimerStatus; data: number | null }>(
+        client,
+        `/topic/${accessCode}/timer/status`,
+        (body) => handleTimerStatusEvent(body.status, body.data),
       );
     }
 
@@ -115,6 +116,7 @@ const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: ()
   }, [client]);
 
   return {
+    duration,
     timeLeft,
     isActive,
     handleStart,