Refactor[API]: axios 기반 API 구조 리팩터링

package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "dependencies": {
+    "axios": "^1.12.2",
     "qs": "^6.14.0",
     "react": "^18.3.1",
     "react-datepicker": "^4.25.0",
@@ -35,4 +36,4 @@
     "test:run": "vitest run"
   },
   "proxy": "http://localhost:8080"
-}
+}

src/api/axiosInstance/axiosInstance.js

@@ -0,0 +1,9 @@
+import axios from "axios";
+import { SERVER_URL } from "../../config";
+
+const api = axios.create({
+  baseURL: SERVER_URL,
+  withCredentials: true,
+});
+
+export default api;

src/api/axiosInstance/index.js

@@ -0,0 +1,8 @@
+import { requestInterceptor } from "./interceptor/requestInterceptor";
+import { responseInterceptor } from "./interceptor/responseInterceptor";
+import axiosInstance from "./axiosInstance";
+
+axiosInstance.interceptors.request.use(requestInterceptor);
+axiosInstance.interceptors.response.use(responseInterceptor);
+
+export default axiosInstance;

src/api/axiosInstance/interceptor/requestInterceptor.js

@@ -0,0 +1,16 @@
+import { getSessionItem } from "@/utils/storage";
+
+export const requestInterceptor = (config) => {
+  const sessionUser = getSessionItem("loginUser");
+  const jToken = getSessionItem("jToken");
+
+  if (sessionUser?.id) {
+    config.headers.Authorization = jToken;
+  }
+
+  return config;
+};
+
+export const requestInterceptorError = (error) => {
+  throw error;
+};

src/api/axiosInstance/interceptor/responseInterceptor.js

@@ -0,0 +1,26 @@
+import URL from "@/constants/url";
+import CODE from "@/constants/code";
+import { setSessionItem } from "@/utils/storage";
+
+export const responseInterceptor = (response) => {
+  const resp = response.data;
+
+  if (Number(resp.resultCode) === Number(CODE.RCV_ERROR_AUTH)) {
+    alert("Login Alert");
+    setSessionItem("loginUser", { id: "" });
+    window.location.href = URL.LOGIN;
+    throw new Error("인증 오류");
+  }
+
+  return resp;
+};
+
+export const responseInterceptorError = (error) => {
+  console.error("There was an error!", error);
+
+  if (error.message.includes("Network Error")) {
+    alert("서버와의 연결이 원활하지 않습니다. 서버를 확인하세요.");
+  }
+
+  throw error;
+};

src/api/http.js

@@ -0,0 +1,25 @@
+import axiosInstance from "./axiosInstance";
+
+// GET
+export const getApi = async (url, params = {}) => {
+  const res = await axiosInstance.get(url, { params });
+  return res;
+};
+
+// POST
+export const postApi = async (url, body = {}) => {
+  const res = await axiosInstance.post(url, body);
+  return res;
+};
+
+// PUT
+export const putApi = async (url, body = {}) => {
+  const res = await axiosInstance.put(url, body);
+  return res;
+};
+
+// DELETE
+export const deleteApi = async (url, params = {}) => {
+  const res = await axiosInstance.delete(url, { params });
+  return res;
+};

src/api/services/EgovAdminBoardList.js

@@ -0,0 +1,6 @@
+import { getApi } from "../http";
+
+export const fetchAdminBoardList = (srchCnd) => {
+  const retrieveListURL = "/bbsMaster";
+  return getApi(retrieveListURL, { srchCnd });
+};

src/api/services/EgovHeader.js

@@ -0,0 +1,6 @@
+import { getApi } from "../http";
+export const logOut = () => {
+  // 로그인 정보 존재할 때
+  const logOutUrl = "/auth/logout";
+  return getApi(logOutUrl);
+};

src/api/services/EgovLoginContent.js

@@ -0,0 +1,6 @@
+import { postApi } from "../http";
+
+export const login = (userInfo) => {
+  const loginUrl = "/auth/login-jwt";
+  return postApi(loginUrl, userInfo);
+};

src/api/services/EgovMain.js

@@ -0,0 +1,5 @@
+import { getApi } from "../http";
+export const fetchMainPage = () => {
+  const retrieveListURL = "/mainPage";
+  return getApi(retrieveListURL);
+};