컴포넌트 lazy loading

src/App.tsx

@@ -4,29 +4,27 @@ import React, { Suspense, lazy } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import Header from '@/components/Header';
 import Layout from '@/components/Layout';
-import Main from '@/pages/main';
-import NotFound from '@/pages/NotFound';
 import menuItems from '@/data/menuItems';
 
-// 모든 페이지를 glob으로 가져오기 (파일 경로 기준)
+// 모든 페이지를 glob으로 가져오기
 const pages = import.meta.glob('@/pages/**/*.tsx');
 
-// 페이지 경로로부터 Lazy 컴포넌트 생성
+// lazy import 유틸
 const lazyImport = (path: string) => {
   const importer = pages[`/src/pages/${path}.tsx`];
   return importer
     ? lazy(importer as () => Promise<{ default: React.ComponentType }>)
-    : lazy(() => Promise.resolve({ default: NotFound }));
+    : lazy(() => Promise.resolve({ default: () => <div>페이지를 찾을 수 없습니다.</div> }));
 };
 
-// Suspense 래핑 함수
+// Suspense 래핑
 const withSuspense = (Component: React.LazyExoticComponent<React.ComponentType>) => (
   <Suspense fallback={<div>로딩 중...</div>}>
     <Component />
   </Suspense>
 );
 
-// 메뉴 기반으로 라우트 생성
+// 메뉴 기반 라우팅
 const renderRoutesFromMenu = () => {
   return menuItems.map((parent) => {
     const parentPath = parent.href.replace(/^\//, '');
@@ -51,14 +49,18 @@ const renderRoutesFromMenu = () => {
   });
 };
 
+// 메인 및 404 페이지도 lazy import로 처리
+const Main = lazyImport('main/index');
+const NotFound = lazyImport('NotFound');
+
 const App = () => {
   return (
     <>
       <Header />
       <Routes>
-        <Route path="/" element={<Main />} />
+        <Route path="/" element={withSuspense(Main)} />
         {renderRoutesFromMenu()}
-        <Route path="*" element={<NotFound />} />
+        <Route path="*" element={withSuspense(NotFound)} />
       </Routes>
     </>
   );