Merge pull request #81 from BCSDLab/feature/#45

[비밀번호 찾기] 오류시 피드백 추가
BCSDLab · Jan 14, 2024 · 4a9364e · 4a9364e
2 parents 1b458c4 + 4ac9d7b
commit 4a9364e
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 10 deletions.
diff --git a/src/assets/svg/error/auth-error.svg b/src/assets/svg/error/auth-error.svg
diff --git a/src/page/Auth/FindPassword/SendAuthNumber/SendAuthNumber.module.scss b/src/page/Auth/FindPassword/SendAuthNumber/SendAuthNumber.module.scss
@@ -33,6 +33,14 @@
     &--auth {
       width: 255px;
     }
+
+    &--error {
+      border: 1px solid #f7941e;
+    }
+
+    &--normal {
+      border: 1px solid #d2dae2;
+    }
   }
 
   &__label {
@@ -46,6 +54,14 @@
     flex-direction: column;
     gap: 8px;
   }
+
+  &__error {
+    display: flex;
+    color: #f7941e;
+    font-size: 12px;
+    align-items: center;
+    gap: 8px;
+  }
 }
 
 .auth-button {

diff --git a/src/page/Auth/FindPassword/SendAuthNumber/index.tsx b/src/page/Auth/FindPassword/SendAuthNumber/index.tsx
@@ -1,6 +1,7 @@
 import { Outlet } from 'react-router-dom';
 import { ReactComponent as KoinLogo } from 'assets/svg/auth/koin-logo.svg';
-import { useState } from 'react';
+import { ReactComponent as ErrorIcon } from 'assets/svg/error/auth-error.svg';
+import { useEffect, useState } from 'react';
 import cn from 'utils/ts/className';
 import { useVerifyEmail, useSubmit } from 'query/auth';
 import useEmailAuthStore from 'store/useEmailAuth';
@@ -10,7 +11,19 @@ export default function FindPassword() {
   const { email, setEmail } = useEmailAuthStore();
   const [verify, setVerify] = useState('');
   const { verifyEmail } = useVerifyEmail();
-  const submit = useSubmit();
+  const { authNumber } = useSubmit();
+
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      sessionStorage.removeItem('email-storage');
+      setEmail('');
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [setEmail]);
 
   return (
     <>
@@ -24,6 +37,8 @@ export default function FindPassword() {
                 className={cn({
                   [styles.form__input]: true,
                   [styles['form__input--auth']]: true,
+                  [styles['form__input--error']]: verifyEmail.errorMessage,
+                  [styles['form__input--normal']]: verifyEmail.isSuccess,
                 })}
                 onChange={(e) => setEmail(e.target.value)}
                 type="text"
@@ -38,21 +53,36 @@ export default function FindPassword() {
                 {verifyEmail.isSuccess ? '재발송' : '인증번호 발송'}
               </button>
             </div>
+            {!verifyEmail.isSuccess && (
+            <span className={styles.form__error}>
+              {verifyEmail.errorMessage && <ErrorIcon />}
+              {verifyEmail.errorMessage}
+            </span>
+            )}
           </label>
           <label className={styles.form__label} htmlFor="auth-num">
             인증번호 보내기
             <input
-              className={styles.form__input}
+              className={cn({
+                [styles.form__input]: true,
+                [styles['form__input--error']]: authNumber.errorMessage,
+              })}
               type="text"
               id="auth-num"
               onChange={(e) => setVerify(e.target.value)}
             />
+            {!authNumber.isSuccess && (
+            <span className={styles.form__error}>
+              {authNumber.errorMessage && <ErrorIcon />}
+              {authNumber.errorMessage}
+            </span>
+            )}
           </label>
           <button
             type="submit"
             onClick={(e) => {
               e.preventDefault();
-              submit({ email, verify });
+              authNumber.submit({ email, verify });
             }}
             className={styles.submit}
             disabled={!verifyEmail.isSuccess}

diff --git a/src/query/auth.ts b/src/query/auth.ts
@@ -3,7 +3,9 @@ import {
   postLogin, findPasswordVerify, findPassword, newPassword,
 } from 'api/auth';
 import { getMyShopList } from 'api/shop';
+import axios, { AxiosError } from 'axios';
 import { LoginForm } from 'model/auth';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import usePrevPathStore from 'store/path';
 
@@ -12,6 +14,21 @@ interface VerifyInput {
   verify: string;
 }
 
+interface ErrorResponse {
+  response: undefined | {
+    message: string;
+    data: {
+      code: number;
+      message: string;
+      violations: {
+        field: string;
+        message: string;
+      }[];
+    }
+  }
+  message: string;
+}
+
 export const useLogin = () => {
   const navigate = useNavigate();
   const { setPrevPath } = usePrevPathStore((state) => state);
@@ -45,15 +62,26 @@ export const useLogin = () => {
 };
 
 export const useVerifyEmail = () => {
+  const [errorMessage, setErrorMessage] = useState('');
   const { mutate, isPending, isSuccess } = useMutation({
     mutationFn: (emailInput: string) => findPasswordVerify({ email: emailInput }),
+    onError: (error: AxiosError<ErrorResponse>) => {
+      if (axios.isAxiosError(error)) {
+        setErrorMessage(error.response?.data.message || error.message);
+      }
+    },
   });
-  return { verifyEmail: { mutate, isPending, isSuccess } };
+  return {
+    verifyEmail: {
+      mutate, isPending, isSuccess, errorMessage,
+    },
+  };
 };
 
 export const useSubmit = () => {
+  const [errorMessage, setErrorMessage] = useState('');
   const navigate = useNavigate();
-  const { mutate: submit } = useMutation({
+  const { mutate: submit, isSuccess, isError } = useMutation({
     mutationFn: ({
       email,
       verify,
@@ -62,11 +90,18 @@ export const useSubmit = () => {
     onSuccess: () => {
       navigate('/new-password', { state: { 'find-password': true }, replace: true });
     },
-    onError: () => {
-      // TODO: 이메일 인증 실패 시 UI 처리 필요
+    onError: (error: ErrorResponse) => {
+      setErrorMessage(error.response?.data?.message || error.message);
+      if (axios.isAxiosError(error)) {
+        setErrorMessage(error.response?.data?.violations[0] || error.response?.data.message);
+      }
     },
   });
-  return submit;
+  return {
+    authNumber: {
+      submit, isSuccess, isError, errorMessage,
+    },
+  };
 };
 
 export const useNewPassword = () => {

diff --git a/src/utils/ts/className.ts b/src/utils/ts/className.ts
@@ -1,5 +1,5 @@
 interface ClassName {
-  [key: string]: boolean;
+  [key: string]: boolean | string;
 }
 
 const classNames = (className: ClassName) => Object.entries(className)