From 06174c6f9c95641444b16b9fa626385edd1a59ba Mon Sep 17 00:00:00 2001
From: youseock <mahwin7085@gmail.com>
Date: Wed, 29 Nov 2023 16:39:50 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=83=81=EC=88=98=ED=99=94,=20prop?=
 =?UTF-8?q?s=20=EA=B3=84=EC=B8=B5=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/SocketTimer/index.tsx | 8 +++++---
 frontend/src/hooks/timer/useSocketTimer.ts    | 3 +++
 frontend/src/pages/ContestPage.tsx            | 4 ++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/SocketTimer/index.tsx b/frontend/src/components/SocketTimer/index.tsx
index e600cf3..c0a0e98 100644
--- a/frontend/src/components/SocketTimer/index.tsx
+++ b/frontend/src/components/SocketTimer/index.tsx
@@ -11,11 +11,13 @@ 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);
@@ -23,8 +25,8 @@ export default function SocketTimer(props: Props) {
   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
index 4569c8c..33f891e 100644
--- 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
index 2bf1fa0..8afdda7 100644
--- 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>