FE-29 ♻️ 코드 리뷰에 대한 리팩토링

src/apis/auth.ts

@@ -1,30 +1,9 @@
 import type { PostSigninRequestType, PostSigninResponseType } from '@/schema/auth';
-import { AxiosError } from 'axios';
 import httpClient from '.';
 
 const postSignin = async (request: PostSigninRequestType): Promise<PostSigninResponseType> => {
-  try {
-    const response = await httpClient.post('/auth/signIn', request);
-    return response.data;
-  } catch (error) {
-    if (error instanceof AxiosError) {
-      // Axios 에러인 경우
-      const axiosError = error as AxiosError;
-      if (axiosError.response) {
-        // 서버에서 응답이 온 경우 (예: 4xx, 5xx)
-        throw new Error('로그인 요청 처리 중 문제가 발생했습니다.');
-      } else if (axiosError.request) {
-        // 요청을 보냈지만 응답을 받지 못한 경우
-        throw new Error('서버 응답을 받지 못했습니다. 잠시 후 다시 시도해 주세요.');
-      } else {
-        // 요청을 설정하는 과정에서 문제가 발생한 경우
-        throw new Error('로그인 요청을 처리하는 동안 문제가 발생했습니다.');
-      }
-    } else {
-      // Axios 에러가 아닌 경우 (네트워크 문제 등)
-      throw new Error('알 수 없는 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.');
-    }
-  }
+  const response = await httpClient.post('/auth/signIn', request);
+  return response.data;
 };
 
 export default postSignin;

src/apis/index.ts

@@ -27,23 +27,26 @@ httpClient.interceptors.response.use(
 
       if (!refreshToken) {
         window.location.href = '/auth/SignIn';
-      } else {
-        httpClient
-          .post('/auth/refresh-token', null, {
-            headers: { Authorization: `Bearer ${refreshToken}` },
-          })
-          .then((response) => {
-            const { accessToken } = response.data;
-            const { refreshToken: newRefreshToken } = response.data;
-            localStorage.setItem('accessToken', accessToken);
-            localStorage.setItem('refreshToken', newRefreshToken);
-          })
-          .catch(() => {
-            window.location.href = '/auth/SignIn';
-          });
+        return Promise.reject(error);
       }
-    } else {
-      throw new Error(error.response.status);
+
+      return httpClient
+        .post('/auth/refresh-token', null, {
+          headers: { Authorization: `Bearer ${refreshToken}` },
+        })
+        .then((response) => {
+          const { accessToken, refreshToken: newRefreshToken } = response.data;
+          localStorage.setItem('accessToken', accessToken);
+          localStorage.setItem('refreshToken', newRefreshToken);
+
+          const originalRequest = error.config;
+          return httpClient(originalRequest);
+        })
+        .catch(() => {
+          window.location.href = '/auth/SignIn';
+          return Promise.reject(error);
+        });
     }
+    return Promise.reject(error);
   },
 );

src/hooks/useSignInMutation.ts

@@ -0,0 +1,22 @@
+import postSignin from '@/apis/auth';
+import { toast } from '@/components/ui/use-toast';
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+
+const useSigninMutation = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: postSignin,
+    onSuccess: (data) => {
+      localStorage.setItem('accessToken', data.accessToken);
+      localStorage.setItem('refreshToken', data.refreshToken);
+      router.push('/');
+    },
+    onError: () => {
+      toast({ description: '이메일 혹은 비밀번호를 확인해주세요.', className: 'border-state-error text-state-error font-semibold' });
+    },
+  });
+};
+
+export default useSigninMutation;

src/hooks/userQueryHooks.ts

@@ -1,10 +1,8 @@
-import postSignin from '@/apis/auth';
 import quries from '@/apis/queries';
 import { updateMe } from '@/apis/user';
 import { GetUserReponseType, GetUserRequestType, PatchMeRequestType } from '@/schema/user';
 import { MutationOptions } from '@/types/query';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useRouter } from 'next/router';
 
 export const useMeQuery = () => useQuery(quries.user.getMe());
 
@@ -23,21 +21,3 @@ export const useUpdateMe = (options: MutationOptions<GetUserReponseType>) => {
     },
   });
 };
-
-export const useSignin = () => {
-  const router = useRouter();
-
-  return useMutation({
-    mutationFn: postSignin,
-    onSuccess: (data) => {
-      localStorage.setItem('accessToken', data.accessToken);
-      localStorage.setItem('refreshToken', data.refreshToken);
-      router.push('/');
-    },
-    onError: (error) => {
-      // NOTE: 임시 테스트용 콘솔, 토스트 추가 예정
-      /* eslint-disable no-console */
-      console.error(error);
-    },
-  });
-};

src/pages/_app.tsx

@@ -3,13 +3,15 @@ import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import Toaster from '@/components/ui/toaster';
 
 export default function App({ Component, pageProps }: AppProps) {
   const [queryClient] = React.useState(() => new QueryClient());
   return (
     <QueryClientProvider client={queryClient}>
       <HydrationBoundary state={pageProps.dehydratedState}>
         <Component {...pageProps} />
+        <Toaster />
       </HydrationBoundary>
       <ReactQueryDevtools />
     </QueryClientProvider>

src/pages/auth/SignIn.tsx

@@ -1,16 +1,15 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import AuthLayout from '@/pageLayout/AuthLayout/AuthLayout';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
 import { PostSigninRequest, PostSigninRequestType } from '@/schema/auth';
-import { useSignin } from '@/hooks/userQueryHooks';
+import useSigninMutation from '@/hooks/useSignInMutation';
 
 export default function SignIn() {
-  const mutationSignin = useSignin();
+  const mutationSignin = useSigninMutation();
   // 폼 정의
   const form = useForm<PostSigninRequestType>({
     resolver: zodResolver(PostSigninRequest),
@@ -21,21 +20,17 @@ export default function SignIn() {
     },
   });
 
-  function onSubmit(values: PostSigninRequestType) {
-    mutationSignin.mutate(values);
-  }
-
   // TODO: 나중에 컴포넌트 분리하기
   return (
-    <AuthLayout>
+    <div className='flex flex-col justify-center items-center bg-background-100 w-full h-screen'>
       <header className='mb-[50px] md:mb-[60px]'>
         <Link href='/'>
           <Image src='/lg.svg' alt='logo' width={172} height={48} />
         </Link>
       </header>
 
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className='flex flex-col items-center lg:gap-6 gap-5 w-full px-6'>
+        <form onSubmit={form.handleSubmit((values: PostSigninRequestType) => mutationSignin.mutate(values))} className='flex flex-col items-center lg:gap-6 gap-5 w-full px-6'>
           <div className='flex flex-col items-center lg:gap-4 gap-[10px] w-full lg:max-w-[640px] md:max-w-[384px]'>
             <FormField
               control={form.control}
@@ -100,6 +95,6 @@ export default function SignIn() {
           <Image src='/logo-kakao.svg' alt='logo-kakao' width={60} height={60} className='md:size-[60px] size-10' />
         </Button>
       </div>
-    </AuthLayout>
+    </div>
   );
 }