Merge pull request #8 from SWM-FIRE/FIRE-170-개발-fe-방번호로-해당-방에-입장할-수-있게-라우팅-설정

FIRE-170 - FIRE-170-개발-fe-방번호로-해당-방에-입장할-수-있게-라우팅-설정

Author: 071yoon

src/App.tsx

@@ -16,7 +16,7 @@ function Router() {
           <Route index element={<Lobby />} />
         </Route>
         <Route path="/room" element={<Layout />}>
-          <Route index element={<Room />} />
+          <Route path=":roomId" element={<Room />} />
         </Route>
       </Routes>
     </BrowserRouter>

src/components/lobby/Room.tsx

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

src/components/lobby/RoomBlock.tsx

@@ -1,23 +1,36 @@
 import styled from 'styled-components';
-import oc from '../../styles/openColor';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import roomInterface from '../../room.interface';
+import oc from '../../styles/openColor';
 
-export default function RoomBlock({ name, total, current }: roomInterface) {
+export default function RoomBlock({ name, total, current, id }: roomInterface) {
+  /*
+  socket.emit('ENTER_ROOM', payload, (confirmRoomId) => {
+    navigate(`room/${confirmRoomId}`);
+  });
+  */
+  const navigate = useNavigate();
+  const onSubmit = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    console.log('test');
+    navigate(`/room/${id}`);
+  };
   return (
-    <Container>
+    <Button onClick={onSubmit}>
       <RoomName>{name}</RoomName>
       <div>
         {current} / {total}
       </div>
-    </Container>
+    </Button>
   );
 }
 
 const RoomName = styled.div`
   font-size: 5rem;
 `;
 
-const Container = styled.div`
+const Button = styled.button`
   text-align: center;
   width: 20rem;
   height: 10rem;

src/room.interface.ts

@@ -2,4 +2,5 @@ export default interface roomInterface {
   name: string;
   total: number;
   current: number;
+  id: string;
 }

src/rooms.json

@@ -2,16 +2,19 @@
   {
     "name": "room1",
     "total": 4,
-    "current": 0
+    "current": 0,
+    "id": "1"
   },
   {
     "name": "room2",
     "total": 4,
-    "current": 0
+    "current": 0,
+    "id": "2"
   },
   {
     "name": "room3",
     "total": 4,
-    "current": 0
+    "current": 0,
+    "id": "3"
   }
 ]