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 { 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 { BrowserView, MobileView } from 'react-device-detect';
|
||||||
|
|
||||||
// 공통 컴포넌트
|
// 공통 컴포넌트
|
||||||
import { ScrollToTop } from '@/components/common';
|
import { ScrollToTop } from '@/components/common';
|
||||||
|
|
||||||
// PC 레이아웃
|
// 라우트
|
||||||
import { Layout as PCLayout } from '@/components/pc/public';
|
import { PCPublicRoutes, PCAdminRoutes, MobileRoutes } from '@/routes';
|
||||||
|
|
||||||
// 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';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* PC 환경에서 body에 클래스 추가하는 래퍼
|
* PC 환경에서 body에 클래스 추가하는 래퍼
|
||||||
|
|
@ -75,116 +31,14 @@ function App() {
|
||||||
{/* PC 뷰 */}
|
{/* PC 뷰 */}
|
||||||
<BrowserView>
|
<BrowserView>
|
||||||
<PCWrapper>
|
<PCWrapper>
|
||||||
<Routes>
|
<PCAdminRoutes />
|
||||||
{/* 관리자 페이지 (자체 레이아웃 사용) */}
|
<PCPublicRoutes />
|
||||||
<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>
|
|
||||||
</PCWrapper>
|
</PCWrapper>
|
||||||
</BrowserView>
|
</BrowserView>
|
||||||
|
|
||||||
{/* Mobile 뷰 */}
|
{/* Mobile 뷰 */}
|
||||||
<MobileView>
|
<MobileView>
|
||||||
<Routes>
|
<MobileRoutes />
|
||||||
<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>
|
|
||||||
</MobileView>
|
</MobileView>
|
||||||
</BrowserRouter>
|
</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