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(-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} />