perf: 라우트별 lazy loading 적용한다 (#481)

src/pages/Account.tsx

@@ -16,13 +16,13 @@ import { useOverlay } from '@/hooks/useOverlay';
 import { isUserLoggedIn } from '@/lib/routeGuard';
 import { isNickname, isPassword } from '@/lib/validator';
 
-export const accountLoader: LoaderFunction = async () => {
+export const loader: LoaderFunction = async () => {
   const isLoggedIn = await isUserLoggedIn();
 
   if (!isLoggedIn) return redirect('/login');
   return null;
 };
-export function Account(): JSX.Element {
+export function Component(): JSX.Element {
   const setUserStore = useUserStore((state) => state.setUser);
   const messageRef = useRef<HTMLDivElement | null>(null);
   const updateMyInfoMutation = useUpdateMyInfoMutation({

src/pages/Home.tsx

@@ -12,14 +12,14 @@ import { isUserLoggedIn } from '@/lib/routeGuard';
 import Icons from '/icons.svg?url';
 
 // https://reactrouter.com/en/main/fetch/redirect
-export const homeLoader: LoaderFunction = async () => {
+export const loader: LoaderFunction = async () => {
   const isLoggedIn = await isUserLoggedIn();
 
   if (!isLoggedIn) return redirect('/login');
   return null;
 };
 
-export const Home = (): JSX.Element => {
+export const Component = (): JSX.Element => {
   const user = useUserStore(({ email, nickname, createdAt }) => ({
     email,
     nickname,

src/pages/HomeLayout.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Outlet } from 'react-router-dom';
+
+import { HomeHeader } from '@/components/home/HomeHeader';
+
+export function Component(): JSX.Element {
+  return (
+    <main className="flex flex-col h-full overflow-auto">
+      <HomeHeader />
+      <Outlet />
+    </main>
+  );
+}

src/pages/Login.tsx

@@ -19,14 +19,14 @@ export const LOGIN_ERROR_MESSAGE = {
   password: '8~20자 이하의 영문 대소문자, 숫자, 특수기호를 입력하세요',
 } as const;
 
-export const loginLoader: LoaderFunction = async () => {
+export const loader: LoaderFunction = async () => {
   const isLoggedIn = await isUserLoggedIn();
 
   if (isLoggedIn) return redirect('/home');
   return null;
 };
 
-export function Login(): JSX.Element {
+export function Component(): JSX.Element {
   const setUser = useUserStore((state) => state.setUser);
 
   const navigate = useNavigate();

src/pages/Panel.tsx

@@ -36,7 +36,7 @@ import Icons from '/icons.svg?url';
 
 // [NOTE] 로더 성공 반환값은 any 혹은 null로 고정한다
 // [NOTE] 로더 실패 반환값은 `Response`로 고정한다
-export const panelLoader =
+export const loader =
   (queryClient: QueryClient) =>
   async ({ params }: LoaderFunctionArgs): Promise<PanelData> => {
     const panelId = params.id!;
@@ -60,9 +60,9 @@ export const panelLoader =
     }
   };
 
-export function Panel(): JSX.Element {
+export function Component(): JSX.Element {
   const panel = useLoaderData() as Awaited<
-    ReturnType<ReturnType<typeof panelLoader>>
+    ReturnType<ReturnType<typeof loader>>
   >;
   const overlay = useOverlay();
 
@@ -172,7 +172,7 @@ export function Panel(): JSX.Element {
   );
 }
 
-export function PanelErrorBoundary(): JSX.Element {
+export function ErrorBoundary(): JSX.Element {
   const error = useRouteError();
 
   if (isRouteErrorResponse(error)) {

src/pages/SignUp.tsx

@@ -19,14 +19,14 @@ export const SIGN_UP_ERROR_MESSAGE = {
   nickname: '2~20자 이하의 문자를 입력하세요',
 } as const;
 
-export const signupLoader: LoaderFunction = async () => {
+export const loader: LoaderFunction = async () => {
   const isLoggedIn = await isUserLoggedIn();
 
   if (isLoggedIn) return redirect('/home');
   return null;
 };
 
-export function SignUp(): JSX.Element {
+export function Component(): JSX.Element {
   const signUpMutation = useSignUpMutation();
   const navigate = useNavigate();
   const { inputProps, errors, formProps, hasError, setError } = useForm({

src/pages/__tests__/Account.test.tsx

@@ -10,7 +10,7 @@ import { OverlayProvider } from '@/contexts/OverlayContext';
 import * as authApis from '@/lib/api/auth';
 import { renderWithQueryClient } from '@/lib/test-utils';
 import { isNickname, isPassword } from '@/lib/validator';
-import { Account } from '@/pages/Account';
+import { Component as Account } from '@/pages/Account';
 import { getUserState } from '@/store/user-store';
 
 vi.mock('@/lib/validator', () => ({

src/pages/__tests__/Home.test.tsx

@@ -6,7 +6,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { OverlayProvider } from '@/contexts/OverlayContext';
 import { renderWithQueryClient } from '@/lib/test-utils';
 import { mockMyPanelList } from '@/mocks/data/panel';
-import { Home } from '@/pages/Home';
+import { Component as Home } from '@/pages/Home';
 
 vi.mock('@/hooks/stores/useUserStore', () => ({
   useUserStore: () => ({

src/pages/__tests__/Login.test.tsx

@@ -11,7 +11,7 @@ import { apiUrl } from '@/lib/api/apiUrl';
 import * as authApis from '@/lib/api/auth';
 import { renderWithQueryClient } from '@/lib/test-utils';
 import { server } from '@/mocks/server';
-import { Login } from '@/pages/Login';
+import { Component as Login } from '@/pages/Login';
 import { getUserState } from '@/stores/user-store';
 
 vi.mock('@/lib/validator', () => ({

src/pages/__tests__/Panel.test.tsx

@@ -19,7 +19,7 @@ import { renderWithQueryClient } from '@/lib/test-utils';
 import { createMockPanel } from '@/mocks/data/panel';
 import { createMockQuestion } from '@/mocks/data/question';
 import { server } from '@/mocks/server';
-import { Panel } from '@/pages/Panel';
+import { Component as Panel } from '@/pages/Panel';
 
 vi.mock('react-router-dom', async (importOriginal) => {
   const router = (await importOriginal()) ?? {};

src/pages/__tests__/SignUp.test.tsx

@@ -11,7 +11,7 @@ import { apiUrl } from '@/lib/api/apiUrl';
 import * as apis from '@/lib/api/auth';
 import { renderWithQueryClient } from '@/lib/test-utils';
 import { server } from '@/mocks/server';
-import { SignUp } from '@/pages/SignUp';
+import { Component as SignUp } from '@/pages/SignUp';
 
 vi.mock('@/lib/validator', () => ({
   isEmail: vi.fn(() => true),

src/pages/__tests__/panel-route.test.tsx

@@ -18,7 +18,11 @@ import { createQueryClient } from '@/lib/test-utils';
 import { mockMyActiveInfo } from '@/mocks/data/active-info';
 import { createMockPanelId } from '@/mocks/data/panel';
 import { server } from '@/mocks/server';
-import { Panel, panelLoader, PanelErrorBoundary } from '@/pages/Panel';
+import {
+  Component as Panel,
+  loader as panelLoader,
+  ErrorBoundary as PanelErrorBoundary,
+} from '@/pages/Panel';
 
 describe('/panel/:id route', () => {
   it('로더에서 패널 정보 가져오기 API와 내 활동 정보 가져오기 API를 호출한다', async () => {

src/router.tsx

@@ -2,16 +2,10 @@ import type { QueryClient } from '@tanstack/react-query';
 
 import React from 'react';
 
-import { Outlet, createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter } from 'react-router-dom';
 
-import { HomeHeader } from '@/components/home/HomeHeader';
-import { Account, accountLoader } from '@/pages/Account';
-import { Home, homeLoader } from '@/pages/Home';
 import { Index } from '@/pages/Index';
-import { Login, loginLoader } from '@/pages/Login';
-import { Panel, panelLoader, PanelErrorBoundary } from '@/pages/Panel';
 import { Root, RootErrorBoundary, rootLoader } from '@/pages/Root';
-import { SignUp, signupLoader } from '@/pages/SignUp';
 
 export const createRouterWithQueryClient = (
   queryClient: QueryClient,
@@ -29,36 +23,32 @@ export const createRouterWithQueryClient = (
         },
         {
           path: 'signup',
-          element: <SignUp />,
-          loader: signupLoader,
+          lazy: async () => import('@/pages/SignUp'),
         },
         {
           path: 'login',
-          element: <Login />,
-          loader: loginLoader,
+          lazy: async () => import('@/pages/Login'),
         },
         {
-          element: (
-            <main className="flex flex-col h-full overflow-auto">
-              <HomeHeader />
-              <Outlet />
-            </main>
-          ),
+          lazy: async () => import('@/pages/HomeLayout'),
           children: [
             {
               path: 'home',
-              element: <Home />,
-              loader: homeLoader,
+              lazy: async () => import('@/pages/Home'),
+            },
+            {
+              path: 'account',
+              lazy: async () => import('@/pages/Account'),
             },
-            { path: 'account', element: <Account />, loader: accountLoader },
           ],
         },
         {
           path: 'panel/:id',
           id: 'panel',
-          element: <Panel />,
-          loader: panelLoader(queryClient),
-          errorElement: <PanelErrorBoundary />,
+          lazy: async () => {
+            const { loader, ...rest } = await import('@/pages/Panel');
+            return { ...rest, loader: loader(queryClient) };
+          },
         },
       ],
     },