프로필화면 수정

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">
@@ -27,27 +32,54 @@ const InfoUpdate = () => {
           </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="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="row justify-content-center  my-4 ms-1"
+                className="justify-content-center ms-2 my-4"
                 style={{ fontSize: "25px", fontWeight: "bold" }}
               >
-              CHERRY #0805
+                #{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>
@@ -115,7 +147,6 @@ const InfoUpdate = () => {
           </div>
         </div>
       </div>
-      <div className="col"></div>
     </div>
   );
 };