refactor(member): 라우팅 파일 프로젝트 구조 변경 (#239)

* refactor(member): 라우팅 파일 프로젝트 구조 변경

* Create dry-doors-fly.md

* Update apps/member/src/pages/Routes.tsx

.changeset/dry-doors-fly.md

@@ -0,0 +1,5 @@
+---
+"@clab-platforms/member": patch
+---
+
+refactor(member): 라우팅 파일 프로젝트 구조 변경

apps/member/src/App.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { server } from '@api/server';
 import { useToken } from '@hooks/common/useToken';
-import AppRouter from '@router/AppRouter';
+import { Routes } from '@pages/Routes';
 import { useSetIsLoggedInStore } from '@store/auth';
 import { authorization } from '@utils/api';
 
@@ -25,7 +25,7 @@ const App = () => {
     return null;
   }
 
-  return <AppRouter />;
+  return <Routes />;
 };
 
 export default App;

apps/member/src/main.tsx

@@ -16,7 +16,6 @@ import { API_BASE_URL } from '@constants/api.ts';
 import {
   CHANNEL_TALK_TOKEN,
   ENVIRONMENT_MODE,
-  IS_DEVELOPMENT,
   IS_PRODUCTION,
   SENTRY_DSN,
 } from '@constants/environment.ts';
@@ -59,7 +58,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
         <ToastContainer />
         <ModalContainer />
       </RecoilRoot>
-      {IS_DEVELOPMENT && <ReactQueryDevtools initialIsOpen={false} />}
+      <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   </StrictMode>,
 );

apps/member/src/pages/ErrorPage/ErrorPage.tsx → apps/member/src/pages/GlobalErrorPage/index.tsx

@@ -10,10 +10,10 @@ import ProtectAuth from '@components/router/ProtectAuth';
 import { IS_DEVELOPMENT } from '@constants/environment';
 import { PATH } from '@constants/path';
 
-const ErrorPage = () => {
+export function GlobalErrorPage() {
   const error = useRouteError();
   let errorStatus: number | undefined = undefined;
-  let errorMessage: string = 'Unknown error';
+  let errorMessage: string = 'Unknown Error';
 
   if (isRouteErrorResponse(error)) {
     errorStatus = error.status;
@@ -27,7 +27,7 @@ const ErrorPage = () => {
   return (
     <ProtectAuth protect>
       <ScrollToTop>
-        <section>
+        <main>
           {IS_DEVELOPMENT && (
             <div className="fixed left-0 top-0 w-full border-t-4 border-red-500 bg-gray-100 p-4 text-sm">
               <p className="font-semibold">Development Error Message:</p>
@@ -61,10 +61,8 @@ const ErrorPage = () => {
             </div>
           </div>
           <Footer />
-        </section>
+        </main>
       </ScrollToTop>
     </ProtectAuth>
   );
-};
-
-export default ErrorPage;
+}

apps/member/src/router/AppLayout.tsx → apps/member/src/pages/PageLayout.tsx

@@ -7,35 +7,27 @@ import TextBanner from '@components/common/TextBanner/TextBanner';
 import PanelAside from '@components/panels/PanelAside/PanelAside';
 import ProtectAuth from '@components/router/ProtectAuth';
 
-const View = () => {
+export function PageLayout() {
   const banner = true;
 
-  return (
-    <main className="flex min-h-screen flex-col bg-gray-50 py-14">
-      {banner && (
-        <TextBanner
-          label="OPEN-BETA"
-          description="현재 불안정하거나 구현되지 않는 기능이 있을 수 있습니다."
-        />
-      )}
-      <div className="container flex gap-8">
-        <PanelAside />
-        <Outlet />
-      </div>
-    </main>
-  );
-};
-
-const AppLayout = () => {
   return (
     <ProtectAuth protect>
       <ScrollToTop>
         <Nav />
-        <View />
+        <main className="flex min-h-screen flex-col bg-gray-50 py-14">
+          {banner && (
+            <TextBanner
+              label="OPEN-BETA"
+              description="현재 불안정하거나 구현되지 않는 기능이 있을 수 있습니다."
+            />
+          )}
+          <div className="container flex gap-8">
+            <PanelAside />
+            <Outlet />
+          </div>
+        </main>
         <Footer />
       </ScrollToTop>
     </ProtectAuth>
   );
-};
-
-export default AppLayout;
+}

apps/member/src/pages/Routes.tsx

@@ -0,0 +1,232 @@
+import { Suspense, lazy } from 'react';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+
+import { SectionSkeleton } from '@components/common/Section';
+import ProtectAuth from '@components/router/ProtectAuth';
+
+import { PATH } from '@constants/path';
+import MainPage from '@pages/MainPage/MainPage';
+
+import { GlobalErrorPage } from './GlobalErrorPage';
+import { PageLayout } from './PageLayout';
+
+const CommunityPage = lazy(() => import('@pages/CommunityPage/CommunityPage'));
+const CommunityPostPage = lazy(
+  () => import('@pages/CommunityPostPage/CommunityPostPage'),
+);
+const CommunityDetailPage = lazy(
+  () => import('@pages/CommunityDetailPage/CommunityDetailPage'),
+);
+const CommunityWritePage = lazy(
+  () => import('@pages/CommunityWritePage/CommunityWritePage'),
+);
+const GroupPage = lazy(() => import('@pages/GroupPage/GroupPage'));
+const GroupApplyPage = lazy(
+  () => import('@pages/GroupApplyPage/GroupApplyPage'),
+);
+const GroupDetailPage = lazy(
+  () => import('@pages/GroupDetailPage/GroupDetailPage'),
+);
+const GroupAssignmentPage = lazy(
+  () => import('@pages/GroupAssignmentPage/GroupAssignmentPage'),
+);
+const GroupConfigPage = lazy(
+  () => import('@pages/GroupConfigPage/GroupConfigPage'),
+);
+const GroupCreatePage = lazy(
+  () => import('@pages/GroupCreatePage/GroupCreatePage'),
+);
+const LibraryPage = lazy(() => import('@pages/LibraryPage/LibraryPage'));
+const LibraryDetailPage = lazy(
+  () => import('@pages/LibraryDetailPage/LibraryDetailPage'),
+);
+const MyPage = lazy(() => import('@pages/MyPage/MyPage'));
+const CalendarPage = lazy(() => import('@pages/CalendarPage/CalendarPage'));
+const SupportPage = lazy(() => import('@pages/SupportPage/SupportPage'));
+const LoginPage = lazy(() => import('@pages/LoginPage/LoginPage'));
+const AuthPage = lazy(() => import('@pages/AuthPage/AuthPage'));
+const BlogPage = lazy(() => import('@pages/BlogPage/BlogPage'));
+const ManagePage = lazy(() => import('@pages/ManagePage/ManagePage'));
+const ApplicationPage = lazy(
+  () => import('@pages/ApplicationPage/ApplicationPage'),
+);
+
+const router = createBrowserRouter([
+  {
+    path: PATH.MAIN,
+    element: <PageLayout />,
+    errorElement: <GlobalErrorPage />,
+    children: [
+      {
+        path: PATH.MAIN,
+        element: (
+          <Suspense fallback={<SectionSkeleton />}>
+            <MainPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.COMMUNITY,
+        element: (
+          <Suspense fallback={<SectionSkeleton />}>
+            <CommunityPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.COMMUNITY_POST,
+        element: (
+          <Suspense>
+            <CommunityPostPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.COMMUNITY_DETAIL,
+        element: (
+          <Suspense>
+            <CommunityDetailPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.COMMUNITY_WRITE,
+        element: (
+          <Suspense>
+            <CommunityWritePage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.BLOG_DETAIL,
+        element: (
+          <Suspense>
+            <BlogPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.ACTIVITY,
+        element: (
+          <Suspense>
+            <GroupPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.ACTIVITY_APPLY,
+        element: (
+          <Suspense>
+            <GroupApplyPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.ACTIVITY_DETAIL,
+        element: (
+          <Suspense>
+            <GroupDetailPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.ACTIVITY_CONFIG,
+        element: (
+          <Suspense>
+            <GroupConfigPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.ACTIVITY_ASSIGNMENT,
+        element: (
+          <Suspense>
+            <GroupAssignmentPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.ACTIVITY_CREATE,
+        element: (
+          <Suspense>
+            <GroupCreatePage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.LIBRARY,
+        element: (
+          <Suspense>
+            <LibraryPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.LIBRARY_DETAIL,
+        element: (
+          <Suspense>
+            <LibraryDetailPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.MY,
+        element: (
+          <Suspense>
+            <MyPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.CALENDER,
+        element: (
+          <Suspense>
+            <CalendarPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.SUPPORT,
+        element: (
+          <Suspense>
+            <SupportPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.MANAGE,
+        element: (
+          <Suspense>
+            <ManagePage />
+          </Suspense>
+        ),
+      },
+      {
+        path: PATH.APPLICATION,
+        element: (
+          <Suspense>
+            <ApplicationPage />
+          </Suspense>
+        ),
+      },
+    ],
+  },
+  {
+    path: PATH.MAIN,
+    element: <ProtectAuth />,
+    children: [
+      {
+        path: PATH.LOGIN,
+        element: <LoginPage />,
+      },
+      {
+        path: PATH.AUTH,
+        element: <AuthPage />,
+      },
+    ],
+  },
+]);
+
+export function Routes() {
+  return <RouterProvider router={router} />;
+}