feat: 토큰 만료 시 리프레스 토큰 요청

FE/error/src/axiosConfig.js

@@ -1,6 +1,80 @@
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
 
 // Axios 기본 설정
 axios.defaults.baseURL = import.meta.env.VITE_ERROR_API;
 axios.defaults.headers.common["Content-Type"] = "application/json";
 axios.defaults.withCredentials = true;
+
+let isRefreshing = false;
+let refreshSubscribers = [];
+
+const onRefreshed = (token) => {
+  refreshSubscribers.map((cb) => cb(token));
+};
+
+const addRefreshSubscriber = (cb) => {
+  refreshSubscribers.push(cb);
+};
+
+axios.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("slackToken");
+    if (token) {
+      config.headers["Authorization"] = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+axios.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  async (error) => {
+    const originalRequest = error.config;
+    if (error.response.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        return new Promise((resolve) => {
+          addRefreshSubscriber((token) => {
+            originalRequest.headers["Authorization"] = "Bearer " + token;
+            resolve(axios(originalRequest));
+          });
+        });
+      }
+
+      originalRequest._retry = true;
+      isRefreshing = true;
+
+      const refreshToken = localStorage.getItem("refreshToken");
+
+      return new Promise((resolve, reject) => {
+        axios
+          .post("/auth/reissue", { refreshToken: refreshToken })
+          .then(({ data }) => {
+            const newToken = data.data.accessToken;
+            localStorage.setItem("slackToken", newToken);
+            axios.defaults.headers.common["Authorization"] =
+              "Bearer " + newToken;
+            originalRequest.headers["Authorization"] = "Bearer " + newToken;
+            onRefreshed(newToken);
+            resolve(axios(originalRequest));
+          })
+          .catch((err) => {
+            reject(err);
+            useNavigate().push("/login");
+          })
+          .finally(() => {
+            isRefreshing = false;
+            refreshSubscribers = [];
+          });
+      });
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default axios;

FE/error/src/pages/LoginPage.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { useNavigate, useSearchParams } from "react-router-dom";
-import axios from "axios";
+import axios from "../utils/axiosConfig"; // 수정된 부분
 
 const LoginPage = () => {
   const navigate = useNavigate();
@@ -23,11 +23,12 @@ const LoginPage = () => {
     setError(null);
     try {
       const response = await axios.post(
-        `https://error.econo-calendar.com:8080/api/auth/login/slack?type=slack&code=${authCode}&redirect_uri=https://econo-calendar.com/login`
+        `/auth/login/slack?type=slack&code=${authCode}&redirect_uri=${redirectUri}`
       );
 
       if (response.data.code === "201") {
         localStorage.setItem("slackToken", response.data.data.accessToken);
+        localStorage.setItem("refreshToken", response.data.data.refreshToken); // 수정된 부분
         navigate("/");
       } else {
         setError(response.data.message || "로그인 실패");