Ready 컴포넌트와 관련 타입 추가

@@ -16,4 +16,6 @@ export const MessageType = {
   ROOM_LEAVE: "leaveRoom",
   ROOM_LEAVE: "leaveRoom",
   ROOM_USER_UPDATE: "updateRoomUser",
   ROOM_USER_UPDATE: "updateRoomUser",
   ROOM_CHAT: "chat",
   ROOM_CHAT: "chat",
+  ROOM_READY: "ready",
+  ROOM_START: "startGame"
 } as const
 } as const
\ No newline at end of file

+import React, { useCallback, useContext } from 'react';
+import SocketContext from '../../contexts/SocketContext';
+import { MessageType, RawMessage } from '../common/types';
+
+interface ReadyProps {
+  isReady: boolean;
+  isAdmin: boolean;
+  isAllReady: boolean;
+}
+
+export const Ready: React.FC<ReadyProps> = ({ isReady, isAdmin, isAllReady }) => {
+  const socket = useContext(SocketContext);
+  const handleReady = useCallback(() => {
+    if (isAdmin && isAllReady) {
+      const rawMessage: RawMessage = {
+        type: MessageType.ROOM_READY,
+        message: {}
+      }
+      socket.emit('msg', rawMessage, () => {});
+    } else {
+      const rawMessage: RawMessage = {
+        type: MessageType.ROOM_READY,
+        message: { ready: !isReady }
+      }
+      socket.emit('msg', rawMessage, () => {});
+    }
+  }, []);
+
+  return (
+    <button className={`${isAdmin ? isAllReady ? 'bg-green-500' : 'bg-gray-400'
+                            : isReady ? 'bg-green-600'
+                            : 'bg-green-500 active:bg-green-600'} 
+                            text-white font-bold uppercase text-sm
+                            px-5 py-2 ml-3 rounded shadow
+                            outline-none focus:outline-none hover:shadow-md
+                            ease-linear transition-all duration-100`}
+                    type="button"
+                    onClick={() => {}}>{isAdmin ? 'Start' : 'Ready'}</button>
+  );
+}