fromis_9/frontend/src/App.jsx
caadiq 4a4a163abe feat: YouTube 일정 수정 폼 구현
- YouTube 일정 수정 API (PUT /api/admin/youtube/schedule/:id)
- 멤버 선택, 영상 유형(video/shorts) 수정 기능
- 일정 API에 멤버 배열 추가 (5명 이상 시 "프로미스나인")
- 관리 페이지 React Query 캐싱 적용
- Shorts/Video 별 UI 레이아웃 분리
- React Query 사용 가이드 문서화

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-20 14:06:02 +09:00

123 lines
6.7 KiB
JavaScript

import { useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { BrowserView, MobileView } from 'react-device-detect';
// 공통 컴포넌트
import ScrollToTop from './components/ScrollToTop';
// PC 페이지
import PCHome from './pages/pc/public/Home';
import PCMembers from './pages/pc/public/Members';
import PCAlbum from './pages/pc/public/Album';
import PCAlbumDetail from './pages/pc/public/AlbumDetail';
import PCAlbumGallery from './pages/pc/public/AlbumGallery';
import PCTrackDetail from './pages/pc/public/TrackDetail';
import PCSchedule from './pages/pc/public/Schedule';
import PCScheduleDetail from './pages/pc/public/ScheduleDetail';
import PCBirthday from './pages/pc/public/Birthday';
import PCNotFound from './pages/pc/public/NotFound';
// 모바일 페이지
import MobileHome from './pages/mobile/public/Home';
import MobileMembers from './pages/mobile/public/Members';
import MobileAlbum from './pages/mobile/public/Album';
import MobileAlbumDetail from './pages/mobile/public/AlbumDetail';
import MobileAlbumGallery from './pages/mobile/public/AlbumGallery';
import MobileTrackDetail from './pages/mobile/public/TrackDetail';
import MobileSchedule from './pages/mobile/public/Schedule';
import MobileScheduleDetail from './pages/mobile/public/ScheduleDetail';
import MobileNotFound from './pages/mobile/public/NotFound';
// 관리자 페이지
import AdminLogin from './pages/pc/admin/AdminLogin';
import AdminDashboard from './pages/pc/admin/AdminDashboard';
import AdminMembers from './pages/pc/admin/AdminMembers';
import AdminMemberEdit from './pages/pc/admin/AdminMemberEdit';
import AdminAlbums from './pages/pc/admin/AdminAlbums';
import AdminAlbumForm from './pages/pc/admin/AdminAlbumForm';
import AdminAlbumPhotos from './pages/pc/admin/AdminAlbumPhotos';
import AdminSchedule from './pages/pc/admin/AdminSchedule';
import AdminScheduleForm from './pages/pc/admin/AdminScheduleForm';
import ScheduleFormPage from './pages/pc/admin/schedule/form';
import AdminScheduleCategory from './pages/pc/admin/AdminScheduleCategory';
import AdminScheduleBots from './pages/pc/admin/AdminScheduleBots';
import AdminScheduleDict from './pages/pc/admin/AdminScheduleDict';
import YouTubeEditForm from './pages/pc/admin/schedule/edit/YouTubeEditForm';
// 레이아웃
import PCLayout from './components/pc/Layout';
import MobileLayout from './components/mobile/Layout';
// PC 환경에서 body에 클래스 추가하는 래퍼
function PCWrapper({ children }) {
useEffect(() => {
document.body.classList.add('is-pc');
return () => document.body.classList.remove('is-pc');
}, []);
return children;
}
function App() {
return (
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
<ScrollToTop />
<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={<AdminSchedule />} />
<Route path="/admin/schedule/new" element={<ScheduleFormPage />} />
<Route path="/admin/schedule/new-legacy" element={<AdminScheduleForm />} />
<Route path="/admin/schedule/:id/edit" element={<AdminScheduleForm />} />
<Route path="/admin/schedule/:id/edit/youtube" element={<YouTubeEditForm />} />
<Route path="/admin/schedule/categories" element={<AdminScheduleCategory />} />
<Route path="/admin/schedule/bots" element={<AdminScheduleBots />} />
<Route path="/admin/schedule/dict" element={<AdminScheduleDict />} />
{/* 일반 페이지 (레이아웃 포함) */}
<Route path="/*" element={
<PCLayout>
<Routes>
<Route path="/" element={<PCHome />} />
<Route path="/members" element={<PCMembers />} />
<Route path="/album" element={<PCAlbum />} />
<Route path="/album/:name" element={<PCAlbumDetail />} />
<Route path="/album/:name/gallery" element={<PCAlbumGallery />} />
<Route path="/album/:name/track/:trackTitle" element={<PCTrackDetail />} />
<Route path="/schedule" element={<PCSchedule />} />
<Route path="/schedule/:id" element={<PCScheduleDetail />} />
<Route path="/birthday/:memberName/:year" element={<PCBirthday />} />
<Route path="*" element={<PCNotFound />} />
</Routes>
</PCLayout>
} />
</Routes>
</PCWrapper>
</BrowserView>
<MobileView>
<Routes>
<Route path="/" element={<MobileLayout><MobileHome /></MobileLayout>} />
<Route path="/members" element={<MobileLayout pageTitle="멤버" noShadow><MobileMembers /></MobileLayout>} />
<Route path="/album" element={<MobileLayout pageTitle="앨범"><MobileAlbum /></MobileLayout>} />
<Route path="/album/:name" element={<MobileLayout pageTitle="앨범"><MobileAlbumDetail /></MobileLayout>} />
<Route path="/album/:name/gallery" element={<MobileLayout pageTitle="앨범"><MobileAlbumGallery /></MobileLayout>} />
<Route path="/album/:name/track/:trackTitle" element={<MobileLayout pageTitle="앨범"><MobileTrackDetail /></MobileLayout>} />
<Route path="/schedule" element={<MobileLayout useCustomLayout><MobileSchedule /></MobileLayout>} />
<Route path="/schedule/:id" element={<MobileScheduleDetail />} />
<Route path="*" element={<MobileNotFound />} />
</Routes>
</MobileView>
</BrowserRouter>
);
}
export default App;