feat : add basic JWT auth

Author: CheonBi

jsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "jsx": "react-jsx", // React JSX 구문을 사용하도록 설정 (React 17+에서는 자동으로 JSX를 지원)
-    "checkJs": true, // JavaScript 파일에 대한 타입 검사 활성화 (VSCode에서 오류 경고 및 코드 완성 기능 향상)
+    "checkJs": false, // JavaScript 파일에 대한 타입 검사 (VSCode에서 오류 경고 및 코드 완성 기능 향상)
     "baseUrl": ".", // 기본 경로를 현재 프로젝트의 루트로 설정 (상대 경로 대신 별칭 사용 가능)
     "paths": {
       "@/*": ["src/*"] // '@' 별칭을 'src' 폴더로 설정 (모듈 경로 참조 시 간단하게 사용 가능)

package-lock.json

@@ -14,6 +14,7 @@
     "js-cookie": "^3.0.5",
     "postcss-cli": "^11.0.0",
     "react": "^18.3.1",
+    "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.1",
     "zustand": "^5.0.3"

package.json

@@ -1,6 +1 @@
 import axios from 'axios';
-
-axios.defaults.baseURL = '';
-axios.defaults.withCredentials = true;
-
-

src/apis/AuthAPI.js

@@ -0,0 +1,53 @@
+import axios from 'axios';
+
+const authAxiosInstance = axios.create({
+  baseURL: '',
+  timeout: 5000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true, //To use HttpOnly Cookie
+});
+
+authAxiosInstance.interceptors.request.use(
+  (config) => {
+    console.log('Requset Interceptors Success : ', config);
+
+    const accessToken = localStorage.getItem('accessToken');
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+
+    return config;
+  },
+
+  (error) => {
+    console.log('Requset Interceptors Success : ', error);
+    return Promise.reject(error);
+  }
+);
+
+authAxiosInstance.interceptors.response.use(
+  (res) => {
+    console.log(res);
+    return res;
+  },
+
+  async (error) => {
+    console.log(error);
+    const originalRequest = error.config;
+
+    if (error.response.status == 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+    }
+    try {
+      await axios.post('', {}, { withCredentials: true });
+      return authAxiosInstance(originalRequest);
+    } catch (refreshError) {
+      console.log('Refresh Token invalid: ', refreshError);
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default authAxiosInstance;

src/apis/AuthInstance.js

@@ -0,0 +1 @@
+import { create } from 'zustand';