fix(event): 모바일 축제 포스터 클릭 시 라이트박스로 열기
새 창(target=_blank) → MobileLightbox로 변경 (메인/추가 포스터 모두). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
1a50f93d65
commit
381461c25e
1 changed files with 22 additions and 5 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue