Merge branch 'dev'

Author: seungw0o

.pnp.cjs

@@ -24,7 +24,7 @@
         "postpublish": "pinst --enable"
     },
     "dependencies": {
-        "@team-aliens/design-system": "^1.5.5",
+        "@team-aliens/design-system": "^1.6.3",
         "react-slick": "^0.30.2"
     }
 }

…stem-npm-1.5.5-58c6352e2b-146e0834ec.zip …stem-npm-1.6.3-ddd07ad2a4-b575be76b4.zip.yarn/cache/@team-aliens-design-system-npm-1.5.5-58c6352e2b-146e0834ec.zip renamed to .yarn/cache/@team-aliens-design-system-npm-1.6.3-ddd07ad2a4-b575be76b4.zip .yarn/cache/@team-aliens-design-system-npm-1.5.5-58c6352e2b-146e0834ec.zip renamed to .yarn/cache/@team-aliens-design-system-npm-1.6.3-ddd07ad2a4-b575be76b4.zip

@@ -61,13 +61,14 @@
   "dependencies": {
     "@tanstack/react-query": "^4.29.12",
     "@tanstack/react-query-devtools": "^4.29.12",
-    "@team-aliens/design-system": "^1.5.5",
+    "@team-aliens/design-system": "^1.6.1",
     "@types/styled-components": "^5.1.26",
     "axios": "^1.1.3",
     "core-js": "^3.24.1",
     "date-fns": "^4.1.0",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.5",
+    "mitt": "^3.0.1",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",

.yarn/cache/mitt-npm-3.0.1-ce290ffa77-287c70d8e7.zip

@@ -2,19 +2,27 @@ import { ToastContainer, ToastProvider } from '@team-aliens/design-system';
 import { Router } from './router';
 import { useModal } from './hooks/useModal';
 import { useEffect } from 'react';
-import { getCookie } from './utils/cookies';
 import { pagePath } from './utils/pagePath';
 import { Outlet, RouterProvider } from 'react-router-dom';
 import { PointListProvider } from './context/pointHistoryList';
 import { GlobalStyle } from './style/globalStyle';
+import { eventBus } from './utils/eventBus';
 
 export function App() {
   const { modalState } = useModal();
-  const accessToken = getCookie('access_token');
-  const refreshToken = getCookie('refresh_token');
-  if (!accessToken && !refreshToken && window.location.pathname !== '/login') {
-    window.location.href = pagePath.login;
-  }
+
+  useEffect(() => {
+    const handleSessionExpired = () => {
+      if (window.location.pathname !== pagePath.login) {
+        window.location.href = pagePath.login;
+      }
+    };
+    eventBus.on('sessionExpired', handleSessionExpired);
+    return () => {
+      eventBus.off('sessionExpired', handleSessionExpired);
+    };
+  }, []);
+
   useEffect(() => {
     if (modalState.selectedModal) {
       document.body.style.overflow = 'hidden';

package.json

@@ -0,0 +1,52 @@
+import { reIssueToken } from '@/apis/auth';
+import { getCookie, setCookie } from '@/utils/cookies';
+import { eventBus } from '@/utils/eventBus';
+
+let isRefreshing = false;
+let subscribers: Array<(token: string) => void> = [];
+
+const onRefreshed = (token: string) => {
+  subscribers.forEach((callback) => callback(token));
+  subscribers = [];
+};
+
+export const refreshToken = (): Promise<string> => {
+  const refreshToken = getCookie('refresh_token');
+  if (!refreshToken) {
+    eventBus.emit('sessionExpired');
+    return Promise.reject(new Error('No refresh token available'));
+  }
+
+  if (isRefreshing) {
+    return new Promise((resolve) => {
+      subscribers.push((token: string) => resolve(token));
+    });
+  }
+
+  isRefreshing = true;
+
+  return new Promise((resolve, reject) => {
+    reIssueToken(refreshToken)
+      .then((res) => {
+        const newAccessToken = res.access_token;
+
+        setCookie('access_token', newAccessToken, {
+          expires: new Date(res.access_token_expired_at),
+        });
+
+        setCookie('refresh_token', res.refresh_token, {
+          expires: new Date(res.refresh_token_expired_at),
+        });
+
+        isRefreshing = false;
+        onRefreshed(newAccessToken);
+        resolve(newAccessToken);
+      })
+      .catch((err) => {
+        isRefreshing = false;
+        subscribers = [];
+        eventBus.emit('sessionExpired');
+        reject(err);
+      });
+  });
+};

services/admin/package.json

@@ -3,26 +3,15 @@ import axios, {
   AxiosHeaders,
   InternalAxiosRequestConfig,
 } from 'axios';
-import { reIssueToken } from '@/apis/auth';
-import { getCookie, setCookie } from '@/utils/cookies';
+import { refreshToken } from '@/apis/TokenRefresher';
+import { getCookie } from '@/utils/cookies';
+import { handleApiError } from '@/utils/apiErrorHandler';
 
 export const instance = axios.create({
   baseURL: `${process.env.APP_PUBLIC_URL}`,
   timeout: 10000,
 });
 
-let isRefreshing = false;
-let refreshSubscribers: ((token: string) => void)[] = [];
-
-const hasMessage = (data: any): data is { message: string } => {
-  return typeof data === 'object' && data !== null && 'message' in data;
-};
-
-const onRefreshed = (token: string) => {
-  refreshSubscribers.forEach((callback) => callback(token));
-  refreshSubscribers = [];
-};
-
 instance.interceptors.request.use(
   (config) => {
     const accessToken = getCookie('access_token');
@@ -44,60 +33,23 @@ instance.interceptors.response.use(
       _retry?: boolean;
     };
 
-    if (error.response.status === 401 || error.response.status === 403) {
-      const refreshToken = getCookie('refresh_token');
-
-      if (!refreshToken) {
-        window.location.href = '/login';
-        return Promise.reject(error);
-      }
-
+    if (error.response?.status === 401 || error.response?.status === 403) {
       if (originalRequest._retry) {
         return Promise.reject(error);
       }
       originalRequest._retry = true;
-
-      if (isRefreshing) {
-        return new Promise((resolve) => {
-          refreshSubscribers.push((token: string) => {
-            originalRequest.headers = new AxiosHeaders({
-              ...originalRequest.headers,
-              Authorization: `Bearer ${token}`,
-            });
-            resolve(instance(originalRequest));
-          });
-        });
-      }
-
-      isRefreshing = true;
-
       try {
-        const res = await reIssueToken(refreshToken);
-        const newAccessToken = res.access_token;
-
-        setCookie('access_token', newAccessToken, {
-          expires: new Date(res.access_token_expired_at),
-        });
-
-        setCookie('refresh_token', res.refresh_token, {
-          expires: new Date(res.refresh_token_expired_at),
-        });
-
-        isRefreshing = false;
-        onRefreshed(newAccessToken);
-
+        const newAccessToken = await refreshToken();
         originalRequest.headers = new AxiosHeaders({
           ...originalRequest.headers,
           Authorization: `Bearer ${newAccessToken}`,
         });
         return instance(originalRequest);
-      } catch (err) {
-        isRefreshing = false;
-        window.location.href = '/login';
-        return Promise.reject(err);
+      } catch (refreshError) {
+        return Promise.reject(refreshError);
       }
     }
 
-    return Promise.reject(error);
+    return handleApiError(error);
   },
 );

services/admin/src/App.tsx

@@ -0,0 +1,32 @@
+import { AxiosError } from 'axios';
+
+const hasMessage = (data: any): data is { message: string } => {
+  return typeof data === 'object' && data !== null && 'message' in data;
+};
+
+export const handleApiError = (error: AxiosError) => {
+  if (error.response) {
+    const { status, data } = error.response;
+    const message = hasMessage(data)
+      ? data.message
+      : '알 수 없는 오류가 발생했습니다.';
+
+    switch (status) {
+      case 400:
+        console.log(`[${status}] 잘못된 요청입니다.\n${message}`);
+        break;
+      case 404:
+        console.log('요청하신 자원을 찾을 수 없습니다.');
+        break;
+      case 500:
+        console.log('서버에 문제가 발생했습니다. 잠시 후 다시 시도해주세요.');
+        break;
+      default:
+        console.log(`[${status}] 오류가 발생했습니다.\n${message}`);
+        break;
+    }
+  } else {
+    console.log('네트워크 오류가 발생했습니다. 인터넷 연결을 확인해주세요.');
+  }
+  return Promise.reject(error);
+};