refactor: App.jsx 라우트 분리
라우트를 플랫폼/영역별로 분리하여 관리 용이성 향상 - routes/pc/public/index.jsx: PC 공개 라우트 - routes/pc/admin/index.jsx: PC 관리자 라우트 - routes/mobile/index.jsx: Mobile 라우트 - App.jsx: 194줄 → 47줄로 간소화 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
607457790d
commit
a151694630
5 changed files with 184 additions and 152 deletions
|
|
@ -1,56 +1,12 @@
|
|||
import { useEffect } from 'react';
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import { BrowserView, MobileView } from 'react-device-detect';
|
||||
|
||||
// 공통 컴포넌트
|
||||
import { ScrollToTop } from '@/components/common';
|
||||
|
||||
// PC 레이아웃
|
||||
import { Layout as PCLayout } from '@/components/pc/public';
|
||||
|
||||
// Mobile 레이아웃
|
||||
import { Layout as MobileLayout } from '@/components/mobile';
|
||||
|
||||
// PC 공개 페이지
|
||||
import PCHome from '@/pages/pc/public/home/Home';
|
||||
import PCMembers from '@/pages/pc/public/members/Members';
|
||||
import PCSchedule from '@/pages/pc/public/schedule/Schedule';
|
||||
import PCScheduleDetail from '@/pages/pc/public/schedule/ScheduleDetail';
|
||||
import PCBirthday from '@/pages/pc/public/schedule/Birthday';
|
||||
import PCAlbum from '@/pages/pc/public/album/Album';
|
||||
import PCAlbumDetail from '@/pages/pc/public/album/AlbumDetail';
|
||||
import PCTrackDetail from '@/pages/pc/public/album/TrackDetail';
|
||||
import PCAlbumGallery from '@/pages/pc/public/album/AlbumGallery';
|
||||
import PCNotFound from '@/pages/pc/public/common/NotFound';
|
||||
|
||||
// PC 관리자 페이지
|
||||
import AdminLogin from '@/pages/pc/admin/login/Login';
|
||||
import AdminDashboard from '@/pages/pc/admin/dashboard/Dashboard';
|
||||
import AdminMembers from '@/pages/pc/admin/members/Members';
|
||||
import AdminMemberEdit from '@/pages/pc/admin/members/MemberEdit';
|
||||
import AdminAlbums from '@/pages/pc/admin/albums/Albums';
|
||||
import AdminAlbumForm from '@/pages/pc/admin/albums/AlbumForm';
|
||||
import AdminAlbumPhotos from '@/pages/pc/admin/albums/AlbumPhotos';
|
||||
import AdminSchedules from '@/pages/pc/admin/schedules/Schedules';
|
||||
import AdminScheduleForm from '@/pages/pc/admin/schedules/ScheduleForm';
|
||||
import AdminScheduleFormPage from '@/pages/pc/admin/schedules/form';
|
||||
import AdminYouTubeEditForm from '@/pages/pc/admin/schedules/edit/YouTubeEditForm';
|
||||
import AdminScheduleCategory from '@/pages/pc/admin/schedules/ScheduleCategory';
|
||||
import AdminScheduleDict from '@/pages/pc/admin/schedules/ScheduleDict';
|
||||
import AdminScheduleBots from '@/pages/pc/admin/schedules/ScheduleBots';
|
||||
import AdminNotFound from '@/pages/pc/admin/common/NotFound';
|
||||
|
||||
// Mobile 페이지
|
||||
import MobileHome from '@/pages/mobile/home/Home';
|
||||
import MobileMembers from '@/pages/mobile/members/Members';
|
||||
import MobileSchedule from '@/pages/mobile/schedule/Schedule';
|
||||
import MobileScheduleDetail from '@/pages/mobile/schedule/ScheduleDetail';
|
||||
import MobileBirthday from '@/pages/mobile/schedule/Birthday';
|
||||
import MobileAlbum from '@/pages/mobile/album/Album';
|
||||
import MobileAlbumDetail from '@/pages/mobile/album/AlbumDetail';
|
||||
import MobileTrackDetail from '@/pages/mobile/album/TrackDetail';
|
||||
import MobileAlbumGallery from '@/pages/mobile/album/AlbumGallery';
|
||||
import MobileNotFound from '@/pages/mobile/common/NotFound';
|
||||
// 라우트
|
||||
import { PCPublicRoutes, PCAdminRoutes, MobileRoutes } from '@/routes';
|
||||
|
||||
/**
|
||||
* PC 환경에서 body에 클래스 추가하는 래퍼
|
||||
|
|
@ -75,116 +31,14 @@ function App() {
|
|||
{/* PC 뷰 */}
|
||||
<BrowserView>
|
||||
<PCWrapper>
|
||||
<Routes>
|
||||
{/* 관리자 페이지 (자체 레이아웃 사용) */}
|
||||
<Route path="/admin" element={<AdminLogin />} />
|
||||
<Route path="/admin/dashboard" element={<AdminDashboard />} />
|
||||
<Route path="/admin/members" element={<AdminMembers />} />
|
||||
<Route path="/admin/members/:name/edit" element={<AdminMemberEdit />} />
|
||||
<Route path="/admin/albums" element={<AdminAlbums />} />
|
||||
<Route path="/admin/albums/new" element={<AdminAlbumForm />} />
|
||||
<Route path="/admin/albums/:id/edit" element={<AdminAlbumForm />} />
|
||||
<Route path="/admin/albums/:albumId/photos" element={<AdminAlbumPhotos />} />
|
||||
<Route path="/admin/schedule" element={<AdminSchedules />} />
|
||||
<Route path="/admin/schedule/new" element={<AdminScheduleFormPage />} />
|
||||
<Route path="/admin/schedule/new-legacy" element={<AdminScheduleForm />} />
|
||||
<Route path="/admin/schedule/:id/edit" element={<AdminScheduleForm />} />
|
||||
<Route path="/admin/schedule/:id/edit/youtube" element={<AdminYouTubeEditForm />} />
|
||||
<Route path="/admin/schedule/categories" element={<AdminScheduleCategory />} />
|
||||
<Route path="/admin/schedule/dict" element={<AdminScheduleDict />} />
|
||||
<Route path="/admin/schedule/bots" element={<AdminScheduleBots />} />
|
||||
{/* 관리자 404 페이지 */}
|
||||
<Route path="/admin/*" element={<AdminNotFound />} />
|
||||
|
||||
{/* 일반 페이지 (레이아웃 포함) */}
|
||||
<Route
|
||||
path="/*"
|
||||
element={
|
||||
<PCLayout>
|
||||
<Routes>
|
||||
<Route path="/" element={<PCHome />} />
|
||||
<Route path="/members" element={<PCMembers />} />
|
||||
<Route path="/schedule" element={<PCSchedule />} />
|
||||
<Route path="/schedule/:id" element={<PCScheduleDetail />} />
|
||||
<Route path="/birthday/:memberName/:year" element={<PCBirthday />} />
|
||||
<Route path="/album" element={<PCAlbum />} />
|
||||
<Route path="/album/:name" element={<PCAlbumDetail />} />
|
||||
<Route path="/album/:name/track/:trackTitle" element={<PCTrackDetail />} />
|
||||
<Route path="/album/:name/gallery" element={<PCAlbumGallery />} />
|
||||
{/* 404 페이지 */}
|
||||
<Route path="*" element={<PCNotFound />} />
|
||||
</Routes>
|
||||
</PCLayout>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
<PCAdminRoutes />
|
||||
<PCPublicRoutes />
|
||||
</PCWrapper>
|
||||
</BrowserView>
|
||||
|
||||
{/* Mobile 뷰 */}
|
||||
<MobileView>
|
||||
<Routes>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<MobileLayout>
|
||||
<MobileHome />
|
||||
</MobileLayout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/members"
|
||||
element={
|
||||
<MobileLayout pageTitle="멤버" noShadow>
|
||||
<MobileMembers />
|
||||
</MobileLayout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/schedule"
|
||||
element={
|
||||
<MobileLayout pageTitle="일정" useCustomLayout>
|
||||
<MobileSchedule />
|
||||
</MobileLayout>
|
||||
}
|
||||
/>
|
||||
<Route path="/schedule/:id" element={<MobileScheduleDetail />} />
|
||||
<Route path="/birthday/:memberName/:year" element={<MobileBirthday />} />
|
||||
<Route
|
||||
path="/album"
|
||||
element={
|
||||
<MobileLayout pageTitle="앨범">
|
||||
<MobileAlbum />
|
||||
</MobileLayout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/album/:name"
|
||||
element={
|
||||
<MobileLayout pageTitle="앨범">
|
||||
<MobileAlbumDetail />
|
||||
</MobileLayout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/album/:name/track/:trackTitle"
|
||||
element={
|
||||
<MobileLayout pageTitle="곡 상세">
|
||||
<MobileTrackDetail />
|
||||
</MobileLayout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/album/:name/gallery"
|
||||
element={
|
||||
<MobileLayout pageTitle="앨범">
|
||||
<MobileAlbumGallery />
|
||||
</MobileLayout>
|
||||
}
|
||||
/>
|
||||
{/* 404 페이지 */}
|
||||
<Route path="*" element={<MobileNotFound />} />
|
||||
</Routes>
|
||||
<MobileRoutes />
|
||||
</MobileView>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
|
|
|||
3
frontend/src/routes/index.js
Normal file
3
frontend/src/routes/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export { default as PCPublicRoutes } from './pc/public';
|
||||
export { default as PCAdminRoutes } from './pc/admin';
|
||||
export { default as MobileRoutes } from './mobile';
|
||||
85
frontend/src/routes/mobile/index.jsx
Normal file
85
frontend/src/routes/mobile/index.jsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import { Routes, Route } from 'react-router-dom';
|
||||
|
||||
// 레이아웃
|
||||
import { Layout } from '@/components/mobile';
|
||||
|
||||
// 페이지
|
||||
import Home from '@/pages/mobile/home/Home';
|
||||
import Members from '@/pages/mobile/members/Members';
|
||||
import Schedule from '@/pages/mobile/schedule/Schedule';
|
||||
import ScheduleDetail from '@/pages/mobile/schedule/ScheduleDetail';
|
||||
import Birthday from '@/pages/mobile/schedule/Birthday';
|
||||
import Album from '@/pages/mobile/album/Album';
|
||||
import AlbumDetail from '@/pages/mobile/album/AlbumDetail';
|
||||
import TrackDetail from '@/pages/mobile/album/TrackDetail';
|
||||
import AlbumGallery from '@/pages/mobile/album/AlbumGallery';
|
||||
import NotFound from '@/pages/mobile/common/NotFound';
|
||||
|
||||
/**
|
||||
* Mobile 라우트
|
||||
*/
|
||||
export default function MobileRoutes() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<Layout>
|
||||
<Home />
|
||||
</Layout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/members"
|
||||
element={
|
||||
<Layout pageTitle="멤버" noShadow>
|
||||
<Members />
|
||||
</Layout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/schedule"
|
||||
element={
|
||||
<Layout pageTitle="일정" useCustomLayout>
|
||||
<Schedule />
|
||||
</Layout>
|
||||
}
|
||||
/>
|
||||
<Route path="/schedule/:id" element={<ScheduleDetail />} />
|
||||
<Route path="/birthday/:memberName/:year" element={<Birthday />} />
|
||||
<Route
|
||||
path="/album"
|
||||
element={
|
||||
<Layout pageTitle="앨범">
|
||||
<Album />
|
||||
</Layout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/album/:name"
|
||||
element={
|
||||
<Layout pageTitle="앨범">
|
||||
<AlbumDetail />
|
||||
</Layout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/album/:name/track/:trackTitle"
|
||||
element={
|
||||
<Layout pageTitle="곡 상세">
|
||||
<TrackDetail />
|
||||
</Layout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/album/:name/gallery"
|
||||
element={
|
||||
<Layout pageTitle="앨범">
|
||||
<AlbumGallery />
|
||||
</Layout>
|
||||
}
|
||||
/>
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
45
frontend/src/routes/pc/admin/index.jsx
Normal file
45
frontend/src/routes/pc/admin/index.jsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import { Routes, Route } from 'react-router-dom';
|
||||
|
||||
// 관리자 페이지
|
||||
import AdminLogin from '@/pages/pc/admin/login/Login';
|
||||
import AdminDashboard from '@/pages/pc/admin/dashboard/Dashboard';
|
||||
import AdminMembers from '@/pages/pc/admin/members/Members';
|
||||
import AdminMemberEdit from '@/pages/pc/admin/members/MemberEdit';
|
||||
import AdminAlbums from '@/pages/pc/admin/albums/Albums';
|
||||
import AdminAlbumForm from '@/pages/pc/admin/albums/AlbumForm';
|
||||
import AdminAlbumPhotos from '@/pages/pc/admin/albums/AlbumPhotos';
|
||||
import AdminSchedules from '@/pages/pc/admin/schedules/Schedules';
|
||||
import AdminScheduleForm from '@/pages/pc/admin/schedules/ScheduleForm';
|
||||
import AdminScheduleFormPage from '@/pages/pc/admin/schedules/form';
|
||||
import AdminYouTubeEditForm from '@/pages/pc/admin/schedules/edit/YouTubeEditForm';
|
||||
import AdminScheduleCategory from '@/pages/pc/admin/schedules/ScheduleCategory';
|
||||
import AdminScheduleDict from '@/pages/pc/admin/schedules/ScheduleDict';
|
||||
import AdminScheduleBots from '@/pages/pc/admin/schedules/ScheduleBots';
|
||||
import AdminNotFound from '@/pages/pc/admin/common/NotFound';
|
||||
|
||||
/**
|
||||
* PC 관리자 라우트
|
||||
*/
|
||||
export default function AdminRoutes() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/admin" element={<AdminLogin />} />
|
||||
<Route path="/admin/dashboard" element={<AdminDashboard />} />
|
||||
<Route path="/admin/members" element={<AdminMembers />} />
|
||||
<Route path="/admin/members/:name/edit" element={<AdminMemberEdit />} />
|
||||
<Route path="/admin/albums" element={<AdminAlbums />} />
|
||||
<Route path="/admin/albums/new" element={<AdminAlbumForm />} />
|
||||
<Route path="/admin/albums/:id/edit" element={<AdminAlbumForm />} />
|
||||
<Route path="/admin/albums/:albumId/photos" element={<AdminAlbumPhotos />} />
|
||||
<Route path="/admin/schedule" element={<AdminSchedules />} />
|
||||
<Route path="/admin/schedule/new" element={<AdminScheduleFormPage />} />
|
||||
<Route path="/admin/schedule/new-legacy" element={<AdminScheduleForm />} />
|
||||
<Route path="/admin/schedule/:id/edit" element={<AdminScheduleForm />} />
|
||||
<Route path="/admin/schedule/:id/edit/youtube" element={<AdminYouTubeEditForm />} />
|
||||
<Route path="/admin/schedule/categories" element={<AdminScheduleCategory />} />
|
||||
<Route path="/admin/schedule/dict" element={<AdminScheduleDict />} />
|
||||
<Route path="/admin/schedule/bots" element={<AdminScheduleBots />} />
|
||||
<Route path="/admin/*" element={<AdminNotFound />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
45
frontend/src/routes/pc/public/index.jsx
Normal file
45
frontend/src/routes/pc/public/index.jsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import { Routes, Route } from 'react-router-dom';
|
||||
|
||||
// 레이아웃
|
||||
import { Layout } from '@/components/pc/public';
|
||||
|
||||
// 공개 페이지
|
||||
import Home from '@/pages/pc/public/home/Home';
|
||||
import Members from '@/pages/pc/public/members/Members';
|
||||
import Schedule from '@/pages/pc/public/schedule/Schedule';
|
||||
import ScheduleDetail from '@/pages/pc/public/schedule/ScheduleDetail';
|
||||
import Birthday from '@/pages/pc/public/schedule/Birthday';
|
||||
import Album from '@/pages/pc/public/album/Album';
|
||||
import AlbumDetail from '@/pages/pc/public/album/AlbumDetail';
|
||||
import TrackDetail from '@/pages/pc/public/album/TrackDetail';
|
||||
import AlbumGallery from '@/pages/pc/public/album/AlbumGallery';
|
||||
import NotFound from '@/pages/pc/public/common/NotFound';
|
||||
|
||||
/**
|
||||
* PC 공개 라우트
|
||||
*/
|
||||
export default function PublicRoutes() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route
|
||||
path="/*"
|
||||
element={
|
||||
<Layout>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/members" element={<Members />} />
|
||||
<Route path="/schedule" element={<Schedule />} />
|
||||
<Route path="/schedule/:id" element={<ScheduleDetail />} />
|
||||
<Route path="/birthday/:memberName/:year" element={<Birthday />} />
|
||||
<Route path="/album" element={<Album />} />
|
||||
<Route path="/album/:name" element={<AlbumDetail />} />
|
||||
<Route path="/album/:name/track/:trackTitle" element={<TrackDetail />} />
|
||||
<Route path="/album/:name/gallery" element={<AlbumGallery />} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</Layout>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue