feat: 미구현 웹소켓 메시지 추가, 퀴즈 변경 기능 구현, 새로고침시 퍼블리싱 url 분기

tech-kms-jake · tech-kms-jake · commit 5ad29bec6c62 · 2025-07-23T00:11:15.000+09:00
diff --git a/src/hooks/useStompClient.js b/src/hooks/useStompClient.js
@@ -88,11 +88,22 @@ export default function useStompClient(roomId, onMessage) {
     // ✅ 최초 1회 initializeRoomSocket 퍼블리시
     useEffect(() => {
         if (!isConnected || !stompClient || !roomId || hasInitializedRoomRef.current === true) return;
-
-        stompClient.publish({
-            destination: `/pub/room/initializeRoomSocket/${roomId}`,
-            body: '',
-        });
+        const localKey = `enteredRoom_${roomId}`;
+        const hasEnteredBefore = localStorage.getItem(localKey);
+        if (hasEnteredBefore) {
+            // 재접속 또는 새로고침
+            stompClient.publish({
+                destination: `/pub/room/reconnect/${roomId}`,
+                body: '',
+            });
+        } else {
+            // 첫 입장
+            stompClient.publish({
+                destination: `/pub/room/initializeRoomSocket/${roomId}`,
+                body: '',
+            });
+            localStorage.setItem(localKey, 'true'); //방 목록에서 제거됨
+        }
 
         hasInitializedRoomRef.current = true;
         console.log(`🚀 초기화 메시지 전송됨: /pub/room/initializeRoomSocket/${roomId}`);
diff --git a/src/layout/game/GameLayout.js b/src/layout/game/GameLayout.js
@@ -2,10 +2,17 @@ import {Outlet, useNavigate, useParams} from "react-router-dom";
 import Sidebar from "./Sidebar";
 import {useSetRecoilState} from "recoil";
 import {
-    chatAtom,
-    gameSettingAtom, loginUserAtom,
+    chatAtom, gameResultAtom,
+    gameSettingAtom,
+    loginUserAtom,
     playerListAtom,
-    roomSettingAtom, stompSendMessageAtom, systemNoticeAtom
+    questionResultAtom,
+    questionsAtom,
+    questionStartAtom,
+    rankUpdateAtom,
+    roomSettingAtom,
+    stompSendMessageAtom,
+    systemNoticeAtom
 } from "../../state/atoms";
 import useStompClient from "../../hooks/useStompClient";
 import {useCallback, useEffect} from "react";
@@ -34,9 +41,15 @@ const GameLayout = () => {
     const setRoomSetting = useSetRecoilState(roomSettingAtom);
     const setGameSetting = useSetRecoilState(gameSettingAtom);
     const setChat = useSetRecoilState(chatAtom);
+    const setQuestions = useSetRecoilState(questionsAtom);
+    const setQuestionStart = useSetRecoilState(questionStartAtom);
+    const setQuestionResult = useSetRecoilState(questionResultAtom);
+    const setRankUpdate = useSetRecoilState(rankUpdateAtom);
+    const setGameResult = useSetRecoilState(gameResultAtom);
     const setSystemNotice = useSetRecoilState(systemNoticeAtom);
     const setSendMessage = useSetRecoilState(stompSendMessageAtom);
     const setLoginUser = useSetRecoilState(loginUserAtom);
+    const navigate = useNavigate();
 
     const { isLoading, data } = useApiQuery(
         ["authme"],
@@ -51,6 +64,7 @@ const GameLayout = () => {
 
     // 메시지를 처리하는 콜백
     const handleStompMessage = useCallback((payload) => {
+        console.log('receive message: ', payload)
         switch (payload.type) {
             case "PLAYER_LIST":
                 const { host, players } = payload.message;
@@ -81,6 +95,24 @@ const GameLayout = () => {
             case "CHAT":
                 setChat(payload.message);
                 break;
+            case "GAME_START":
+                setQuestions(payload.message);
+                break;
+            case "QUESTION_START":
+                setQuestionStart(payload.message);
+                break;
+            case "QUESTION_RESULT":
+                setQuestionResult(payload.message);
+                break;
+            case "RANK_UPDATE":
+                setRankUpdate(payload.message.rank);
+                break;
+            case "GAME_RESULT":
+                setGameResult(payload.message.result);
+                break;
+            case "EXIT_SUCCESS":
+                navigate("/room");
+                break;
             default:
                 console.warn("알 수 없는 메시지", payload);
         }
diff --git a/src/layout/game/components/GameSettings.js b/src/layout/game/components/GameSettings.js
@@ -1,15 +1,14 @@
-import { useState } from "react"
-import { useNavigate } from "react-router-dom"
-import { Settings } from "lucide-react"
+import {useState} from "react"
+import {useNavigate} from "react-router-dom"
+import {Settings} from "lucide-react"
 import QuizSelectModal from "../../../pages/game/QuizSelectModal";
 import {useRecoilValue} from "recoil";
 import {stompSendMessageAtom} from "../../../state/atoms";
 
-function GameSettings({ roomId }) {
-  const [timePerQuestion, setTimePerQuestion] = useState("30초");
-  const [questionCount, setQuestionCount] = useState(25);
+function GameSettings({ roomId, gameSetting, allReady }) {
+  const [timePerQuestion, setTimePerQuestion] = useState(60);
+  const [questionCount, setQuestionCount] = useState(gameSetting?.quiz.numberOfQuestion);
   const [quizSelectModalOpen, setQuizSelectModalOpen] = useState(false);
-  const [selectedQuiz, setSelectedQuiz] = useState(null);
   const navigate = useNavigate();
   const sendMessage = useRecoilValue(stompSendMessageAtom);
 
@@ -19,9 +18,36 @@ function GameSettings({ roomId }) {
   }
 
   const handleQuizSelect = (quiz) => {
-    setSelectedQuiz(quiz);
+    const quizChangeMessage = {
+      "message" : {
+        "quizId" : quiz.quizId,
+      }
+    }
+    sendMessage(`/room/quiz/${roomId}`, quizChangeMessage);
   }
 
+  const handleTimePerQuestionChange = (e) => {
+    console.log('handleTimePerQuestionChange: ', e.target.value)
+    setTimePerQuestion(e.target.value);
+    const timePerQuestionMessage = {
+      "message" : {
+        "timeLimit" : e.target.value
+      }
+    }
+    sendMessage(`/room/time-limit/${roomId}`, timePerQuestionMessage);
+  };
+
+  const handleQuestionCountChange = (e) => {
+    console.log('handleQuestionCountChange: ', e.target.value)
+    setQuestionCount(e.target.value);
+    const questionCountMessage = {
+      "message" : {
+        "round" : e.target.value
+      }
+    }
+    sendMessage(`/room/round/${roomId}`, questionCountMessage);
+  };
+
   return (
       <>
         <div className="bg-white rounded-2xl shadow-lg p-6 mb-6">
@@ -44,38 +70,47 @@ function GameSettings({ roomId }) {
                 <label className="block text-sm font-medium text-gray-700 mb-2">제한 시간</label>
                 <select
                     value={timePerQuestion}
-                    onChange={(e) => setTimePerQuestion(e.target.value)}
+                    onChange={handleTimePerQuestionChange}
                     className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 appearance-none bg-white bg-no-repeat bg-right pr-8"
                     style={{
                       backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
                       backgroundPosition: "right 0.5rem center",
                       backgroundSize: "1.5em 1.5em",
                     }}
                 >
-                  <option>15초</option>
-                  <option>30초</option>
-                  <option>45초</option>
-                  <option>60초</option>
+                  <option value={15}>15초</option>
+                  <option value={30}>30초</option>
+                  <option value={45}>45초</option>
+                  <option value={60}>60초</option>
                 </select>
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">문제 수</label>
-                <input
-                    type="number"
-                    min="10"
-                    max="80"
+                <label className="block text-sm font-medium text-gray-700 mb-2">라운드</label>
+                <select
                     value={questionCount}
-                    onChange={(e) => setQuestionCount(Number.parseInt(e.target.value) || 30)}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                    placeholder="문제 수를 입력하세요 (10-80)"
-                />
+                    onChange={handleQuestionCountChange}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 appearance-none bg-white bg-no-repeat bg-right pr-8"
+                    style={{
+                      backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                      backgroundPosition: "right 0.5rem center",
+                      backgroundSize: "1.5em 1.5em",
+                    }}
+                >
+                  {Array.from({ length: gameSetting?.quiz.numberOfQuestion - 9 }, (_, i) => {
+                    const value = i + 10;
+                    return (
+                        <option key={value} value={value}>
+                          {value}
+                        </option>
+                    );
+                  })}
+                </select>
               </div>
             </div>
             <div className="pt-4">
-              <button
-                  onClick={handleStartGame}
-                  disabled={!selectedQuiz}
-                  className="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-semibold disabled:bg-gray-400 disabled:cursor-not-allowed"
+              <button onClick={handleStartGame}
+                      disabled={!allReady}
+                      className="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-semibold disabled:bg-gray-400 disabled:cursor-not-allowed"
               >
                 게임 시작
               </button>
diff --git a/src/layout/game/components/QuizInfoCard.js b/src/layout/game/components/QuizInfoCard.js
@@ -2,8 +2,7 @@ import { MessageCircleQuestion, Clock, List } from "lucide-react"
 import {useRecoilValue} from "recoil";
 import {gameSettingAtom} from "../../../state/atoms";
 
-function QuizInfoCard() {
-  const gameSetting = useRecoilValue(gameSettingAtom);
+function QuizInfoCard({ gameSetting }) {
   return (
     <div className="bg-white rounded-2xl shadow-lg p-8 mb-6">
       <div className="flex items-center mb-6">
@@ -49,9 +48,9 @@ function QuizInfoCard() {
             <div className="bg-purple-50 rounded-lg p-3">
               <div className="flex items-center space-x-2">
                 <List className="w-4 h-4 text-purple-600" />
-                <span className="text-sm font-medium text-purple-900">문제 수</span>
+                <span className="text-sm font-medium text-purple-900">라운드</span>
               </div>
-              <div className="text-lg font-bold text-purple-700">30개</div>
+              <div className="text-lg font-bold text-purple-700">{gameSetting?.round}개</div>
             </div>
           </div>
         </div>
diff --git a/src/pages/game/HostPage.js b/src/pages/game/HostPage.js
@@ -2,27 +2,66 @@ import {useNavigate, useParams} from "react-router-dom"
 import QuizInfoCard from "../../layout/game/components/QuizInfoCard"
 import GameSettings from "../../layout/game/components/GameSettings"
 import {useRecoilValue} from "recoil";
-import {stompSendMessageAtom} from "../../state/atoms";
+import {
+  gameSettingAtom,
+  loginUserAtom,
+  playerListAtom,
+  roomSettingAtom,
+  stompSendMessageAtom
+} from "../../state/atoms";
 import HostPageHeader from "./HostPageHeader";
+import {useEffect, useState} from "react";
+import clsx from "clsx";
 
 function HostPage() {
   const { id: roomId } = useParams();
   const navigate = useNavigate();
+  const [isReady, setReady] = useState(false);
   const sendMessage = useRecoilValue(stompSendMessageAtom);
+  const gameSetting = useRecoilValue(gameSettingAtom);
+  console.log(gameSetting);
+
+  //현재 로그인 유저를 찾고 방장인지 확인
+  const playerList = useRecoilValue(playerListAtom);
+  const loginUser = useRecoilValue(loginUserAtom);
+  const matchingPlayers = playerList.filter(player => player.nickname === loginUser.name);
+  const isHost = matchingPlayers.some(player => player.status === "host");
+  const allReady = playerList.every(player => player.ready);
+
+  useEffect(() => {
+    if (playerList) {
+      setReady(matchingPlayers.ready);
+    }
+  }, [playerList])
 
   const handleExitRoomClick = () => {
     sendMessage(`/pub/room/exit/${roomId}`, "");
-    navigate("/room");
   };
 
+  const handleReadyGame = () => {
+    // setReady(prev => !prev);
+    sendMessage(`/pub/room/ready/${roomId}`, "");
+  }
+
   return (
     <div className="flex flex-col h-full" style={{ height: "90vh" }}>
-      <HostPageHeader handleExitRoomClick={handleExitRoomClick}/>
+      <HostPageHeader isHost={isHost} handleExitRoomClick={handleExitRoomClick}/>
       {/* Body */}
       <div className="flex-1 p-8">
         <div className="max-w-6xl mx-auto">
-          <QuizInfoCard />
-          <GameSettings isHost={true} roomId={roomId} />
+          <QuizInfoCard gameSetting={gameSetting} />
+          {isHost ? <GameSettings roomId={roomId} gameSetting={gameSetting} allReady={allReady}/> :
+            <button onClick={handleReadyGame}
+                    className={clsx(
+                        "w-full px-6 py-3 text-white rounded-lg transition-colors font-semibold disabled:bg-gray-400 disabled:cursor-not-allowed",
+                        {
+                          "bg-green-600 hover:bg-green-700": !isReady,
+                          "bg-red-600 hover:bg-red-700": isReady
+                        }
+                    )}>
+              {isReady ? '준비 완료 상태입니다.다시 클릭하면 준비 해제됩니다.' : '준비'}
+            </button>
+          }
         </div>
       </div>
     </div>
diff --git a/src/pages/game/HostPageHeader.js b/src/pages/game/HostPageHeader.js
@@ -2,7 +2,7 @@ import {Flag, Lock, LogOut, Users} from "lucide-react";
 import {useRecoilValue} from "recoil";
 import {roomSettingAtom} from "../../state/atoms";
 
-const HostPageHeader = ({ handleExitRoomClick }) => {
+const HostPageHeader = ({ isHost, handleExitRoomClick }) => {
     const roomSetting = useRecoilValue(roomSettingAtom);
 
     return (
@@ -13,19 +13,20 @@ const HostPageHeader = ({ handleExitRoomClick }) => {
                         <Flag className="w-6 h-6" />
                         <h1 className="text-xl font-bold">{roomSetting?.roomName}</h1>
                     </div>
-                    <div className="flex items-center space-x-2 bg-white/20 px-3 py-1 rounded-full">
-                        <Lock className="w-4 h-4" />
+                    {roomSetting?.locked && <div
+                        className="flex items-center space-x-2 bg-white/20 px-3 py-1 rounded-full">
+                        <Lock className="w-4 h-4"/>
                         <span className="text-sm">비공개 방</span>
-                    </div>
+                    </div>}
                 </div>
                 <div className="flex items-center space-x-4">
                     <div className="flex items-center space-x-2">
                         <Users className="w-5 h-5" />
                         <span className="font-semibold">{roomSetting?.currentUserCount}/{roomSetting?.maxUserCount} 플레이어</span>
                     </div>
-                    <div className="bg-yellow-500/20 px-3 py-1 rounded-full">
+                    {isHost && <div className="bg-yellow-500/20 px-3 py-1 rounded-full">
                         <span className="text-sm font-medium">👑 방장</span>
-                    </div>
+                    </div>}
                     <button className="px-4 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-colors"
                             onClick={handleExitRoomClick}>
                         <LogOut className="w-4 h-4 mr-2 inline" />방 나가기
diff --git a/src/pages/room/RoomList.js b/src/pages/room/RoomList.js
@@ -67,6 +67,15 @@ const RoomList = () => {
     }
   }, [data])
 
+  useEffect(() => {
+    // prefix로 저장된 방 관련 키들 삭제
+    Object.keys(localStorage).forEach((key) => {
+      if (key.startsWith("enteredRoom_")) {
+        localStorage.removeItem(key);
+      }
+    });
+  }, []);
+
   const handleSearch = () => {
     const filtered = rooms.filter((room) => room.roomName.toLowerCase().includes(searchTerm.toLowerCase()));
     setFilteredRooms(filtered);
diff --git a/src/state/atoms.js b/src/state/atoms.js
@@ -56,3 +56,28 @@ export const systemNoticeAtom = atom({
     key: 'systemNotice',
     default: null,
 });
+
+export const questionsAtom = atom({
+    key: 'questions',
+    default: null,
+});
+
+export const questionStartAtom = atom({
+    key: 'questionStart',
+    default: null,
+});
+
+export const questionResultAtom = atom({
+    key: 'questionResult',
+    default: null,
+});
+
+export const rankUpdateAtom = atom({
+    key: 'rankUpdate',
+    default: null,
+});
+
+export const gameResultAtom = atom({
+    key: 'gameResult',
+    default: null,
+});
