RoomBlock 컴포넌트 리팩터 (useCallback, 프로토콜 규격)

@@ -12,7 +12,7 @@ export interface RawMessage {
 export const MessageType = {
   LOGIN: "login",
   ROOM_LIST_REQUEST: "roomList",
-  ROOM_JOIN: "room_join",
+  ROOM_JOIN: "joinRoom",
   ROOM_LEAVE: "room_leave",
   ROOM_USER_UPDATE: "room_user_update",
   ROOM_CHAT: "room_chat",

-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import { useHistory } from 'react-router';
 import SocketContext from '../../contexts/SocketContext';
-import { MessageResponse, MessageType } from '../common/types';
+import { MessageResponse, MessageType, RawMessage } from '../common/types';
 import { RoomData } from '../room/types';
 import { Room } from './types';
 
@@ -12,9 +12,13 @@ interface RoomBlockProps {
 export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
   const history = useHistory();
   const socket = useContext(SocketContext);
-  const joinRoom = () => {
+  const joinRoom = useCallback(() => {
     if (room.currentUsers < room.maxUsers) {
-      socket.emit(MessageType.ROOM_JOIN, (response: MessageResponse<RoomData>) => {
+      const rawMessage: RawMessage = {
+        type: MessageType.ROOM_JOIN,
+        message: { uuid: room.uuid }
+      }
+      socket.emit('msg', rawMessage, (response: MessageResponse<RoomData>) => {
         if (response.ok) {
           history.push({
             pathname: '/' + room.uuid,
@@ -27,7 +31,7 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
     } else {
       //TODO: 자리 꽉찼다는 MODAL
     }
-  }
+  }, []);
 
   return (
     <button className={`flex items-center place-content-between m-2 w-5/6