Skip to content

GitLab

Commit 33ea92e6 authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

Merge remote-tracking branch 'origin/jiweon' into jiweon-merge

parents 3c59a6f1 6be47bc5
Hide whitespace changes
Inline Side-by-side
client/src/components/Header.js
View file @ 33ea92e6
import { Link } from "react-router-dom";
const Header = () => { const Header = () => {
return ( return (
<div> <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> </div>
); );
}; };
......
client/src/components/Home/AddRoom.js
View file @ 33ea92e6
import React from 'react'
const AddRoom = () => { const AddRoom = () => {
return ( return (
<div> <form className="m-3">
AddRoom Component 입니다. <div className="row justify-content-around">
</div> <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; export default AddRoom;
client/src/components/Home/HomeProfile.js
View file @ 33ea92e6
import React from 'react'
const HomeProfile = () => { const HomeProfile = () => {
return ( return (
<div> <>
HomeProfile Component 입니다. <form className="flex-column align-items-center justify-content-center m-2">
</div> <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
View file @ 33ea92e6
...@@ -4,9 +4,10 @@ import RoomSingle from "./RoomSingle"; ...@@ -4,9 +4,10 @@ import RoomSingle from "./RoomSingle";
const RoomList = () => { const RoomList = () => {
return ( return (
<div> <div>
RoomList Component 입니다.
<AddRoom /> <AddRoom />
<RoomSingle /> <div className="mb-3">
<RoomSingle />
</div>
</div> </div>
); );
}; };
......
client/src/components/Home/RoomSingle.js
View file @ 33ea92e6
const RoomSingle = () => { const RoomSingle = () => {
return ( return (
<div> <>
RoomSingle Component 입니다. <div className="row justify-content-start mx-4 my-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
</div> <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
View file @ 33ea92e6
...@@ -5,7 +5,6 @@ import RoomList from "../components/Home/RoomList"; ...@@ -5,7 +5,6 @@ import RoomList from "../components/Home/RoomList";
const HomeUserPage = () => { const HomeUserPage = () => {
return ( return (
<div> <div>
HomeUser Page 입니다.
<Header /> <Header />
<HomeProfile /> <HomeProfile />
<RoomList /> <RoomList />
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment