feat: 게임 진행화면 구현중

Author: tech-kms-jake

src/hooks/useStompClient.js

@@ -90,23 +90,26 @@ export default function useStompClient(roomId, onMessage) {
         if (!isConnected || !stompClient || !roomId || hasInitializedRoomRef.current === true) return;
         const localKey = `enteredRoom_${roomId}`;
         const hasEnteredBefore = localStorage.getItem(localKey);
+        console.log(localKey, hasEnteredBefore, roomId)
         if (hasEnteredBefore) {
             // 재접속 또는 새로고침
             stompClient.publish({
                 destination: `/pub/room/reconnect/${roomId}`,
                 body: '',
             });
+            console.log(`🚀 초기화 메시지 전송됨: /pub/room/reconnect/${roomId}`);
+
         } else {
             // 첫 입장
             stompClient.publish({
                 destination: `/pub/room/initializeRoomSocket/${roomId}`,
                 body: '',
             });
+            console.log(`🚀 초기화 메시지 전송됨: /pub/room/initializeRoomSocket/${roomId}`);
             localStorage.setItem(localKey, 'true'); //방 목록에서 제거됨
         }
 
         hasInitializedRoomRef.current = true;
-        console.log(`🚀 초기화 메시지 전송됨: /pub/room/initializeRoomSocket/${roomId}`);
     }, [roomId, ready]);
 
     return {

src/layout/game/GameLayout.js

@@ -96,7 +96,8 @@ const GameLayout = () => {
                 setChat(payload.message);
                 break;
             case "GAME_START":
-                setQuestions(payload.message);
+                setQuestions(payload.message.questions);
+                navigate("play");
                 break;
             case "QUESTION_START":
                 setQuestionStart(payload.message);
@@ -121,7 +122,6 @@ const GameLayout = () => {
     const { sendMessage } = useStompClient(roomId, handleStompMessage);
 
     useEffect(() => {
-        console.log('📦 sendMessage:', sendMessage);
         if (sendMessage) {
             setSendMessage(() => sendMessage); // Recoil 전역 등록
         }

src/layout/game/components/GameSettings.js

@@ -6,8 +6,6 @@ import {useRecoilValue} from "recoil";
 import {stompSendMessageAtom} from "../../../state/atoms";
 
 function GameSettings({ roomId, gameSetting, allReady }) {
-  const [timePerQuestion, setTimePerQuestion] = useState(60);
-  const [questionCount, setQuestionCount] = useState(gameSetting?.quiz.numberOfQuestion);
   const [quizSelectModalOpen, setQuizSelectModalOpen] = useState(false);
   const navigate = useNavigate();
   const sendMessage = useRecoilValue(stompSendMessageAtom);
@@ -23,29 +21,26 @@ function GameSettings({ roomId, gameSetting, allReady }) {
         "quizId" : quiz.quizId,
       }
     }
-    sendMessage(`/room/quiz/${roomId}`, quizChangeMessage);
+    sendMessage(`/pub/room/quiz/${roomId}`, quizChangeMessage);
   }
 
-  const handleTimePerQuestionChange = (e) => {
-    console.log('handleTimePerQuestionChange: ', e.target.value)
-    setTimePerQuestion(e.target.value);
-    const timePerQuestionMessage = {
+  const handleTimeLimitChange = (e) => {
+    const timeLimitMessage = {
       "message" : {
         "timeLimit" : e.target.value
       }
     }
-    sendMessage(`/room/time-limit/${roomId}`, timePerQuestionMessage);
+    sendMessage(`/pub/room/time-limit/${roomId}`, timeLimitMessage);
   };
 
-  const handleQuestionCountChange = (e) => {
+  const handleRoundChange = (e) => {
     console.log('handleQuestionCountChange: ', e.target.value)
-    setQuestionCount(e.target.value);
-    const questionCountMessage = {
+    const roundMessage = {
       "message" : {
         "round" : e.target.value
       }
     }
-    sendMessage(`/room/round/${roomId}`, questionCountMessage);
+    sendMessage(`/pub/room/round/${roomId}`, roundMessage);
   };
 
   return (
@@ -69,8 +64,8 @@ function GameSettings({ roomId, gameSetting, allReady }) {
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">제한 시간</label>
                 <select
-                    value={timePerQuestion}
-                    onChange={handleTimePerQuestionChange}
+                    value={gameSetting?.timeLimit}
+                    onChange={handleTimeLimitChange}
                     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")`,
@@ -87,8 +82,8 @@ function GameSettings({ roomId, gameSetting, allReady }) {
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">라운드</label>
                 <select
-                    value={questionCount}
-                    onChange={handleQuestionCountChange}
+                    value={gameSetting?.round}
+                    onChange={handleRoundChange}
                     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")`,

src/layout/game/components/QuizCompleted.js

@@ -1,4 +1,4 @@
-function QuizCompleted({ totalQuestions }) {
+function QuizCompleted() {
   return (
     <div className="bg-white rounded-2xl shadow-lg p-8 mb-8 flex-1 flex items-center justify-center">
       <div className="text-center">

src/layout/game/components/QuizInfoCard.js

@@ -1,6 +1,4 @@
-import { MessageCircleQuestion, Clock, List } from "lucide-react"
-import {useRecoilValue} from "recoil";
-import {gameSettingAtom} from "../../../state/atoms";
+import {Clock, List, MessageCircleQuestion} from "lucide-react"
 
 function QuizInfoCard({ gameSetting }) {
   return (

src/layout/game/components/QuizQuestion.js

@@ -1,4 +1,4 @@
-function QuizQuestion({ questionNumber, totalQuestions, question }) {
+function QuizQuestion({ question }) {
   return (
     <div className="bg-white rounded-2xl shadow-lg p-8 mb-8 flex-1 flex items-center justify-center">
       <div className="text-center">

src/pages/game/GamePlay.js

@@ -1,28 +1,16 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import { useParams } from "react-router-dom"
+import {useState} from "react"
+import {useParams} from "react-router-dom"
 import F1StartingLights from "../../layout/game/components/F1StartingLights"
 import QuizTimer from "../../layout/game/components/QuizTimer"
 import QuizQuestion from "../../layout/game/components/QuizQuestion"
 import QuizCompleted from "../../layout/game/components/QuizCompleted"
-import WinnerModal from "../../layout/game/components/WinnerModal"
 import QuizResultsModal from "../../layout/game/components/QuizResultsModal"
-
-const sampleQuestions = [
-    {
-        question: "Which driver won the 2024 Monaco Grand Prix?",
-        answer: "Charles Leclerc",
-    },
-    {
-        question: "What is the maximum number of power units a driver can use in a season?",
-        answer: "4",
-    },
-    {
-        question: 'Which circuit is known as "The Temple of Speed"?',
-        answer: "Monza",
-    },
-]
+import {useRecoilValue} from "recoil";
+import {
+    questionResultAtom,
+    questionsAtom,
+    questionStartAtom
+} from "../../state/atoms";
 
 const finalResults = [
     { rank: 1, name: "Lewis Hamilton", correctAnswers: 12, totalQuestions: 25, score: 120, color: "text-red-600" },
@@ -32,74 +20,39 @@ const finalResults = [
 ]
 
 function GamePlay() {
-    const { id: roomId } = useParams()
-    const [showStartingLights, setShowStartingLights] = useState(true)
-    const [currentQuestion, setCurrentQuestion] = useState(0)
-    const [quizStarted, setQuizStarted] = useState(false)
-    const [quizCompleted, setQuizCompleted] = useState(false)
-    const [showWinnerModal, setShowWinnerModal] = useState(false)
-    const [winner, setWinner] = useState("")
-    const [correctAnswer, setCorrectAnswer] = useState("")
-    const [showResultsModal, setShowResultsModal] = useState(false)
+    const { id: roomId } = useParams();
+    const [showStartingLights, setShowStartingLights] = useState(true);
+    const [quizStarted, setQuizStarted] = useState(false);
+    const [quizCompleted, setQuizCompleted] = useState(false);
+    const [showResultsModal, setShowResultsModal] = useState(false);
+    const questions = useRecoilValue(questionsAtom);
+    const currentQuestion = useRecoilValue(questionStartAtom);
+    const questionsResult = useRecoilValue(questionResultAtom);
+    console.log('questions: ', questions, currentQuestion, questionsResult);
 
     const handleLightsComplete = () => {
         setShowStartingLights(false)
         setQuizStarted(true)
     }
 
     const handleTimeUp = () => {
-        handleNextQuestion()
-    }
-
-    const handleCorrectAnswer = (winnerName, answer) => {
-        setWinner(winnerName)
-        setCorrectAnswer(answer)
-        setShowWinnerModal(true)
-    }
-
-    const handleCloseWinnerModal = () => {
-        setShowWinnerModal(false)
-        handleNextQuestion()
-    }
-
-    const handleNextQuestion = () => {
-        if (currentQuestion < sampleQuestions.length - 1) {
-            setCurrentQuestion((prev) => prev + 1)
-        } else {
-            setQuizCompleted(true)
-            setTimeout(() => {
-                setShowResultsModal(true)
-            }, 1000)
-        }
     }
 
     const handleCloseResultsModal = () => {
-        setShowResultsModal(false)
+        setShowResultsModal(false);
     }
 
-    // 테스트를 위해 3초 후 정답 모달 표시
-    useEffect(() => {
-        if (quizStarted && !showWinnerModal && !quizCompleted) {
-            const timer = setTimeout(() => {
-                handleCorrectAnswer("Charles Leclerc", sampleQuestions[currentQuestion]?.answer || "")
-            }, 3000)
-            return () => clearTimeout(timer)
-        }
-    }, [quizStarted, currentQuestion, showWinnerModal, quizCompleted])
-
     return (
         <div className="p-8 flex flex-col h-full">
             {showStartingLights && <F1StartingLights onComplete={handleLightsComplete} />}
 
-            <div
-                className={`transition-opacity duration-500 ${quizStarted ? "opacity-100" : "opacity-0"} h-full flex flex-col`}
-            >
+            <div className={`transition-opacity duration-500 ${quizStarted ? "opacity-100" : "opacity-0"} h-full flex flex-col`}>
                 {/* Quiz Header */}
                 <div className="flex items-center justify-between mb-8">
                     <div className="bg-white rounded-lg px-4 py-2 shadow-sm">
                         <span className="text-lg text-gray-600">문제</span>
                         <span className="text-lg font-bold text-gray-900 ml-2">
-              {quizCompleted ? sampleQuestions.length : currentQuestion + 1} / {sampleQuestions.length}
+              {quizCompleted ? questions?.length : currentQuestion?.round} / {questions?.length}
             </span>
                     </div>
                     <QuizTimer duration={quizCompleted ? 0 : 30} onTimeUp={handleTimeUp} />
@@ -108,28 +61,15 @@ function GamePlay() {
                 {/* Question Content */}
                 <div className="flex-1 flex justify-center">
                     {quizCompleted ? (
-                        <QuizCompleted totalQuestions={sampleQuestions.length} />
+                        <QuizCompleted totalQuestions={questions?.length} />
                     ) : (
                         quizStarted &&
-                        currentQuestion < sampleQuestions.length && (
-                            <QuizQuestion
-                                questionNumber={currentQuestion + 1}
-                                totalQuestions={sampleQuestions.length}
-                                question={sampleQuestions[currentQuestion].question}
-                            />
+                        currentQuestion?.round <= questions?.length && (
+                            <QuizQuestion question={questions[currentQuestion?.round]?.question}/>
                         )
                     )}
                 </div>
             </div>
-
-            {/* Modals */}
-            <WinnerModal
-                isVisible={showWinnerModal}
-                winner={winner}
-                correctAnswer={correctAnswer}
-                onClose={handleCloseWinnerModal}
-            />
-
             <QuizResultsModal isVisible={showResultsModal} results={finalResults} onClose={handleCloseResultsModal} />
         </div>
     )

src/pages/game/HostPage.js

@@ -1,36 +1,34 @@
-import {useNavigate, useParams} from "react-router-dom"
+import {useParams} from "react-router-dom"
 import QuizInfoCard from "../../layout/game/components/QuizInfoCard"
 import GameSettings from "../../layout/game/components/GameSettings"
 import {useRecoilValue} from "recoil";
 import {
   gameSettingAtom,
   loginUserAtom,
   playerListAtom,
-  roomSettingAtom,
   stompSendMessageAtom
 } from "../../state/atoms";
 import HostPageHeader from "./HostPageHeader";
 import {useEffect, useState} from "react";
 import clsx from "clsx";
+import {isEmptyOrNull} from "../../utils/utils";
 
 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);
+  const allReady = playerList.length > 1 && playerList.every(player => player.ready);
 
   useEffect(() => {
-    if (playerList) {
-      setReady(matchingPlayers.ready);
+    if (playerList && !isEmptyOrNull(matchingPlayers)) {
+      setReady(matchingPlayers[0].ready);
     }
   }, [playerList])