0628

client/src/App.js

+import 'bootstrap/dist/css/bootstrap.min.css';
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import "./App.css";
+import HomeProfile from './components/Home/HomeProfile';
+import RoomList from './components/Home/RoomList';
 import HomeGuestPage from "./pages/HomeGuestPage";
 import HomeUserPage from "./pages/HomeUserPage";
 import ProfilePage from "./pages/ProfilePage";
@@ -14,6 +17,7 @@ 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/Home/AddRoom.js

+import React, { useState } from 'react'
+
 const AddRoom = () => {
+
     return (
-        <div>
-            AddRoom Component 입니다.
+        <form className="m-3">
+            <div className="row justify-content-around">
+                <div className="col">
+                    <h4>참여중인 방목록</h4>
+                </div>
+                <button type="button" className="col-2" data-bs-toggle="modal" data-bs-target="#myModal" style={{ backgroundColor: "#FCF4FF", borderColor: "#FCF4FF" }} >
+                    + </button>
+            </div>
+
+            <div className="modal" id="myModal" tabindex="-1" aria-hidden="true">
+                <div className="modal-dialog">
+                    <div className="modal-content">
+                        <div className="modal-header">
+                            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div className="modal-body">
+                            <div className="row justify-content-around mt-4 mb-4">
+                                <div className="col-5">
+                                    <button type="button" className="p-4" data-bs-toggle="modal" data-bs-target="#joinModal" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#C4C4C4", backgroundColor: "#C4C4C4", padding: '10px' }}>
+                                        방참여하기</button>
+                                </div>
+                                <div className="col-5">
+                                    <button type="button" className="p-4" data-bs-toggle="modal" data-bs-target="#makeModal" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#C4C4C4", backgroundColor: "#C4C4C4", padding: '10px' }}>
+                                        방생성하기</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* 방참여하기 모달 */}
+            <div className="modal" id="joinModal" tabindex="-1" aria-hidden="true">
+                <div className="modal-dialog">
+                    <div className="modal-content">
+                        <div className="modal-header">
+                            <div>방참여하기</div>
+                            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div className="modal-body">
+                            <div className="input-group mb-3">
+                                <input type="text" className="form-control" placeholder="참여코드를 입력하세요" aria-label="참여코드를 입력하세요" aria-describedby="basic-addon1" />
+                            </div>
+                            <div className="modal-footer">
+                                <button type="button" className="btn-primary" style={{ borderStyle: "solid", borderRadius: "5px", padding: '15px' }} >확인</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* 방생성하기 모달 */}
+            <div className="modal" id="makeModal" tabindex="-1" aria-hidden="true">
+                <div className="modal-dialog">
+                    <div className="modal-content">
+                        <div className="modal-header">
+                            <div>방생성하기</div>
+                            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div className="modal-body">
+                            <h5>방프로필사진</h5>
+                            <div class="filebox mb-4">
+                                <input type="file" id="ex_filename" class="upload-hidden" />
+                            </div>
+                            <h5>방이름</h5>
+                            <div className="input-group">
+                                <input type="text" className="form-control" placeholder="방이름을 입력해주세요" aria-label="방이름 입력해주세요" aria-describedby="basic-addon1" />
+                            </div>
+                            <div className="modal-footer">
+                                <button type="button" className="btn-primary" style={{ borderStyle: "solid", borderRadius: "5px", padding: '15px' }} >생성</button>
+                            </div>
+                        </div>
+                    </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 >
+    );
+}
 
 export default AddRoom;

client/src/components/Home/HomeProfile.js

+import React from 'react'
+
 const HomeProfile = () => {
     return (
-        <div>
-            HomeProfile Component 입니다.
+        <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" }} />
             </div>
+            <h1 className="d-flex justify-content-center"> CHERRY </h1>
+            <h2 className="d-flex justify-content-center"> #0805 </h2>
+        </form>
     )
 };
 

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 (
-    <div>
-      RoomList Component 입니다.
+    <Form style={{ backgroundColor: "#FCF4FF" }}>
+      <Title />
+      <Line />
+      <HomeProfile />
+      <Line />
       <AddRoom />
-      <RoomSingle />
-    </div>
+      {/* <Line />
+      <RoomSingle /> */}
+    </Form>
   );
 };
 

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/index.js

-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import 'bootstrap'
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import "bootstrap";
+import 'bootstrap/dist/css/bootstrap.min.css'
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function