Create 컴포넌트 및 관련 타입 추가

@@ -12,6 +12,7 @@ export interface RawMessage {
 export const MessageType = {
 export const MessageType = {
   LOGIN: "login",
   LOGIN: "login",
   ROOM_LIST_REQUEST: "roomList",
   ROOM_LIST_REQUEST: "roomList",
+  ROOM_LIST_CREATE: "createRoom",
   ROOM_JOIN: "joinRoom",
   ROOM_JOIN: "joinRoom",
   ROOM_LEAVE: "leaveRoom",
   ROOM_LEAVE: "leaveRoom",
   ROOM_USER_UPDATE: "updateRoomUser",
   ROOM_USER_UPDATE: "updateRoomUser",

+import React, { useCallback, useContext, useState } from 'react';
+import SocketContext from '../../contexts/SocketContext';
+import { MessageResponse, MessageType, RawMessage } from '../common/types';
+import { Room } from './types';
+
+export const Create: React.FC = () => {
+  const socket = useContext(SocketContext);
+  const [ roomName, setRoomName ] = useState('');
+
+  const createRooms = useCallback(() => {
+    const rawMessage: RawMessage = {
+      type: MessageType.ROOM_LIST_CREATE,
+      message: { name: roomName }
+    }
+    socket.emit('msg', rawMessage, (response: MessageResponse<Room[]>) => {
+      if (response.ok) {
+        // HOW?
+      }
+    });
+  }, [roomName]);
+  
+  return (
+    <div>
+      <input type="text"
+                placeholder="Username"
+                className="px-3 py-1.5 bg-white
+                    placeholder-gray-400 text-gray-700 text-sm
+                    rounded shadow outline-none focus:outline-none"
+                value={roomName}
+                onChange={e => setRoomName(e.target.value)}
+            />
+      <button className="bg-green-500 active:bg-green-600
+                            text-white uppercase text-xl
+                            w-10 h-8 pb-0.5 ml-3 rounded shadow round
+                            outline-none focus:outline-none hover:shadow-md
+                            ease-linear transition-all duration-100"
+                    type="button"
+                    onClick={() => createRooms()}>+</button>
+    </div>
+  );
+}