feat(shared): axios Interceptor 추가 (#40)

packages/shared/api/axiosInstance.ts

@@ -0,0 +1,72 @@
+import axios, {
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from 'axios';
+
+import { BASE_URL } from '@/constants/baseURL';
+
+import {
+  onErrorRequest,
+  onErrorResponse,
+  onRequest,
+  onResponse,
+} from './axiosInterceptor';
+
+type interceptors = {
+  onRequest: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig;
+  onErrorRequest: (error: Error) => void | Promise<never>;
+  onResponse: (response: AxiosResponse) => AxiosResponse;
+  onErrorResponse: (error: Error) => void | Promise<never>;
+};
+
+class AxiosService {
+  private static instance: AxiosService;
+
+  private constructor(private axiosInstance: AxiosInstance) {}
+
+  public static getInstance({
+    onRequest,
+    onErrorRequest,
+    onResponse,
+    onErrorResponse,
+  }: interceptors): AxiosService {
+    if (!AxiosService.instance) {
+      const axiosInstance = axios.create({ baseURL: BASE_URL });
+      axiosInstance.interceptors.request.use(onRequest, onErrorRequest);
+      axiosInstance.interceptors.response.use(onResponse, onErrorResponse);
+      this.instance = new AxiosService(axiosInstance);
+    }
+    return this.instance;
+  }
+
+  public get<Response, Request>(
+    url: string,
+    config: AxiosRequestConfig<Request>,
+  ) {
+    return this.axiosInstance.get<Response>(url, config);
+  }
+
+  public post<Response, Request>(url: string, data: Request) {
+    return this.axiosInstance.post<Response>(url, data);
+  }
+
+  public delete<Response, Request>(
+    url: string,
+    config: AxiosRequestConfig<Request>,
+  ) {
+    return this.axiosInstance.delete<Response>(url, config);
+  }
+
+  public patch<Response, Request>(url: string, data: Request) {
+    return this.axiosInstance.patch<Response>(url, data);
+  }
+}
+
+export default AxiosService.getInstance({
+  onRequest,
+  onErrorRequest,
+  onResponse,
+  onErrorResponse,
+});

packages/shared/api/axiosInterceptor.ts

@@ -0,0 +1,22 @@
+import { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+
+export const onRequest = (config: InternalAxiosRequestConfig) => {
+  return config;
+};
+
+export const onErrorRequest = (error: Error) => {
+  return Promise.reject(error);
+};
+export const onResponse = (response: AxiosResponse) => {
+  return response.data;
+};
+export const onErrorResponse = (error: Error) => {
+  return Promise.reject(error);
+};
+
+export default {
+  onRequest,
+  onErrorRequest,
+  onResponse,
+  onErrorResponse,
+};

packages/shared/constants/baseURL.ts

@@ -0,0 +1 @@
+export const BASE_URL = '/example';

packages/shared/package.json

@@ -11,6 +11,7 @@
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "axios": "^1.6.0",
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",