refactor: 상수화, props 계층 변경

boostcampwm2023 · Nov 29, 2023 · b3781f8 · b3781f8
1 parent fbfa634
commit b3781f8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/frontend/src/components/SocketTimer/index.tsx b/frontend/src/components/SocketTimer/index.tsx
@@ -11,20 +11,22 @@ interface Props {
   socket: Socket;
   isConnected: boolean;
   endsAt: Date;
+  pingTime: number;
+  socketEvent: string;
   onTimeout?: () => void;
 }
 
 export default function SocketTimer(props: Props) {
-  let { socket, endsAt, isConnected, onTimeout } = props;
+  let { socket, endsAt, isConnected, onTimeout, pingTime, socketEvent } = props;
   // 대회 시간 검증이 안 되어 있어서, 끝나는 시간이 현재 시간보다 모두 전입니다. 그래서 지금 시간 기준으로 120분 더하고 마지막 시간이다라고 가정합니다.
   const min = 120;
   endsAt = new Date(new Date().getTime() + min * 60 * 1000);
 
   const { remainMiliSeconds, isTimeout } = useSocketTimer({
     socket,
     endsAt,
-    socketEvent: 'ping',
-    pingTime: 5000,
+    socketEvent,
+    pingTime,
   });
 
   useEffect(() => {

diff --git a/frontend/src/hooks/timer/useSocketTimer.ts b/frontend/src/hooks/timer/useSocketTimer.ts
@@ -18,6 +18,8 @@ export default function useSocketTimer({ socket, endsAt, socketEvent, pingTime }
   const [remainMiliSeconds, setRemainMiliSeconds] = useState<number>(-1);
 
   useEffect(() => {
+    if (pingIntervalId.current) clearInterval(pingIntervalId.current);
+
     socket.emit(socketEvent);
     socket.on(socketEvent, handlePingMessage);
 
@@ -50,5 +52,6 @@ export default function useSocketTimer({ socket, endsAt, socketEvent, pingTime }
       setIsTimeout(true);
     }
   }, [remainMiliSeconds]);
+
   return { remainMiliSeconds, isTimeout };
 }
diff --git a/frontend/src/pages/ContestPage.tsx b/frontend/src/pages/ContestPage.tsx
@@ -24,6 +24,8 @@ import { isNil } from '@/utils/type';
 const RUN_SIMULATION = '테스트 실행';
 const CANCEL_SIMULATION = '실행 취소';
 const DASHBOARD_URL = '/contest/dashboard';
+const COMPEITION_PING_TIME = 5 * 1000;
+const COMPEITION_SOCKET_EVENT = 'ping';
 
 export default function ContestPage() {
   const { id } = useParams<{ id: string }>();
@@ -107,6 +109,8 @@ export default function ContestPage() {
           socket={socket.current}
           isConnected={isConnected}
           endsAt={new Date(endsAt)}
+          pingTime={COMPEITION_PING_TIME}
+          socketEvent={COMPEITION_SOCKET_EVENT}
           onTimeout={handleTimeout}
         />
       </section>