프로필화면 수정

client/src/components/Profile/InfoUpdate.js

 import { Link } from "react-router-dom";
 
 const InfoUpdate = () => {
+
+  function inputfile(){
+    console.log('aa')
+  }
   const id = 1;
+  const number = 1234;
   return (
     <div className="container" style={{ background: "#FCF4FF" }}>
       <div className="row">
@@ -22,32 +27,59 @@ const InfoUpdate = () => {
                 fontWeight: "bold",
               }}
             >
-             돌아가기
+              돌아가기
             </button>
           </Link>
         </div>
       </div>
-      <div className="col"></div>
+
       <div className="col">
         <div>
           <div className="row">
             <div className="d-flex justify-content-center">
               <img
                 src="/cherry.jpg"
+                id="imgfile"
                 className="rounded-circle mt-2"
                 style={{ height: "320px", width: "320px" }}
               />
             </div>
-            <div
-              className="row justify-content-center  my-4 ms-1"
-              style={{ fontSize: "25px", fontWeight: "bold" }}
-            >
-              CHERRY #0805
+            <div className="mt-2 d-flex justify-content-end">
+              <label for='inputfile' style={{ fontSize: "13px", fontWeight: "bold" }}>사진 선택</label>
+              <input type="file" id='inputfile' style={{display:'none'}}/>
+            </div>
+            <div className="col d-flex justify-content-center">
+              <input
+                type="text"
+                className="form-control my-4 "
+                placeholder="사용자명 입력"
+                style={{
+                  background: "#fcf4ff",
+                  borderTop: "0",
+                  borderRight: "0",
+                  borderLeft: "0",
+                  borderBottom: "1",
+                  borderColor: "#E8B7FF",
+                  height: "38px",
+                  width: "130px",
+                }}
+              />
+              <div
+                className="justify-content-center ms-2 my-4"
+                style={{ fontSize: "25px", fontWeight: "bold" }}
+              >
+                #{number}
+              </div>
             </div>
+
             <div className="d-flex justify-content-center">
               <label
                 class="form-label me-3"
-                style={{ fontSize: "13px", fontWeight: "bold" }}
+                style={{
+                  outline: "none",
+                  fontSize: "13px",
+                  fontWeight: "bold",
+                }}
               >
                 현재 비밀번호
               </label>
@@ -57,16 +89,16 @@ const InfoUpdate = () => {
                 style={{ height: "38px", width: "200px" }}
               />
               <button
-              type="button"
-              className="btn btn-outline-white ms-2"
-              style={{
-                background: "#E8B7FF",
-                fontSize: "13px",
-                fontWeight: "bold",
-              }}
-            >
-            수정하기
-            </button>
+                type="button"
+                className="btn btn-outline-white ms-2"
+                style={{
+                  background: "#E8B7FF",
+                  fontSize: "13px",
+                  fontWeight: "bold",
+                }}
+              >
+                수정하기
+              </button>
             </div>
             <div class="col-6">
               <div class="input-group mx-2 my-3">
@@ -115,7 +147,6 @@ const InfoUpdate = () => {
           </div>
         </div>
       </div>
-      <div className="col"></div>
     </div>
   );
 };