diff --git a/src/components/auth/findPwStep/Step01VerifyEmail.tsx b/src/components/auth/findPwStep/Step01VerifyEmail.tsx new file mode 100644 index 0000000..caae7c6 --- /dev/null +++ b/src/components/auth/findPwStep/Step01VerifyEmail.tsx @@ -0,0 +1,144 @@ +import { useEffect, useState } from "react"; +import { type SubmitHandler, useForm, useWatch } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { toast } from "sonner"; +import type { z } from "zod"; + +import { step01Schema } from "@/utils/validation"; + +import CommonAuthInput from "@/components/auth/CommonAuthInput"; +import Button from "@/components/common/Button"; + +import useAuthStore from "@/store/useAuthStore"; + +interface IStep01VerifyEmailProps { + onNext: () => void; +} + +type TStep01FormValues = z.infer; + +export default function Step01VerifyEmail({ onNext }: IStep01VerifyEmailProps) { + const { setEmail } = useAuthStore(); + + const [sendCode, setSendCode] = useState(false); + const [, setCodeVerify] = useState(false); + const [codeError, setCodeError] = useState(""); + + const { + register, + handleSubmit, + control, + trigger, + formState: { errors, isValid }, + } = useForm({ + mode: "onBlur", + resolver: zodResolver(step01Schema), + }); + + const watchedEmail = useWatch({ control, name: "email" }); + const watchedCode = useWatch({ control, name: "code" }); + + const postSendCode = async () => { + setCodeVerify(false); + const isEmailValid = await trigger("email"); + if (isEmailValid && watchedEmail) { + setSendCode(true); + toast.success("인증번호가 발송되었습니다.", { + description: "테스트용: 아무 번호나 입력하세요", + }); + } + }; + + const onSubmit: SubmitHandler = async (data) => { + setEmail(data.email); + onNext(); + }; + + useEffect(() => { + setCodeVerify(false); + setCodeError(""); + }, [watchedCode, watchedEmail]); + + useEffect(() => { + setSendCode(false); + }, [watchedEmail]); + + return ( +
+
+

+

비밀번호 찾기를 위해

+

이메일 인증을 진행할게요

+

+ +
+ {!sendCode ? ( +
+
+ +
+ +
+ ) : ( + + )} + + +
+ +
+ +
+ + {sendCode && ( +
+ +
+ )} +
+
+ ); +} diff --git a/src/components/auth/findPwStep/Step02ResetPassword.tsx b/src/components/auth/findPwStep/Step02ResetPassword.tsx new file mode 100644 index 0000000..5f4982f --- /dev/null +++ b/src/components/auth/findPwStep/Step02ResetPassword.tsx @@ -0,0 +1,77 @@ +import { type SubmitHandler, useForm } from "react-hook-form"; +import { useNavigate } from "react-router-dom"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { toast } from "sonner"; +import type { z } from "zod"; + +import { step02Schema } from "@/utils/validation"; + +import CommonAuthInput from "@/components/auth/CommonAuthInput"; +import Button from "@/components/common/Button"; + +import useAuthStore from "@/store/useAuthStore"; + +type TStep02FormValues = z.infer; + +export default function Step02ResetPassword() { + const navigate = useNavigate(); + const { setPassword } = useAuthStore(); + const { + register, + handleSubmit, + formState: { errors, isValid }, + } = useForm({ + mode: "onBlur", + resolver: zodResolver(step02Schema), + }); + + const onSubmit: SubmitHandler = (data) => { + setPassword(data.password); + toast.success("비밀번호가 변경되었습니다.", { + description: "로그인 페이지로 이동합니다.", + }); + navigate("/auth/login"); + }; + + return ( +
+
+

+

새로운 비밀번호를

+

입력해 주세요

+

+ +
+ + + +
+ +
+ +
+
+ ); +} diff --git a/src/pages/auth/FindPw.tsx b/src/pages/auth/FindPw.tsx index ff36825..5b09fd3 100644 --- a/src/pages/auth/FindPw.tsx +++ b/src/pages/auth/FindPw.tsx @@ -1,3 +1,19 @@ +import { useState } from "react"; + +import Step01VerifyEmail from "@/components/auth/findPwStep/Step01VerifyEmail"; +import Step02ResetPassword from "@/components/auth/findPwStep/Step02ResetPassword"; + export default function FindPw() { - return
FindPw
; + const [step, setStep] = useState(1); + + const handleNextStep = () => { + setStep((prev) => prev + 1); + }; + + return ( + <> + {step === 1 && } + {step === 2 && } + + ); } diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx index 6a630e9..6c4ea4b 100644 --- a/src/pages/auth/Login.tsx +++ b/src/pages/auth/Login.tsx @@ -59,7 +59,7 @@ export default function Login() { /> 이메일/비밀번호를 잊어버렸어요