feat: 게임 결과 모달 추가

- 게임 종료 시 팀랭킹 및 개인 랭킹 추가

Author: idealHyun

src/components/Rank/IndividualRank.tsx

@@ -0,0 +1,51 @@
+import { useRecoilValue } from "recoil";
+import { gameState } from "../../recoil/atoms/gameState";
+import { userState } from "../../recoil/atoms/userState";
+import { RoomDataProps } from "../../types/RoomData.type.ts";
+import { RoomClientProps } from "../../types/RoomClient.type.ts";
+
+export default function IndividualRank() {
+  const game = useRecoilValue<RoomDataProps | null>(gameState); // 게임 상태
+  const user = useRecoilValue<RoomClientProps>(userState); // 사용자 상태
+
+  // 모든 팀의 유저를 단일 배열로 변환 및 클릭 수 기준 내림차순 정렬
+  const rankedUsers = game?.teams
+    .flatMap((team) =>
+      team.users.map((teamUser) => ({
+        nickname: teamUser.nickname,
+        clickCount: teamUser.clickCount,
+        isCurrentUser: teamUser.nickname === user.nickname,
+      }))
+    )
+    .sort((a, b) => b.clickCount - a.clickCount)
+    .slice(0, 3); // 상위 3명만 선택
+
+  return (
+    <div className="w-full flex flex-col rounded-lg p-4 border-2 border-orange-300">
+      <h2 className="text-xl font-semibold text-orange-500 mb-4 text-center">
+        🏆 개인 랭킹
+      </h2>
+
+      <ul className="space-y-3">
+        {rankedUsers?.map((user, index) => (
+          <li
+            key={index}
+            className={`flex justify-between items-center px-4 py-2 rounded-lg
+              ${
+              user.isCurrentUser
+                ? " text-black font-bold border-2 border-orange-500 shadow-lg bg-orange-500"
+                : " text-gray-600 border-2 border-gray-300 shadow-sm"
+            }`}
+          >
+            <span className="text-lg">
+              {index === 0 && '🥇 '}
+              {index === 1 && '🥈 '}
+              {index === 2 && '🥉 '}
+              {user.nickname}</span>
+            <span className="text-lg">{user.clickCount} clicks</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/components/teamRank/TeamRank.tsx src/components/Rank/TeamRank.tsxsrc/components/teamRank/TeamRank.tsx renamed to src/components/Rank/TeamRank.tsx

@@ -3,8 +3,13 @@ import { gameState} from "../../recoil/atoms/gameState";
 import { userState } from "../../recoil/atoms/userState";
 import { RoomDataProps } from "../../types/RoomData.type.ts";
 import { RoomClientProps } from "../../types/RoomClient.type.ts";
+import React from "react";
 
-export default function TeamRank() {
+type TeamRankProps = {
+  resultModal: boolean;
+};
+
+const TeamRank: React.FC<TeamRankProps> = ({resultModal})=> {
   const game = useRecoilValue<RoomDataProps | null>(gameState); // 게임 상태
   const user = useRecoilValue<RoomClientProps>(userState); // 사용자 상태
 
@@ -22,27 +27,34 @@ export default function TeamRank() {
     .sort((a, b) => b.totalClicks - a.totalClicks).slice(0, 3);
 
   return (
-    <div className="w-full h-full rounded-lg p-4 border-2 border-orange-300">
-      <h2 className="text-xl font-semibold text-orange-500 mb-4 text-center">
-        🏆 Team Rankings
-      </h2>
+    <div
+      className={`w-full ${resultModal ? '' : 'h-full'} rounded-lg p-4 border-2 border-orange-300 box-border`}
+    >
+      <h2 className="text-xl font-semibold text-orange-500 mb-4 text-center">🏆 팀 랭킹</h2>
 
       <ul className="space-y-3">
         {rankedTeams?.map((team, index) => (
           <li
             key={index}
             className={`flex justify-between items-center px-4 py-2 rounded-lg
               ${
-              team.isUserTeam
-                ? " text-black font-bold border-2 border-orange-500 shadow-lg bg-orange-500"
-                : " text-gray-600 border-2 border-gray-300 shadow-sm"
-            }`}
+                team.isUserTeam
+                  ? ' text-black font-bold border-2 border-orange-500 shadow-lg bg-orange-500'
+                  : ' text-gray-600 border-2 border-gray-300 shadow-sm'
+              }`}
           >
-            <span className="text-lg">{index + 1}. {team.teamName}</span>
+            <span className="text-lg">
+              {index === 0 && '🥇 '}
+              {index === 1 && '🥈 '}
+              {index === 2 && '🥉 '}
+               {team.teamName}
+            </span>
             <span className="text-lg">{team.totalClicks} clicks</span>
           </li>
         ))}
       </ul>
     </div>
   );
 }
+
+export default TeamRank;

src/components/modal/ResultModal.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import TeamRank from "../Rank/TeamRank.tsx";
+import IndividualRank from "../Rank/IndividualRank.tsx";
+import { useNavigate } from "react-router-dom";
+
+interface ResultModalProps {
+  setResultModal: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const ResultModal: React.FC<ResultModalProps> = ({setResultModal}) => {
+  const navigate = useNavigate();
+
+  const handleButtonClick = () =>{
+    setResultModal(false);
+    navigate('/');
+  }
+
+  return (
+    <>
+      <div className="absolute inset-0 bg-black bg-opacity-50"></div>
+      <div className="fixed inset-0 flex items-center justify-center z-50">
+        <div className="flex flex-col gap-4 bg-white rounded-lg p-8 shadow-lg relative w-full max-w-4xl">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">게임 결과</h2>
+          <TeamRank resultModal={true} />
+          <IndividualRank />
+          <button
+            className="px-4 py-4 flex items-center justify-center bg-orange-400 text-white rounded hover:bg-orange-500 transition"
+            onClick={handleButtonClick}
+          >
+            홈 페이지로 가기
+          </button>
+        </div>
+      </div>
+    </>
+
+  );
+};
+
+export default ResultModal;

src/pages/game/Game.tsx

@@ -1,19 +1,22 @@
 import { useEffect, useState } from 'react';
 import IndividualChart from '../../components/chart/IndividualChart';
 import TeamChart from '../../components/chart/TeamChart';
-import TeamRank from '../../components/teamRank/TeamRank';
+import TeamRank from '../../components/Rank/TeamRank';
 import WebSocketManager from '../../services/WebSocketManager.ts';
+import ResultModal from "../../components/modal/ResultModal.tsx";
 
 const Game = () => {
   const [count, setCount] = useState<number>(4);
   const [moveMessage, setMoveMessage] = useState<boolean>(false);
+  const [resultModal, setResultModal] = useState<boolean>(true);
   const webSocketManager = WebSocketManager.getInstance();
 
   const startMessage = '🚀 Game Start! 🧑‍🚀';
   const second = 1000;
   const halfSecond = 500;
 
   useEffect(() => {
+    webSocketManager.setShowResultMessage(setResultModal);
     setMoveMessage(true);
     const handleCountdown = () => {
       setCount((prevCount) => {
@@ -47,6 +50,7 @@ const Game = () => {
 
   return (
     <>
+      {resultModal && <ResultModal setResultModal = {setResultModal}/>}
       {count > 0 ? (
         <div className="fixed inset-0 flex items-center justify-center z-50">
           <div className="absolute inset-0 bg-gray-500 bg-opacity-50"></div>
@@ -71,7 +75,7 @@ const Game = () => {
                 <IndividualChart />
               </div>
               <div className="flex-1 h-3/4 p-4 md:h-1/2">
-                <TeamRank />
+                <TeamRank resultModal={false} />
               </div>
             </div>
           </div>

src/services/WebSocketManager.ts

@@ -13,6 +13,7 @@ class WebSocketManager {
   private navigate: NavigateFunction | null = null;
   private showMessage: ((state: any) => void) | null = null;
   private showRoomChiefLeaveMessage: ((state: any) => void) | null = null;
+  private showResultMessage: ((state: any) => void) | null = null;
 
   public static getInstance(): WebSocketManager {
     if (!WebSocketManager.instance) {
@@ -116,6 +117,9 @@ class WebSocketManager {
           console.log(`${message.type} 처리`);
           this.updateGameState(message.data);
         }
+        if (this.showResultMessage) {
+          this.showResultMessage(true);
+        }
         break;
 
       case 'ROOM_CHIEF_LEAVE':
@@ -154,6 +158,10 @@ class WebSocketManager {
     this.showRoomChiefLeaveMessage = showRoomChiefLeaveMessage;
   }
 
+  setShowResultMessage(showResultMessage: (state: any) => void): void {
+    this.showResultMessage = showResultMessage;
+  }
+
   // 메시지 전송 메소드
   sendMessage(destination: string, body: Object = ''): void {
     if (!this.client || !this.client.connected) {