diff --git a/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx b/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx index bb0a593..fd16e67 100644 --- a/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx +++ b/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx @@ -574,6 +574,12 @@ function MobileEventSection({ schedule }) { ? `https://map.kakao.com/link/map/${encodeURIComponent(venue.name)},${venue.lat},${venue.lng}` : null; const [mapOpen, setMapOpen] = useState(false); + const [lightbox, setLightbox] = useState({ open: false, index: 0 }); + const lightboxImages = posters.map((p) => p.originalUrl || p.mediumUrl); + const openLightbox = (index) => { + setLightbox({ open: true, index }); + window.history.pushState({ lightbox: true }, ''); + }; const linkLabel = (url) => { try { return new URL(url).hostname.replace(/^www\./, ''); } catch { return url; } }; @@ -603,11 +609,11 @@ function MobileEventSection({ schedule }) {
{/* 포스터 (크게, 분리) — 패럴랙스/페이드 */} {posters.length > 0 && ( - openLightbox(0)} className="block w-full rounded-2xl overflow-hidden shadow-lg origin-top" style={{ willChange: 'transform, opacity' }}> {schedule.title} - + )} {/* 정보 카드 (그라데이션) */} @@ -682,11 +688,11 @@ function MobileEventSection({ schedule }) { {/* 추가 포스터 */} {posters.length > 1 && (
- {posters.slice(1).map((p) => ( - ( + ))}
)} @@ -723,6 +729,17 @@ function MobileEventSection({ schedule }) { , document.body )} + + {/* Lightbox */} + setLightbox((prev) => ({ ...prev, open: false }))} + onIndexChange={(index) => setLightbox((prev) => ({ ...prev, index }))} + showCounter={posters.length > 1} + showDownload + />
); }