Feature/#19 SignIn page

[StarryPro]

🔗 ISSUE NUMBER

• closed ✨ feat: 비밀번호 찾기 기능 구현 #48

🙌 구현 사항

• SearchPassword component 구현

📝 구현 설명

비밀번호 찾기 기능 구현 (SearchPassword component)

function SearchPassword() {
  const { isOpen, toggle } = useModal();
  const { mutate } = useMutation(authService.getTempPassword);
  const onSubmit: SubmitHandler<Pick<UserInfo, 'email'>> = async (emailObj) => {
    const { email } = emailObj;
    mutate(email, {
      onSuccess(data) {
        if (data) {
          toast.success('임시 비밀번호가 발송되었습니다.');
        }
      },
    });
  };

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<UserInfo>();

  return (
    <>
      <SSearchPw onClick={toggle}>비밀번호 찾기</SSearchPw>
      <Modal isOpen={isOpen} closeModal={toggle}>
        <Sform onSubmit={handleSubmit(onSubmit)}>
          <div>이메일 주소를 입력해주세요</div>
          <SignInput
            id="email"
            type="email"
            placeholder="이메일"
            errMessage="이메일 형식에 맞게 작성해주세요."
            pattern={EMAIL_REGEX}
            register={register}
            errors={errors}
            required
          />
          <Button styleType="neutral" size="small">
            임시 비밀번호 요청
          </Button>
        </Sform>
      </Modal>
    </>
  );
}

export default SearchPassword;

[seul-dev]

모달 컴포넌트 내에서 폼 제출 이벤트가 발생하면, signIn 페이지 내의 폼 이벤트도 함께 제출되는 문제가 있어요. 이 링크에서 보고된 이슈와 같아보여요.