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

+import React from 'react';
+import { Footer } from './Footer';
+
+export const Main: React.FC = ({ children }) => {
+  return (
+    <div className="flex flex-col items-center w-screen h-screen">
+      {children}
+      <Footer/>
+    </div>
+  );
+}
\ No newline at end of file

+export interface RoomData {
+  uuid: string;
+  name: string;
+  maxUsers: number;
+  users: string[];
+}

-import React from 'react';
+import React, { useContext } from 'react';
+import { useHistory } from 'react-router';
+import SocketContext from '../../contexts/SocketContext';
+import { MessageResponse, MessageType } from '../common/types';
+import { RoomData } from '../room/types';
 import { Room } from './types';
 import { Room } from './types';
 
 
 interface RoomProps {
 interface RoomProps {
@@ -6,16 +10,37 @@ interface RoomProps {
 }
 }
 
 
 export const RoomInfo: React.FC<RoomProps> = ({ room }) => {
 export const RoomInfo: React.FC<RoomProps> = ({ room }) => {
+  const history = useHistory();
+  const socket = useContext(SocketContext);
+  const joinRoom = () => {
+    if (room.currentUsers < room.maxUsers) {
+      socket.emit(MessageType.ROOM_JOIN, (response: MessageResponse<RoomData>) => {
+        if (response.ok) {
+          history.push({
+            pathname: '/' + room.uuid,
+            state: {roomData: response.result!}
+          });
+        } else {
+          //TODO: 에러 MODAL을 어케띄우지? 하위컴포넌트에서 훅을 쓰면 어떻게 되는지 확인
+        }
+      })
+    } else {
+      //TODO: 자리 꽉찼다는 MODAL
+    }
+  }
+
   return (
   return (
-    <div className={`flex items-center place-content-between m-2 w-5/6 
+    <button className={`flex items-center place-content-between m-2 w-5/6 
                   ${room.currentUsers < room.maxUsers ?
                   ${room.currentUsers < room.maxUsers ?
                     'bg-white active:bg-green-100' :
                     'bg-white active:bg-green-100' :
                     'bg-gray-200 active:bg-gray-200'}
                     'bg-gray-200 active:bg-gray-200'}
-                  rounded shadow hover:shadow-md`}>
+                  rounded shadow hover:shadow-md
+                  outline-none focus:outline-none`}
+            onClick={joinRoom}>
       <span className='mt-2 mb-2 ml-3 text-gray-600 text-lg'>{room.name}</span>
       <span className='mt-2 mb-2 ml-3 text-gray-600 text-lg'>{room.name}</span>
       <span className='mt-2 mb-2 mr-3 text-gray-500 text-right'>
       <span className='mt-2 mb-2 mr-3 text-gray-500 text-right'>
         {room.currentUsers}/{room.maxUsers}
         {room.currentUsers}/{room.maxUsers}
       </span>
       </span>
-    </div>
+    </button>
   );
   );
 }
 }

 import React, { useContext, useState } from 'react';
 import React, { useContext, useState } from 'react';
-import { RouteComponentProps } from 'react-router';
-import { Footer } from '../components/common/Footer';
+import { useHistory } from 'react-router';
+import { Main } from '../components/common/Main';
 import { MessageResponse, MessageType } from '../components/common/types';
 import { MessageResponse, MessageType } from '../components/common/types';
 import SocketContext from '../contexts/SocketContext';
 import SocketContext from '../contexts/SocketContext';
 
 
-export const Login: React.FC<RouteComponentProps> = ({ history }) => {
+export const Login: React.FC = () => {
+    const history = useHistory();
     const socket = useContext(SocketContext);
     const socket = useContext(SocketContext);
     const [ username, setUsername ] = useState("");
     const [ username, setUsername ] = useState("");
 
 
@@ -19,7 +20,7 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => {
     }
     }
 
 
     return (
     return (
-      <div className="flex flex-col items-center w-screen h-screen">
+      <Main>
         <div className="mt-auto flex flex-col items-center">
         <div className="mt-auto flex flex-col items-center">
           <img className="m-7" src="./logo192.png"/>
           <img className="m-7" src="./logo192.png"/>
           <div>
           <div>
@@ -40,7 +41,6 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => {
                     onClick={() => login()}>Login</button>
                     onClick={() => login()}>Login</button>
           </div>
           </div>
         </div>
         </div>
-        <Footer/>
-      </div>
+      </Main>
     )
     )
 }
 }

 import React, { useContext, useEffect, useState } from 'react';
 import React, { useContext, useEffect, useState } from 'react';
-import { RouteComponentProps } from 'react-router';
-import { Footer } from '../components/common/Footer';
+import { Main } from '../components/common/Main';
 import { MessageResponse, MessageType } from '../components/common/types';
 import { MessageResponse, MessageType } from '../components/common/types';
 import { RoomInfo } from '../components/rooms/RoomInfo';
 import { RoomInfo } from '../components/rooms/RoomInfo';
 import { Room } from '../components/rooms/types';
 import { Room } from '../components/rooms/types';
 import SocketContext from '../contexts/SocketContext';
 import SocketContext from '../contexts/SocketContext';
 
 
-export const Rooms: React.FC<RouteComponentProps> = ({ history }) => {
+export const Rooms: React.FC = () => {
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
   const [ rooms, setRooms ] = useState<Room[]>([]);
   const [ rooms, setRooms ] = useState<Room[]>([]);
 
 
@@ -42,11 +41,10 @@ export const Rooms: React.FC<RouteComponentProps> = ({ history }) => {
   // useEffect(refreshRooms, []);
   // useEffect(refreshRooms, []);
 
 
   return (
   return (
-    <div className='flex flex-col items-center w-screen h-screen'>
+    <Main>
       <div className='mt-auto w-screen flex flex-col items-center'>
       <div className='mt-auto w-screen flex flex-col items-center'>
         {rooms.map((room) => (<RoomInfo key={room.uuid} room={room} />))}
         {rooms.map((room) => (<RoomInfo key={room.uuid} room={room} />))}
       </div>
       </div>
-      <Footer />
-    </div>
+    </Main>
   )
   )
 }
 }