UI 수정 jaeyeon

client/src/App.js

@@ -13,8 +13,8 @@ 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="/profileupdate/:id" component={InfoUpdatePage} />
         <Route path="/Room/:id/:channel" component={RoomPage} />
       </Switch>
       {/* </AuthProvider> */}

client/src/components/Profile/Info.js

+import User from "../Room/User";
 
 const Info = () => {
   return (
-    <div className="container-md vh-100" style={{ background: "#FCF4FF" }}>
+    <div className="container" style={{ background: "#FCF4FF" }}>
       <div
         className="row justify-content-center  mx-1"
         style={{ fontSize: "25px", fontWeight: "bold" }}
@@ -10,23 +11,18 @@ const Info = () => {
       </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" }}
-            >
+        <div className="col-6 my-5">
+          <h2 className="mb-3" style={{ fontSize: "13px", fontWeight: "bold" }}>
             이름
-            </label>
-            <input type="text" className="form-control" />
-            <label
-              className="form-label mb-3 mt-2"
+          </h2>
+          <h2 className="mb-4 mt-2" style={{ fontSize: "25px", fontWeight: "bold" }} >김채린</h2>
+          <h2
+            className="mb-3 mt-2"
             style={{ fontSize: "13px", fontWeight: "bold" }}
           >
             전화번호
-            </label>
-            <input type="text" className="form-control" />
-          </form>
+          </h2>
+          <h2 className="mb-3 mt-2" style={{ fontSize: "25px", fontWeight: "bold" }}>010-8628-8984</h2>
         </div>
         <div className="col"></div>
       </div>

client/src/components/Profile/InfoUpdate.js

+import { Link } from "react-router-dom";
 
 const InfoUpdate = () => {
+  const id=1;
   return (
-    <div class="container-md vh-100" style={{ background: "#FCF4FF" }}>
+    <div class="container" style={{ background: "#FCF4FF" }}>
       <div class="row">
         <div>
           <label
@@ -10,6 +12,7 @@ const InfoUpdate = () => {
           >
             프로필 정보
           </label>
+          <Link to={`/profile/${id}`}>
           <button
             type="button"
             class="btn btn-outline-white "
@@ -21,6 +24,7 @@ const InfoUpdate = () => {
           >
             확인
           </button>
+          </Link>
         </div>
         </div>
         <div class="col"></div>

client/src/components/Profile/Profile.js

+import { Link } from "react-router-dom";
+
 const Profile = () => {
+  const id = 1;
   return (
-    <div className="container-md" style={{ background: "#FCF4FF" }}>
+    <div className="container" style={{ background: "#FCF4FF" }}>
       <>
         <div className="row">
           <form>
@@ -10,6 +13,7 @@ const Profile = () => {
             >
               프로필 정보
             </label>
+            <Link to={`/profile/${id}/update`}>
               <button
                 type="button"
                 className="btn btn-outline-white "
@@ -21,10 +25,13 @@ const Profile = () => {
               >
                 수정
               </button>
+            </Link>
           </form>
           <div className="col"></div>
           <div className="col">
-            <img src="/image2.jpg" style={{height:'320px', width:'320px'}} className="rounded-circle mt-3" />
+          <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>