Merge pull request #181 from GoHawaiiForMe/feat/#176리프레시

Feat/#리프레시

Author: gahyeon-yang

.gitignore

@@ -10,6 +10,7 @@
 # next.js
 /.next/
 .next
+/out/
 
 # production
 /build

next.config.ts

@@ -3,7 +3,6 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   trailingSlash: true,
   reactStrictMode: true,
-  output: "export",
   images: {
     unoptimized: true,
     remotePatterns: [

src/features/LoginForm.tsx

@@ -52,7 +52,6 @@ export default function LoginForm() {
           profileInfo.image,
         );
         router.replace("/");
-        router.reload();
       } catch (error) {
         console.error("유저 정보 가져오기 실패", error);
       }

src/services/apiClient.ts

@@ -1,8 +1,7 @@
-import axios from "axios";
+import axios, { InternalAxiosRequestConfig } from "axios";
 import { getAccessToken, removeAccessToken } from "@/utils/tokenUtils";
 import authService from "./authService";
 import router from "next/router";
-import useAuthStore from "@/stores/useAuthStore";
 
 const apiClient = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,
@@ -11,12 +10,31 @@ const apiClient = axios.create({
   },
 });
 
+let isRefreshing = false;
+let failedQueue: Array<{
+  resolve: (token: string) => void;
+  reject: (error: any) => void;
+}> = [];
+
+const processQueue = (error: any, token: string | null = null) => {
+  failedQueue.forEach((prom) => {
+    if (error) {
+      prom.reject(error);
+    } else if (token) {
+      prom.resolve(token);
+    }
+  });
+  failedQueue = [];
+};
+
 // request
 apiClient.interceptors.request.use(
-  (config) => {
-    const accessToken = getAccessToken();
-    if (accessToken) {
-      config.headers["Authorization"] = `Bearer ${accessToken}`;
+  (config: InternalAxiosRequestConfig<any> & { _retry?: boolean }) => {
+    if (config.url !== "/auth/refresh/token" && !config._retry) {
+      const accessToken = getAccessToken();
+      if (accessToken) {
+        config.headers["Authorization"] = `Bearer ${accessToken}`;
+      }
     }
     return config;
   },
@@ -29,20 +47,39 @@ apiClient.interceptors.request.use(
 apiClient.interceptors.response.use(
   (response) => response,
   async (error) => {
-    if (error.response && error.response?.status === 401) {
+    const originalRequest = error.config;
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        try {
+          const token = await new Promise<string>((resolve, reject) => {
+            failedQueue.push({ resolve, reject });
+          });
+          originalRequest.headers["Authorization"] = `Bearer ${token}`;
+          return apiClient(originalRequest);
+        } catch (err) {
+          return Promise.reject(err);
+        }
+      }
+
+      originalRequest._retry = true;
+      isRefreshing = true;
+
       try {
-        const newAccessToken = await authService.refreshToken();
-        alert("새 토큰 발급!");
-        error.config.headers["Authorization"] = `Bearer ${newAccessToken}`;
-        return apiClient(error.config);
-      } catch (error: any) {
-        console.error("토큰 갱신 실패", error);
+        const token = await authService.refreshToken();
+        originalRequest.headers["Authorization"] = `Bearer ${token}`;
+        processQueue(null, token);
+        return apiClient(originalRequest);
+      } catch (refreshError) {
+        processQueue(refreshError, null);
         removeAccessToken();
         router.push("/login");
-        alert("새로 로그인해주세요!");
-        return Promise.reject(error);
+        return Promise.reject(refreshError);
+      } finally {
+        isRefreshing = false;
       }
     }
+
     return Promise.reject(error);
   },
 );

src/services/authService.ts

@@ -1,6 +1,8 @@
-import { setAccessToken } from "@/utils/tokenUtils";
+import { removeAccessToken, setAccessToken } from "@/utils/tokenUtils";
 import { api } from "./api";
 import { BAD_REQUEST, INTERNAL_SERVER_ERROR, UNAUTHORIZED } from "@/utils/errorStatus";
+import router from "next/router";
+import useAuthStore from "@/stores/useAuthStore";
 
 interface OAuthResponse {
   provider?: string;
@@ -59,6 +61,7 @@ const authService = {
       const response = await api.post<LoginResponse, { email: string; password: string }>(
         "/auth/login",
         data,
+        true,
       );
       setAccessToken(response.accessToken);
 
@@ -105,7 +108,7 @@ const authService = {
   },
   refreshToken: async () => {
     try {
-      const response: RefreshTokenResponse = await api.post("/auth/refresh/token", true); //withCrediential
+      const response: RefreshTokenResponse = await api.post("/auth/refresh/token", {}, true);
       const newAccessToken = response.accessToken;
 
       if (!newAccessToken) {
@@ -114,7 +117,12 @@ const authService = {
 
       return newAccessToken;
     } catch (error: any) {
-      console.error("토큰 갱신 실패", error);
+      if (error.response?.status === 400) {
+        alert("로그인 정보가 유실되었습니다. 다시 로그인해주세요!");
+        removeAccessToken();
+        useAuthStore.getState().setLogout();
+        router.push("/login");
+      }
       throw error;
     }
   },