From 48b1e58c32377fbfbe745ba26c59bb5280c66d0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EA=B4=91=EB=AF=BC?= <rhkdals0242@naver.com>
Date: Mon, 23 Jun 2025 11:20:41 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20feat:=20404=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A5=BC=20=EC=9C=84=ED=95=9C=20NotFound=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/error/NotFound.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/pages/error/NotFound.tsx

diff --git a/src/pages/error/NotFound.tsx b/src/pages/error/NotFound.tsx
new file mode 100644
index 0000000..00ce3c6
--- /dev/null
+++ b/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>
+  );
+}

From 65487636e7e143f81e900f0005e116789cb255a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EA=B4=91=EB=AF=BC?= <rhkdals0242@naver.com>
Date: Mon, 23 Jun 2025 11:20:52 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20feat:=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20laz?=
 =?UTF-8?q?y=20import=EB=A1=9C=20=EB=B3=80=EA=B2=BD=ED=95=98=EC=97=AC=20?=
 =?UTF-8?q?=EC=84=B1=EB=8A=A5=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx | 84 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 50 insertions(+), 34 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 238e8cd..3bfd233 100644
--- a/src/App.tsx
+++ b/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>
   );
 }