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="/cherry.jpg"
                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>
            <div className="d-flex justify-content-center">
              <label
                class="form-label me-3"
                style={{ fontSize: "13px", fontWeight: "bold" }}
              >
                현재 비밀번호
              </label>
              <input
                type="text"
                class="form-control"
                style={{ height: "38px", width: "200px" }}
              />
              <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">
                <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>
            </div>
          </div>
        </div>
      </div>
      <div class="col"></div>
    </div>
  );
};

export default InfoUpdate;