aaaaaaaaaaaaaaa

client/src/App.js

@@ -7,7 +7,7 @@ import RoomPage from "./pages/RoomPage";
 import InfoUpdatePage from "./pages/InfoUpdatePage";
 import InvitePage from "./pages/InvitePage";
 import SingupPage from "./components/SignUp";
-import LoginPage from "./components/Login"
+import LoginPage from "./components/Login";
 
 function App() {
   return (
@@ -21,17 +21,6 @@ function App() {
         <Route path="/profile/:id/update" component={InfoUpdatePage} />
         <Route path="/profile/:id" component={ProfilePage} />
         <Route path="/room/:roomId/:channelId" component={RoomPage}>
-        {/* <Switch>
-          <Route path={"/room/:roomId/meeting"}>
-            <></>
-          </Route>
-          <Route path={"/room/:roomId/normal"}>
-            <></>
-          </Route>
-          <Route path={"/room/:roomId/notice"}>
-            <></>
-          </Route>
-        </Switch> */}
         </Route>
         <Route path="/room/Invite" component={InvitePage} />
       </Switch>

client/src/components/Home/RoomSingle.js

-import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom'
-import roomApi from '../../apis/room.api';
-import userApi from '../../apis/user.api';
-import catchErrors from '../../context/catchError';
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import roomApi from "../../apis/room.api";
+import userApi from "../../apis/user.api";
+import catchErrors from "../../context/catchError";
 
-const id = localStorage.getItem('user');
-const INIT_ROOM={
-  name:"",
-  profileimg:"",
-  member:"",
-}
+const id = localStorage.getItem("user");
+const INIT_ROOM = {
+  roomId:"",
+  name: "",
+  profileimg: "",
+  member: "",
+};
 const RoomSingle = () => {
-  const [room, setRoom] = useState(INIT_ROOM)
-  const [error,setError]=useState('')
-  const channelId = 1
-  const roomId = "1234567abc"
-
+  const [room, setRoom] = useState([INIT_ROOM]);
+  const [error, setError] = useState("");
+  const channelId = 'main';
+  const {roomId}=useParams(room.roomId);
   async function getJoinRoom(Id) {
     try {
-      const User = await userApi.getUser(Id)
-      const RoomNumArr = User.roomNumber
-      const Room= await roomApi.getRoom(RoomNumArr)
-      console.log(Room[0])
-      const rrr=Room[0]
-      const memcount= rrr.member.length
-      setRoom({...room, name:rrr.name, profileimg: rrr.profileimg, member:memcount})
-      console.log(room)
-
+      const User = await userApi.getUser(Id);
+      const RoomNumArr = User.roomNumber;
+      const Room = await roomApi.getRoom(RoomNumArr);
+      let roomlist = [];
+      for (let prop in Room) {
+        roomlist.push({
+          roomId:Room[prop].id,
+          name: Room[prop].name,
+          profileimg: Room[prop].profileimg,
+          member: Room[prop].member.length,
+        });
+      }
+      setRoom(roomlist);
     } catch (error) {
-      catchErrors(error, setError)
+      catchErrors(error, setError);
     }
   }
-
   useEffect(() => {
-    getJoinRoom(id)
-  }, [id])
+    getJoinRoom(id);
+  }, [id]);
+  console.log(room)
 
+  const { profileimg } = room;
   return (
+    <div>
+      {room &&
+        room.map((el) => (
           <Link
-      to={`/room/${id}/${channelId}`}
+            to={`/room/${el.roomId}/${channelId}`}
             className="text-decoration-none text-dark"
           >
             <div
               className="d-flex mx-4 my-2 p-2"
-        style={{ backgroundColor: '#C4C4C4' }}
+              style={{ backgroundColor: "#C4C4C4" }}
             >
-        <div style={{ width: '37px', height: '37px' }}>
-          {/* <img
-            src={`/roomUploads/${profileimg}`}
+              <div style={{ width: "37px", height: "37px" }}>
+                <img
+                  src={`/roomUploads/${el.profileimg}`}
                   className="rounded-circle"
-            style={{ width: '37px', height: '37px' }}
-          /> */}
+                  style={{ width: "37px", height: "37px" }}
+                />
               </div>
               <div
                 className="mx-3 mt-2"
                 style={{
-            width: '250px',
-            overflow:'scroll',
-            whiteSpace: 'nowrap',
-            msOverflowStyle:'none',
+                  width: "250px",
+                  overflow: "scroll",
+                  whiteSpace: "nowrap",
+                  msOverflowStyle: "none",
                 }}
               >
-          {room.name}
+                {el.name}
               </div>
-        <div className="ms-auto mt-2"> {room.member}/100 </div>
+              <div className="ms-auto mt-2"> {el.member}/100 </div>
             </div>
-
           </Link>
-  )
-}
+        ))}
+    </div>
+  );
+};
 
-export default RoomSingle
+export default RoomSingle;

client/src/components/Room/ChannelSingle.js

@@ -6,7 +6,7 @@ const ChannelSingle = () => {
     <div className="overflow-auto" style={{ height: "610px" }}>
       <div className="mb-3">
         <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
-          <Link to={`${roomId}/meeting`}>
+          <Link to={`room/${roomId}/meeting`}>
             <img
               className="col-auto mt-2"
               src="/fullSpeaker.png"

client/src/components/Room/RightHamburger.js

 import { useState } from "react";
+import { useParams } from "react-router-dom";
 import ChannelSingle from './ChannelSingle'
 
 const RightHamberger = () => {
     const [admin, setAdmin] = useState('true')
+    const {roomId}=useParams();
     return (
         <div>
             <div>
@@ -42,7 +44,7 @@ const RightHamberger = () => {
                     >
                         데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
                     </p>
-                    <h6 className="mt-2" id="roomId" > #ASV2AE985 </h6>
+                    <h6 className="mt-2" id="roomId" >{`${roomId}`}</h6>
                     <button
                         type="button"
                         className="btn-close text-reset"