Merge remote-tracking branch 'origin/jaeyeon' into woojiweon2

client/src/App.js

@@ -21,8 +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/main" component={InitRoomPage} />
         <Route path="/room/:roomId/:channelId" component={RoomPage} />
-        <Route path="/room/:roomId" component={InitRoomPage} />
         <Route path="/room/Invite" component={InvitePage} />
       </Switch>
       {/* </AuthProvider> */}

client/src/components/Home/JoinRoom.js

@@ -39,7 +39,7 @@ const JoinRoom = () => {
     if (success) {
         // console.log('success', success)
         alert('룸참여가 완료되었습니다!')
-        window.location.href=`/room/${roomId}/1`
+        window.location.href=`/room/${roomId}/main`
     }
 
     return (

client/src/components/Room/InitRoom.js

@@ -4,61 +4,78 @@ import { useParams } from "react-router-dom";
 import roomApi from "../../apis/room.api";
 
 const INIT_ROOM = {
-    id: "",
-    name: "",
-    profileimg: "",
+  id: "",
+  name: "",
+  profileimg: "",
 };
 
 const InitRoom = () => {
-    const { roomId } = useParams();
-    const [room, setRoom] = useState(INIT_ROOM);
-    const [error, setError] = useState("");
+  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);
-        }
+  async function getRoom(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]);
+  useEffect(() => {
+    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>
+  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="row">
+          <div className="col-3"></div>
+          <div className="col-6 my-5">
+            <h2
+              className="mb-3"
+              style={{ fontSize: "13px", fontWeight: "bold" }}
+            >
+              방 이름
+            </h2>
+            <h2
+              className="mb-4 mt-2"
+              style={{ fontSize: "25px", fontWeight: "bold" }}
+            >
+              {room.name}
+            </h2>
+            <h2
+              className="mb-3 mt-2"
+              style={{ fontSize: "13px", fontWeight: "bold" }}
+            >
+              방 코드
+            </h2>
+            <h2
+              className="mb-3 mt-2"
+              style={{ fontSize: "25px", fontWeight: "bold" }}
+            >
+              {room.id}
+            </h2>
+          </div>
+          <div className="col"></div>
+        </div>
+      </form>
+    </div>
+  );
 };
 
 export default InitRoom;

server/index.js

@@ -23,21 +23,21 @@ sequelize
       roomNumber : ["1234567abc","abc7654321"],
     });
 
-    await Room.create({
-      id: "1234567abc",
-      name: "room",
-      owner: 8888,
-      member: ['8888', '9999'],
-      profileimg: "defaultimg",
-    });
+    // await Room.create({
+    //   id: "1234567abc",
+    //   name: "room",
+    //   owner: 8888,
+    //   member: [8888],
+    //   profileimg: "defaultimg",
+    // });
 
-    await Room.create({
-      id: "abc7654321",
-      name: "room1",
-      owner: 9999,
-      member: ['9999'],
-      profileimg: "defaultimg",
-    });
+    // await Room.create({
+    //   id: "abc7654321",
+    //   name: "room1",
+    //   owner: 9999,
+    //   member: [9999],
+    //   profileimg: "defaultimg",
+    // });
 
     app.listen(appConfig.port, () => {
       console.log(`Server is running on port ${appConfig.port}`);