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

client/src/App.js

@@ -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 (
@@ -12,6 +13,7 @@ function App() {
       <Switch>
         <Route exact path="/" component={HomeGuestPage} />
         <Route exact path="/user" component={HomeUserPage} />
+        <Route path="/profile/:id/update" component={InfoUpdatePage} />
         <Route path="/profile/:id" component={ProfilePage} />
         <Route path="/Room/:id/:channel" component={RoomPage} />
       </Switch>

client/src/components/Profile/Info.js

+import User from "../Room/User";
+
 const Info = () => {
   return (
-        <div>
-            Info Component 입니다.
+    <div className="container" 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-5">
+          <h2 className="mb-3" style={{ fontSize: "13px", fontWeight: "bold" }}>
+            이름
+          </h2>
+          <h2 className="mb-4 mt-2" style={{ fontSize: "25px", fontWeight: "bold" }} >김채린</h2>
+          <h2
+            className="mb-3 mt-2"
+            style={{ fontSize: "13px", fontWeight: "bold" }}
+          >
+            전화번호
+          </h2>
+          <h2 className="mb-3 mt-2" style={{ fontSize: "25px", fontWeight: "bold" }}>010-8628-8984</h2>
+        </div>
+        <div className="col"></div>
+      </div>
     </div>
-    )
+  );
 };
 
 export default Info;

client/src/components/Profile/InfoUpdate.js

+import { Link } from "react-router-dom";
+
 const InfoUpdate = () => {
+  const id = 1;
   return (
+    <div class="container" style={{ background: "#FCF4FF" }}>
+      <div class="row">
+        <div>
+          <label
+            class="form-label mx-2 my-4"
+            style={{ fontSize: "18px", fontWeight: "bold" }}
+          >
+            프로필 정보
+          </label>
+          <Link to={`/profile/${id}`}>
+            <button
+              type="button"
+              class="btn btn-outline-white "
+              style={{
+                background: "#E8B7FF",
+                fontSize: "13px",
+                fontWeight: "bold",
+              }}
+            >
+              확인
+            </button>
+          </Link>
+        </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>
-            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>
+                  <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 class="col"></div>
     </div>
-    )
+  );
 };
 
 export default InfoUpdate;

client/src/components/Profile/Profile.js

+import { Link } from "react-router-dom";
+
 const Profile = () => {
+  const id = 1;
   return (
-        <div>
-            Profile Component 입니다.
+    <div className="container" style={{ background: "#FCF4FF" }}>
+      <>
+        <div className="row">
+          <form>
+            <label
+              class="form-label mx-2 my-4"
+              style={{ fontSize: "18px", fontWeight: "bold" }}
+            >
+              프로필 정보
+            </label>
+            <Link to={`/profile/${id}/update`}>
+              <button
+                type="button"
+                className="btn btn-outline-white "
+                style={{
+                  background: "#E8B7FF",
+                  fontSize: "13px",
+                  fontWeight: "bold",
+                }}
+              >
+                수정
+              </button>
+            </Link>
+          </form>
+          <div className="col"></div>
+          <div className="col">
+            <div className="d-flex justify-content-center">
+              <img
+                src="/image2.jpg"
+                className="rounded-circle"
+                style={{ height: "320px", width: "320px" }}
+              />
+            </div>
+          </div>
+          <div className="col"></div>
+        </div>
+      </>
     </div>
-    )
+  );
 };
 
 export default Profile;

client/src/index.js

 import React from "react";
 import ReactDOM from "react-dom";
-import './scss/custom.scss';
+import "./scss/custom.scss";
 import "./index.css";
 import "bootstrap";
-import 'bootstrap/dist/css/bootstrap.min.css'
+import "bootstrap/dist/css/bootstrap.min.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 

client/src/pages/InfoUpdatePage.js

+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

@@ -6,11 +6,8 @@ import InfoUpdate from "../components/Profile/InfoUpdate";
 const ProfilePage = () => {
   return (
     <div>
-      Profile Page 입니다.
-      <Header />
       <Profile />
       <Info />
-      <InfoUpdate />
     </div>
   );
 };