diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 42b5787..e9a177a 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -25,6 +25,7 @@ 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'; // 관리자 페이지 @@ -104,6 +105,7 @@ function App() { } /> } /> } /> + } /> } /> diff --git a/frontend/src/pages/mobile/public/ScheduleDetail.jsx b/frontend/src/pages/mobile/public/ScheduleDetail.jsx new file mode 100644 index 0000000..eeb4287 --- /dev/null +++ b/frontend/src/pages/mobile/public/ScheduleDetail.jsx @@ -0,0 +1,119 @@ +import { useParams, Link } from 'react-router-dom'; +import { useQuery } from '@tanstack/react-query'; +import { motion } from 'framer-motion'; +import { Calendar, ChevronLeft } from 'lucide-react'; +import { getSchedule } from '../../../api/public/schedules'; + +function MobileScheduleDetail() { + const { id } = useParams(); + + const { data: schedule, isLoading, error } = useQuery({ + queryKey: ['schedule', id], + queryFn: () => getSchedule(id), + retry: false, + }); + + if (isLoading) { + return ( +
+
+
+ ); + } + + if (error || !schedule) { + return ( +
+
+ {/* 아이콘 */} + +
+ +
+
+ + {/* 메시지 */} + +

+ 일정을 찾을 수 없습니다 +

+

+ 요청하신 일정이 존재하지 않거나 +
+ 삭제되었을 수 있습니다. +

+
+ + {/* 장식 요소 */} + + {[...Array(5)].map((_, i) => ( + + ))} + + + {/* 버튼들 */} + + + + + 일정 목록 + + +
+
+ ); + } + + // TODO: 일정 상세 페이지 구현 + return ( +
+
+ 일정 상세 페이지 준비 중 +
+
+ ); +} + +export default MobileScheduleDetail;