fix : loading 상태를 나타내는 변수명 변경

- 기존의 loading 상태를 나타내는 변수명의 의미를 확실히 정의하지 않는 형태의 변수명을 사용하여 혼동을 불러 일으킴
- loadingState라는 이름의 변수로 변경하여, 변수값을 의미하도록 명사형으로 바꾸고 loading 상태일 때 true를 가지도록 규칙ㅈ을 정함

Author: dongind

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/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>(true);
+  const [loadingState, setLoadingState] = useState<Boolean>(true);
   const { showBoundary } = useErrorBoundary();
 
   useEffect(() => {
     checkAuthentication().then((result: Boolean | unknown) => {
       if (result === true) {
-        setIsLoading(false);
+        setLoadingState(false);
       } else {
         showBoundary(result);
       }
     });
   }, [checkAuthentication]);
 
-  return isLoading ? <RouteLoading /> : <Outlet />;
+  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 />