Room에서 인게임 여부에 따라 구성이 변화하도록 수정

@@ -24,6 +24,7 @@ export const Room: React.FC = () => {
     maxUsers: 9,
     maxUsers: 9,
     users: []
     users: []
   });
   });
+  const [ isInGame, setIsInGame ] = useState(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) {
@@ -79,10 +80,18 @@ export const Room: React.FC = () => {
   return (
   return (
     <Main>
     <Main>
       <RoomInfo roomData={roomData}/>
       <RoomInfo roomData={roomData}/>
-      <div className='w-full flex'>
-          <Canvas />
-          <Chat />
-      </div>
+      {
+        isInGame ? (
+          <div className='w-full flex'>
+            <Canvas />
+            <Chat w='w-4/12' h='h-80' />
+          </div>
+        ) : (
+          <div className='w-full flex justify-center'>
+            <Chat w='w-9/12' h='h-96' />
+          </div>
+        )
+      }
     </Main>
     </Main>
   );
   );
 }
 }
\ No newline at end of file