🐛fix: code splitting 및 404 페이지 구현

src/App.tsx

@@ -1,55 +1,71 @@
-import { Routes, Route, useLocation, useSearchParams } from 'react-router-dom';
-import Navbar from './components/layout/Navbar';
-import Login from './pages/account/Login';
-import Signup from './pages/account/Signup';
-import Store from './pages/store/Store';
-import StoreEdit from './pages/store/StoreEdit';
-import StoreForm from './pages/store/StoreForm';
-import StorePost from './pages/store/StorePost';
-import Profile from './pages/profile/Profile';
-import ProfileForm from './pages/profile/ProfileForm';
-import NoticeList from './pages/notice/NoticeList';
-import Notice from './pages/notice/Notice';
+import { Suspense, lazy } from 'react';
+import { Routes, Route, useLocation } from 'react-router-dom';
+import Navbar from '@/components/layout/Navbar';
 
+// 페이지 컴포넌트 lazy import
+const NoticeList = lazy(() => import('@/pages/notice/NoticeList'));
+const Notice = lazy(() => import('@/pages/notice/Notice'));
+const Login = lazy(() => import('@/pages/account/Login'));
+const Signup = lazy(() => import('@/pages/account/Signup'));
+const NotFound = lazy(() => import('@/pages/error/NotFound'));
+
+const Store = lazy(() => import('@/pages/store/Store'));
+const StoreEdit = lazy(() => import('@/pages/store/StoreEdit'));
+const StoreForm = lazy(() => import('@/pages/store/StoreForm'));
+const StorePost = lazy(() => import('@/pages/store/StorePost'));
+
+const Profile = lazy(() => import('@/pages/profile/Profile'));
+const ProfileForm = lazy(() => import('@/pages/profile/ProfileForm'));
+
+import { useSearchParams } from 'react-router-dom';
+
+// 검색 쿼리용 페이지
 function SearchPage() {
   const [params] = useSearchParams();
   const query = params.get('query') || '';
   return <NoticeList search={query} />;
 }
 
+// 로딩 스피너
+function LoadingSpinner() {
+  return (
+    <div className="flex min-h-[calc(100vh-102px)] items-center justify-center md:min-h-[calc(100vh-70px)]">
+      <div className="size-100 animate-spin rounded-full border-8 border-gray-200 border-t-primary" />
+    </div>
+  );
+}
+
 export default function App() {
   const { pathname } = useLocation();
 
   return (
-    <>
+    <Suspense fallback={<LoadingSpinner />}>
       {pathname !== '/login' && pathname !== '/signup' && <Navbar />}
       <Routes>
         {/* 공통 페이지 */}
         <Route path="/" element={<NoticeList />} />
         <Route path="/search" element={<SearchPage />} />
-        <Route path=":shopId/:noticeId" element={<Notice />} />
-        <Route path="login" element={<Login />} />
-        <Route path="signup" element={<Signup />} />
+        <Route path="/:shopId/:noticeId" element={<Notice />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
 
         {/* 사장님 페이지 */}
-        <Route path="owner">
-          <Route path="store">
-            <Route index element={<Store />} />
-            <Route path="edit" element={<StoreEdit />} />
-          </Route>
-          <Route path="post">
-            <Route index element={<StoreForm />} />
-            <Route path=":shopId/:noticeId" element={<StorePost />} />
-            <Route path=":shopId/:noticeId/edit" element={<StoreForm />} />
-          </Route>
-        </Route>
-
-        {/* 알바님 프로필 페이지 */}
-        <Route path="profile">
-          <Route index element={<Profile />} />
-          <Route path="edit" element={<ProfileForm />} />
-        </Route>
+        <Route path="/owner/store" element={<Store />} />
+        <Route path="/owner/store/edit" element={<StoreEdit />} />
+        <Route path="/owner/post" element={<StoreForm />} />
+        <Route path="/owner/post/:shopId/:noticeId" element={<StorePost />} />
+        <Route
+          path="/owner/post/:shopId/:noticeId/edit"
+          element={<StoreForm />}
+        />
+
+        {/* 알바님 프로필 */}
+        <Route path="/profile" element={<Profile />} />
+        <Route path="/profile/edit" element={<ProfileForm />} />
+
+        {/* 404 Not Found */}
+        <Route path="*" element={<NotFound />} />
       </Routes>
-    </>
+    </Suspense>
   );
 }

src/pages/error/NotFound.tsx

@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+
+export default function NotFound() {
+  return (
+    <div className="flex h-screen flex-col items-center justify-center text-center">
+      <h1 className="mb-20 text-8xl font-bold text-primary">404</h1>
+      <p className="mb-40 text-4xl text-primary">페이지를 찾을 수 없습니다.</p>
+      <Link to="/" className="text-xl text-[#5534DA] underline">
+        홈으로 돌아가기
+      </Link>
+    </div>
+  );
+}