RoundInfo 컴포넌트 추가 및 적용

@@ -3,6 +3,7 @@ import { useLocation } from 'react-router';
 import SocketContext from '../../contexts/SocketContext';
 import SocketContext from '../../contexts/SocketContext';
 import { MessageType, RawMessage } from '../common/types';
 import { MessageType, RawMessage } from '../common/types';
 import { Canvas } from './Canvas';
 import { Canvas } from './Canvas';
+import { RoundInfo } from './RoundInfo';
 import { Role, RoundData } from './types';
 import { Role, RoundData } from './types';
 import { Word } from './Word';
 import { Word } from './Word';
 
 
@@ -21,6 +22,7 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
   const [ isDrawer, setIsDrawer ] = useState(false);
   const [ isDrawer, setIsDrawer ] = useState(false);
   const [ words, setWords ] = useState<string[]>([]);
   const [ words, setWords ] = useState<string[]>([]);
   const [ wordChosen, setWordChosen ] = useState('');
   const [ wordChosen, setWordChosen ] = useState('');
+  const [ round, setRound ] = useState(0);
 
 
   const handleWordSet = useCallback((rawMessage: RawMessage) => {
   const handleWordSet = useCallback((rawMessage: RawMessage) => {
     if (rawMessage.type === MessageType.GAME_WORDSET) {
     if (rawMessage.type === MessageType.GAME_WORDSET) {
@@ -40,6 +42,7 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
       const index = data.roles.findIndex(x => x.username === location.state.username);
       const index = data.roles.findIndex(x => x.username === location.state.username);
       setIsDrawer(data.roles[index].role === 'drawer');
       setIsDrawer(data.roles[index].role === 'drawer');
       setWordChosen('');
       setWordChosen('');
+      setRound(data.round);
     }
     }
   }, []);
   }, []);
 
 
@@ -69,6 +72,7 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
       <div className='w-full flex flex-col justify-center items-center'>
       <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} />))}
       {words.map((word, i) => (<Word key={word} index={i} word={word} setWordChosen={setWordChosen} setWords={setWords} />))}
       </div>
       </div>
+      <RoundInfo round={round} wordChosen={wordChosen}/>
       <Canvas isDrawer={isDrawer && wordChosen !== ''}/>
       <Canvas isDrawer={isDrawer && wordChosen !== ''}/>
     </div>
     </div>
   );
   );

+import React from 'react';
+import SocketContext from '../../contexts/SocketContext';
+import { RoundData } from './types';
+
+interface RoundInfoProps {
+  round: number;
+  wordChosen: string;
+}
+
+export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => {
+  return (
+    <div className='w-full p-3 flex items-center place-content-between'>
+      <div>대충 타이머 위치</div>
+      <div>{wordChosen}</div>
+      <div>R{round}</div>
+    </div>
+  );
+}
\ No newline at end of file