feat : 로그인 페이지 리팩토링 (#267)

* fix : 중복 선언 제거

* env

* feat : login.ts 실패 처리 삭제

* refactor : 로그인 페이지 로직 분리 / 커스텀 훅 생성

* feat : 로그아웃 함수 작성

* fix : 경로 수정

src/hooks/useLogin.ts

@@ -0,0 +1,51 @@
+import { useNavigate } from 'react-router-dom';
+import { useUserStore } from '@/stores/useUserStore';
+import { useToastStore } from '@/hooks/useToastStore';
+import { useMutation } from '@tanstack/react-query';
+import { login } from '@/service/auth/login';
+import { getUserInfo } from '@/service/user/getUserInfo';
+import { LoginProps, LoginResponseType } from '@/types/login';
+import { tokenStorage } from '@/service/auth/tokenStorage';
+
+export const useLogin = () => {
+    const navigate = useNavigate();
+    const { setUser } = useUserStore();
+    const { addToast } = useToastStore();
+
+    const handleGetUserInfo = async (email: string) => {
+        const userInfoResponse = await getUserInfo();
+        if (!userInfoResponse) {
+            addToast('유저 정보를 불러오지 못했습니다.', 'warning');
+            return false;
+        }
+        const userInfoWithEmail = {
+            nickname: userInfoResponse.nickname || '알 수 없음',
+            profileImageUrl: userInfoResponse.profileImageUrl || 'testimg.jpg',
+            email: email
+        };
+        setUser(userInfoWithEmail);
+        return true;
+    };
+
+    const mutation = useMutation({
+        mutationFn: ({ email, password }: LoginProps) =>
+            login({ email, password }),
+        onSuccess: (response: LoginResponseType, { email }) => {
+            if (response.isSuccess) {
+                addToast('로그인 되었습니다.', 'success');
+                tokenStorage.setAccessToken(response.result.accessToken);
+                handleGetUserInfo(email);
+                navigate('/');
+            } else {
+                addToast(response.data.message, 'success');
+            }
+        },
+        onError: (error) => {
+            addToast(error.message, 'warning');
+            console.error(error);
+            throw error;
+        }
+    });
+
+    return mutation;
+};

src/pages/User/Login/LoginPage.tsx

@@ -2,72 +2,15 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { EmailInput } from '@/components/Common/Input/EmailInput';
 import { PasswordInput } from '@/components/Common/Input/PasswordInput';
-import { useUserStore } from '@/stores/useUserStore';
-import { login } from '@/service/auth/login';
-import { getUserInfo } from '@/service/user/getUserInfo';
 import { Container } from '@/components/Common/Container/Container';
 import { useToastStore } from '@/hooks/useToastStore';
-import { LoginResponseType } from '@/types/login';
+import { useLogin } from './../../../hooks/useLogin';
 
 export const LoginPage = () => {
     const navigate = useNavigate();
-    const { setUser } = useUserStore();
     const { addToast } = useToastStore();
+    const { mutate } = useLogin();
 
-    /**
-     * 로그인 이후 유저 정보 조회
-     * @param email
-     * @returns
-     */
-    const handleGetUserInfo = async (email: string) => {
-        const userInfoResponse = await getUserInfo();
-        if (!userInfoResponse) {
-            addToast('유저 정보를 불러오기를 실패했습니다.', 'warning');
-            return false;
-        }
-        const userInfoWithEmail = {
-            nickname: userInfoResponse.nickname || '알 수 없음',
-            profileImageUrl: userInfoResponse.profileImageUrl || 'testimg.jpg',
-            email: email
-        };
-        setUser(userInfoWithEmail);
-        return true;
-    };
-
-    /**
-     * 로그인 결과 처리
-     * @param loginResponse
-     * @param email
-     * @returns
-     */
-    const handleLoginResponse = async (
-        loginResponse: LoginResponseType,
-        email: string
-    ) => {
-        switch (loginResponse.code) {
-            case 'COMMON200': {
-                addToast('로그인에 성공했습니다.', 'success');
-                return await handleGetUserInfo(email);
-            }
-            case 'USER4000': {
-                addToast('유저를 찾을 수 없습니다.', 'warning');
-                return false;
-            }
-            case 'USER4001': {
-                addToast('비밀번호가 일치하지 않습니다.', 'warning');
-                return false;
-            }
-            default:
-                addToast('로그인 처리에 실패했습니다.', 'warning');
-                return false;
-        }
-    };
-
-    /**
-     * 로그인 폼 제출
-     * @param e
-     * @returns
-     */
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         const $loginForm = e.target as HTMLFormElement;
@@ -82,19 +25,7 @@ export const LoginPage = () => {
             return;
         }
 
-        try {
-            const loginResponse = await login({ email, password });
-            const isLoginSuccess = await handleLoginResponse(
-                loginResponse,
-                email
-            );
-            if (isLoginSuccess) {
-                navigate('/');
-            }
-        } catch (error) {
-            console.error('에러: ', error);
-            addToast('서버 오류입니다. 다시 시도해주세요', 'error');
-        }
+        mutate({ email, password });
     };
 
     const handleNavigateRegister = () => {

src/service/api.ts

@@ -4,6 +4,7 @@ import { refreshAccessToken } from '@/service/auth/refreshAccessToken';
 import { formatApiError } from '@/util/formatApiError';
 
 const baseUrl = import.meta.env.VITE_API_URL as string;
+import { logout } from './auth/logout';
 
 export const defaultApi = (option?: AxiosRequestConfig): AxiosInstance => {
     const instance = axios.create({
@@ -41,7 +42,7 @@ export const defaultApi = (option?: AxiosRequestConfig): AxiosInstance => {
                         `Bearer ${newAccessToken}`;
                     return instance(originalRequest);
                 } catch (error) {
-                    tokenStorage.clearTokens();
+                    logout();
                     window.location.href = '/login';
                     return Promise.reject(error);
                 }