Skip to content

GitLab

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

UI jaeyeon

parent a653751c
Hide whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 157857db
...@@ -4,6 +4,7 @@ import HomeGuestPage from "./pages/HomeGuestPage"; ...@@ -4,6 +4,7 @@ import HomeGuestPage from "./pages/HomeGuestPage";
import HomeUserPage from "./pages/HomeUserPage"; import HomeUserPage from "./pages/HomeUserPage";
import ProfilePage from "./pages/ProfilePage"; import ProfilePage from "./pages/ProfilePage";
import RoomPage from "./pages/RoomPage"; import RoomPage from "./pages/RoomPage";
import InfoUpdatePage from "./pages/InfoUpdatePage";
function App() { function App() {
return ( return (
...@@ -13,6 +14,7 @@ function App() { ...@@ -13,6 +14,7 @@ function App() {
<Route exact path="/" component={HomeGuestPage} /> <Route exact path="/" component={HomeGuestPage} />
<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="/profileupdate/:id" component={InfoUpdatePage} />
<Route path="/Room/:id/:channel" component={RoomPage} /> <Route path="/Room/:id/:channel" component={RoomPage} />
</Switch> </Switch>
{/* </AuthProvider> */} {/* </AuthProvider> */}
......
client/src/components/Profile/Info.js
View file @ 157857db
const Info = () => { const Info = () => {
return ( return (
<div> <div className="container-md vh-100" style={{ background: "#FCF4FF" }}>
Info Component 입니다. <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>
) <div className="col"></div>
</div>
</div>
);
}; };
export default Info; export default Info;
client/src/components/Profile/InfoUpdate.js
View file @ 157857db
const InfoUpdate = () => { const InfoUpdate = () => {
return ( return (
<div class="container-md vh-100" style={{ background: "#FCF4FF" }}>
<div class="row">
<div> <div>
InfoUpdate Component 입니다. <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>
<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>
) <div class="col"></div>
</div>
);
}; };
export default InfoUpdate; export default InfoUpdate;
client/src/components/Profile/Profile.js
View file @ 157857db
const Profile = () => { const Profile = () => {
return ( return (
<div> <div className="container-md" style={{ background: "#FCF4FF" }}>
Profile Component 입니다. <>
<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>
) </>
</div>
);
}; };
export default Profile; export default Profile;
client/src/index.js
View file @ 157857db
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom'; import ReactDOM from "react-dom";
import './index.css'; import "./index.css";
import 'bootstrap' import "bootstrap";
import App from './App'; import 'bootstrap/dist/css/bootstrap.min.css'
import reportWebVitals from './reportWebVitals'; import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>,
document.getElementById('root') document.getElementById("root")
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log)) // to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals(); reportWebVitals();
\ No newline at end of file
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"; ...@@ -6,11 +6,9 @@ import InfoUpdate from "../components/Profile/InfoUpdate";
const ProfilePage = () => { const ProfilePage = () => {
return ( return (
<div> <div>
Profile Page 입니다.
<Header />
<Profile /> <Profile />
<Info /> <Info />
<InfoUpdate /> {/* <InfoUpdate /> */}
</div> </div>
); );
}; };
......
package.json
View file @ 157857db
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
"express": "^4.17.1", "express": "^4.17.1",
"jsonwebtoken": "^8.5.1", "jsonwebtoken": "^8.5.1",
"nodemon": "^2.0.7", "nodemon": "^2.0.7",
"npm": "^7.18.1" "npm": "^7.18.1",
"react-bootstrap": "^1.6.1"
}, },
"devDependencies": {}, "devDependencies": {},
"scripts": { "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