Merge pull request #97 from 5wonju/feat/#75-game-board-interval

Feat/#75 game board interval
5wonju · May 14, 2024 · cfa85f3 · cfa85f3
2 parents ddf2e5c + bd7c558
commit cfa85f3
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 19 deletions.
diff --git a/frontend/app/(page)/(needProtection)/game/component/boardContent/IntroductionContent.tsx b/frontend/app/(page)/(needProtection)/game/component/boardContent/IntroductionContent.tsx
@@ -1,26 +1,79 @@
+import { PiPersonArmsSpreadFill } from 'react-icons/pi'
 import RoomInfo from './RoomInfo'
+import { useEffect, useState } from 'react'
+
+const TeamSelectContent = () => {
+  return (
+    <fieldset className="flex flex-col gap-4 pt-2 items-center justify-around text-black transition-colors">
+      {/* TODO: 문구 의논해서 정하기 */}
+      <h2 className="text-3xl font-medium">팀을 선택하세요</h2>
+      <div className="text-md flex flex-col items-center gap-1">
+        <p className="*:font-bold">
+          <span className="text-red-500">RED</span> 혹은
+          <span className="text-blue-500"> BLUE</span> 필드로 이동해 팀을 선택하세요
+        </p>
+        <p className="text-md text-center">
+          우측 하단의
+          <button className="bg-indigo-600 text-white font-semibold bg-gradient-to-bl from-indigo-400 to-indigo-600 border-4 border-lightGray4 rounded-full py-1.5 px-1.5 shadow-md mx-1">
+            <PiPersonArmsSpreadFill className="size-4 m-auto text-center" />
+          </button>
+          버튼을 눌러 캐릭터를 변경해 보세요
+        </p>
+      </div>
+    </fieldset>
+  )
+}
+
+const GameRuleContent = () => {
+  return (
+    <fieldset className="flex flex-col gap-4 pt-2 items-center justify-around text-black transition-colors">
+      <h2 className="text-3xl font-medium">매 라운드 퀴즈가 출제됩니다</h2>
+      <div className="text-md flex flex-col items-center gap-1">
+        <p className="flex">
+          {['A', 'B', 'C', 'D'].map((answer, index) => (
+            <>
+              <span
+                key={answer}
+                className="font-medium bg-indigo-600 text-white rounded-full size-6 flex items-center justify-center"
+              >
+                {answer}
+              </span>
+              <span className="last:invisible pr-1">,</span>
+            </>
+          ))}
+          중 정답이라고 생각되는 구역으로 이동해서 정답을 선택하세요
+        </p>
+        <p className="flex text-md items-center justify-center">
+          정답을 가장 먼저 맞춘 3인에게 점수가 부여됩니다
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Clapping%20Hands%20Light%20Skin%20Tone.png"
+            alt="Clapping Hands Light Skin Tone"
+            width="25"
+            height="25"
+          />
+        </p>
+      </div>
+    </fieldset>
+  )
+}
 
 const IntroductionContent = () => {
+  // TeamSelectContent, GameRuleContent가 각각 번갈아가면서 보여짐
+  const [currentContent, setCurrentContent] = useState(0)
+  const contents = [TeamSelectContent, GameRuleContent]
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentContent((prev) => (prev + 1) % contents.length)
+    }, 5000)
+    return () => clearInterval(interval)
+  }, [contents.length])
+
   return (
     <div className="select-none flex flex-col justify-around h-full">
       <RoomInfo />
-      <fieldset className="flex flex-col gap-4 pt-2 items-center justify-around text-black">
-        {/* TODO: 문구 의논해서 정하기 */}
-        <h2 className="text-4xl font-medium">원하는 팀을 고르세요</h2>
-        <div className="text-md flex flex-col items-center gap-1">
-          <p>
-            <span className="text-red-500">RED</span> 혹은
-            <span className="text-blue-500"> BLUE</span> 필드로 이동해 팀을 선택하세요
-          </p>
-          <p className="text-md text-center">
-            우측 하단의
-            <span className="bg-indigo-600 rounded-full px-2 py-1 mx-2 text-white">
-              캐릭터 변경
-            </span>
-            버튼을 눌러 캐릭터를 변경해 보세요
-          </p>
-        </div>
-      </fieldset>
+      {contents[currentContent]()}
     </div>
   )
 }

diff --git a/frontend/app/hooks/useSetupSocket.ts b/frontend/app/hooks/useSetupSocket.ts
@@ -108,8 +108,8 @@ const useSetUpRoom = (socket: WebSocket | null) => {
           successGetRoomList(responseData.data.roomList)
           break
         case SOCKET_RES_CODE.CREATE_ROOM:
-          console.log('방 생성 성공 응답')
-          successCreateRoom(responseData.data.roomId)
+          console.log('방 생성 성공 응답', responseData.data)
+          successCreateRoom(responseData.data)
           break
         case SOCKET_RES_CODE.ENTER_ROOM_OWNER:
           console.log('방 입장 성공 응답')