[FEAT] 프록시 설정 & 리프레시 토큰 인터셉터 추가

src/api/auth.ts

@@ -5,7 +5,9 @@ export const postReissue = async (): Promise<ReissueResponse> => {
   const { data } = await axios.post<ReissueResponse>(
     `${import.meta.env.VITE_API_BASE_URL}/api/auth/reissue`,
     {},
-    { withCredentials: true },
+    {
+      withCredentials: true,
+    },
   );
   return data;
 };

src/api/axios/axios.ts

@@ -1,16 +1,24 @@
 import axios from "axios";
 import { useLocalStorage } from "../../hooks/use-local-storage";
 import { LOCAL_STORAGE_KEY } from "../../constants/key";
+import { postLogout, postReissue } from "../auth";
+import toast from "react-hot-toast";
+
+const isDev = import.meta.env.DEV;
+const BASE_URL = isDev ? "" : import.meta.env.VITE_API_BASE_URL;
 
 export const axiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_API_BASE_URL,
+  baseURL: BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
 });
 
 // 요청 인터셉터: 모든 요청 전에 accessToken을 Authorization 헤더에 추가
 axiosInstance.interceptors.request.use(
   (config) => {
     const { getItem } = useLocalStorage(LOCAL_STORAGE_KEY.accessToken);
-    let accessToken = getItem();
+    const accessToken = getItem();
 
     // accessToken이 존재하면 Authorization 헤더에 Bearer 토큰 형식으로 추가한다
     if (accessToken) {
@@ -24,3 +32,43 @@ axiosInstance.interceptors.request.use(
   // 요청 인터셉터가 실패하면, 에러 뿜음
   (error) => Promise.reject(error),
 );
+
+// 응답 인터셉터
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    // 401에러 & 재시도 X
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+
+      try {
+        const reissueRes = await postReissue();
+
+        const { setItem } = useLocalStorage(LOCAL_STORAGE_KEY.accessToken);
+        setItem(reissueRes.result.accessToken);
+        originalRequest.headers.Authorization = `Bearer ${reissueRes.result.accessToken}`;
+        if (reissueRes.result.needAgreement) {
+          // 약관동의 안 돼있을 경우 약관동의로 리다이렉트
+          window.location.href = "/agreement";
+          return Promise.reject(new Error("Agreement required"));
+        }
+        return axiosInstance(originalRequest);
+      } catch (refreshError) {
+        // 리프레시 토큰 만료
+        toast.error("세션이 만료되었습니다. 다시 로그인해주세요.");
+
+        try {
+          await postLogout();
+        } catch (logoutError) {
+          toast.error("로그아웃 API 호출 실패");
+        } finally {
+          localStorage.removeItem(LOCAL_STORAGE_KEY.accessToken);
+          window.location.href = "/login";
+        }
+      }
+    }
+    return Promise.reject(error);
+  },
+);

src/routes/index.tsx

@@ -1,7 +1,6 @@
 import { createBrowserRouter } from "react-router-dom";
 import MobileLayout from "../layouts/mobile-layout";
 import ProtectedRoute from "./protected-route";
-import SignupPage from "../pages/auth/signup-page";
 import LoginPage from "../pages/auth/login-page";
 import HomePage from "../pages/home/home-page";
 import MyPage from "../pages/mypage/my-page";
@@ -47,10 +46,6 @@ export const router = createBrowserRouter([
         path: "login/callback",
         element: <LoginRedirectPage />,
       },
-      {
-        path: "signup",
-        element: <SignupPage />,
-      },
       {
         path: "agreement",
         element: <TermsAgreementPage />,

vite.config.ts

@@ -1,8 +1,21 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 
 // https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+
+  return {
+    plugins: [react(), tailwindcss()],
+    server: {
+      proxy: {
+        // '/api'로 시작하는 모든 요청을 프록시가 가로챔
+        "/api": {
+          target: env.VITE_API_BASE_URL,
+          changeOrigin: true,
+        },
+      },
+    },
+  };
 });