'use client'; import { useState, useEffect } from 'react'; interface Photo { id: number; title: string; description: string; color: string; } export default function GalleryLightboxDemo() { const [selectedIndex, setSelectedIndex] = useState(null); const photos: Photo[] = [ { id: 1, title: '서울 야경', description: '남산에서 바라본 서울 도심', color: 'bg-indigo-500' }, { id: 2, title: '제주 바다', description: '협재 해변의 푸른 바다', color: 'bg-cyan-500' }, { id: 3, title: '가을 단풍', description: '내장산 단풍 명소', color: 'bg-orange-500' }, { id: 4, title: '벚꽃 거리', description: '진해 벚꽃 축제', color: 'bg-pink-400' }, { id: 5, title: '눈 덮인 산', description: '설악산 대청봉', color: 'bg-slate-400' }, { id: 6, title: '해돋이', description: '정동진 해돋이 명소', color: 'bg-amber-500' }, ]; const openLightbox = (index: number) => setSelectedIndex(index); const closeLightbox = () => setSelectedIndex(null); const goToPrev = () => setSelectedIndex(prev => prev !== null && prev > 0 ? prev - 1 : photos.length - 1); const goToNext = () => setSelectedIndex(prev => prev !== null && prev < photos.length - 1 ? prev + 1 : 0); // Keyboard navigation useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (selectedIndex === null) return; if (e.key === 'Escape') closeLightbox(); if (e.key === 'ArrowLeft') goToPrev(); if (e.key === 'ArrowRight') goToNext(); }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [selectedIndex]); return (

포토 갤러리

이미지를 클릭하면 크게 볼 수 있습니다

{/* Grid */}

{photos.map((photo, index) => (

openLightbox(index)} className={`aspect-square rounded-xl cursor-pointer overflow-hidden group relative ${photo.color}`} >

📷

🔍

{photo.title}

))}

{/* Lightbox Modal */} {selectedIndex !== null && (

{/* Close Button */} {/* Navigation */} {/* Image */}

e.stopPropagation()} >

📷

{photos[selectedIndex].title}

{photos[selectedIndex].description}

{selectedIndex + 1} / {photos.length}

{/* Thumbnails */}

{photos.map((photo, index) => (

)}

); }

Masonry Gallery

Gallery