[feat/front] 폴더구조 변경으로 전체적인 리팩토링 및 서버와 유저 관련 기능 추가

front/craco.config.js

@@ -0,0 +1,16 @@
+const path = require("path");
+
+module.exports = {
+  webpack: {
+    alias: {
+      "@": path.resolve(__dirname, "src/"),
+    },
+  },
+  jest: {
+    configure: {
+      moduleNameMapper: {
+        "^@(.*)$": "<rootDir>/src$1",
+      },
+    },
+  },
+};

front/package.json

@@ -3,15 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.17",
-    "@mui/material": "^5.15.17",
+    "@craco/craco": "^7.1.0",
     "@tanstack/react-query": "^5.45.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^16.18.97",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
@@ -20,6 +18,7 @@
     "embla-carousel-autoplay": "^8.2.1",
     "embla-carousel-react": "^8.2.1",
     "express": "^4.19.2",
+    "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "openvidu-browser": "^2.30.1",
     "phaser": "^3.80.1",
@@ -38,9 +37,9 @@
     "zustand": "^4.5.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -60,5 +59,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "craco-alias": "^3.0.1"
   }
 }

front/src/App.tsx

@@ -1,52 +1,5 @@
-import { Navigate, Route, Routes } from "react-router-dom";
-import "./App.css";
-import AuthLayout from "./components/Auth/AuthLayout";
-import PrivateRoute from "./components/Auth/PrivateRoute";
-import Layout from "./components/Layout/Layout";
-import Home from "./pages/Home";
-import Join from "./pages/Join";
-import Login from "./pages/Login";
-import ServerMapWithTheme from "./components/Server/ServerMapWithTheme";
-
-function App() {
-  return (
-    <div className="App">
-      <Routes>
-        <Route element={<AuthLayout />}>
-          <Route path="/login" element={<Login />} />
-          <Route path="/join" element={<Join />} />
-        </Route>
-        <Route element={<Layout />}>
-          <Route
-            path="/"
-            element={
-              <PrivateRoute>
-                <Home />
-              </PrivateRoute>
-            }
-          />
-          <Route
-            path="/server/:serverId"
-            element={
-              <PrivateRoute>
-                <ServerMapWithTheme />
-              </PrivateRoute>
-            }
-          />
-
-          <Route
-            path="/:theme"
-            element={
-              <PrivateRoute>
-                <ServerMapWithTheme />
-              </PrivateRoute>
-            }
-          />
-          <Route path="*" element={<Navigate replace to="/" />} />
-        </Route>
-      </Routes>
-    </div>
-  );
-}
+const App = () => {
+  return <div className="relative"></div>;
+};
 
 export default App;

front/src/api/token.ts → front/src/api/auth.ts

@@ -1,4 +1,7 @@
-import axiosInstance from "./axiosInstance";
+import Cookies from "js-cookie";
+import axiosInstance from "./axios/axiosInstance";
+import { AUTH_API } from "./axios/requests";
+
 interface TokenPayload {
   exp: number; // 만료 시간 (유닉스 타임스탬프)
 }
@@ -38,31 +41,34 @@ export function getTokenExpiration(token: string): number {
 }
 
 // 토큰 검증 API
-export async function validateAccessToken(token: string): Promise<boolean> {
-  console.log("액세스토큰:", token);
+export async function validateAccessToken(
+  token: string
+): Promise<{ isValid: boolean; userId: string | null }> {
   try {
-    const response = await axiosInstance.post(
-      "/auth/api/v2/validation",
-      {},
-      {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      }
-    );
-    // console.log("액세스 토큰 응답 상태(status):", response.status);
-    // console.log("액세스토큰 응답 데이터:", response.data);
+    const response = await axiosInstance({
+      ...AUTH_API.POST_REQUEST.validation,
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
 
+    console.log("토큰 검증 응답 상태(status):", response.status);
     if (response.status === 200) {
-      // console.log("토큰 검증 성공:", response.data);
-      return true;
+      const userId = response.data.userId;
+      console.log("토큰 검증 성공:", response.data);
+      Cookies.set("userId", userId, {
+        path: "/",
+        expires: 1 / 24,
+        secure: true,
+      });
+      return { isValid: true, userId };
     } else {
-      // console.error("토큰 검증 실패:", response.data);
-      return false;
+      console.error("토큰 검증 실패:", response.data);
+      return { isValid: false, userId: null };
     }
   } catch (error) {
-    // console.error("토큰 검증 중 오류 발생:", error);
-    return false;
+    console.error("토큰 검증 중 오류 발생:", error);
+    return { isValid: false, userId: null };
   }
 }
 
@@ -72,27 +78,22 @@ export async function refreshAccessToken(
 ): Promise<{ accessToken: string; refreshToken: string } | null> {
   // console.log("리프레시 토큰으로 새로운 액세스 토큰 요청:", refreshToken);
   try {
-    const response = await axiosInstance.post(
-      "/auth/api/v1/access_token",
-      { refreshToken },
-      {
-        headers: {
-          "Content-Type": "application/json",
-        },
-      }
-    );
-    // console.log("새로운 액세스 토큰 응답 상태(status):", response.status);
-    // console.log("새로운 액세스 토큰 응답 데이터 :", response.data);
+    const response = await axiosInstance({
+      ...AUTH_API.POST_REQUEST.accessToken,
+      data: { refreshToken },
+    });
+    console.log("새로운 액세스 토큰 응답 상태(status):", response.status);
+    console.log("새로운 액세스 토큰 응답 데이터 :", response.data);
 
     if (response.status === 200) {
-      // console.log("accessToken 갱신 성공:", response.data);
+      console.log("accessToken 갱신 성공:", response.data);
       return response.data.data;
     } else {
-      // console.error("accessToken 갱신 실패:", response.data);
+      console.error("accessToken 갱신 실패:", response.data);
       return null;
     }
   } catch (error) {
-    // console.error("API 호출 중 오류 발생:", error);
+    console.error("API 호출 중 오류 발생:", error);
     return null;
   }
 }

front/src/api/axios/axiosInstance.ts

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+const axiosInstance = axios.create({
+  baseURL: process.env.REACT_APP_BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default axiosInstance;

front/src/api/axios/axiosInterceptor.ts

@@ -0,0 +1,118 @@
+import axios, {
+  AxiosError,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from "axios";
+import { refreshAccessToken, validateAccessToken } from "../auth";
+import Cookies from "js-cookie";
+import { LoginState } from "@/store/useLoginStore";
+
+interface RetryConfig extends InternalAxiosRequestConfig {
+  _retry?: boolean;
+}
+
+const clearAuthData = () => {
+  localStorage.clear();
+  Cookies.remove("dicoTown_RefreshToken");
+  // Add any other cookies or local storage items that need to be cleared
+};
+
+// Axios 인터셉터 설정 함수
+
+const interceptorSetup = (store: LoginState) => {
+  // 로그인 시 리프레쉬 토큰은 쿠키에 저장. 쿠키에 저장된 리프레쉬 토큰 가져오기.
+  const refreshToken = Cookies.get("dicoTown_RefreshToken");
+
+  // 요청 인터셉터 설정
+  axios.interceptors.request.use(
+    async (config: RetryConfig) => {
+      const token = store.accessToken;
+
+      console.log("요청 인터셉터 실행", token);
+      if (token) {
+        // 액세스 토큰 유효성 검사
+        const isTokenValid = await validateAccessToken(token);
+
+        if (!isTokenValid) {
+          if (refreshToken) {
+            const newTokens = await refreshAccessToken(refreshToken);
+            if (newTokens) {
+              // 새로운 토큰을 상태와 로컬 스토리지에 저장
+              store.setTokens(newTokens.accessToken, newTokens.refreshToken);
+              // 요청 헤더에 새로운 액세스 토큰 추가
+              config.headers.Authorization = `Bearer ${newTokens.accessToken}`;
+              console.log("새로운 토큰:", newTokens);
+            } else {
+              // 새로운 토큰 발급 실패 시 로그인 페이지로 이동
+              console.error(
+                "리프레시 토큰을 이용한 발급이 실패, 로그인 페이지로 이동"
+              );
+              store.clearTokens();
+              clearAuthData();
+              window.location.href = "/login"; // Redirect to login page
+
+              return Promise.reject(new Error("토큰이 만료되었습니다."));
+            }
+          }
+        } else {
+          // 액세스 토큰이 유효하면 요청 헤더에 추가
+          config.headers.Authorization = `Bearer ${token}`;
+        }
+      }
+      return config;
+    },
+    (error: AxiosError) => {
+      // 요청 에러 처리
+      console.error("Request Error:", error);
+      return Promise.reject(error);
+    }
+  );
+
+  // 응답 인터셉터 설정
+  axios.interceptors.response.use(
+    (response: AxiosResponse) => {
+      return response;
+    },
+    async (error: AxiosError) => {
+      const originalRequest = error.config as RetryConfig;
+      if (
+        error.response &&
+        // 인증 오류 (401) 처리
+        error.response.status === 401 &&
+        originalRequest &&
+        // 요청이 재시도되지 않았는지 확인
+        !originalRequest._retry
+      ) {
+        originalRequest._retry = true;
+        console.log(
+          "응답 인터셉터 401 오류, 리프레시 토큰을 토큰을 사용해 새로운 액세스 토큰 발급 "
+        );
+        // 리프레시 토큰을 사용해 새로운 액세스 토큰 발급
+        if (refreshToken) {
+          const newTokens = await refreshAccessToken(refreshToken);
+          if (newTokens) {
+            // 새로운 토큰을 상태와 로컬 스토리지에 저장
+            store.setTokens(newTokens.accessToken, newTokens.refreshToken);
+            // 원래 요청 헤더에 새로운 액세스 토큰 추가
+            originalRequest.headers.Authorization = `Bearer ${newTokens.accessToken}`;
+            console.log("401 오류 이후의 새로운 토큰 :", newTokens);
+            // 원래 요청을 재시도
+            return axios(originalRequest);
+          } else {
+            // 새로운 토큰 발급 실패 시 로그인 페이지로 이동
+            console.error(
+              "401 오류 이후 토큰을 새로운 토큰 발급 실패, 로그인페이지로 이동"
+            );
+
+            return Promise.reject(new Error("토큰이 만료되었습니다."));
+          }
+        }
+      }
+      // 그 외의 응답 에러 처리
+      console.error("응답 오류:", error);
+      return Promise.reject(error);
+    }
+  );
+};
+
+export default interceptorSetup;