룸첫화면추가

client/src/App.js

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

client/src/components/Profile/Profile.js

@@ -15,12 +15,14 @@ const Profile = () => {
   async function getProfile(userID) {
     try {
       const data = await userApi.getUser(userID);
+      console.log(data)
       setProfile(data.img)
       
     } catch (error) {
       catchErrors(error, setError);
     }
   }
+  console.log(profile)
   useEffect(() => {
     getProfile(userprofile);
   }, [userprofile]);

client/src/components/Room/InitRoom.js

+import { useEffect, useState } from "react";
+import catchErrors from "../../context/catchError";
+import { useParams } from "react-router-dom";
+import roomApi from "../../apis/room.api";
+
+const INIT_ROOM = {
+    id: "",
+    name: "",
+    profileimg: "",
+};
+
+const InitRoom = () => {
+    const { roomId } = useParams();
+    const [room, setRoom] = useState(INIT_ROOM);
+    const [error, setError] = useState("");
+
+    async function getRoom(roomId) {
+        console.log(roomId)
+        try {
+            const data = await roomApi.getRoom([roomId]);
+            setRoom(data[0]);
+        } catch (error) {
+            catchErrors(error, setError);
+        }
+    }
+    console.log(room)
+
+    useEffect(() => {
+        console.log('roomId확인', roomId)
+        getRoom(roomId);
+    }, [roomId]);
+
+    return (
+        <div>
+            <div style={{ backgroundColor: "#262626", width: "auto", height: "2px" }} />
+            <form className="flex-row align-items-center justify-content-center m-5">
+                <div className="d-flex justify-content-center">
+                    <img
+                        src={`/roomUploads/${room.profileimg}`}
+                        className="rounded-circle"
+                        style={{
+                            width: "250px",
+                            height: "250px",
+                        }}
+                    />
+                </div>
+                <div className="d-flex justify-content-center mt-3">
+                    <div>
+                        <div className="row">
+                            <h6 className="col" style={{ text: 'center' }}> 방이름 </h6>
+                            <h4 className="col"> {room.name} </h4>
+                        </div>
+                        <div className="row">
+                            <h6 className="col"> 방코드 </h6>
+                            <h4 className="col"> {room.id} </h4>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default InitRoom;

client/src/components/Room/LeftHamburger.js

@@ -23,18 +23,18 @@ const LeftHamberger = () => {
     const [error, setError] = useState("");
 
     async function getChannel(roomId) {
-        console.log('roomId', roomId)
+        // console.log('roomId', roomId)
         const ID = roomId
         try {
             const data = await roomApi.getRoom([ID]);
             const Channel = data[0].channel
-            console.log('방데이터:', Channel[0])
+            // console.log('방데이터:', Channel[0])
             const channelList = [];
             for (const prop in Channel) { // Channel의 항목(prop)으로 작업을 실행합니다
                 for (const key in Channel[prop]) {
-                    console.log(key)
-                    console.log(prop)
-                    console.log(Channel[prop][key])
+                    // console.log(key)
+                    // console.log(prop)
+                    // console.log(Channel[prop][key])
                     channelList.push({
                         channelName: key,
                         joinName: Channel[prop][key]
@@ -46,10 +46,10 @@ const LeftHamberger = () => {
             catchErrors(error, setError);
         }
     }
-    console.log(channel)
+    // console.log(channel)
 
     useEffect(() => {
-        console.log('roomId', roomId)
+        // console.log('roomId', roomId)
         getChannel(roomId);
     }, [roomId]);
 

client/src/components/Room/RightHamburger.js

@@ -16,18 +16,18 @@ const RightHamburger = () => {
     const [error, setError] = useState("");
 
     async function getChannel(roomId) {
-        console.log('roomId', roomId)
+        // console.log('roomId', roomId)
         const ID = roomId
         try {
             const data = await roomApi.getRoom([ID]);
             const Channel = data[0].channel
-            console.log('방데이터:', Channel)
+            // console.log('방데이터:', Channel)
             const channelList = [];
             for (const prop in Channel) { // Channel의 항목(prop)으로 작업을 실행합니다
                 for (const key in Channel[prop]) {
-                    console.log(key)
-                    console.log(prop)
-                    console.log(Channel[prop][key])
+                    // console.log(key)
+                    // console.log(prop)
+                    // console.log(Channel[prop][key])
                     channelList.push({
                         channelName: key,
                         joinName: Channel[prop][key]
@@ -39,10 +39,10 @@ const RightHamburger = () => {
             catchErrors(error, setError);
         }
     }
-    console.log(channel)
+    // console.log(channel)
 
     useEffect(() => {
-        console.log('roomId', roomId)
+        // console.log('roomId', roomId)
         getChannel(roomId);
     }, [roomId]);
     return (

client/src/pages/InitRoomPage.js

+import ChannelList from '../components/Room/ChannelList'
+import InitRoom from '../components/Room/InitRoom'
+
+const InitRoomPage = () => {
+  return (
+    <div>
+      <ChannelList />
+      <InitRoom />
+    </div>
+  )
+}
+
+export default InitRoomPage

index.js

@@ -28,7 +28,7 @@ sequelize
       name: "room",
       owner: 8888,
       member: [8888],
-      profileimg: "ef0930f6be18ce73380d952337a6de1f",
+      profileimg: "defaultimg",
     });
 
     await Room.create({
@@ -36,7 +36,7 @@ sequelize
       name: "room1",
       owner: 9999,
       member: [9999],
-      profileimg: "ef0930f6be18ce73380d952337a6de1f",
+      profileimg: "defaultimg",
     });
 
     app.listen(appConfig.port, () => {