[ Feat ] 로그인 관련 에러 처리 (존재하지 않는 회원일 경우, 토큰 만료)

src/pages/login/hooks/useGoogleLoginMutation.ts

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import { loginAxios } from '../apis/loginAxios';
 import { useNavigate } from 'react-router-dom';
-import { setRole, setToken } from '@utils/storage';
+import { clearStorage, setRole, setToken } from '@utils/storage';
 
 interface useGoogleLoginPropType {
   role?: string;
@@ -22,8 +22,11 @@ const useGoogleLoginMutation = ({ role }: useGoogleLoginPropType) => {
         // 회원가입
         navigate(role === 'SENIOR' ? '/seniorOnboarding' : '/juniorOnboarding');
       } else {
-        // 로그인인데, role 정보를 서버에서 받지 못한 상황
-        console.error('🔴 로그인 과정에서 Role 정보를 서버에서 받지 못했어요.');
+        // 존재하지 않는 계정으로 로그인을 시도했을 경우
+        console.error('🔴 존재하지 않는 계정');
+        alert('존재하지 않는 계정이예요. 회원가입을 진행해주세요.');
+        navigate('/');
+        clearStorage();
       }
     },
     onError: (error) => {

src/utils/apis/index.ts

@@ -1,4 +1,4 @@
-import { getToken } from '@utils/storage';
+import { clearStorage, getToken } from '@utils/storage';
 import * as _axios from 'axios';
 
 const baseUrl = import.meta.env.VITE_APP_API_BASE_URL;
@@ -29,3 +29,15 @@ authAxios.interceptors.request.use(
     return Promise.reject(error);
   }
 );
+
+authAxios.interceptors.response.use(
+  (res) => res,
+  async (err) => {
+    if (err.response.data.code === '40076') {
+      alert(`세션이 만료되었습니다.\n다시 로그인해주세요.`);
+      clearStorage();
+      location.href = '/';
+    }
+    return Promise.reject(err);
+  }
+);

src/utils/storage.ts

@@ -13,3 +13,8 @@ export const setRole = (role: string) => {
 export const getRole = () => {
   return localStorage.getItem('seonyakRole');
 };
+
+export const clearStorage = () => {
+  localStorage.removeItem('seonyakToken');
+  localStorage.removeItem('seonyakRole');
+};