RoomData 핸들링을 RoomInfo에서 Room으로 옮김

@@ -4,74 +4,11 @@ import SocketContext from '../../contexts/SocketContext';
 import { MessageResponse, MessageType, RawMessage } from '../common/types';
 import { MessageResponse, MessageType, RawMessage } from '../common/types';
 import { RoomData, UpdateRoomUser } from './types';
 import { RoomData, UpdateRoomUser } from './types';
 
 
-interface RoomInfoLocation {
-  state: { roomData: RoomData }
+interface RoomInfoProps {
+  roomData: RoomData;
 }
 }
 
 
-export const RoomInfo: React.FC = () => {
-  const history = useHistory();
-  const socket = useContext(SocketContext);
-  const location: RoomInfoLocation = useLocation();
-
-  const [ roomData, setRoomData ] = useState<RoomData>({
-    // 기본값
-    uuid: '0',
-    name: 'loading...',
-    maxUsers: 9,
-    users: []
-  });
-
-  const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
-    if (rawMessage.type == MessageType.ROOM_USER_UPDATE) {
-      const data = rawMessage.message as UpdateRoomUser;
-      console.log(data);
-      if (data.state == 'removed') {
-        const newUsers = roomData.users;
-        const index = newUsers.indexOf(data.user);
-        if (index < 0) {
-          console.log('존재하지 않는 유저를 제거 시도');
-        } else {
-          newUsers.splice(index, 1);
-        }
-        setRoomData({
-          ...roomData,
-          users: newUsers
-        });
-      } else if (data.state == 'added') {
-        setRoomData({
-          ...roomData,
-          users: [data.user, ...roomData.users]
-        });
-      }
-    }
-  }, [roomData]);
-
-  useEffect(() => {
-    socket.on('msg', handleUpdateRoomUser);
-    
-    return () => {
-      socket.off('msg', handleUpdateRoomUser);
-    }
-  }, [roomData]);
-
-  useEffect(() => {
-    // 비정상적인 루트로 방을 들어오면 로그인 화면으로 푸시
-    if (location.state === undefined) {
-      history.push('/');
-      return;
-    }
-
-    setRoomData(location.state.roomData);
-
-    return () => {
-      const rawMessage: RawMessage = {
-        type: MessageType.ROOM_LEAVE,
-        message: ''
-      }
-      socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {});
-    }
-  }, [])
-
+export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
   return (
   return (
     <div className='m-3 w-5/6 flex items-center place-content-between'>
     <div className='m-3 w-5/6 flex items-center place-content-between'>
       <div>{roomData.name}</div>
       <div>{roomData.name}</div>

-import React, { useContext } from 'react';
-import { useLocation } from 'react-router';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router';
 import { Main } from '../components/common/Main';
 import { Main } from '../components/common/Main';
+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 { RoomInfo } from '../components/room/RoomInfo';
 import { RoomInfo } from '../components/room/RoomInfo';
+import { RoomData, UpdateRoomUser } from '../components/room/types';
 import SocketContext from '../contexts/SocketContext';
 import SocketContext from '../contexts/SocketContext';
 
 
+interface RoomLocation {
+  state: { roomData: RoomData }
+}
+
 export const Room: React.FC = () => {
 export const Room: React.FC = () => {
+  const history = useHistory();
+  const socket = useContext(SocketContext);
+  const location: RoomLocation = useLocation();
+
+  const [ roomData, setRoomData ] = useState<RoomData>({
+    // 기본값
+    uuid: '0',
+    name: 'loading...',
+    maxUsers: 9,
+    users: []
+  });
+
+  const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
+    if (rawMessage.type == MessageType.ROOM_USER_UPDATE) {
+      const data = rawMessage.message as UpdateRoomUser;
+      console.log(data);
+      if (data.state == 'removed') {
+        const newUsers = roomData.users;
+        const index = newUsers.indexOf(data.user);
+        if (index < 0) {
+          console.log('존재하지 않는 유저를 제거 시도');
+        } else {
+          newUsers.splice(index, 1);
+        }
+        setRoomData({
+          ...roomData,
+          users: newUsers
+        });
+      } else if (data.state == 'added') {
+        setRoomData({
+          ...roomData,
+          users: [data.user, ...roomData.users]
+        });
+      }
+    }
+  }, [roomData]);
+
+  useEffect(() => {
+    socket.on('msg', handleUpdateRoomUser);
+    
+    return () => {
+      socket.off('msg', handleUpdateRoomUser);
+    }
+  }, [roomData]);
+
+  useEffect(() => {
+    // 비정상적인 루트로 방을 들어오면 로그인 화면으로 푸시
+    if (location.state === undefined) {
+      history.push('/');
+      return;
+    }
+
+    setRoomData(location.state.roomData);
+
+    return () => {
+      const rawMessage: RawMessage = {
+        type: MessageType.ROOM_LEAVE,
+        message: ''
+      }
+      socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {});
+    }
+  }, [])
+  
   return (
   return (
     <Main>
     <Main>
-      <RoomInfo />
+      <RoomInfo roomData={roomData}/>
       <div className='w-full flex'>
       <div className='w-full flex'>
           <Canvas />
           <Canvas />
           <Chat />
           <Chat />