[myCart] 회원가입 페이지 // 프로필 설정

 

 복잡한 유효성 검사를 위해zod 라이브러리를 설치한다.

 

SignupPage.jsx ,css 를 생성한다.

import { useForm } from "react-hook-form";

import "./SignupPage.css";

import user from "../../assets/user.webp";

const SignupPage = () => {

  // const [profilePic, setProfilePic] = useState(null);

  const {

    register,

    handleSubmit,

    formState: { errors },

    watch,

  } = useForm();

  const submitData = (formData) => console.log(formData);

  //console.log(profilePic);

  return (

    <section className="align_center form_page">

      <form

        className="authentication_form signup_form"

        onSubmit={handleSubmit(submitData)}

      >

        <h2>회원가입 폼</h2>

        <div className="image_input_section">

          <div className="image_preview">

            <img src={user} id="file-ip-1-preview" />

          </div>

          <label htmlFor="file-ip-1" className="image_label">

            이미지 업로드

          </label>

          <input type="file" id="file-ip-1" className="image_input" />

        </div>

        {/* Form Inputs */}

        <div className="form_inputs signup_form_input">

          <div>

            <label htmlFor="name">Name</label>

            <input

              id="name"

              className="form_text_input"

              type="text"

              placeholder="이름 입력..."

              {...register("name", {

                required: "이름을 입력해주세요.",

                minLength: { value: 2, message: "이름은 최소 2자 이상" },

                maxLength: { value: 10, message: "이름은 최대 10자 이하" },

              })}

            />

            {errors.name && (

              <em className="form_error">{errors.name.message}</em>

            )}

          </div>

          <div>

            <label htmlFor="email">Email</label>

            <input

              id="email"

              className="form_text_input"

              type="email"

              placeholder="이메일 입력..."

              {...register("email", {

                required: "이메일을 입력해주세요.",

                pattern: {

                  value: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,

                  message: "올바른 이메일 주소를 입력하세요.",

                },

              })}

            />

            {errors.email && (

              <em className="form_error">{errors.email.message}</em>

            )}

          </div>

          <div>

            <label htmlFor="password">Password</label>

            <input

              id="password"

              className="form_text_input"

              type="password"

              placeholder="패스워드 입력..."

              {...register("password", {

                required: "패스워드를 입력해주세요.",

                minLength: { value: 4, message: "패스워드는 최소 4자 이상." },

              })}

            />

            {errors.password && (

              <em className="form_error">{errors.password.message}</em>

            )}

          </div>

          <div>

            <label htmlFor="cpassword">Confirm Password</label>

            <input

              id="cpassword"

              className="form_text_input"

              type="password"

              placeholder="패스워드 확인 입력..."

              {...register("confirmPassword", {

                required: true,

                validate: (value) => {

                  if (watch("password") != value) {

                    return "패스워드가 맞지 않습니다.";

                  }

                },

              })}

            />

            {errors.confirmPassword && (

              <em className="form_error">{errors.confirmPassword.message}</em>

            )}

          </div>

          <div className="signup_textares_section">

            <label htmlFor="address">Delivery Address</label>

            <textarea

              id="address"

              className="input_textarea"

              placeholder="배송주소 입력..."

              {...register("deliveryAddress", {

                required: "배송주소를 입력해주세요.",

                minLength: { value: 10, message: "배송주소는 최소 10자 이상." },

              })}

            />

            {errors.deliveryAddress && (

              <em className="form_error">{errors.deliveryAddress.message}</em>

            )}

          </div>

        </div>

        <button className="search_button form_submit" type="submit">

          Submit

        </button>

      </form>

    </section>

  );

};

export default SignupPage;

 

SignupPage.css

.signup_form {

  width: 40%;

}

.image_input_section {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.image_preview {

  width: 120px;

  height: 120px;

  border-radius: 100%;

  overflow: hidden;

  margin-bottom: 15px;

}

.image_preview img {

  width: 100%;

  height: 100%;

}

.image_input {

  display: none;

}

.image_label {

  display: inline-block;

  padding: 10px 20px;

  margin-bottom: 20px;

  text-align: center;

  background: #6457f9;

  color: #fff;

  font-size: 15px;

  font-family: inherit;

  text-transform: Uppercase;

  font-weight: 500;

  border-radius: 5px;

  cursor: pointer;

  width: fit-content;

}

.signup_form_input {

  width: 100%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

}

.signup_textares_section {

  grid-column: 1/3;

}

.input_textarea {

  font-size: 17px;

  font-weight: 500;

  font-family: inherit;

  height: 120px;

  resize: none;

  padding: 4px 8px;

  outline: none;

}

 

 

App.jsx에 SignupPage로 교체

      <main>

        {/* <HomePage /> */}

        {/* <ProductsPage /> */}

        {/* <SingleProductPage /> */}

        {/* <CartPage /> */}

        {/* <MyOrderPage /> */}

        {/* <LoginPage /> */}

        <SignupPage />

      </main>

 

 

 

 

 

유효성 검사 테스트하기 

 

---

 

이미지 업로드 

 

  const [profilePic, setProfilePic] = useState(null); //프로파일 이미지

  console.log(profilePic);

 <div className="image_input_section">

          <div className="image_preview">

            <img src={user} id="file-ip-1-preview" />

          </div>

          <label htmlFor="file-ip-1" className="image_label">

            이미지 업로드

          </label>

          <input

            onChange={(e) => setProfilePic(e.target.files[0])}

            type="file"

            id="file-ip-1"

            className="image_input"

          />

        </div>

 

 

 이미지 업로드 input 에 onchange 추가 

 

 

 

이미지 업로드 클릭하고 사진을 올려봤다. 

 

콘솔에 아래와 같이 출력됨

 

등록한 사진을 보여주기 위해서 

URL.createObjectURL(파일)을 사용

<h2>회원가입 폼</h2>

        <div className="image_input_section">

          <div className="image_preview">

            {/* 프로필 사진 설정 시 이미지 출력*/}

            <img

              src={profilePic ? URL.createObjectURL(profilePic) : user}

              id="file-ip-1-preview"

            />

          </div>

          <label htmlFor="file-ip-1" className="image_label">

            이미지 업로드

          </label>

          <input

            onChange={(e) => setProfilePic(e.target.files[0])}

            type="file"

            id="file-ip-1"

            className="image_input"

          />

        </div>

 

 

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static

URL: createObjectURL() static method - Web APIs | MDN

 

 

https://kyounghwan01.github.io/blog/JS/JSbasic/Blob-url/#createobjecturl

image Blob 객체를 url로 바꾸어 img 띄우기, javascript, JavaScript, blob, createObjectUrl, revokeObjectUrl, react, vue,