Merge pull request #94 from 5wonju/feat/#73-quiz-result-per-round

Feat/#73 매 라운드 퀴즈 결과 소켓 통신

frontend/app/(page)/(needProtection)/game/component/AnswerSpot.tsx

@@ -2,12 +2,12 @@ import { Center, Cylinder, Text3D } from '@react-three/drei'
 import { CylinderCollider, RigidBody } from '@react-three/rapier'
 import React from 'react'
 import { AnswerEnum } from '../lib/store-type'
-import { useAnswerSelectStore } from '../lib/store'
+import { useAnswerSelectStore, useRoundResultStore } from '../lib/store'
 
 const AnswerSpot = () => {
   const answers = Object.values(AnswerEnum).slice(0, 4)
   const { selectAnswer, setSelectAnswer } = useAnswerSelectStore()
-
+  
   return answers.map((answer, index) => (
     <group key={answer} rotation-y={((index + 1) / 4) * Math.PI * 2}>
       <group position-x={8} position-z={-8}>

frontend/app/(page)/(needProtection)/game/component/GameField.tsx

@@ -48,9 +48,9 @@ const GameField = () => {
   }
 
   // 개발용 게임 시작
-  // useEffect(() => {
-  //   startGame()
-  // }, [])
+  useEffect(() => {
+    startGame()
+  }, [])
 
   return (
     <>

frontend/app/(page)/(needProtection)/game/component/boardContent/QuizContent.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { formatTime, QuizAnswer } from '../../lib/util'
-import { useAnswerSelectStore, useQuizStore } from '../../lib/store'
+import { useAnswerSelectStore, useQuizStore, useRoundResultStore } from '../../lib/store'
 import RoomInfo from './RoomInfo'
 
 const QuizContent = () => {
@@ -17,7 +17,11 @@ const QuizContent = () => {
   }
   const [time, setTime] = useState(quiz.timeLimit) // 초기 시간: 10초
   const { selectAnswer } = useAnswerSelectStore()
+  const { answer: quizAnswer } = useRoundResultStore((state) => ({
+    answer: state.answer,
+  }))
 
+  // const quizAnswer = 'A'
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -58,7 +62,11 @@ const QuizContent = () => {
           <li
             key={index}
             className={`flex items-center gap-3 glass ${
-              selectAnswer === QuizAnswer[index] ? 'bg-indigo-400 bg-opacity-40' : ''
+              selectAnswer === QuizAnswer[index]
+                ? 'bg-indigo-400 bg-opacity-40'
+                : QuizAnswer[index] === quizAnswer
+                ? 'bg-lime-400 bg-opacity-40'
+                : ''
             } text-black gap-1 w-full rounded-xl transition-colors border-2 backdrop-blur-md border-opacity-75 border-white px-4 py-2`}
           >
             <span className="font-medium bg-indigo-600 text-white rounded-full size-6 flex items-center justify-center">

frontend/app/(page)/(needProtection)/game/component/boardContent/RoomInfo.tsx

@@ -21,7 +21,7 @@ const RoomInfo = ({ quizNum = 0 }: { quizNum?: number }) => {
             <span>{roomInfo.probCategory}</span>
             <span>{roomInfo.probNum} Round</span>
             {/* 게임 시작 후에 보일 부분 */}
-            <span>2/8</span>
+            <span>{quizNum}/{roomInfo.probNum}</span>
           </fieldset>
         </>
       )}

frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/GameBoard.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { useGameRoomStore } from '../../lib/store'
+import { useGameRoomStore, useRoundResultStore } from '../../lib/store'
 import { gameStateEnum } from '../../lib/store-type'
 import CountdownContent from '../boardContent/CountContent'
 import IntroductionContent from '../boardContent/IntroductionContent'
@@ -10,6 +10,9 @@ const GameBoard = () => {
     gameState: state.gameState,
     countdownGame: state.countdownGame,
   }))
+  const { setAnswer } = useRoundResultStore((state) => ({
+    setAnswer: state.setAnswer,
+  }))
 
   // useEffect(() => {
   //   countdownGame()
@@ -20,6 +23,7 @@ const GameBoard = () => {
       case gameStateEnum.READY:
         return <IntroductionContent />
       case gameStateEnum.COUNTDOWN:
+        setAnswer(null)
         return <CountdownContent />
       case gameStateEnum.GAME:
         return <QuizContent />

frontend/app/(page)/(needProtection)/game/component/gameInfoPanel/QuizResult.tsx

@@ -1,9 +1,13 @@
 import { useEffect, useState } from 'react'
 import { rankList, teamColorToCssText } from '../../lib/util'
-import { wonUserList } from '../../lib/dummy'
+import { wonUserList } from '../../lib/dummy' // dummy data
 import { teamEnum } from '../../lib/store-type'
+import { useRoundResultStore } from '../../lib/store'
 
 const QuizResult = () => {
+  const { roundResults } = useRoundResultStore((state) => ({
+    roundResults: state.roundResults,
+  }))
   const [result, setResult] = useState({
     winTeam: false,
     0: false,
@@ -48,27 +52,28 @@ const QuizResult = () => {
       </section>
       {/* 리스트 요소 하나씩 등장하기 */}
       <ul className="flex-1 flex flex-col gap-3 pt-5 justify-around">
-        {wonUserList.map((wonUser, index) => (
-          <li
-            key={index}
-            className={`${
-              result[index as keyof typeof result] ? 'visible animate-fadeIn' : 'invisible'
-            }
+        {roundResults &&
+          roundResults.map((wonUser, index) => (
+            <li
+              key={index}
+              className={`${
+                result[index as keyof typeof result] ? 'visible animate-fadeIn' : 'invisible'
+              }
             glass bg-opacity-60 flex gap-4 justify-around items-end px-3 py-2`}
-          >
-            <p className="font-semibold text-xl text-darkGray3">{rankList[wonUser.rank]}.</p>
-            <p className="fle1 flex flex-col items-start">
-              <span className="font-normal text-xs text-darkGray3 h-3">{wonUser.time}초</span>
-              <span
-                className={`${
-                  teamColorToCssText[wonUser.team as teamEnum]
-                } font-medium text-xl overflow-hidden w-24 select-none truncate`}
-              >
-                {wonUser.nickname}
-              </span>
-            </p>
-          </li>
-        ))}
+            >
+              <p className="font-semibold text-xl text-darkGray3">{rankList[wonUser.rank]}.</p>
+              <p className="fle1 flex flex-col items-start">
+                <span className="font-normal text-xs text-darkGray3 h-3">{wonUser.time}초</span>
+                <span
+                  className={`${
+                    teamColorToCssText[wonUser.team as teamEnum]
+                  } font-medium text-xl overflow-hidden w-24 select-none truncate`}
+                >
+                  {wonUser.nickname}
+                </span>
+              </p>
+            </li>
+          ))}
       </ul>
     </div>
   )

frontend/app/(page)/(needProtection)/game/lib/store-type.ts

@@ -1,5 +1,5 @@
 import { IRoomInfo } from '../../lobby/lib/type'
-import { IGameResult, IGameScore, IQuiz, IUserInfo } from './type'
+import { IGameResult, IGameScore, IQuiz, IUserInfo, IUserRoundResult } from './type'
 
 // :: 게임 상태
 export enum gameStateEnum {
@@ -102,3 +102,10 @@ export interface IGameResultState {
   gameResult: IGameResult | null
   setGameResult: (gameResult: IGameResult) => void
 }
+
+export interface IRoundResultState {
+  answer: AnswerEnum | null
+  roundResults: IUserRoundResult[] | null
+  setAnswer: (answer: AnswerEnum | null) => void
+  setRoundResults: (gameResults: IUserRoundResult[]) => void
+}

frontend/app/(page)/(needProtection)/game/lib/store.ts

@@ -12,11 +12,12 @@ import {
   IModalState,
   IPlayerState,
   IQuizState,
+  IRoundResultState,
   ITeamSetBoardState,
   playerMoveStateEnum,
   teamEnum,
 } from './store-type'
-import { IQuiz, IUserInfo } from './type'
+import { IQuiz, IUserInfo, IUserRoundResult } from './type'
 
 // :: RoomStore
 export const useGameRoomStore = create<IGameRoomState>()(
@@ -193,3 +194,22 @@ export const useGameResultStore = create<IGameResultState>()(
     { name: 'GameResultStore' }
   )
 )
+
+// :: 매 라운드 결과 (정답 팀, 정답자 순위, 정답 팀의 획득 포인트)
+export const useRoundResultStore = create<IRoundResultState>()(
+  devtools(
+    immer((set) => ({
+      answer: null,
+      roundResults: null,
+      setAnswer: (answer: AnswerEnum | null) =>
+        set((state) => {
+          state.answer = answer
+        }),
+      setRoundResults: (roundResults: IUserRoundResult[]) =>
+        set((state) => {
+          state.roundResults = roundResults
+        }),
+    })),
+    { name: 'RoundResultStore' }
+  )
+)

frontend/app/(page)/(needProtection)/game/lib/type.d.ts

@@ -99,3 +99,11 @@ interface TeamResultProps {
   teamPoint: number
   teamResult: IUserResult[]
 }
+
+interface IUserRoundResult {
+  nickname: string
+  team: teamEnum
+  userId: number
+  rank: number
+  time: number
+}

frontend/app/(page)/(needProtection)/layout.tsx

@@ -18,7 +18,7 @@ const ProtectedLayout = ({
     case '/login':
       return (
         <ProtectedLogin>
-          <main className="pt-14 h-full">
+          <main className="pt-12 h-screen">
             <HeaderNavigationBar />
             {children}
           </main>
@@ -33,7 +33,7 @@ const ProtectedLayout = ({
       return (
         <ProtectedRoute>
           <ProtectedSocket>
-            <main className="pt-14 h-full">
+            <main className="pt-12 h-screen">
               <HeaderNavigationBar />
               {children}
             </main>

frontend/app/(page)/(needProtection)/lobby/component/WaitingRoomList.tsx

@@ -29,7 +29,7 @@ const WaitingRoomList: React.FC = () => {
       {roomList.length > 0 ? (
         roomList.map((room) => <WaitingRoom key={room.roomId} room={room} />)
       ) : (
-        <fieldset className="flex flex-col gap-2 justify-center items-center col-span-2 pb-10 text-black select-none">
+        <fieldset className="flex flex-col gap-2 justify-center h-[calc(100vh/2)] items-center col-span-2 pb-10 text-black select-none">
           <p className="text-xl">현재 만들어진 방이 없습니다 👀</p>
           <p className='font-light text-darkGray2'>새로운 방을 만들어 보세요</p>
         </fieldset>

frontend/app/(page)/(needProtection)/lobby/page.tsx

@@ -13,7 +13,7 @@ const Lobby = () => {
   useSetupSocket(socket)
 
   return (
-    <main className="grid grid-cols-3 grid-rows-3 h-[calc(100vh-3.5rem)]">
+    <main className="grid grid-cols-3 grid-rows-3 h-[calc(100vh-3rem)]">
       <section className="col-span-3 row-span-2 ">
         <WaitingRoomList />
       </section>

frontend/app/component/Navigation/HeaderNavigationBar.tsx

@@ -83,7 +83,7 @@ const HeaderNavigationBar = () => {
   }, [currentPath])
 
   return (
-    <section className="flex justify-between items-center absolute mt-2 bg-white top-0 h-12 w-full px-4 select-none">
+    <section className="flex justify-between items-center absolute bg-white top-0 h-12 w-full px-4 select-none">
       <div>
         <h1 className="text-purple-300 font-bold my-auto text-center text-2xl px-3">
           <Link href="/">LOGO</Link>

frontend/app/hooks/useSetupSocket.ts

@@ -4,14 +4,22 @@ import {
   useGameRoomStore,
   useGameScoreStore,
   useQuizStore,
+  useRoundResultStore,
 } from '../(page)/(needProtection)/game/lib/store'
 import { useWaitingRoomStore } from '../(page)/(needProtection)/lobby/lib/store'
-import { IGameResult, IGameScore, IQuiz, IUserInfo } from '../(page)/(needProtection)/game/lib/type'
+import {
+  IGameResult,
+  IGameScore,
+  IQuiz,
+  IUserInfo,
+  IUserRoundResult,
+} from '../(page)/(needProtection)/game/lib/type'
 import { IRoomInfo, IRoomOfLobby } from '../(page)/(needProtection)/lobby/lib/type'
 import { SOCKET_RES_CODE } from '../lib/type.d'
 import { useEffect } from 'react'
 import { IChat, useChatLogsStore } from '../lib/store'
 import { setUserScores } from '../lib/util'
+import { AnswerEnum } from '../(page)/(needProtection)/game/lib/store-type'
 
 // 채팅 관련 소켓 셋팅
 // - 대기방 + 게임방 공통으로 사용
@@ -129,9 +137,14 @@ const useSetUpGame = (socket: WebSocket | null) => {
   const { setQuiz } = useQuizStore()
   const { setGameScore } = useGameScoreStore()
   const { setGameResult } = useGameResultStore()
+  const { setAnswer, setRoundResults } = useRoundResultStore((state) => ({
+    setAnswer: state.setAnswer,
+    setRoundResults: state.setRoundResults,
+  }))
   const router = useRouter()
 
   const successUpdateRoomInfo = (roomInfo: IRoomOfLobby) => {
+    console.log('방 정보 업데이트 성공 응답', roomInfo)
     setRoomInfo({
       roomId: roomInfo.roomId,
       roomTitle: roomInfo.roomTitle,
@@ -182,6 +195,12 @@ const useSetUpGame = (socket: WebSocket | null) => {
     setGameUserList(newUserList)
   }
 
+  const successQuizAnswerRank = (data: { answer: AnswerEnum; userRank: IUserRoundResult[] }) => {
+    console.log('매 라운드 퀴즈 정답 및 정답자 순위 발표')
+    setAnswer(data.answer)
+    setRoundResults(data.userRank)
+  }
+
   const setUpGame = () => {
     if (socket === null || socket.readyState !== WebSocket.OPEN) {
       console.log('Socket is null or not connected.')
@@ -239,6 +258,10 @@ const useSetUpGame = (socket: WebSocket | null) => {
           console.log('다른 유저 방 나갔음 응답')
           successOtherUserExit(responseData.data.userList)
           break
+        case SOCKET_RES_CODE.ANSWER_TOP:
+          console.log('매 라운드 퀴즈 정답 및 정답자 순위 발표')
+          successQuizAnswerRank(responseData.data)
+          break
         default:
           console.log('이벤트 코드가 없습니다. 현재는 채팅에 대한 이벤트 코드가 없습니다.')
           break

frontend/app/layout.tsx

@@ -6,7 +6,7 @@ import ReactQueryProviders from './hooks/useReactQuery'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
+  title: '🎲 모 아니면 도',
   description: 'Generated by create next app',
 }
 
@@ -17,10 +17,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>
-        <ReactQueryProviders>
-          <div id="root">{children}</div>
-        </ReactQueryProviders>
+      <body id="root" className={inter.className}>
+        <ReactQueryProviders>{children}</ReactQueryProviders>
       </body>
     </html>
   )

frontend/app/lib/type.d.ts

@@ -27,7 +27,7 @@ export enum SOCKET_RES_CODE {
   MOVE_CHARACTER = 110, // "유저 이동",
   CHANGE_ZONE_OWNER = 120, // null,
   CHANGE_ZONE_OTHER = 121, // null,
-  ANSWER_TOP = 130, // null,
+  ANSWER_TOP = 130, // "매 라운드 퀴즈 정답 및 정답자 순위 발표",
   NEXT_QUESTION = 140, // "다음 문제 출제",
   GAME_RESULT_INFO = 150, // "게임 결과(우승팀 및 유저별 획득 포인트)",
   ONE_PROBLEM_END_GET_TEAM_POINT = 160, // "현재 팀 별 총 점수와 개인 점수 응답",

frontend/app/page.tsx

@@ -19,7 +19,7 @@ export default function Home() {
   return (
     <>
       <HeaderNavigationBar />
-      <main className="flex h-full items-center justify-between mx-10 px-10 pt-14">
+      <main className="flex h-[calc(100%-3rem)] items-center justify-between px-10 pt-12">
         <fieldset className="flex flex-col gap-16 w-1/2">
           <AutoInstruction />
           <button
@@ -30,7 +30,7 @@ export default function Home() {
           </button>
         </fieldset>
 
-        <fieldset className="h-full my-auto w-1/2">
+        <fieldset className="h-[90%] my-auto w-1/2">
           <PreviewImage />
         </fieldset>
       </main>