refactor: GlobalLayout으로 Suspense 처리 로직 이동

woowacourse-teams · Oct 15, 2024 · 306895c · 306895c
1 parent 36bb85c
commit 306895c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 23 deletions.
diff --git a/frontend/src/layouts/GlobalLayout.tsx b/frontend/src/layouts/GlobalLayout.tsx
@@ -1,11 +1,13 @@
 import { ErrorBoundary } from '@sentry/react';
+import { Suspense } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import { AuthProvider } from '@contexts/AuthProvider';
 
 import ErrorPage from '@pages/ErrorPage';
 
 import Header from '@components/_common/Header';
+import PageMoveLoading from '@components/_common/PageMoveLoading';
 
 import { s_content, s_globalContainer } from './GlobalLayout.styles';
 
@@ -16,7 +18,9 @@ export default function GlobalLayout() {
         <Header />
         <div css={s_content}>
           <ErrorBoundary fallback={({ error }) => <ErrorPage error={error} />}>
-            <Outlet />
+            <Suspense fallback={<PageMoveLoading />}>
+              <Outlet />
+            </Suspense>
           </ErrorBoundary>
         </div>
       </div>

diff --git a/frontend/src/pages/MeetingLinkSharePage/index.tsx b/frontend/src/pages/MeetingLinkSharePage/index.tsx
@@ -60,7 +60,7 @@ export default function MeetingLinkSharePage() {
             css={s_button}
             onClick={() => navigate(`/meeting/${uuid}`)}
           >
-            시간 등록하러 가기
+            약속에 참여하기
           </Button>
         </div>
       </div>

diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
@@ -1,14 +1,11 @@
-import type { ComponentType } from 'react';
-import { Suspense, lazy } from 'react';
+import { lazy } from 'react';
 import type { RouteObject } from 'react-router-dom';
 import { createBrowserRouter } from 'react-router-dom';
 
 import GlobalLayout from '@layouts/GlobalLayout';
 
 import { TimePickerUpdateStateProvider } from '@contexts/TimePickerUpdateStateProvider';
 
-import PageMoveLoading from '@components/_common/PageMoveLoading';
-
 const AttendeeLoginPage = lazy(() => import('@pages/AttendeeLoginPage'));
 const CreateMeetingPage = lazy(() => import('@pages/CreateMeetingPage'));
 const FixedMeetingTicketPage = lazy(() => import('@pages/FixedMeetingTicketPage'));
@@ -21,58 +18,53 @@ const MeetingViewerPage = lazy(() => import('@pages/MeetingViewerPage'));
 const NotFoundPage = lazy(() => import('@pages/NotFoundPage'));
 const MeetingEntrancePage = lazy(() => import('@pages/MeetingEntrancePage'));
 
-const SuspenseWrapper = (Component: ComponentType) => (
-  <Suspense fallback={<PageMoveLoading />}>
-    <Component />
-  </Suspense>
-);
 const meetingRoutes: RouteObject[] = [
   {
     index: true,
-    element: SuspenseWrapper(LandingPage),
+    element: <LandingPage />,
   },
   {
     path: 'create',
-    element: SuspenseWrapper(CreateMeetingPage),
+    element: <CreateMeetingPage />,
   },
   {
     path: ':uuid',
     children: [
       {
         index: true,
-        element: SuspenseWrapper(MeetingEntrancePage),
+        element: <MeetingEntrancePage />,
       },
       {
         path: 'login',
-        element: SuspenseWrapper(AttendeeLoginPage),
+        element: <AttendeeLoginPage />,
       },
       {
         path: 'register',
-        element: SuspenseWrapper(MeetingRegisterPage),
+        element: <MeetingRegisterPage />,
       },
       {
         path: 'viewer',
         element: (
           <TimePickerUpdateStateProvider>
-            {SuspenseWrapper(MeetingViewerPage)}
+            <MeetingViewerPage />
           </TimePickerUpdateStateProvider>
         ),
       },
       {
         path: 'recommend',
-        element: SuspenseWrapper(MeetingRecommendPage),
+        element: <MeetingRecommendPage />,
       },
       {
         path: 'confirm',
-        element: SuspenseWrapper(MeetingConfirmPage),
+        element: <MeetingConfirmPage />,
       },
       {
         path: 'complete',
-        element: SuspenseWrapper(MeetingLinkSharePage),
+        element: <MeetingLinkSharePage />,
       },
       {
         path: 'fixed-meeting-ticket',
-        element: SuspenseWrapper(FixedMeetingTicketPage),
+        element: <FixedMeetingTicketPage />,
       },
     ],
   },
@@ -86,11 +78,11 @@ const router = createBrowserRouter([
     children: [
       {
         path: '*',
-        element: SuspenseWrapper(NotFoundPage),
+        element: <NotFoundPage />,
       },
       {
         index: true,
-        element: SuspenseWrapper(LandingPage),
+        element: <LandingPage />,
       },
       {
         path: 'meeting',