Merge pull request #170 from Ludo-SMP/bugFix/handle-401-error

�fix: 401 에러 발생 시 로그아웃 처리

package.json

@@ -69,7 +69,9 @@
   },
   "msw": {
     "workerDirectory": [
-      "src/Mocks"
+      "src/Mocks",
+      "public"
     ]
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/Mocks/browser.ts

@@ -1,4 +1,4 @@
-// import { setupWorker } from 'msw/browser';
-// import { handlers } from './handlers';
+import { setupWorker } from 'msw/browser';
+import { handlers } from './handlers';
 
-// export const worker = setupWorker(...handlers);
+export const worker = setupWorker(...handlers);

src/Mocks/handlers/auth.ts

@@ -1,9 +1,18 @@
 import { HttpResponse, http } from 'msw';
 import { mockUsers } from '../data/mockAuth';
 
-const baseURL = import.meta.env.VITE_MOCK_API_URL;
+const baseURL = import.meta.env.VITE_BASE_API_URL;
 
 const getUser = http.get(`${baseURL}/api/users/me`, () => {
+  const isAuthenticated = document.cookie.includes('Authorization=');
+
+  if (!isAuthenticated) {
+    return new HttpResponse(JSON.stringify({ data: null, message: '로그인이 필요합니다.' }), {
+      status: 401,
+      statusText: 'Unauthorized',
+    });
+  }
+
   return new HttpResponse(JSON.stringify({ data: mockUsers[1], message: 'Success' }), {
     status: 200,
     statusText: 'OK',

src/index.tsx

@@ -1,10 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { StrictMode } from 'react';
 import App from './App.tsx';
 import './App.css';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

src/utils/axios.ts

@@ -1,4 +1,6 @@
-import axios, { AxiosRequestConfig } from 'axios';
+import { logOut } from '@/Apis/auth';
+import { HttpStatus } from '@/Constants/StatusCodes';
+import axios, { AxiosError, AxiosRequestConfig } from 'axios';
 
 export const createClient = (config?: AxiosRequestConfig) => {
   const axiosInstance = axios.create({
@@ -18,7 +20,14 @@ export const createClient = (config?: AxiosRequestConfig) => {
     (response) => {
       return response;
     },
-    (error) => {
+    async (error: AxiosError) => {
+      if (error.response?.status === HttpStatus.UNAUTHORIZED) {
+        try {
+          const data = await logOut(); // 로그아웃 통해 쿠키 제거
+          if (data) window.location.href = '/';
+        } catch {}
+      }
+      // Login Provider에서 에러 핸들링하도록 reject
       return Promise.reject(error);
     },
   );