Skip to content

GitLab

Commit 157857db authored by 이재연's avatar 이재연
Browse files

UI jaeyeon

parent a653751c
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 157857db
......@@ -4,6 +4,7 @@ import HomeGuestPage from "./pages/HomeGuestPage";
import HomeUserPage from "./pages/HomeUserPage";
import ProfilePage from "./pages/ProfilePage";
import RoomPage from "./pages/RoomPage";
import InfoUpdatePage from "./pages/InfoUpdatePage";
function App() {
return (
......@@ -13,6 +14,7 @@ function App() {
<Route exact path="/" component={HomeGuestPage} />
<Route exact path="/user" component={HomeUserPage} />
<Route path="/profile/:id" component={ProfilePage} />
<Route path="/profileupdate/:id" component={InfoUpdatePage} />
<Route path="/Room/:id/:channel" component={RoomPage} />
</Switch>
{/* </AuthProvider> */}
......
client/src/components/Profile/Info.js
View file @ 157857db
const Info = () => {
return (
<div>
Info Component 입니다.
<div className="container-md vh-100" style={{ background: "#FCF4FF" }}>
<div
className="row justify-content-center mx-1"
style={{ fontSize: "25px", fontWeight: "bold" }}
>
CHERRY #0805
</div>
<div className="row">
<div className="col-3"></div>
<div className="col-6 my-3">
<form>
<label
className="form-label mb-3"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
이름
</label>
<input type="text" className="form-control" />
<label
className="form-label mb-3 mt-2"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
전화번호
</label>
<input type="text" className="form-control" />
</form>
</div>
<div className="col"></div>
</div>
</div>
)
);
};
export default Info;
client/src/components/Profile/InfoUpdate.js
View file @ 157857db
const InfoUpdate = () => {
return (
<div class="container-md vh-100" style={{ background: "#FCF4FF" }}>
<div class="row">
<div>
<label
class="form-label mx-2 my-4"
style={{ fontSize: "18px", fontWeight: "bold" }}
>
프로필 정보
</label>
<button
type="button"
class="btn btn-outline-white "
style={{
background: "#E8B7FF",
fontSize: "13px",
fontWeight: "bold",
}}
>
확인
</button>
</div>
</div>
<div class="col"></div>
<div class="col">
<div>
<div class="row">
<div className="d-flex justify-content-center">
<img src="/image2.jpg" className="rounded-circle" style={{height:'320px', width:'320px'}}/>
</div><div
className="row justify-content-center my-3 mx-1"
style={{ fontSize: "25px", fontWeight: "bold" }}
>
CHERRY #0805
</div>
<div class="col-6">
<div class="input-group mx-2 my-3">
<div>
<label
class="form-label "
style={{ fontSize: "13px", fontWeight: "bold" }}
>
현재 비밀번호
</label>
<input type="text" class="form-control" />
</div>
<div>
<label
class="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
새 비밀번호
</label>
<input type="text" class="form-control" />
</div>
<div>
<label
class="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
새 비밀번호 확인
</label>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-6">
<div class="input-group my-3 ">
<div>
<label
class="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
현재 전화번호
</label>
<input type="text" class="form-control" />
</div>
<div>
InfoUpdate Component 입니다.
<label
class="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
새 전화번호
</label>
<input type="text" class="form-control" />
</div>
<div>
<label
class="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
새 전화번호 확인
</label>
<input type="text" class="form-control" />
</div>
</div>
)
</div>
</div>
</div>
</div>
<div class="col"></div>
</div>
);
};
export default InfoUpdate;
client/src/components/Profile/Profile.js
View file @ 157857db
const Profile = () => {
return (
<div>
Profile Component 입니다.
<div className="container-md" style={{ background: "#FCF4FF" }}>
<>
<div className="row">
<form>
<label
class="form-label mx-2 my-4"
style={{ fontSize: "18px", fontWeight: "bold" }}
>
프로필 정보
</label>
<button
type="button"
className="btn btn-outline-white "
style={{
background: "#E8B7FF",
fontSize: "13px",
fontWeight: "bold",
}}
>
수정
</button>
</form>
<div className="col"></div>
<div className="col">
<img src="/image2.jpg" style={{height:'320px', width:'320px'}} className="rounded-circle mt-3" />
</div>
)
<div className="col"></div>
</div>
</>
</div>
);
};
export default Profile;
client/src/index.js
View file @ 157857db
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
......
client/src/pages/InfoUpdatePage.js 0 → 100644
View file @ 157857db
import InfoUpdate from "../components/Profile/InfoUpdate";
const InfoUpdatePage = () => {
return (
<div>
<InfoUpdate />
</div>
);
};
export default InfoUpdatePage;
\ No newline at end of file
client/src/pages/ProfilePage.js
View file @ 157857db
......@@ -6,11 +6,9 @@ import InfoUpdate from "../components/Profile/InfoUpdate";
const ProfilePage = () => {
return (
<div>
Profile Page 입니다.
<Header />
<Profile />
<Info />
<InfoUpdate />
{/* <InfoUpdate /> */}
</div>
);
};
......
package.json
View file @ 157857db
......@@ -13,7 +13,8 @@
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"nodemon": "^2.0.7",
"npm": "^7.18.1"
"npm": "^7.18.1",
"react-bootstrap": "^1.6.1"
},
"devDependencies": {},
"scripts": {
......
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