[init/#110] api 기본 세팅

package.json

@@ -17,6 +17,7 @@
     "@lukemorales/query-key-factory": "^1.3.4",
     "@tanstack/react-query": "^5.81.5",
     "@vanilla-extract/recipes": "^0.5.7",
+    "axios": "^1.11.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "react": "^19.1.0",

src/App.tsx

@@ -1,11 +1,11 @@
 import { RouterProvider } from 'react-router-dom';
 import router from '@router/Router';
 import '@styles/global.css.ts';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { queryClient } from '@api/queryClient';
 
 const App = () => {
-  const queryClient = new QueryClient();
 
   return (
     <QueryClientProvider client={queryClient}>

src/api/axiosInstance.ts

@@ -0,0 +1,39 @@
+import { ROUTES } from '@router/constant/Routes';
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  timeout: 10000,
+  headers: {
+    Accept: 'application/json',
+  },
+});
+
+axiosInstance.interceptors.request.use(
+  config => {
+    const token = localStorage.getItem('accessToken');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  error => {
+    return Promise.reject(error);
+  }
+);
+
+axiosInstance.interceptors.response.use(
+  response => {
+    return response;
+  },
+  error => {
+    //후에 이 조건문에 리이슈 로직 추가
+    if (error.response?.status === 401) {
+      localStorage.removeItem('accessToken');
+      window.location.href = ROUTES.HOME;
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default axiosInstance;

src/api/queryClient.ts

@@ -0,0 +1,16 @@
+import { QueryCache, QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: error => {
+      if (import.meta.env.DEV) console.error('[React Query Error]', error);
+    },
+  }),
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      staleTime: 1000 * 60 * 2,
+      gcTime: 1000 * 60 * 5,
+    },
+  },
+});

src/api/request.ts

@@ -0,0 +1,66 @@
+import { isAxiosError, type AxiosRequestConfig } from 'axios';
+import axiosInstance from '@/api/axiosInstance';
+import type { BaseResponse } from '@/api/types';
+
+export const HTTPMethod = {
+  GET: 'GET',
+  POST: 'POST',
+  PUT: 'PUT',
+  DELETE: 'DELETE',
+  PATCH: 'PATCH',
+} as const;
+
+export type HTTPMethodType = (typeof HTTPMethod)[keyof typeof HTTPMethod];
+
+export interface RequestConfig {
+  method: HTTPMethodType;
+  url: string;
+  query?: Record<string, string | number | boolean>;
+  body?: unknown | FormData;
+  headers?: Record<string, string>;
+  withCredentials?: boolean;
+}
+
+export const request = async <T>(config: RequestConfig): Promise<T> => {
+  const { method, url, query, body, headers, withCredentials } = config;
+
+  const requestConfig: AxiosRequestConfig = {
+    method,
+    url,
+    params: query,
+    data: body,
+    withCredentials,
+  };
+
+  if (headers) {
+    requestConfig.headers = headers;
+  } else if (body && !(body instanceof FormData)) {
+    requestConfig.headers = { 'Content-Type': 'application/json' };
+  }
+
+  try {
+    const response = await axiosInstance.request<BaseResponse<T>>(requestConfig);
+    return response.data.data;
+  } catch (error: unknown) {
+    if (!isAxiosError(error)) {
+      console.error(`[실패] ${url} : 네트워크 오류`);
+      throw error;
+    }
+
+    if (error.response) {
+      const { status, data } = error.response;
+      const message = data?.message;
+
+      const displayMessage = status + ' ' + message;
+
+      if (import.meta.env.DEV) {
+        console.error(`[실패] ${url} : ${displayMessage}`);
+      }
+    } else {
+      if (import.meta.env.DEV) {
+        console.error(`[실패] ${url} : 서버에 연결할 수 없습니다.`);
+      }
+    }
+    throw error;
+  }
+};

src/api/types.ts

@@ -0,0 +1,6 @@
+export interface BaseResponse<T> {
+  success?: boolean;
+  code?: number;
+  message?: string;
+  data: T;
+}