GameBoard 컴포넌트 추가 및 관련 컴포넌트 수정 작업

@@ -3,7 +3,11 @@ import { Vector } from './types';
 
 
 // 참고 : https://basketdeveloper.tistory.com/79
 // 참고 : https://basketdeveloper.tistory.com/79
 
 
-export const Canvas: React.FC = () => {
+interface CanvasProps {
+  isDrawer: boolean;
+}
+
+export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   
   
   const [mousePosition, setMousePosition] = useState<Vector>({ x:0, y:0 });
   const [mousePosition, setMousePosition] = useState<Vector>({ x:0, y:0 });
@@ -77,7 +81,7 @@ export const Canvas: React.FC = () => {
   }, []);
   }, []);
 
 
   useEffect(() => {
   useEffect(() => {
-    if (canvasRef.current) {
+    if (canvasRef.current && isDrawer) {
       const canvas: HTMLCanvasElement = canvasRef.current;
       const canvas: HTMLCanvasElement = canvasRef.current;
 
 
       canvas.addEventListener('mousedown', startPaint);
       canvas.addEventListener('mousedown', startPaint);
@@ -91,8 +95,10 @@ export const Canvas: React.FC = () => {
         canvas.removeEventListener('mouseup', exitPaint);
         canvas.removeEventListener('mouseup', exitPaint);
         canvas.removeEventListener('mouseleave', exitPaint);
         canvas.removeEventListener('mouseleave', exitPaint);
       };
       };
+    } else {
+      // 받아서 그리기
     }
     }
-  }, [startPaint, paint, exitPaint]);
+  }, [isDrawer, startPaint, paint, exitPaint]);
 
 
   return (
   return (
     <div className='mx-3 px-2 py-1 rounded shadow'>
     <div className='mx-3 px-2 py-1 rounded shadow'>

+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
+import SocketContext from '../../contexts/SocketContext';
+import { MessageType, RawMessage } from '../common/types';
+import { Canvas } from './Canvas';
+import { Role, RoundData } from './types';
+import { Word } from './Word';
+
+interface GameBoardLocation {
+  state: { username: string }
+}
+
+interface GameBoardProps {
+  isInGame: boolean
+}
+
+export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
+  const socket = useContext(SocketContext);
+  const location: GameBoardLocation = useLocation();
+
+  const [ isDrawer, setIsDrawer ] = useState(false);
+  const [ words, setWords ] = useState<string[]>([]);
+  const [ wordChosen, setWordChosen ] = useState('');
+
+  const handleWordSet = useCallback((rawMessage: RawMessage) => {
+    if (rawMessage.type === MessageType.GAME_WORDSET) {
+      console.log('단어 도착');
+      const { words } = rawMessage.message as { words: string[] };
+      setWords(words);
+    }
+  }, []);
+
+  const handleStart = useCallback((rawMessage: RawMessage) => {
+    if (rawMessage.type === MessageType.GAME_START) {
+      setWords([]);
+
+      const data = rawMessage.message as RoundData;
+      console.log('테스트 location ', location.state.username);
+      console.log('테스트 rolse ', data.roles);
+      const index = data.roles.findIndex(x => x.username === location.state.username);
+      setIsDrawer(data.roles[index].role === 'drawer');
+      setWordChosen('');
+    }
+  }, []);
+
+  const handleGetWordLength = useCallback((rawMessage: RawMessage) => {
+    if (rawMessage.type === MessageType.GAME_WORD) {
+      if (wordChosen !== '') {
+        const { length } = rawMessage.message as { length: number };
+        setWordChosen('_'.repeat(length));
+      }
+    }
+  }, [wordChosen]);
+
+  useEffect(() => {
+    socket.on('msg', handleStart);
+    socket.on('msg', handleGetWordLength);
+    socket.on('msg', handleWordSet);
+
+    return () => {
+      socket.off('msg', handleStart);
+      socket.off('msg', handleGetWordLength);
+      socket.off('msg', handleWordSet);
+    }
+  }, []);
+
+  return (
+    <div className={`w-auto ${isInGame ? '' : 'hidden'}`}>
+      <div className='w-full flex flex-col justify-center items-center'>
+      {words.map((word, i) => (<Word key={word} index={i} word={word} setWordChosen={setWordChosen} setWords={setWords} />))}
+      </div>
+      <Canvas isDrawer={isDrawer && wordChosen !== ''}/>
+    </div>
+  );
+}
\ No newline at end of file

@@ -4,6 +4,7 @@ import { Main } from '../components/common/Main';
 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
 import { Canvas } from '../components/room/Canvas';
 import { Canvas } from '../components/room/Canvas';
 import { Chat } from '../components/room/Chat';
 import { Chat } from '../components/room/Chat';
+import { GameBoard } from '../components/room/GameBoard';
 import { Ready } from '../components/room/Ready';
 import { Ready } from '../components/room/Ready';
 import { RoomInfo } from '../components/room/RoomInfo';
 import { RoomInfo } from '../components/room/RoomInfo';
 import { RoomData, UpdateRoomUser } from '../components/room/types';
 import { RoomData, UpdateRoomUser } from '../components/room/types';
@@ -29,6 +30,14 @@ export const Room: React.FC = () => {
   });
   });
   const [ isInGame, setIsInGame ] = useState(false);
   const [ isInGame, setIsInGame ] = useState(false);
 
 
+  const handleInGame = useCallback((rawMessage: RawMessage) => {
+    if (rawMessage.type === MessageType.GAME_START) {
+      setIsInGame(true);
+    } else if (rawMessage.type === MessageType.GAME_FINISH_GAME) {
+      setIsInGame(false);
+    }
+  }, []);
+
   const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
   const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
     if (rawMessage.type == MessageType.ROOM_USER_UPDATE) {
     if (rawMessage.type == MessageType.ROOM_USER_UPDATE) {
       const data = rawMessage.message as UpdateRoomUser;
       const data = rawMessage.message as UpdateRoomUser;
@@ -81,8 +90,11 @@ export const Room: React.FC = () => {
     }
     }
 
 
     setRoomData(location.state.roomData);
     setRoomData(location.state.roomData);
+    socket.on('msg', handleInGame);
 
 
     return () => {
     return () => {
+      socket.off('msg', handleInGame);
+
       const rawMessage: RawMessage = {
       const rawMessage: RawMessage = {
         type: MessageType.ROOM_LEAVE,
         type: MessageType.ROOM_LEAVE,
         message: ''
         message: ''
@@ -94,20 +106,21 @@ export const Room: React.FC = () => {
   return (
   return (
     <Main>
     <Main>
       <RoomInfo roomData={roomData}/>
       <RoomInfo roomData={roomData}/>
-      {
-        isInGame ? (
-          <div className='w-full flex'>
-            <Canvas />
-            <Chat w='w-4/12' h='h-80' />
-          </div>
-        ) : (
-          <div className='w-full flex flex-col justify-center items-center'>
-            <UserInfo users={roomData.users}/>
-            <Ready users={roomData.users} />
-            <Chat w='w-7/12' h='h-96' />
-          </div>
-        )
-      }
+      <div className='w-full flex'>
+        {/* 게임보드를 계속 살려둬서 리스너를 항상 열어놓도록 하자 */}
+        <GameBoard isInGame={isInGame} />
+        {
+          isInGame ? (
+              <Chat w='w-4/12' h='h-80' />  
+          ) : (
+            <div className='w-full flex flex-col justify-center items-center'>
+              <UserInfo users={roomData.users}/>
+              <Ready users={roomData.users} />
+              <Chat w='w-7/12' h='h-96' />
+            </div>
+          )
+        }
+      </div>
     </Main>
     </Main>
   );
   );
 }
 }
\ No newline at end of file