Merge branch 'fix/CSQ-4_resolve_show_winner_event_issue' into release

IT-Cotato · Oct 6, 2024 · 6eaf483 · 6eaf483
2 parents eaf9344 + dd1eceb
commit 6eaf483
Show file tree

Hide file tree

Showing 13 changed files with 270 additions and 148 deletions.
diff --git a/src/pages/CS/CSStart.tsx b/src/pages/CS/CSStart.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import api from '@/api/api';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components';
 import { Tooltip } from 'react-tooltip';
 import { useGeneration } from '@/hooks/useGeneration';
@@ -9,8 +9,6 @@ import useUser from '@/hooks/useUser';
 
 const CSStart = () => {
   const navigate = useNavigate();
-  const location = useLocation();
-  const search = location.search;
 
   const { user } = useUser();
   const { generationId, educationId } = useParams();
@@ -59,7 +57,7 @@ const CSStart = () => {
    *
    */
   const handleClickManageButton = () => {
-    navigate('/cs/manage' + search);
+    navigate(`/cs/manage/generation/${generationId}/education/${educationId}`);
   };
 
   /**

diff --git a/src/pages/CS/admin/upload/utils/handleWsMessage.ts b/src/pages/CS/admin/upload/utils/handleWsMessage.ts
@@ -0,0 +1,85 @@
+export type MessageType = {
+  status?: string | null;
+  start?: string | null;
+  quizId: number | null;
+  educationId?: number | null;
+  command: string;
+};
+
+export const SHOW_WAITING_EVENT = 'SHOW_WAITING';
+export const SHOW_PROBLEM_EVENT = 'SHOW_PROBLEM';
+export const ALLOW_SUBMIT_EVENT = 'ALLOW_SUBMIT';
+export const SHOW_KING_EVENT = 'SHOW_KING';
+export const SHOW_WINNER_EVENT = 'SHOW_WINNER';
+export const EXIT_EVENT = 'EXIT';
+
+//
+//
+//
+
+export const handleWsMessage = (message: MessageType) => {
+  //
+  const waitingEvent = [
+    !message.status,
+    !message.start,
+    !message.quizId,
+    message.command === 'show',
+  ].every((condition) => condition);
+
+  //
+  const showProblemEvent = [
+    message.status === 'QUIZ_ON',
+    message.start === 'QUIZ_OFF',
+    message?.quizId,
+    message.command === 'show',
+  ].every((condition) => condition);
+
+  //
+  const allowSubmitEvent = [message.quizId, message.command === 'start'].every(
+    (condition) => condition,
+  );
+
+  //
+  const allowSubmitWithReloadEvent = [
+    message.status === 'QUIZ_ON',
+    message.start === 'QUIZ_ON',
+    message.quizId,
+    message.command === 'show',
+  ].every((condition) => condition);
+
+  //
+  const exitEvent = message.command === 'exit';
+
+  //
+  const kingEvent = message.educationId && message.command === 'king';
+
+  //
+  const winnerEvent = message.command === 'winner';
+
+  //
+  //
+  //
+
+  switch (true) {
+    case waitingEvent:
+      return SHOW_WAITING_EVENT;
+
+    case showProblemEvent:
+      return SHOW_PROBLEM_EVENT;
+
+    case allowSubmitEvent || allowSubmitWithReloadEvent:
+      return ALLOW_SUBMIT_EVENT;
+
+    case exitEvent:
+      return EXIT_EVENT;
+
+    case kingEvent:
+      return SHOW_KING_EVENT;
+
+    case winnerEvent:
+      return SHOW_WINNER_EVENT;
+
+    default:
+      return message;
+  }
+};
diff --git a/src/pages/CS/manage/CSManage.tsx b/src/pages/CS/manage/CSManage.tsx
@@ -17,9 +17,15 @@ const CSManage = () => {
 
   return (
     <Routes>
-      <Route path="/" element={<CSManageHome />} />
-      <Route path="/quizscorer" element={<QuizScorer />} />
-      <Route path="/allscorer" element={<AllScorer />} />
+      <Route path="/generation/:generationId/education/:educationId" element={<CSManageHome />} />
+      <Route
+        path="/generation/:generationId/education/:educationId/quiz/:quizId/quizscorer"
+        element={<QuizScorer />}
+      />
+      <Route
+        path="/generation/:generationId/education/:educationId/allscorer"
+        element={<AllScorer />}
+      />
     </Routes>
   );
 };

diff --git a/src/pages/CS/manage/CSManageHome.tsx b/src/pages/CS/manage/CSManageHome.tsx
@@ -2,16 +2,15 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { styled } from 'styled-components';
 import CSManageLayout from '@pages/CS/manage/CSManageLayout';
 import QuizContent from '@pages/CS/manage/QuizContent';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import useSWR from 'swr';
 import fetcher from '@utils/fetcher';
 import { IQuizAdmin } from '@/typing/db';
 import api from '@/api/api';
 import { toast } from 'react-toastify';
 
 const CSManageHome = () => {
-  const [searchParams] = useSearchParams();
-  const educationId = searchParams.get('educationId');
+  const { educationId, generationId } = useParams();
   const navigate = useNavigate();
 
   const { data: quizData, mutate: quizMutate } = useSWR(
@@ -109,7 +108,7 @@ const CSManageHome = () => {
           }
         });
     }
-  }, [educationId, quizData]);
+  }, [educationId, quizData, educationStatus]);
 
   const submitWinner = useCallback(() => {
     api
@@ -124,8 +123,30 @@ const CSManageHome = () => {
   }, [educationId]);
 
   const onClickCheckAllScorer = useCallback(() => {
-    navigate(`allscorer?educationId=${educationId}`);
-  }, []);
+    navigate(`/cs/manage/generation/${generationId}/education/${educationId}/allscorer`);
+  }, [educationId]);
+
+  /**
+   *
+   */
+  const renderQuizContents = () => {
+    if (!educationId) {
+      return null;
+    }
+
+    return quizzes?.map((quiz) => (
+      <QuizContent
+        key={quiz.quizId}
+        quiz={quiz}
+        educationStatus={educationStatus?.status}
+        quizStatus={quiz.status}
+      />
+    ));
+  };
+
+  //
+  //
+  //
 
   return (
     <>
@@ -147,17 +168,7 @@ const CSManageHome = () => {
               전체 득점자 확인
             </Button>
           </ButtonWrapper>
-          <QuizContentsWrapper>
-            {quizzes?.map((quiz) => (
-              <QuizContent
-                key={quiz.quizId}
-                quiz={quiz}
-                educationId={educationId}
-                educationStatus={educationStatus?.status}
-                quizStatus={quiz.status}
-              />
-            ))}
-          </QuizContentsWrapper>
+          <QuizContentsWrapper>{renderQuizContents()}</QuizContentsWrapper>
         </ManageWrapper>
       </CSManageLayout>
     </>

diff --git a/src/pages/CS/manage/CSManageLayout.tsx b/src/pages/CS/manage/CSManageLayout.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode, useCallback } from 'react';
 import { styled } from 'styled-components';
 import { ReactComponent as ArrowBack } from '@assets/arrow_back.svg';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { useLocation, useMatch, useNavigate, useParams } from 'react-router-dom';
 
 interface Props {
   header: string;
@@ -11,15 +11,15 @@ interface Props {
 const CSManageLayout = ({ header, children }: Props) => {
   const navigate = useNavigate();
   const location = useLocation();
-  const [searchParams] = useSearchParams();
+  const { generationId, educationId } = useParams();
 
-  const educationId = searchParams.get('educationId');
+  const match = useMatch('/cs/manage/generation/:generationId/education/:educationId');
 
   const handlePrevButton = useCallback(() => {
-    if (location.pathname === '/cs/manage') {
-      navigate('/cs');
+    if (match) {
+      navigate(`/cs/start/generation/${generationId}/education/${educationId}`);
     } else {
-      navigate(`/cs/manage?educationId=${educationId}`);
+      navigate(`/cs/manage/generation/${generationId}/education/${educationId}`);
     }
   }, [location.pathname]);
 
@@ -50,6 +50,7 @@ const BackButton = styled(ArrowBack)`
   position: absolute;
   left: 72px;
   top: 64px;
+  cursor: pointer;
 `;
 
 const CSManageHeader = styled.div`

diff --git a/src/pages/CS/manage/QuizContent.tsx b/src/pages/CS/manage/QuizContent.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { css, styled } from 'styled-components';
 import ToggleButton from '@components/ToggleButton';
 import { ReactComponent as ArrowBack } from '@assets/arrow_back.svg';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { IQuizAdmin } from '@/typing/db';
 import useSWR from 'swr';
 import fetcher from '@utils/fetcher';
@@ -12,22 +12,30 @@ import { ToastContainer, toast } from 'react-toastify';
 
 interface Props {
   quiz: IQuizAdmin;
-  educationId: string | null;
   educationStatus?: string;
   quizStatus: string;
 }
 
-const QuizContent = ({ quiz, educationId, educationStatus, quizStatus }: Props) => {
+const QuizContent = ({ quiz, educationStatus, quizStatus }: Props) => {
+  const { educationId } = useParams();
+  const location = useLocation();
+
   const { mutate } = useSWR(`/v1/api/quiz/cs-admin/all?educationId=${educationId}`, fetcher);
 
   const [isPopupOpen, setIsPopupOpen] = useState(false);
 
   const navigate = useNavigate();
 
+  /**
+   *
+   */
   const onClickQuestionButton = useCallback(() => {
-    navigate(`quizscorer?educationId=${educationId}&quizId=${quiz.quizId}`);
+    navigate(location.pathname + `/quiz/${quiz.quizId}/quizscorer`);
   }, [quiz]);
 
+  /**
+   *
+   */
   const onClickApproach = useCallback(() => {
     if (educationStatus !== 'ONGOING') {
       toast.error('교육을 시작해주세요.');
@@ -82,7 +90,7 @@ const QuizContent = ({ quiz, educationId, educationStatus, quizStatus }: Props)
         setIsPopupOpen(false);
         mutate();
       });
-  }, [quiz.start, educationStatus, quizStatus]);
+  }, [quiz.start, educationStatus, quizStatus, educationId]);
 
   return (
     <>

diff --git a/src/pages/CS/manage/scorer/AddAnswer.tsx b/src/pages/CS/manage/scorer/AddAnswer.tsx
@@ -8,7 +8,7 @@ import fetcher from '@utils/fetcher';
 import { ToastContainer, toast } from 'react-toastify';
 
 interface Props {
-  quizId: string | null;
+  quizId?: string;
   quizType?: string;
 }
 

diff --git a/src/pages/CS/manage/scorer/AllScorer.tsx b/src/pages/CS/manage/scorer/AllScorer.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import CSManageLayout from '../CSManageLayout';
 import { css, styled } from 'styled-components';
 import useSWRImmutable from 'swr/immutable';
@@ -8,8 +8,7 @@ import { IQuizAllScorer } from '@/typing/db';
 import { CotatoKingMemberInfo } from 'cotato-openapi-clients';
 
 const AllScorer = () => {
-  const [searchParams] = useSearchParams();
-  const educationId = searchParams.get('educationId');
+  const { educationId } = useParams();
 
   const { data } = useSWRImmutable<IQuizAllScorer[]>(
     `/v1/api/quiz/cs-admin/results?educationId=${educationId}`,

diff --git a/src/pages/CS/manage/scorer/QuizScorer.tsx b/src/pages/CS/manage/scorer/QuizScorer.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import CSManageLayout from '@pages/CS/manage/CSManageLayout';
 import { css, styled } from 'styled-components';
 import { IQuizAdmin, IQuizAdminScorer, IQuizAdminSubmit } from '@/typing/db';
@@ -14,9 +14,7 @@ import { CotatoRecordResponse, CotatoScorerResponse } from 'cotato-openapi-clien
 
 const QuizScorer = () => {
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const quizId = searchParams.get('quizId');
-  const educationId = searchParams.get('educationId');
+  const { generationId, educationId, quizId } = useParams();
 
   const { data: educationStatus } = useSWR(
     `/v1/api/education/status?educationId=${educationId}`,
@@ -134,7 +132,9 @@ const QuizScorer = () => {
       }
     });
 
-    navigate(`/cs/manage/quizscorer?educationId=${educationId}&quizId=${prevQuizId}`);
+    navigate(
+      `/cs/manage/generation/${generationId}/education/${educationId}/quiz/${prevQuizId}/quizscorer`,
+    );
   }, [quiz, quizList]);
 
   const handleNextQuizButton = useCallback(() => {
@@ -143,14 +143,16 @@ const QuizScorer = () => {
       return;
     }
 
-    let prevQuizId = 0;
+    let nextQuizId = 0;
     quizList?.quizzes.forEach((quizData: IQuizAdmin) => {
       if (quizData.quizNumber === Number(quiz?.quizNumber) + 1) {
-        prevQuizId = quizData.quizId;
+        nextQuizId = quizData.quizId;
       }
     });
 
-    navigate(`/cs/manage/quizscorer?educationId=${educationId}&quizId=${prevQuizId}`);
+    navigate(
+      `/cs/manage/generation/${generationId}/education/${educationId}/quiz/${nextQuizId}/quizscorer`,
+    );
   }, [quiz, quizList]);
 
   return (