20241029(화) ▶️ 개인프로젝트 회원가입 페이지 만들기,react-hook-form 유효성 검사

 

로그인에 이어서 오늘은 회원가입 레이아웃을 완성했고,

회원가입도 로그인과 똑같이 react-hook-form 라이브러리를 이용해서 구현하였다😊

 

 

 

 

//SignupForm.tsx

const SignupForm = () => {

  const form = useForm<SignUpType>({
    mode: "onChange",
    resolver: zodResolver(userSchemas.signUpSchema),
    defaultValues: userDefaultValues.signUpDefaultValues,
  });

  const { isValid, isDirty, isSubmitting } = form.formState;

  const handleSubmit = async (data: SignUpType) => {
	   console.log(data);
  };

  return (
    <>
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(handleSubmit)}
          className="flex flex-col gap-3 sm:w-full md:w-[400px]"
        >
          <div className="relative">
            <FaUser className="absolute top-[17px] left-5" />
            <RHFInput
              type="email"
              name="email"
              placeholder="example@example.com"
              autoComplete="email"
              autoFocus
              className="pl-11"
            />
          </div>
		      {/* 중략 */}
          <Button
            type="submit"
            disabled={!isValid || !isDirty || isSubmitting}
            className="w-full rounded-full mt-6 p-6 transition ease-in delay-300"
          >
            {isSubmitting ? "처리 중..." : "가입하기"}
          </Button>
        </form>
      </Form>
    </>
  );
};

export default SignupForm;

 

이전포스팅에 로그인 부분을 정리해놔서 오늘은 간단하게 작성해본다😊

회원가입 페이지도 같이 react-hook-form의 useForm을 가져와서 사용했고,

resolver과 defaultValue부분을 회원가입에 맞게 변경해 주었다.

 

 

 

 

  const form = useForm<SignUpType>({
    mode: "onChange",
    resolver: zodResolver(userSchemas.signUpSchema),
    defaultValues: userDefaultValues.signUpDefaultValues,
  });

 

 

 

 

 

 

 

결과

 

 

 

 

 

가입하기 버튼을 누르면 폭죽이 터지는 라이브러리는 이전 포스팅에 정리해놔서 생략했다.👍

✏️ 폭죽효과 넣기, js-confetti 라이브러리