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 ; } +// 로딩 스피너 +function LoadingSpinner() { + return ( +
+
+
+ ); +} + export default function App() { const { pathname } = useLocation(); return ( - <> + }> {pathname !== '/login' && pathname !== '/signup' && } {/* 공통 페이지 */} } /> } /> - } /> - } /> - } /> + } /> + } /> + } /> {/* 사장님 페이지 */} - - - } /> - } /> - - - } /> - } /> - } /> - - - - {/* 알바님 프로필 페이지 */} - - } /> - } /> - + } /> + } /> + } /> + } /> + } + /> + + {/* 알바님 프로필 */} + } /> + } /> + + {/* 404 Not Found */} + } /> - + ); } 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 ( +
+

404

+

페이지를 찾을 수 없습니다.

+ + 홈으로 돌아가기 + +
+ ); +}