20241028(월) ▶️ 개인프로젝트 로그인 모달창 만들기,react-hook-form 유효성 검사하기

20241028(월) - TIL

오늘은 shadcnUI의 모달을 이용해서 로그인 페이지를 만들어보았다😊

 

 

 

 

shadcn/ui Dialog

Dialog

 

 

---

 

//SignInModal.tsx

const SignInModal = ({ title = "로그인/회원가입", className }: SignInProps) => {
  return (
    <Dialog>
      <DialogTrigger className={className}>{title}</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle className="relative w-[100px] h-auto mb-5">
            <Image src={LogoImage} alt="logo image" className="fill" />
            <DialogDescription className="sr-only">회원가입</DialogDescription>
          </DialogTitle>
        </DialogHeader>
        <SignInContent />
      </DialogContent>
    </Dialog>
  );
};

 

shadcn/ui의 Dialog를 가져와서 모달창으로 구현했다 😊

 

 

 

 

 

 

 

//SignInEmail.tsx

const SignInEmail = () => {
  const [showPassword, setShowPassword] = useState(false);
  
  const form = useForm<LoginType>({
    mode: "onChange",
    resolver: zodResolver(userSchemas.loginSchema),
    defaultValues: userDefaultValues.loginDefaultValues,
  });

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

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(handleSubmit)}
        className="flex flex-col gap-3 sm:w-[275px] md:w-[375px]"
      >
        <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 SignInEmail;

 

`이메일로 로그인` 버튼을 클릭하면 이메일로 로그인 할 수 있는 창이 나오고

조건부 랜더링으로 해당 이메일 폼 컴포넌트가 뜨게 만들었다.

 

일반 이메일 로그인 폼에서는 react-hook-form을 사용했다!

shadcn/ui 에서도 react-hook-form과 Zod를 사용하여 양식을 만들라고 한다.

 

 

 

 

react-hook-form 사용해서 로그인 폼 만들기

//SignInEmail.tsx

const form = useForm<LoginType>({
  mode: "onChange",
  resolver: zodResolver(userSchemas.loginSchema),
  defaultValues: userDefaultValues.loginDefaultValues,
});

 

`mode`: onChange 폼이 변경할 때 마다 유효성을 검사하도록 설정(제어 컴포넌트)

`resolver` : zod 외부 유효성 검증 라이브러리와 연결해서 userSchemas.loginSchema에 따라 검증

`defaultValues` : 폼 필드의 초기값 설정

 

 

 

 

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

 

`isValid` : 폼이 유효한지의 여부

`isDirty` : 사용자가 입력을 시작했는지의 따른 여부

`isSubmitting` : 폼이 제출중인지의 여부

 

 

 

 

 

//유효성 검사 button
<Button
    type="submit"
    disabled={!isValid || !isDirty || isSubmitting}
    className="w-full rounded-full mt-6 p-6 transition ease-in delay-300"
>
    {isSubmitting ? "처리 중..." : "로그인"}
</Button>

 

`disabled` : 폼이 유효하지 않고 (!isValid), 입력이 수정되지 않고(!isDirty), 폼이 제출 중일경우 (isSubmitting) 제출 버튼을 비활성화 한다.

`isSubmitting` : isSubmitting이 true면 처리중… 을 띄우고 false일때는 로그인 버튼 텍스트를 보여준다.

 

 

 

 

✨ 결과

 

 

이메일 폼 같은 경우에는 react-hook-form을 사용했는데

공부하면서 처음 적용해 보니 시간이 2일이나 소요되었다 😂 하루 반나절만에 끝날 줄 알았지...크흡

 

내일 회원가입도 react-hook-form을 사용해서 레이아웃 적용할 예정이다..!

 

 

 

---

 

React-hook-form과 Zod사용 정리 포스팅

https://seokachu.tistory.com/263