From 43041c45f0bc758b6a38c7094abae7b9a5e4d305 Mon Sep 17 00:00:00 2001 From: youseock Date: Wed, 29 Nov 2023 16:09:39 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20property=20=EB=84=A4=EC=9E=84=20came?= =?UTF-8?q?lcase=EB=A1=9C=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/Common/Loading.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Common/Loading.tsx b/frontend/src/components/Common/Loading.tsx index cb74d11c..a0b36396 100644 --- a/frontend/src/components/Common/Loading.tsx +++ b/frontend/src/components/Common/Loading.tsx @@ -17,9 +17,9 @@ export default function Loading({ size, color }: Props) { cy="50" fill="none" stroke={color} - stroke-width="10" + strokeWidth="10" r="35" - stroke-dasharray="164.93361431346415 56.97787143782138" + strokeDasharray="164.93361431346415 56.97787143782138" > Date: Wed, 29 Nov 2023 16:12:56 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20webSocket=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=84=9C=EB=B2=84=20=EC=8B=9C=EA=B0=84=20=EB=8F=99=EA=B8=B0?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/SocketTimer/index.tsx | 4 +- frontend/src/hooks/timer/useSocketTimer.ts | 55 +++++++++---------- 2 files changed, 27 insertions(+), 32 deletions(-) diff --git a/frontend/src/components/SocketTimer/index.tsx b/frontend/src/components/SocketTimer/index.tsx index 93a97d72..e600cf34 100644 --- a/frontend/src/components/SocketTimer/index.tsx +++ b/frontend/src/components/SocketTimer/index.tsx @@ -16,8 +16,7 @@ interface Props { export default function SocketTimer(props: Props) { let { socket, endsAt, isConnected, onTimeout } = props; - // api 연결이 X endsAt 대신 임시로 만들어놓은 것. - // min 1 => 60초 동안 돌아갑니다. 변경해서 쓰세요 일단은.. + // 대회 시간 검증이 안 되어 있어서, 끝나는 시간이 현재 시간보다 모두 전입니다. 그래서 지금 시간 기준으로 120분 더하고 마지막 시간이다라고 가정합니다. const min = 120; endsAt = new Date(new Date().getTime() + min * 60 * 1000); @@ -25,6 +24,7 @@ export default function SocketTimer(props: Props) { socket, endsAt, socketEvent: 'ping', + pingTime: 5000, }); useEffect(() => { diff --git a/frontend/src/hooks/timer/useSocketTimer.ts b/frontend/src/hooks/timer/useSocketTimer.ts index 3d25bdc0..4569c8c9 100644 --- a/frontend/src/hooks/timer/useSocketTimer.ts +++ b/frontend/src/hooks/timer/useSocketTimer.ts @@ -6,47 +6,42 @@ interface Props { socket: Socket; endsAt: Date; socketEvent: string; + pingTime: number; } -export default function useSocketTimer({ socket, endsAt, socketEvent }: Props) { +export default function useSocketTimer({ socket, endsAt, socketEvent, pingTime }: Props) { const timerIntervalId = useRef(null); + const pingIntervalId = useRef(null); + const endTime = useMemo(() => endsAt.getTime(), [endsAt]); const [isTimeout, setIsTimeout] = useState(false); const [remainMiliSeconds, setRemainMiliSeconds] = useState(-1); useEffect(() => { - console.log('타이머 실행'); - // 웹 소켓 대신 사용. - mockWebSocket(); socket.emit(socketEvent); - if (socket.hasListeners(socketEvent)) { - socket.on(socketEvent, handlePingMessage); - } + socket.on(socketEvent, handlePingMessage); + + pingIntervalId.current = setInterval(() => { + socket.emit(socketEvent); + }, pingTime); }, [socket]); - const handlePingMessage = useCallback((time: Date | string) => { - console.log(time); - if (timerIntervalId.current) clearInterval(timerIntervalId.current); - - time = typeof time === 'string' ? new Date(time) : time; - const remainMiliSec = endTime - time.getTime(); - setRemainMiliSeconds(remainMiliSec); - timerIntervalId.current = setInterval(() => { - setRemainMiliSeconds((prev) => prev - 1000); - }, 1000); - }, []); - - // 웹 소켓 대신 사용. - // 웹 소켓 연결 후 삭제 예정 - const mockWebSocket = useCallback(() => { - const delayFactor = 2000; - const serverTime = new Date(); - handlePingMessage(serverTime); - setInterval(() => { - const serverTime = new Date(); - handlePingMessage(serverTime); - }, 5000 + Math.random() * delayFactor); - }, []); + const handlePingMessage = useCallback( + (time: Date) => { + console.log('서버에서 온 시간 websocket 연결 확인 용', time); + if (timerIntervalId.current) clearInterval(timerIntervalId.current); + + time = typeof time === 'string' ? new Date(time) : time; + + const remainMiliSec = endTime - time.getTime(); + setRemainMiliSeconds(remainMiliSec); + + timerIntervalId.current = setInterval(() => { + setRemainMiliSeconds((prev) => prev - 1000); + }, 1000); + }, + [endTime], + ); useEffect(() => { // 초기 값인 -1 => 서버에서 시간이 오지 않았다. From 06174c6f9c95641444b16b9fa626385edd1a59ba Mon Sep 17 00:00:00 2001 From: youseock Date: Wed, 29 Nov 2023 16:39:50 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=EC=83=81=EC=88=98=ED=99=94,=20?= =?UTF-8?q?props=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 e600cf34..c0a0e98d 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 4569c8c9..33f891e8 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 2bf1fa09..8afdda74 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} />