refactor : useMutation으로 api 호출 방식 통일

src/home/apis/authVerification.ts

@@ -1,12 +1,13 @@
+import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { authClient } from '@/apis';
 import { STORAGE_KEYS } from '@/constants/storage.constant.ts';
 
 import {
   AuthErrorData,
-  GetAuthVerificationCheckResponse,
-  PostAuthVerificationEmailResponse,
+  GetAuthVerificationCheckData,
+  PostAuthVerificationEmailData,
 } from '../types/Auth.type';
 
 interface EmailVerificationParams {
@@ -20,31 +21,45 @@ interface VerificationCheckParams {
 
 export const postAuthVerificationEmail = async (
   emailVerificationParams: EmailVerificationParams
-): Promise<PostAuthVerificationEmailResponse> => {
-  try {
-    const res = await authClient.post(`/auth/verification/email`, emailVerificationParams);
-    if (res.data) {
-      sessionStorage.setItem(STORAGE_KEYS.EMAIL_AUTH_SESSION_TOKEN, res.data.sessionToken);
+): Promise<PostAuthVerificationEmailData> => {
+  const res = await authClient.post(`/auth/verification/email`, emailVerificationParams);
+  return res.data;
+};
+
+export const usePostAuthVerificationEmail = () => {
+  return useMutation({
+    mutationFn: postAuthVerificationEmail,
+    onSuccess: (data) => {
+      sessionStorage.setItem(STORAGE_KEYS.EMAIL_AUTH_SESSION_TOKEN, data.sessionToken);
       sessionStorage.setItem(
         STORAGE_KEYS.EMAIL_AUTH_SESSION_TOKEN_EXPIRED_IN,
-        res.data.sessionTokenExpiredIn.toString()
+        data.sessionTokenExpiredIn.toString()
       );
-    }
-    return { data: res.data };
-  } catch (error: unknown) {
-    return { error: error as AxiosError<AuthErrorData> };
-  }
+    },
+    throwOnError: (error: AxiosError<AuthErrorData>) => {
+      //이전과 같은 이메일일 경우 errorBoundary로 가지 않고 에러 처리
+      if (error.response?.status === 400) return false;
+      // 나머지는 errorBoundary로 처리
+      return true;
+    },
+  });
 };
 
 export const getAuthVerificationCheck = async (
   verificationCheckParams: VerificationCheckParams
-): Promise<GetAuthVerificationCheckResponse> => {
-  try {
-    const res = await authClient.get('/auth/verification/check', {
-      params: verificationCheckParams,
-    });
-    return { data: res.data };
-  } catch (error: unknown) {
-    return { error: error as AxiosError<AuthErrorData> };
-  }
+): Promise<GetAuthVerificationCheckData> => {
+  const res = await authClient.get('/auth/verification/check', {
+    params: verificationCheckParams,
+  });
+  return res.data;
+};
+
+export const useGetAuthVerificationCheck = () => {
+  return useMutation({
+    mutationFn: getAuthVerificationCheck,
+    throwOnError: (error: AxiosError<AuthErrorData>) => {
+      if (error.response?.status === 401) return false;
+      return true;
+    },
+  });
 };

src/home/components/SignupContents/EmailAuth/useEmailAuth.ts

@@ -1,11 +1,14 @@
 import { useState } from 'react';
 
+import { AxiosError } from 'axios';
+
 import { STORAGE_KEYS } from '@/constants/storage.constant.ts';
 import {
-  getAuthVerificationCheck,
-  postAuthVerificationEmail,
+  useGetAuthVerificationCheck,
+  usePostAuthVerificationEmail,
 } from '@/home/apis/authVerification.ts';
 import { EmailAuthProps } from '@/home/components/SignupContents/EmailAuth/EmailAuth.type.ts';
+import { AuthErrorData } from '@/home/types/Auth.type';
 import { useSecondTimer } from '@/hooks/useSecondTimer.ts';
 
 export const useEmailAuth = ({ onConfirm, email }: EmailAuthProps) => {
@@ -14,27 +17,43 @@ export const useEmailAuth = ({ onConfirm, email }: EmailAuthProps) => {
   const [error, setError] = useState<string>('');
   const [emailSending, setEmailSending] = useState(false);
 
+  const postAuthVerificationEmailMutation = usePostAuthVerificationEmail();
+  const getAuthVerificationCheckMutation = useGetAuthVerificationCheck();
+
   const sendAuthenticationMail = async () => {
     setEmailSending(true);
-    const { data } = await postAuthVerificationEmail({ email: email, verificationType: 'SIGN_UP' });
+    await postAuthVerificationEmailMutation.mutateAsync(
+      { email: email, verificationType: 'SIGN_UP' },
+      {
+        onSuccess: () => {
+          setAuthed(true);
+        },
+        onError: () => {
+          setAuthed(false);
+          setError('인증 메일 재전송에 실패했습니다.');
+        },
+      }
+    );
     setEmailSending(false);
-    setAuthed(!!data);
-    setError(!data ? '인증 메일 재전송에 실패했습니다.' : '');
     resetTimer();
   };
 
   const onClickNext = async () => {
     const session = sessionStorage.getItem(STORAGE_KEYS.EMAIL_AUTH_SESSION_TOKEN);
     if (!session) return;
 
-    const res = await getAuthVerificationCheck({ session });
-
-    if (res.data) {
-      if (res.data.isVerified) onConfirm();
-      else setError('이메일 인증을 완료해주세요.');
-    } else if (res.error) {
-      setError(res.error.response?.data.message || '이메일 인증 확인에 실패했습니다.');
-    }
+    await getAuthVerificationCheckMutation.mutateAsync(
+      { session: session },
+      {
+        onSuccess: (data) => {
+          if (data.isVerified) onConfirm();
+          else setError('이메일 인증을 완료해주세요.');
+        },
+        onError: (error: AxiosError<AuthErrorData>) => {
+          setError(error.response?.data.message || '인증에 실패했습니다.');
+        },
+      }
+    );
   };
 
   return { authed, leftTime, isTimerEnd, error, emailSending, sendAuthenticationMail, onClickNext };

src/home/components/SignupContents/EmailForm/EmailForm.tsx

@@ -1,9 +1,9 @@
 import { BoxButton, PlainButton, SuffixTextField } from '@yourssu/design-system-react';
+import { useForm } from 'react-hook-form';
 
 import { EMAIL_DOMAIN, MAIL_SEARCH_URL } from '@/constants/email.constant';
 import { EmailFormProps } from '@/home/components/SignupContents/EmailForm/EmailForm.type.ts';
 import { useEmailForm } from '@/home/components/SignupContents/EmailForm/useEmailForm.ts';
-import { usePreventDuplicateClick } from '@/hooks/usePreventDuplicateClick.ts';
 
 import {
   StyledSignupButtonText,
@@ -21,10 +21,13 @@ import {
 
 export const EmailForm = ({ onConfirm }: EmailFormProps) => {
   const { email, emailError, onEmailSubmit, onChange } = useEmailForm({ onConfirm });
-  const { disabled, handleClick } = usePreventDuplicateClick();
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm();
 
   return (
-    <StyledSignupContentContainer>
+    <StyledSignupContentContainer onSubmit={handleSubmit(onEmailSubmit)}>
       <StyledSignupContentTitle>회원가입</StyledSignupContentTitle>
       <div>
         <StyledTextFieldLabel>숭실대학교 메일을 입력해주세요.</StyledTextFieldLabel>
@@ -55,11 +58,10 @@ export const EmailForm = ({ onConfirm }: EmailFormProps) => {
           size="large"
           variant="filled"
           rounding={8}
-          disabled={email === '' || disabled}
-          onClick={() => handleClick(onEmailSubmit)}
+          disabled={email === '' || isSubmitting}
         >
           <StyledSignupButtonText>
-            {disabled ? '잠시만 기다려주세요...' : '인증 메일 받기'}
+            {isSubmitting ? '잠시만 기다려주세요...' : '인증 메일 받기'}
           </StyledSignupButtonText>
         </BoxButton>
       </StyledButtonsContainer>

src/home/components/SignupContents/EmailForm/useEmailForm.ts

@@ -1,26 +1,37 @@
 import { useState } from 'react';
 
-import { postAuthVerificationEmail } from '@/home/apis/authVerification.ts';
+import { AxiosError } from 'axios';
+
+import { usePostAuthVerificationEmail } from '@/home/apis/authVerification.ts';
 import { EmailFormProps } from '@/home/components/SignupContents/EmailForm/EmailForm.type.ts';
+import { AuthErrorData } from '@/home/types/Auth.type';
 import { useParseFullEmail } from '@/hooks/useParseFullEmail';
 
 export const useEmailForm = ({ onConfirm }: EmailFormProps) => {
   const [email, setEmail] = useState('');
   const [emailError, setEmailError] = useState<string | undefined>(undefined);
   const parseFullEmail = useParseFullEmail();
 
+  const postAuthVerificationEmailMutation = usePostAuthVerificationEmail();
+
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value);
   };
 
   const onEmailSubmit = async () => {
     const fullEmail = parseFullEmail(email);
-    const res = await postAuthVerificationEmail({ email: fullEmail, verificationType: 'SIGN_UP' });
-    if (res.data) {
-      onConfirm(fullEmail);
-    } else {
-      setEmailError(res.error?.response?.data.message || '이메일을 다시 확인해주세요.');
-    }
+
+    await postAuthVerificationEmailMutation.mutateAsync(
+      { email: fullEmail, verificationType: 'SIGN_UP' },
+      {
+        onSuccess: () => {
+          onConfirm(fullEmail);
+        },
+        onError: (error: AxiosError<AuthErrorData>) => {
+          setEmailError(error.response?.data.message || '이메일을 다시 확인해주세요.');
+        },
+      }
+    );
   };
 
   return { email, emailError, onChange, onEmailSubmit };