fix(event): 모바일 축제 포스터 클릭 시 라이트박스로 열기

새 창(target=_blank) → MobileLightbox로 변경 (메인/추가 포스터 모두).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-06-01 13:48:57 +09:00
parent 1a50f93d65
commit 381461c25e

View file

@ -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 }) {
<div className="space-y-3">
{/* 포스터 (크게, 분리) — 패럴랙스/페이드 */}
{posters.length > 0 && (
<a ref={posterRef} href={posters[0].originalUrl || posters[0].mediumUrl} target="_blank" rel="noopener noreferrer"
<button ref={posterRef} type="button" onClick={() => openLightbox(0)}
className="block w-full rounded-2xl overflow-hidden shadow-lg origin-top"
style={{ willChange: 'transform, opacity' }}>
<img src={posters[0].mediumUrl || posters[0].originalUrl} alt={schedule.title} className="w-full h-auto object-cover" />
</a>
</button>
)}
{/* 정보 카드 (그라데이션) */}
@ -682,11 +688,11 @@ function MobileEventSection({ schedule }) {
{/* 추가 포스터 */}
{posters.length > 1 && (
<div className="grid grid-cols-4 gap-1.5">
{posters.slice(1).map((p) => (
<a key={p.id} href={p.originalUrl} target="_blank" rel="noopener noreferrer"
{posters.slice(1).map((p, idx) => (
<button key={p.id} type="button" onClick={() => openLightbox(idx + 1)}
className="block aspect-square rounded-md overflow-hidden border border-gray-100">
<img src={p.thumbUrl || p.mediumUrl} alt="" className="w-full h-full object-cover" />
</a>
</button>
))}
</div>
)}
@ -723,6 +729,17 @@ function MobileEventSection({ schedule }) {
</AnimatePresence>,
document.body
)}
{/* Lightbox */}
<MobileLightbox
images={lightboxImages}
currentIndex={lightbox.index}
isOpen={lightbox.open}
onClose={() => setLightbox((prev) => ({ ...prev, open: false }))}
onIndexChange={(index) => setLightbox((prev) => ({ ...prev, index }))}
showCounter={posters.length > 1}
showDownload
/>
</div>
);
}