Merge branch 'develop' of http://khuhub.khu.ac.kr/2020105578/nodejs-game into develop

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

@@ -12,7 +12,7 @@ export const UserStatus: React.FC<UserStatusProps> = ({ user }) => {
                     user.ready ? 'text-green-500' : 'text-black'} 
                     text-lg text-center align-middle
                     ease-linear transition-all duration-100`}>
-                      {user.username}</div>
+                      {user.nickname}</div>
     </div>
   )
 }
\ No newline at end of file

@@ -7,17 +7,14 @@ export interface RoomData {
 
 export interface User {
   username: string;
+  nickname: string;
   admin: boolean;
   ready: boolean;
 }
 
 export interface UpdateRoomUser {
   state: "added" | "updated" | "removed";
-  user: {
-    username: string;
-    admin: boolean;
-    ready: boolean;
-  };
+  user: User;
 }
 
 export interface ChatData {

+import React, { useCallback, useContext, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import SocketContext from '../../contexts/SocketContext';
+import { MessageResponse, MessageType, RawMessage } from '../common/types';
+import { RoomData } from '../room/types';
+import { Room } from './types';
+
+interface CreateLocation {
+  state: { username: string }
+}
+
+export const Create: React.FC = () => {
+  const history = useHistory();
+  const socket = useContext(SocketContext);
+  const [ roomName, setRoomName ] = useState('');
+  const location: CreateLocation = useLocation();
+
+  const createRooms = useCallback(() => {
+    const rawMessage: RawMessage = {
+      type: MessageType.ROOM_LIST_CREATE,
+      message: { name: roomName }
+    }
+    socket.emit('msg', rawMessage, (response: MessageResponse<RoomData>) => {
+      if (response.ok) {
+        history.push({
+          pathname: '/' + response.result!.uuid,
+          state: {
+            username: location.state.username,
+            roomData: response.result!
+          }
+        });
+      } else {
+        console.log('방 생성 오류');
+      }
+    });
+  }, [roomName]);
+  
+  return (
+    <div className="flex items-center">
+      <input type="text"
+                placeholder="Room name"
+                className="h-8 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>
+  );
+}

+import React from 'react';
+
+interface RefreshProps {
+  refreshRooms: () => void
+}
+
+export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => {
+  return (
+    <button className="bg-green-500 active:bg-green-600
+                            text-white uppercase text-xl
+                            w-10 h-8 pb-0.5 mr-2 rounded shadow round
+                            outline-none focus:outline-none hover:shadow-md
+                            ease-linear transition-all duration-100"
+                    type="button"
+                    onClick={() => refreshRooms()}>⟳</button>
+  );
+}

@@ -12,13 +12,13 @@ export const Login: React.FC = () => {
     const login = useCallback(() => {
       const rawMessage: RawMessage = {
         type: MessageType.LOGIN,
-        message: { username }
+        message: { nickname: username }
       }
-      socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {
+      socket.emit('msg', rawMessage, (response : MessageResponse<string>) => {
         if (response.ok) {
           history.push({
             pathname: '/rooms',
-            state: { username: username }
+            state: { username: response.result }
           });
         } else {
           console.error('login error!'); // TODO: 팝업 에러?

@@ -2,6 +2,8 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
 import { Main } from '../components/common/Main';
 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
+import { Create } from '../components/rooms/Create';
+import { Refresh } from '../components/rooms/Refrsh';
 import { RoomBlock } from '../components/rooms/RoomBlock';
 import { Room } from '../components/rooms/types';
 import SocketContext from '../contexts/SocketContext';
@@ -30,6 +32,10 @@ export const Rooms: React.FC = () => {
 
   return (
     <Main>
+      <div className='mt-8 flex'>
+        <Refresh refreshRooms={refreshRooms}/>
+        <Create />
+      </div>
       <div className='mt-auto w-screen flex flex-col items-center'>
         {rooms.map((room) => (<RoomBlock key={room.uuid} room={room} />))}
       </div>