[FE] - 퀴즈 랭킹 에러 수정 (#164)

* feat: 리더보드 버튼 추가 및 쿠키 삭제

* feat: api 코드 추가

* fix: 퀴즈 풀이 화면 수정

* feat: 핀코드 입력 시 진행 중인 게임으로 이동하는 로직 추가

* fix: 0보다 작은 경우 quizEnd true로 변경

* feat: show quiz 리턴값에 participantLength 추가

* feat: 퀴즈 참가 인원 데이터를 UI에 추가

* feat: 퀴즈 로딩 fallback 변경

* fix: 퀴즈 평균 점수 소수점 한 자리로 변경

* feat: 퀴즈 헤더 삭제

* fix: height 수정

* feat: 평균 점수 소수점 변경

* feat: my info 이벤트 추가 및 UI 변경

* style: dvh로 변경

* feat: 퀴즈 세션 전용 프로그래스바 추가

* fix: invalidation Query 추가

- 시간 종료 시 쿼리 무효화 로직 추가

* fix: 퀴즈 시작 시 로컬스토리지 비우는 로직 추가

* feat: 스타일 수정

- RecentSubmittedAnswer 스타일 수정

---------

Co-authored-by: dooohun <[email protected]>

packages/client/src/pages/quiz-master-session/ui/RecentSubmittedAnswers.tsx

@@ -61,7 +61,7 @@ export default function RecentSubmittedAnswers({
   }, []);
 
   return (
-    <div className="h-2/3 overflow-y-scroll">
+    <div className="grow overflow-y-scroll">
       <div className="col-span-2 bg-white rounded-xl shadow-sm border border-gray-100">
         <div className="p-4 border-b border-gray-100">
           <h3 className="font-semibold">최근 제출 답안</h3>

packages/client/src/pages/quiz-master-session/ui/Statistics.tsx

@@ -77,7 +77,7 @@ export default function Statistics({
           totalParticipants={totalParticipants}
           quizData={quizData}
         />
-        <div>
+        <div className="flex flex-col gap-2 max-h-full">
           <RecentSubmittedAnswers
             userSubmitHistory={masterStatistics.submitHistory}
             history={history}

packages/client/src/pages/quiz-session/index.lazy.tsx

@@ -21,6 +21,7 @@ export default function QuizSessionLazyPage() {
             timeLimit={quiz.currentQuizData.timeLimit}
             setQuizEnd={setIsQuizEnd}
             totalParticipants={quiz.participantLength}
+            pinCode={pinCode as string}
           />
           <QuizBox
             quiz={quiz.currentQuizData}

packages/client/src/pages/quiz-session/ui/QuizEnd.tsx

@@ -33,7 +33,7 @@ export default function QuizEnd({ refetch, setQuizEnd }: QuizEndProps) {
   const { pinCode, id } = useParams();
 
   const { data: ranking } = useShowRanking({ socket, pinCode: pinCode as string });
-  console.log(ranking);
+
   useEffect(() => {
     const handleStartQuiz = () => {
       clearLocalStorage(LOCAL_STORAGE_KEYS);

packages/client/src/pages/quiz-session/ui/QuizHeader.tsx

@@ -11,13 +11,16 @@ import RabbitImage from '@/shared/assets/characters/토끼.png';
 import PenguinImage from '@/shared/assets/characters/펭귄.png';
 import HamsterImage from '@/shared/assets/characters/햄스터.png';
 import { Calendar, Clock, Users } from 'lucide-react';
+import { QueryClient } from '@tanstack/react-query';
+
 // import ProgressBar from './ProgressBar';
 
 interface QuizHeaderProps {
   startTime: number;
   timeLimit: number;
   setQuizEnd: React.Dispatch<React.SetStateAction<boolean>>;
   totalParticipants: number;
+  pinCode: string;
 }
 
 const characters = [DogImage, CatImage, PigImage, RabbitImage, PenguinImage, HamsterImage];
@@ -28,6 +31,7 @@ export default function QuizHeader({
   timeLimit,
   setQuizEnd,
   totalParticipants,
+  pinCode,
 }: QuizHeaderProps) {
   const [remainingTime, setRemainingTime] = usePersistState('ramainingTime', timeLimit);
   const [participantStatistics, setParticipantStatistics] = usePersistState(
@@ -39,6 +43,7 @@ export default function QuizHeader({
   const socket = getQuizSocket();
   const { data: myInfo } = useGetMyInfo({ socket });
   const { nickname, character } = myInfo;
+  const queryClient = new QueryClient();
 
   useEffect(() => {
     const intervalId = setInterval(() => {
@@ -57,6 +62,7 @@ export default function QuizHeader({
   useEffect(() => {
     if (remainingTime <= 0) {
       setQuizEnd(true);
+      queryClient.invalidateQueries({ queryKey: ['showRanking', pinCode] });
     }
   }, [remainingTime]);
 

packages/client/src/pages/quiz-wait/index.lazy.tsx

@@ -9,13 +9,24 @@ import { apiClient } from '@/shared/api';
 import UserGridView from './ui/UserGridView';
 import { useNickname } from './model/hooks/useNickname';
 import MasterChat from './ui/MasterChat';
+import { clearLocalStorage } from '@/shared/utils/clearLocalStorage';
 
 export interface Guest {
   nickname: string;
   character: number;
   position: number;
 }
 
+const GUEST_LOCAL_STORAGE_KEYS = [
+  'isQuizEnd',
+  'reactionStats',
+  'participantStatistics',
+  'hasSubmitted',
+  'submitOrder',
+  'ramainingTime',
+];
+const MASTER_LOCAL_STORAGE_KEYS = ['masterStatistics', 'reactionStats', 'history', 'remainingTime'];
+
 export default function QuizWaitLazyPage() {
   const socket = getQuizSocket();
   const { pinCode } = useParams();
@@ -42,6 +53,7 @@ export default function QuizWaitLazyPage() {
     };
 
     socket.on('start quiz', () => {
+      clearLocalStorage(GUEST_LOCAL_STORAGE_KEYS);
       navigate(`/quiz/session/${pinCode}/1`);
     });
 
@@ -65,6 +77,7 @@ export default function QuizWaitLazyPage() {
   };
 
   const handleQuizStart = () => {
+    clearLocalStorage(MASTER_LOCAL_STORAGE_KEYS);
     socket.emitWithAck('start quiz', { sid: getCookie('sid'), pinCode }).then(() => {
       navigate(`/quiz/session/host/${pinCode}/0`);
     });

packages/client/src/shared/ui/header/Header.tsx

@@ -9,7 +9,7 @@ export default function Header({ classTitle, onClick }: HeaderProps) {
   //TODO: 로그인 상태 관리
   return (
     <div className="py-2 bg-white shadow-md">
-      <section className="flex justify-between items-center min-w-[980px] mx-auto px-8">
+      <section className="flex justify-between items-center w-dvw mx-auto px-8">
         <div className="flex items-center gap-8">
           <BackButton />
           <h1 className="text-bold-xl cursor-pointer" onClick={onClick}>