[비밀번호 찾기] 인증번호 발송 및 검증 로직 구현

src/api/auth/index.ts

@@ -15,3 +15,16 @@ export const getMe = async () => {
   const { data } = await accessClient.get<UserResponse>('/owner');
   return UserResponse.parse(data);
 };
+
+export const findPasswordVerify = ({ email }: { email: string }) => client.post('/owners/password/reset/verification', { address: email });
+
+export const findPassword = ({
+  address,
+  certificationCode,
+}: {
+  address: string;
+  certificationCode: string;
+}) => client.post('/owners/password/reset/send', {
+  address,
+  certification_code: certificationCode,
+});

src/api/index.ts

@@ -14,7 +14,7 @@ const accessClient = axios.create({
   timeout: 2000,
 });
 
-const refresh = (config: InternalAxiosRequestConfig) => {
+const refresh = async (config: InternalAxiosRequestConfig) => {
   const refreshToken = localStorage.getItem('refresh_token');
 
   if (refreshToken) {

src/layout/AuthLayout/index.tsx

@@ -10,7 +10,8 @@ export default function AuthLayout() {
   const { user, setUser } = useUserStore();
 
   useEffect(() => {
-    setUser();
+    // @ChoiWonBeen 토큰없음 에러제거. TODO: setUser가 에러를 다루는 문제 제거
+    setUser().catch(() => {});
     if (user) {
       navigate('/', { replace: true });
     }

src/page/Auth/FindPassword/NewPassword/index.tsx

@@ -1,8 +1,10 @@
 import { ReactComponent as KoinLogo } from 'assets/svg/auth/koin-logo.svg';
 import { ReactComponent as Blind } from 'assets/svg/auth/blind.svg';
+import useRouteCheck from 'page/Auth/FindPassword/hooks/useRouteCheck';
 import styles from './NewPassword.module.scss';
 
 export default function NewPassword() {
+  useRouteCheck('authCheck', '/find-password');
   return (
     <div className={styles.template}>
       <KoinLogo className={styles.logo} />

src/page/Auth/FindPassword/SendAuthNumber/SendAuthNumber.module.scss

@@ -60,10 +60,14 @@
   width: 368px;
   height: 48px;
   color: white;
-  background: #c4c4c4;
+  background: #175c8e;
   cursor: pointer;
   margin-top: 250px;
   box-sizing: border-box;
+
+  &:disabled {
+    background-color: #c4c4c4;
+  }
 }
 
 .auth-container {

src/page/Auth/FindPassword/SendAuthNumber/index.tsx

@@ -1,34 +1,63 @@
 import { Outlet } from 'react-router-dom';
 import { ReactComponent as KoinLogo } from 'assets/svg/auth/koin-logo.svg';
+import { useState } from 'react';
 import cn from 'utils/ts/className';
+import { useVerifyEmail, useSubmit } from 'query/auth';
 import styles from './SendAuthNumber.module.scss';
 
 export default function FindPassword() {
+  const [emailInput, setEmailInput] = useState('');
+  const [verifyInput, setVerifyInput] = useState('');
+  const { verifyEmail } = useVerifyEmail();
+  const submit = useSubmit();
+
   return (
     <>
       <div className={styles.template}>
         <KoinLogo className={styles.logo} />
         <form className={styles.form}>
           <label className={styles.form__label} htmlFor="email">
             이메일 입력
-            <input
-              className={styles.form__input}
-              type="text"
-              id="email"
-            />
-          </label>
-          <label className={styles.form__label} htmlFor="auth-num">
-            인증번호 보내기
             <div className={styles['auth-container']}>
               <input
-                className={cn({ [styles.form__input]: true, [styles['form__input--auth']]: true })}
+                className={cn({
+                  [styles.form__input]: true,
+                  [styles['form__input--auth']]: true,
+                })}
+                onChange={(e) => setEmailInput(e.target.value)}
                 type="text"
-                id="auth-num"
+                id="email"
               />
-              <button type="button" className={styles['auth-button']}>인증번호 발송</button>
+              <button
+                type="button"
+                className={styles['auth-button']}
+                onClick={() => verifyEmail.mutate(emailInput)}
+                disabled={verifyEmail.isLoading}
+              >
+                {verifyEmail.isSuccess ? '재발송' : '인증번호 발송'}
+              </button>
             </div>
           </label>
-          <button type="button" className={styles.submit}>다음</button>
+          <label className={styles.form__label} htmlFor="auth-num">
+            인증번호 보내기
+            <input
+              className={styles.form__input}
+              type="text"
+              id="auth-num"
+              onChange={(e) => setVerifyInput(e.target.value)}
+            />
+          </label>
+          <button
+            type="submit"
+            onClick={(e) => {
+              e.preventDefault();
+              submit({ emailInput, verifyInput });
+            }}
+            className={styles.submit}
+            disabled={!verifyEmail.isSuccess}
+          >
+            다음
+          </button>
         </form>
       </div>
       <Outlet />

src/page/Auth/FindPassword/hooks/useRouteCheck.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const useRouteCheck = (prevRoute: string, entryRoute: string) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const 이전_상태를_가지고_넘어왔는가 = location.state && (prevRoute in location.state);
+    if (!이전_상태를_가지고_넘어왔는가) {
+      navigate(entryRoute, { replace: true });
+    }
+  }, [location.state, navigate, entryRoute, prevRoute]);
+};
+
+export default useRouteCheck;

src/page/Auth/Login/index.tsx

@@ -6,7 +6,7 @@ import { ReactComponent as Logo } from 'assets/svg/auth/koin-logo.svg';
 import { ReactComponent as ShowIcon } from 'assets/svg/auth/show.svg';
 import { ReactComponent as BlindIcon } from 'assets/svg/auth/blind.svg';
 import { ReactComponent as LockIcon } from 'assets/svg/auth/lock.svg';
-import useLogin from 'query/auth';
+import { useLogin } from 'query/auth';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { LoginParams } from 'model/auth';

src/query/auth.ts

@@ -1,10 +1,15 @@
 import { useMutation } from '@tanstack/react-query';
-import { postLogin } from 'api/auth';
+import { postLogin, findPasswordVerify, findPassword } from 'api/auth';
 import { LoginForm } from 'model/auth';
 import { useNavigate } from 'react-router-dom';
 import usePrevPathStore from 'store/path';
 
-const useLogin = () => {
+interface VerifyInput {
+  emailInput: string;
+  verifyInput: string;
+}
+
+export const useLogin = () => {
   const navigate = useNavigate();
   const { prevPath } = usePrevPathStore((state) => state);
 
@@ -29,4 +34,27 @@ const useLogin = () => {
   return { login: mutate, error, isError };
 };
 
-export default useLogin;
+export const useVerifyEmail = () => {
+  const { mutate, isLoading, isSuccess } = useMutation({
+    mutationFn: (emailInput: string) => findPasswordVerify({ email: emailInput }),
+  });
+  return { verifyEmail: { mutate, isLoading, isSuccess } };
+};
+
+export const useSubmit = () => {
+  const navigate = useNavigate();
+  const { mutate: submit } = useMutation({
+    mutationFn: ({
+      emailInput,
+      verifyInput,
+    }
+    :VerifyInput) => findPassword({ address: emailInput, certificationCode: verifyInput }),
+    onSuccess: () => {
+      navigate('/new-password', { state: { authCheck: true }, replace: true });
+    },
+    onError: () => {
+      // TODO: 이메일 인증 실패 시 UI 처리 필요
+    },
+  });
+  return submit;
+};