issue #33

- Access 토큰 만료시 Refresh 토큰으로 Access 토큰 재갱신 요청 로직 구현 중

src/data/response/account/RefreshAccessTokenResponse.ts

@@ -0,0 +1,6 @@
+import { BaseResponse } from "../BaseResponse";
+
+export class RefreshAccessTokenResponse extends BaseResponse {
+  accessToken!: string;
+  refreshToken!: string;
+}

src/layouts/Layout.tsx

@@ -32,7 +32,7 @@ export default function Layout() {
       >
         <SideBar />
         <div className="flex flex-col w-full h-full">
-          { authData?.isLogedIn ? <Header /> : null}
+          { authData ? <Header /> : null}
           {/* <Header /> */}
           <Outlet />
         </div>

src/network/BaseNetwork.ts

@@ -6,10 +6,15 @@ import type {
   AxiosResponse,
   InternalAxiosRequestConfig,
 } from "axios";
+import { useAuthStore } from '@/store/authStore';
+import type { RefreshAccessTokenResponse } from '@/data/response/account/RefreshAccessTokenResponse';
 
 export class BaseNetwork {
   protected instance: AxiosInstance;
 
+  private isRefreshing = false;
+  private refreshQueue: Array<(token:string) => void> = [];
+
   constructor() {
     this.instance = axios.create({
       baseURL: import.meta.env.VITE_API_URL || "http://localhost:3000",
@@ -48,20 +53,86 @@ export class BaseNetwork {
     this.instance.interceptors.response.use(
       (response: AxiosResponse) => response,
       (error: AxiosError) => {
-        const message =
+        const status = error.response?.status;
-          (error.response?.data as any)?.message ||
+        const errorCode = (error.response?.data as any)?.code;
-          error.message ||
+        const originalRequest = error.config as AxiosRequestConfig & {
-          "Unknown error";
+          _retry?: boolean;
+        }
 
-        return Promise.reject({
+        if (
-          status: error.response?.status,
+          status === 401
-          message,
+          && errorCode === 'AccessTokenExpired'
-          raw: error,
+          && !originalRequest._retry
-        });
+        ) {
+          originalRequest._retry = true;
+          return this.handleRefreshToken(originalRequest);
+        }
+        
+        return Promise.reject(error);
       }
     );
   }
 
+  private async handleRefreshToken(originalRequest: AxiosRequestConfig) {
+
+    const authData = useAuthStore.getState().authData;
+    const refreshToken = authData?.refreshToken;
+  
+    if (!authData || !refreshToken) {
+      useAuthStore.getState().logout();
+      return Promise.reject("no refresh token");
+    }
+
+    if (this.isRefreshing) {
+      return new Promise((resolve) => {
+        this.refreshQueue.push((newToken: string) => {
+          originalRequest.headers = {
+            ...originalRequest.headers,
+            Authorization: `Bearer ${newToken}`
+          };
+          resolve(this.instance(originalRequest));
+        })
+      })
+    }
+
+    this.isRefreshing = true;
+
+    try {
+      const response = await this.get<RefreshAccessTokenResponse>(
+        '/account/refresh-access-token',
+        { 
+          headers: {
+            Authorization: `Bearer ${refreshToken}`
+          }
+        }
+      )
+
+      const newAccessToken = response.data.accessToken;
+      const newRefreshToken = response.data.refreshToken;
+
+      useAuthStore.getState().login({
+        ...authData,
+        accessToken: newAccessToken,
+        refreshToken: newRefreshToken
+      });
+
+      this.refreshQueue.forEach((cb) => cb(newAccessToken));
+      this.refreshQueue = [];
+      originalRequest.headers = {
+        ...originalRequest.headers,
+        Authorization: `Bearer ${newAccessToken}`,
+      };
+
+      return this.instance(originalRequest);
+    } catch (err) {
+      useAuthStore.getState().logout();
+      window.location.href = '/login?expired=1'
+      return Promise.reject(err);
+    } finally {
+      this.isRefreshing = false;
+    }
+  }
+
   /**
    * 기본 CRUD 메서드
    */

src/store/authStore.ts

@@ -4,6 +4,7 @@ import { create } from 'zustand';
 interface AuthStoreProps {
   authData: AuthData | undefined;
   login: (data: AuthData) => void;
+  logout: () => void;
 }
 
 export const useAuthStore = create<AuthStoreProps>((set) => ({