✨ feat: 라우트 기반 코드 스플리팅 적용

Author: LeeCh0129

src/App.jsx

@@ -1,27 +1,33 @@
 import './assets/styles/base.scss';
 import { Route, Routes } from 'react-router-dom';
+import { Suspense, lazy } from 'react';
 import Header from './components/layout/Header/Header';
-import RecipientList from './pages/RecipientList/RecipientList';
-import Home from './pages/Home/Home';
-import CreateRecipient from './pages/CreateRecipient/CreateRecipient';
-import Recipient from './pages/Recipient/Recipient';
-import MessageForm from './pages/MessageForm/MessageForm';
+
+const RecipientList = lazy(() => import('./pages/RecipientList/RecipientList'));
+const Home = lazy(() => import('./pages/Home/Home'));
+const CreateRecipient = lazy(
+  () => import('./pages/CreateRecipient/CreateRecipient'),
+);
+const Recipient = lazy(() => import('./pages/Recipient/Recipient'));
+const MessageForm = lazy(() => import('./pages/MessageForm/MessageForm'));
 
 export default function App() {
   return (
     <>
       <Header />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/list" element={<RecipientList />} />
-        <Route path="/post" element={<CreateRecipient />} />
-        <Route path="/post/:id" element={<Recipient showDelete={false} />} />
-        <Route
-          path="/post/:id/edit"
-          element={<Recipient showDelete={true} />}
-        />
-        <Route path="/post/:id/message" element={<MessageForm />} />
-      </Routes>
+      <Suspense fallback={<div>로딩중...</div>}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/list" element={<RecipientList />} />
+          <Route path="/post" element={<CreateRecipient />} />
+          <Route path="/post/:id" element={<Recipient showDelete={false} />} />
+          <Route
+            path="/post/:id/edit"
+            element={<Recipient showDelete={true} />}
+          />
+          <Route path="/post/:id/message" element={<MessageForm />} />
+        </Routes>
+      </Suspense>
     </>
   );
 }