[NDD-86] 상태관리 라이브러리 추가 (순수 세팅 시간 1h/8h) (상태 관리 고민시간 4h/???) (#25)

* chore: axios 라이브러리 추가

* chore: axios 기본 instance 생성

* chore: tanstack query 라이브러리 추가

* chore: recoil 라이브러리 추가

* chore: tanstack query devtools 추가

FE/package.json

@@ -15,9 +15,13 @@
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@tanstack/react-query": "^5.8.1",
+    "@tanstack/react-query-devtools": "^5.8.1",
+    "axios": "^1.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.18.0"
+    "react-router-dom": "^6.18.0",
+    "recoil": "^0.7.7"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.0",

FE/src/App.tsx

@@ -2,13 +2,23 @@ import { Global, ThemeProvider } from '@emotion/react';
 import { theme } from '@styles/theme';
 import _global from '@styles/_global';
 import AppRouter from '@/AppRouter'; // AppRouter를 임포트합니다.
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { RecoilRoot } from 'recoil';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+const queryClient = new QueryClient();
 
 function App() {
   return (
-    <ThemeProvider theme={theme}>
-      <Global styles={_global} />
-      <AppRouter />
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryDevtools initialIsOpen={false} />
+      <RecoilRoot>
+        <ThemeProvider theme={theme}>
+          <Global styles={_global} />
+          <AppRouter />
+        </ThemeProvider>
+      </RecoilRoot>
+    </QueryClientProvider>
   );
 }
 

FE/src/apis/axios.ts

@@ -0,0 +1,50 @@
+import { BASE_URL } from '@/constants/api';
+import axios, { AxiosError } from 'axios';
+
+const api = (() => {
+  const axiosInstance = axios.create({
+    baseURL: BASE_URL,
+    timeout: 3000,
+    responseType: 'json',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  axiosInstance.interceptors.response.use(
+    (response) => {
+      return response;
+    },
+    // TODO: console은 dev 환경에서만 동작해야 하고 실제 prod환경에서는 어떻게 처리할지 논의 해봐야함
+    (error: AxiosError) => {
+      if (error.code === 'ECONNABORTED') {
+        alert('서버에 이상이 있습니다.');
+      }
+      switch (error.response?.status) {
+        case 401:
+          console.warn('401: 인증정보 없음');
+          break;
+        case 403:
+          console.warn('403: 권한 없음');
+          break;
+        case 404:
+          console.warn('404: 대상을 찾지 못함');
+          break;
+        case 500:
+        case 501:
+        case 502:
+        case 503:
+        case 504:
+          console.warn(`${error.response?.status}: 서버 오류`);
+          break;
+        default:
+          console.error(`${error.response?.status}: unhandled error!`);
+          break;
+      }
+      return Promise.reject(error);
+    }
+  );
+  return axiosInstance;
+})();
+
+export default api;

FE/src/constants/api.ts

@@ -1,4 +1,4 @@
-const BASEURL = '';
+export const BASE_URL = '';
 
 type Id = number;