[#131] 대회 종료시 대시보드로 이동 기능

frontend/src/components/Submission/Connecting.tsx

@@ -7,7 +7,7 @@ interface Props {
 }
 
 export default function Connecting(props: Props) {
-  if (!props.isConnected) return null;
+  if (props.isConnected) return null;
 
   return (
     <div className={rowStyle}>
@@ -16,6 +16,7 @@ export default function Connecting(props: Props) {
     </div>
   );
 }
+
 const rowStyle = css({
   display: 'flex',
   gap: '0.5rem',

frontend/src/components/Timer/index.tsx

@@ -1,5 +1,7 @@
 import { css } from '@style/css';
 
+import { useNavigate } from 'react-router-dom';
+
 import Loading from '@/components/Common/Loading';
 import useTimer from '@/hooks/timer/useTimer';
 import { formatMilliSecond } from '@/utils/date';
@@ -8,14 +10,26 @@ import type { Socket } from '@/utils/socket';
 interface Props {
   socket: Socket;
   endsAt: Date;
-  isConnected?: boolean;
+  isConnected: boolean;
+  [key: string]: unknown;
 }
 
+const DASHBOARD_URL = '/contest/dashboard';
+
 export default function Timer(props: Props) {
-  let { socket, endsAt, isConnected } = props;
+  const navigate = useNavigate();
+
+  let { socket, endsAt, isConnected, ...rest } = props;
   // api 연결이 X endsAt 대신 임시로 만들어놓은 것.
-  endsAt = new Date('2023-11-29T13:10:10.000Z');
-  const { remainMiliSeconds } = useTimer({ socket, endsAt });
+  // min 1 => 60초 동안 돌아갑니다. 변경해서 쓰세요 일단은..
+  const min = 1;
+  endsAt = new Date(new Date().getTime() + min * 60 * 1000);
+
+  const onTimeoutHandler = () => {
+    navigate(`${DASHBOARD_URL}/${rest.competitionId}`);
+  };
+
+  const { remainMiliSeconds } = useTimer({ socket, endsAt, onTimeoutHandler });
 
   if (isConnected && remainMiliSeconds !== -1) {
     // 연결도 되어있고, 서버 시간도 도착해서 count down을 시작할 수 있을 때

frontend/src/hooks/timer/useTimer.ts

@@ -45,8 +45,8 @@ export default function useTimer({ socket, endsAt, onTimeoutHandler }: UseTimer)
   }, []);
 
   useEffect(() => {
-    // TODO time 0이면 대시보드로 이동하는 로직
-    // 해당 PR에서 해결할 문제는 아니라 PASS
+    // 초기 값인 -1 => 서버에서 시간이 오지 않았다.
+    if (remainMiliSeconds === -1) return;
     if (Math.floor(remainMiliSeconds / 1000) <= 0) {
       if (typeof onTimeoutHandler === 'function') onTimeoutHandler();
       // 나가는 로직

frontend/src/pages/ContestPage.tsx

@@ -82,22 +82,25 @@ export default function ContestPage() {
     submitSolution(form);
   }
 
-
   const { endsAt } = competition;
 
   function handleOpenModal() {
     modal.open();
   }
-  
+
   const problems = problemList.map((problem) => problem.id);
-
 
   return (
     <main className={style}>
       <CompetitionHeader crumbs={crumbs} id={competitionId} />
-      <section>
+      <section className={rowStyle}>
         <span className={problemTitleStyle}>{problem.title}</span>
-        <Timer socket={socket.current} isConnected={isConnected} endsAt={new Date(endsAt)} />
+        <Timer
+          socket={socket.current}
+          isConnected={isConnected}
+          endsAt={new Date(endsAt)}
+          competitionId={competitionId}
+        />
       </section>
       <section className={rowListStyle}>
         <ContestProblemSelector