Merge pull request #252 from boostcampwm2023/feat/routerFunction

feat : PublicRouter, PrivateRouter 함수 개선

Author: surinkwon

frontend/src/AppRouter.tsx

@@ -6,20 +6,16 @@ import GlobalErrorBoundary from "./GlobalErrorBoundary";
 import PrivateRoute from "./components/common/route/PrivateRoute";
 import PublicRoute from "./components/common/route/PublicRoute";
 
-const createPrivateRouter = (children: RouteObject[]) => {
-  const privateRoute = {
-    element: <PrivateRoute />,
-    children,
-  };
-  return privateRoute;
-};
+type RouteType = "PRIVATE" | "PUBLIC";
 
-const createPublicRouter = (children: RouteObject[]) => {
-  const publicRoute = {
-    element: <PublicRoute />,
-    children,
-  };
-  return publicRoute;
+const createAuthCheckRouter = (routeType: RouteType, children: RouteObject[]) => {
+  const authCheckRouter = children.map((child: RouteObject) => {
+    return {
+      element: routeType === "PRIVATE" ? <PrivateRoute /> : <PublicRoute />,
+      children: [child],
+    };
+  });
+  return authCheckRouter;
 };
 
 const router = createBrowserRouter([
@@ -35,25 +31,21 @@ const router = createBrowserRouter([
         index: true,
         element: <TempHomepage />,
       },
-      createPublicRouter([
+      ...createAuthCheckRouter("PUBLIC", [
         {
           path: ROUTER_URL.LOGIN,
           element: <LoginPage />,
         },
-      ]),
-      createPublicRouter([
         {
           path: ROUTER_URL.SIGNUP,
           element: <SignupPage />,
         },
-      ]),
-      createPublicRouter([
         {
           path: `${ROUTER_URL.AUTH}/*`,
           element: <AuthPage />,
         },
       ]),
-      createPrivateRouter([
+      ...createAuthCheckRouter("PRIVATE", [
         {
           path: ROUTER_URL.PROJECTS,
           element: <ProjectsPage />,

frontend/src/apis/api/loginAPI.ts

@@ -4,6 +4,7 @@ import {
   AccessTokenResponse,
   AuthenticationDTO,
   GithubOauthUrlDTO,
+  RefreshDTO,
   TempIdTokenResponse,
 } from "../../types/authDTO";
 import { useNavigate } from "react-router-dom";
@@ -42,3 +43,8 @@ export const postLogout = async () => {
     return response;
   }
 };
+
+export const postRefresh = async () => {
+  const response = await authAPI.post<RefreshDTO>(API_URL.REFRESH);
+  setAccessToken(response.data.accessToken);
+};

frontend/src/apis/utils/authAPI.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from "axios";
 import { API_URL, BASE_URL } from "../../constants/path";
-import { AccessTokenResponse } from "../../types/authDTO";
+import { RefreshDTO } from "../../types/authDTO";
 
 let accessToken: string | undefined;
 
@@ -44,7 +44,7 @@ const failResponse = async (error: AxiosError) => {
     }
 
     try {
-      const response = await authAPI.post<AccessTokenResponse>(API_URL.REFRESH);
+      const response = await authAPI.post<RefreshDTO>(API_URL.REFRESH);
       successRefresh(response.data.accessToken, error.config);
     } catch {
       unauthorizedErrorRetry = 0;
@@ -63,7 +63,6 @@ const successRefresh = async (
   if (config) {
     config.headers["Authorization"] = `Bearer ${newAccessToken}`;
     const newResponse = await authAPI(config);
-
     return newResponse;
   }
 };

frontend/src/components/common/route/PrivateRoute.tsx

@@ -5,20 +5,20 @@ import { useErrorBoundary } from "react-error-boundary";
 import RouteLoading from "./RouteLoading";
 
 const PrivateRoute = (): React.ReactElement => {
-  const [isLoading, setIsLoading] = useState<Boolean>(false);
+  const [loadingState, setLoadingState] = useState<Boolean>(true);
   const { showBoundary } = useErrorBoundary();
 
   useEffect(() => {
     checkAuthentication().then((result: Boolean | unknown) => {
       if (result === true) {
-        setIsLoading(true);
+        setLoadingState(false);
       } else {
         showBoundary(result);
       }
     });
   }, [checkAuthentication]);
 
-  return isLoading ? <Outlet /> : <RouteLoading />;
+  return loadingState ? <RouteLoading /> : <Outlet />;
 };
 
 export default PrivateRoute;

frontend/src/components/common/route/PublicRoute.tsx

@@ -5,22 +5,22 @@ import { Navigate, Outlet } from "react-router-dom";
 import { ROUTER_URL } from "../../../constants/path";
 
 const PublicRoute = () => {
-  const [isLoading, setIsLoading] = useState<Boolean>(false);
+  const [loadingState, setLoadingState] = useState<Boolean>(true);
   const [authenticated, setAuthenticated] = useState<Boolean>(false);
 
   useEffect(() => {
     checkAuthentication().then((result) => {
       if (result === true) {
-        setIsLoading(true);
+        setLoadingState(false);
         setAuthenticated(true);
       } else {
-        setIsLoading(true);
+        setLoadingState(false);
         setAuthenticated(false);
       }
     });
   }, [checkAuthentication]);
 
-  return !isLoading ? (
+  return loadingState ? (
     <RouteLoading />
   ) : !authenticated ? (
     <Outlet />

frontend/src/utils/route/checkAuthentication.ts

@@ -1,13 +1,10 @@
-import { authAPI, checkAccessToken, setAccessToken } from "../../apis/utils/authAPI";
-import { API_URL } from "../../constants/path";
-import { RefreshDTO } from "../../types/authDTO";
+import { postRefresh } from "../../apis/api/loginAPI";
+import { checkAccessToken } from "../../apis/utils/authAPI";
 
 const checkAuthentication = async (): Promise<boolean | unknown> => {
   if (checkAccessToken()) return true;
-
   try {
-    const response = await authAPI.post<RefreshDTO>(API_URL.REFRESH);
-    setAccessToken(response.data.accessToken);
+    await postRefresh();
     return true;
   } catch (error) {
     return error;