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

 import React from 'react';
 import React from 'react';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { socket, SocketProvider } from './SocketContext';
+import { Login } from './Login';
 
 
-function App() {
+const App: React.FC = () => {
   return (
   return (
-    <div className="App">
-      <div className="ml-3 mb-3 font-bold text-2xl">TESTING</div>
-      <header className="App-header">
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <SocketProvider value={socket}>
+      <Router>
+        <Switch>
+          <Route exact path='/' component={Login}/>
+          <Route path='/rooms'></Route>
+          <Route path='/:roomId'></Route>
+        </Switch>
+      </Router>
+    </SocketProvider>
   );
   );
 }
 }
 
 

+import React, { useContext, useState } from 'react';
+import { RouteComponentProps } from 'react-router';
+import SocketContext from './SocketContext';
+
+export const Login: React.FC<RouteComponentProps> = ({ history }) => {
+    const socket = useContext(SocketContext);
+    const [ username, setUsername ] = useState("");
+
+    const login = () => {
+      socket.emit('LoginMessage', username, ({ ok } : { ok: boolean }) => {
+        if (ok) {
+          history.push('/rooms');
+        } else {
+          console.error('login error!'); // TODO: 팝업 에러?
+        }
+      });
+    }
+
+    return (
+      <div>
+        <header>Header</header>
+        <div className="flex items-center">
+          <input type="text"
+              placeholder="Username"
+              className="px-3 py-2 bg-white
+                  placeholder-gray-300 text-gray-700 text-sm
+                  rounded shadow outline-none focus:outline-none"
+              value={username}
+              onChange={e => setUsername(e.target.value)}
+          />
+          <button className="bg-green-500 active:bg-green-600
+                          text-white font-bold uppercase text-sm
+                          px-5 py-2 ml-3 rounded shadow hover:shadow-lg
+                          outline-none focus:outline-none
+                          ease-linear transition-all duration-150"
+                  type="button"
+                  onClick={() => login()}>Login</button>
+        </div>
+        <footer>Footer</footer>
+      </div>
+    )
+}

+import React from 'react';
+import { io } from 'socket.io-client';
+
+export const socket = io('http://localhost/');
+const SocketContext = React.createContext(socket);
+
+export const SocketProvider = SocketContext.Provider;
+export const SocketConsumer = SocketContext.Consumer;
+export default SocketContext;