(WIP) 방 목록 컴포넌트 추가

@@ -2,6 +2,7 @@ import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { socket, SocketProvider } from './SocketContext';
 import { socket, SocketProvider } from './SocketContext';
 import { Login } from './Login';
 import { Login } from './Login';
+import { Rooms } from './Rooms';
 
 
 const App: React.FC = () => {
 const App: React.FC = () => {
   return (
   return (
@@ -9,7 +10,7 @@ const App: React.FC = () => {
       <Router>
       <Router>
         <Switch>
         <Switch>
           <Route exact path='/' component={Login}/>
           <Route exact path='/' component={Login}/>
-          <Route path='/rooms'></Route>
+          <Route path='/rooms' component={Rooms}></Route>
           <Route path='/:roomId'></Route>
           <Route path='/:roomId'></Route>
         </Switch>
         </Switch>
       </Router>
       </Router>

+import React, { useContext, useEffect, useState } from 'react';
+import { RouteComponentProps } from 'react-router';
+import SocketContext from './SocketContext';
+
+interface room {
+  uuid: string;
+  name: string;
+  currentUsers: number;
+  maxUsers: number;
+}
+
+export const Rooms: React.FC<RouteComponentProps> = ({ history }) => {
+  const socket = useContext(SocketContext);
+  const [ rooms, setRooms ] = useState<room[]>([]);
+
+  useEffect(() => {
+    socket.emit('room_list', ({ ok } : { ok: boolean }) => {
+      if (ok) {
+        history.push('/rooms');
+      } else {
+        console.error('login error!'); // TODO: 팝업 에러?
+      }
+    }); // TODO: interval마다 emit하거나 새로고침 버튼을 만들자
+
+    // socket.on('')
+  }, []);
+
+  return (
+    <div>
+      <header>header header</header>
+      <div className='flex items-center'>
+        <div>room test</div>
+      </div>
+      <footer>footer footer</footer>
+    </div>
+  )
+}
\ No newline at end of file