[FE] Refactor/#642: 북마크 및 전체보기 페이지 API 로직 수정 및 React-Query 적용

frontend/src/apis/new/http.ts

@@ -1,13 +1,18 @@
-import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
+import axios, {
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosRequestHeaders,
+} from 'axios';
 
 const API_POSTFIX = 'api';
 const BASE_URL = process.env.APP_URL || `https://mapbefine.com/${API_POSTFIX}`;
-
 const axiosInstance = axios.create({
   baseURL: BASE_URL,
   headers: { Authorization: `Bearer ${localStorage.getItem('userToken')}` },
 });
 
+let refreshResponse: Promise<Response> | null = null;
+
 export interface HttpClient extends AxiosInstance {
   get<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T>;
   post<T = unknown>(
@@ -30,5 +35,64 @@ export interface HttpClient extends AxiosInstance {
 
 export const http: HttpClient = axiosInstance;
 
-// http.interceptors.request.use(())
 http.interceptors.response.use((res) => res.data);
+http.interceptors.request.use(
+  async (config) => {
+    const userToken = localStorage.getItem('userToken');
+
+    if (userToken && isTokenExpired(userToken)) {
+      await updateToken(config.headers);
+    }
+    return config;
+  },
+  (error) => Promise.reject(error),
+);
+
+const isTokenExpired = (token: string) => {
+  const decodedPayloadObject = decodeToken(token);
+  return decodedPayloadObject.exp * 1000 < Date.now();
+};
+
+const decodeToken = (token: string) => {
+  const tokenParts = token.split('.');
+
+  if (tokenParts.length !== 3) {
+    throw new Error('토큰이 잘못되었습니다.');
+  }
+
+  const decodedPayloadString = atob(tokenParts[1]);
+
+  return JSON.parse(decodedPayloadString);
+};
+
+async function updateToken(headers: AxiosRequestHeaders) {
+  const response = await refreshToken(headers);
+  const responseCloned = response.clone();
+  const newToken = await responseCloned.json();
+
+  localStorage.setItem('userToken', newToken.accessToken);
+}
+
+async function refreshToken(headers: AxiosRequestHeaders): Promise<Response> {
+  if (refreshResponse !== null) {
+    return refreshResponse;
+  }
+
+  const accessToken = localStorage.getItem('userToken');
+  refreshResponse = fetch(`${BASE_URL}/refresh-token`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      accessToken,
+    }),
+  });
+
+  const responseData = await refreshResponse;
+  refreshResponse = null;
+
+  if (!responseData.ok) {
+    throw new Error('Failed to refresh access token.');
+  }
+
+  return responseData;
+}