Merge branch 'jiweon-merge' into 'master'

Jiweon merge

See merge request research/bora_it!4

client/src/components/Header.js

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

client/src/components/Home/AddRoom.js

+import React 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 className="filebox mb-4">
+                                <input type="file" id="ex_filename" className="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>
-    )
-};
+        </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>
+            <div style={{ backgroundColor: "#262626", width: "auto", height: "2px" }} />
+        </>
     )
 };
 

client/src/components/Home/RoomList.js

@@ -4,10 +4,11 @@ import RoomSingle from "./RoomSingle";
 const RoomList = () => {
   return (
     <div>
-      RoomList Component 입니다.
       <AddRoom />
+      <div className="mb-3">
         <RoomSingle />
       </div>
+    </div>
   );
 };
 

client/src/components/Home/RoomSingle.js

 const RoomSingle = () => {
     return (
-        <div>
-            RoomSingle Component 입니다.
+        <>
+            <div className="row justify-content-start mx-4 my-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 mx-4 my-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 mx-4 my-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 mx-4 my-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 mx-4 my-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 mx-4 my-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 mx-4 my-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 mx-4 my-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 mx-4 my-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/pages/HomeUserPage.js

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