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

user page

parent 02264c7b
...@@ -17,7 +17,6 @@ function App() { ...@@ -17,7 +17,6 @@ function App() {
<Route exact path="/user" component={HomeUserPage} /> <Route exact path="/user" component={HomeUserPage} />
<Route path="/profile/:id" component={ProfilePage} /> <Route path="/profile/:id" component={ProfilePage} />
<Route path="/Room/:id/:channel" component={RoomPage} /> <Route path="/Room/:id/:channel" component={RoomPage} />
<Route path="/Room" component={RoomList} />
</Switch> </Switch>
{/* </AuthProvider> */} {/* </AuthProvider> */}
</Router> </Router>
......
const Header = () => { const Header = () => {
return ( return (
<div> <div><form style={{ backgroundColor: "#FCF4FF" }} className="flex-column align-items-center justify-content-center p-2" >
Header Component 입니다. <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> </div>
); );
}; };
......
...@@ -9,7 +9,8 @@ const AddRoom = () => { ...@@ -9,7 +9,8 @@ const AddRoom = () => {
<h4>참여중인 방목록</h4> <h4>참여중인 방목록</h4>
</div> </div>
<button type="button" className="col-2" data-bs-toggle="modal" data-bs-target="#myModal" style={{ backgroundColor: "#FCF4FF", borderColor: "#FCF4FF" }} > <button type="button" className="col-2" data-bs-toggle="modal" data-bs-target="#myModal" style={{ backgroundColor: "#FCF4FF", borderColor: "#FCF4FF" }} >
+ </button> +
</button>
</div> </div>
<div className="modal" id="myModal" tabindex="-1" aria-hidden="true"> <div className="modal" id="myModal" tabindex="-1" aria-hidden="true">
...@@ -78,63 +79,6 @@ const AddRoom = () => { ...@@ -78,63 +79,6 @@ const AddRoom = () => {
</div> </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 > </form >
); );
} }
......
...@@ -2,13 +2,16 @@ import React from 'react' ...@@ -2,13 +2,16 @@ import React from 'react'
const HomeProfile = () => { const HomeProfile = () => {
return ( return (
<form className="flex-column align-items-center justify-content-center m-2"> <>
<div className="d-flex justify-content-center"> <form className="flex-column align-items-center justify-content-center m-2">
<img src="/image2.jpg" className="rounded-circle" style={{ width: "157px", height: "157px", borderStyle: "solid", borderColor: "#262626" }} /> <div className="d-flex justify-content-center">
</div> <img src="/image2.jpg" className="rounded-circle" style={{ width: "157px", height: "157px", borderStyle: "solid", borderColor: "#262626" }} />
<h1 className="d-flex justify-content-center"> CHERRY </h1> </div>
<h2 className="d-flex justify-content-center"> #0805 </h2> <h1 className="d-flex justify-content-center"> CHERRY </h1>
</form> <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 AddRoom from "./AddRoom";
import HomeProfile from "./HomeProfile";
import RoomSingle from "./RoomSingle"; import RoomSingle from "./RoomSingle";
import Title from "./Title";
import Line from "./Line";
import { Form } from 'react-bootstrap';
const RoomList = () => { const RoomList = () => {
return ( return (
<Form style={{ backgroundColor: "#FCF4FF" }}> <div>
<Title />
<Line />
<HomeProfile />
<Line />
<AddRoom /> <AddRoom />
{/* <Line /> <div className="mb-5">
<RoomSingle /> */} <RoomSingle />
</Form> </div>
</div>
); );
}; };
......
const RoomSingle = () => { const RoomSingle = () => {
return ( return (
<div> <>
RoomSingle Component 입니다. <div className="row justify-content-start m-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 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"; ...@@ -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