handleUpdateRoomUser가 실시간 반영되도록 수정

@@ -23,12 +23,8 @@ export const RoomInfo: React.FC = () => {
   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;
-      if (data.state == 'added') {
-        setRoomData({
-          ...roomData,
-          users: [data.user, ...roomData.users] // TODO: immutable.js로 바꾸면 좋을 듯
-        });
-      } else if (data.state == 'removed') {
+      console.log(data);
+      if (data.state == 'removed') {
         const newUsers = roomData.users;
         const newUsers = roomData.users;
         const index = newUsers.indexOf(data.user);
         const index = newUsers.indexOf(data.user);
         if (index < 0) {
         if (index < 0) {
@@ -40,24 +36,34 @@ export const RoomInfo: React.FC = () => {
           ...roomData,
           ...roomData,
           users: newUsers
           users: newUsers
         });
         });
+      } else if (data.state == 'added') {
+        setRoomData({
+          ...roomData,
+          users: [data.user, ...roomData.users]
+        });
       }
       }
     }
     }
-  }, []);
+  }, [roomData]);
 
 
   useEffect(() => {
   useEffect(() => {
-    setRoomData(location.state.roomData);
     socket.on('msg', handleUpdateRoomUser);
     socket.on('msg', handleUpdateRoomUser);
-
+    
     return () => {
     return () => {
       socket.off('msg', handleUpdateRoomUser);
       socket.off('msg', handleUpdateRoomUser);
-      
+    }
+  }, [roomData]);
+
+  useEffect(() => {
+    setRoomData(location.state.roomData);
+
+    return () => {
       const rawMessage: RawMessage = {
       const rawMessage: RawMessage = {
         type: MessageType.ROOM_LEAVE,
         type: MessageType.ROOM_LEAVE,
         message: ''
         message: ''
       }
       }
       socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {});
       socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {});
     }
     }
-  }, []);
+  }, [])
 
 
   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'>