user page

client/src/App.js

@@ -17,7 +17,6 @@ function App() {
         <Route exact path="/user" component={HomeUserPage} />
         <Route path="/profile/:id" component={ProfilePage} />
         <Route path="/Room/:id/:channel" component={RoomPage} />
-        <Route path="/Room" component={RoomList} />
       </Switch>
       {/* </AuthProvider> */}
     </Router>

client/src/components/Header.js

 const Header = () => {
   return (
-    <div>
-      Header Component 입니다.
+    <div><form style={{ backgroundColor: "#FCF4FF" }} className="flex-column align-items-center justify-content-center p-2" >
+      <div className="d-flex justify-content-center">
+        <img src="/BORA.png" style={{ width: "160px" }} />
+      </div>
+    </form>
+      <div style={{ backgroundColor: "#262626", width: "auto", height: "2px" }} >
+      </div>
     </div>
   );
 };

client/src/components/Home/AddRoom.js

@@ -9,7 +9,8 @@ const AddRoom = () => {
                     <h4>참여중인 방목록</h4>
                 </div>
                 <button type="button" className="col-2" data-bs-toggle="modal" data-bs-target="#myModal" style={{ backgroundColor: "#FCF4FF", borderColor: "#FCF4FF" }} >
-                    + </button>
+                    +
+                </button>
             </div>
 
             <div className="modal" id="myModal" tabindex="-1" aria-hidden="true">
@@ -78,63 +79,6 @@ const AddRoom = () => {
                     </div>
                 </div>
             </div>
-
-            {/* 방리스트 */}
-            <div className="mb-5">
-                <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                    <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA_LOGO.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                    <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                    <div className="col-2 mt-2"> 15/34 </div>
-                </div>
-
-                <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                    <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                    <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                    <div className="col-2 mt-2"> 15/34 </div>
-                </div>
-
-                <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                    <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/image2.jpg" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                    <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                    <div className="col-2 mt-2"> 15/34 </div>
-                </div>
-
-                <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                    <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA_LOGO.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                    <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                    <div className="col-2 mt-2"> 15/34 </div>
-                </div>
-
-                <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                    <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                    <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                    <div className="col-2 mt-2"> 15/34 </div>
-                </div>
-
-                <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                    <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/image2.jpg" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                    <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                    <div className="col-2 mt-2"> 15/34 </div>
-                </div>
-
-                <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                    <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA_LOGO.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                    <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                    <div className="col-2 mt-2"> 15/34 </div>
-                </div>
-
-                <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                    <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                    <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                    <div className="col-2 mt-2"> 15/34 </div>
-                </div>
-
-                <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                    <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/image2.jpg" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                    <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                    <div className="col-2 mt-2"> 15/34 </div>
-                </div>
-            </div>
         </form >
     );
 }

client/src/components/Home/HomeProfile.js

@@ -2,6 +2,7 @@ import React from 'react'
 
 const HomeProfile = () => {
     return (
+        <>
             <form className="flex-column align-items-center justify-content-center m-2">
                 <div className="d-flex justify-content-center">
                     <img src="/image2.jpg" className="rounded-circle" style={{ width: "157px", height: "157px", borderStyle: "solid", borderColor: "#262626" }} />
@@ -9,6 +10,8 @@ const HomeProfile = () => {
                 <h1 className="d-flex justify-content-center"> CHERRY </h1>
                 <h2 className="d-flex justify-content-center"> #0805 </h2>
             </form>
+            <div style={{ backgroundColor: "#262626", width: "auto", height: "2px" }} />
+        </>
     )
 };
 

client/src/components/Home/Line.js

-import React from 'react'
-
-const Line = () => {
-    return (
-        <div style={{ backgroundColor: "#262626", width: "auto", height: "2px" }} >
-        </div>
-    )
-};
-
-export default Line;
\ No newline at end of file

client/src/components/Home/RoomList.js

 import AddRoom from "./AddRoom";
-import HomeProfile from "./HomeProfile";
 import RoomSingle from "./RoomSingle";
-import Title from "./Title";
-import Line from "./Line";
-import { Form } from 'react-bootstrap';
 
 const RoomList = () => {
   return (
-    <Form style={{ backgroundColor: "#FCF4FF" }}>
-      <Title />
-      <Line />
-      <HomeProfile />
-      <Line />
+    <div>
       <AddRoom />
-      {/* <Line />
-      <RoomSingle /> */}
-    </Form>
+      <div className="mb-5">
+        <RoomSingle />
+      </div>
+    </div>
   );
 };
 

client/src/components/Home/RoomSingle.js

 const RoomSingle = () => {
     return (
-        <div>
-            RoomSingle Component 입니다.
+        <>
+            <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
+                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
+                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+                <div className="col-2 mt-2"> 15/34 </div>
             </div>
+            <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
+                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA_LOGO.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
+                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+                <div className="col-2 mt-2"> 15/34 </div>
+            </div>
+            <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
+                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/image2.jpg" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
+                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+                <div className="col-2 mt-2"> 15/34 </div>
+            </div>
+            <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
+                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA_LOGO.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
+                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+                <div className="col-2 mt-2"> 15/34 </div>
+            </div>
+
+            <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
+                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
+                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+                <div className="col-2 mt-2"> 15/34 </div>
+            </div>
+
+            <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
+                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/image2.jpg" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
+                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+                <div className="col-2 mt-2"> 15/34 </div>
+            </div>
+
+            <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
+                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA_LOGO.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
+                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+                <div className="col-2 mt-2"> 15/34 </div>
+            </div>
+
+            <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
+                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
+                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+                <div className="col-2 mt-2"> 15/34 </div>
+            </div>
+
+            <div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
+                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/image2.jpg" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
+                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+                <div className="col-2 mt-2"> 15/34 </div>
+            </div>
+        </>
     )
 };
 

client/src/components/Home/Title.js

-import React from 'react'
-
-const Title = () => {
-    return (
-        <form style={{ backgroundColor: "#FCF4FF" }} className="flex-column align-items-center justify-content-center p-2" >
-            <div className="d-flex justify-content-center">
-                <img src="/BORA.png" style={{ width: "160px" }} />
-            </div>
-        </form>
-    )
-};
-
-/* const Title = () => {
-    return (
-        <form style={{ backgroundColor: "#FCF4FF" }} className="flex-column align-items-center justify-content-center p-2" >
-            <div className="d-flex justify-content-center">
-                <img src="/image2.jpg" className="rounded-circle" style={{ width: "157px", height: "157px", borderStyle: "solid", borderColor: "#262626" }} />
-                <img src='/BORA.png' style={{ width: "160px" }} />
-            </div>
-        </form>
-    )
-}; */
-
-export default Title;

client/src/pages/HomeUserPage.js

@@ -5,7 +5,6 @@ import RoomList from "../components/Home/RoomList";
 const HomeUserPage = () => {
   return (
     <div>
-      HomeUser Page 입니다.
       <Header />
       <HomeProfile />
       <RoomList />