Merge pull request #5 from SWM-FIRE/FIRE-132-아이디-입력해서-세션-정보-저장

FIRE-132 - FIRE-132-아이디-입력해서-세션-정보-저장

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/uuid": "^8.3.4",
     "history": "5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -61,5 +62,6 @@
     "stylelint": "^14.9.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^26.0.0"
-  }
+  },
+  "license": "MIT"
 }

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import styled from 'styled-components';
+import Lobby from './pages/Lobby';
 import Layout from './components/layout/Layout';
 import Login from './pages/Login';
 
@@ -11,16 +11,12 @@ function Router() {
         <Route path="/" element={<Layout />}>
           <Route index element={<Login />} />
         </Route>
-        <Route path="/screens" element={<TestContainer2 />} />
+        <Route path="/lobby" element={<Layout />}>
+          <Route index element={<Lobby />} />
+        </Route>
       </Routes>
     </BrowserRouter>
   );
 }
 
-const TestContainer2 = styled.div`
-  width: 100vw;
-  height: 100vh;
-  background-color: lightslategray;
-`;
-
 export default Router;

src/components/lobby/Room.tsx

@@ -0,0 +1,15 @@
+import roomAPI from '../../rooms.json';
+import RoomBlock from './RoomBlock';
+import roomInterface from '../../room.interface';
+
+export default function Room() {
+  return (
+    <>
+      {roomAPI.map(({ name, total, current }: roomInterface) => {
+        return (
+          <RoomBlock key={name} name={name} total={total} current={current} />
+        );
+      })}
+    </>
+  );
+}

src/components/lobby/RoomBlock.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import oc from '../../styles/openColor';
+import roomInterface from '../../room.interface';
+
+export default function RoomBlock({ name, total, current }: roomInterface) {
+  return (
+    <Container>
+      <div>{name}</div>
+      <div>
+        {current} / {total}
+      </div>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  text-align: center;
+  width: 10rem;
+  height: 5rem;
+  background-color: ${oc.gray2};
+  margin-top: 1rem;
+  border-radius: 2rem;
+`;

src/components/login/InputID.tsx

@@ -1,14 +1,22 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
 
 export default function InputID() {
   const [id, setId] = useState('');
   const navigate = useNavigate();
 
-  const onSubmit = () => {
-    console.log(id);
-    navigate(`screens`);
+  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    // socket connection
+    const uid = uuidv4();
+    const payload = { id, uid };
+    // socket.emit('ENTER_ROOM', payload, (confirmRoomId) => {
+    //   navigate(`screens`);
+    // });
+    console.log(payload);
+    navigate(`lobby`);
   };
 
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -35,14 +43,15 @@ const Form = styled.form`
   flex-direction: column;
   align-items: center;
   justify-content: center;
+
   button,
   input {
     height: 5rem;
     border-radius: 0.5rem;
     width: 100%;
-    max-with: 30rem;
+    max-width: 30rem;
     font-size: 2rem;
-    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
+    box-shadow: 2px 2px rgb(0 0 0 / 18%);
   }
 `;
 

src/pages/Lobby.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import Rooms from '../components/lobby/Room';
+
+export default function Lobby() {
+  return (
+    <Container>
+      <Header>Lobby</Header>
+      <Rooms />
+    </Container>
+  );
+}
+
+const Header = styled.div`
+  margin-top: 5rem;
+  width: 20rem;
+  height: 10rem;
+  font-size: 10rem;
+`;
+
+const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(113deg, #9f9f9f 0%, #636363 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+`;

src/pages/Login.tsx

@@ -14,7 +14,7 @@ export default function MainPage() {
 const Container = styled.div`
   width: 100%;
   height: 100%;
-  background: linear-gradient(113.04deg, #d8b9ff 0%, #a5ffb9 100.53%);
+  background: linear-gradient(113deg, #d8b9ff 0%, #a5ffb9 100%);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

src/room.interface.ts

@@ -0,0 +1,5 @@
+export default interface roomInterface {
+  name: string;
+  total: number;
+  current: number;
+}

src/rooms.json

@@ -0,0 +1,17 @@
+[
+  {
+    "name": "room1",
+    "total": 4,
+    "current": 0
+  },
+  {
+    "name": "room2",
+    "total": 4,
+    "current": 0
+  },
+  {
+    "name": "room3",
+    "total": 4,
+    "current": 0
+  }
+]

tsconfig.json

@@ -98,6 +98,8 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+    "moduleResolution": "node",
+    "resolveJsonModule": true
   }
 }