Commit 72a2d72b authored by 우지원's avatar 우지원
Browse files

user page

parent 02264c7b
......@@ -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>
......
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>
);
};
......
......@@ -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 >
);
}
......
......@@ -2,13 +2,16 @@ 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" }} />
</div>
<h1 className="d-flex justify-content-center"> CHERRY </h1>
<h2 className="d-flex justify-content-center"> #0805 </h2>
</form>
<>
<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" }} />
</>
)
};
......
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
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>
);
};
......
const RoomSingle = () => {
return (
<div>
RoomSingle Component 입니다.
</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="/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>
</>
)
};
......
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;
......@@ -5,7 +5,6 @@ import RoomList from "../components/Home/RoomList";
const HomeUserPage = () => {
return (
<div>
HomeUser Page 입니다.
<Header />
<HomeProfile />
<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