import { useState, useEffect, useCallback } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { motion, AnimatePresence } from 'framer-motion'; import { X, ChevronLeft, ChevronRight, Download } from 'lucide-react'; import { RowsPhotoAlbum } from 'react-photo-album'; import 'react-photo-album/rows.css'; // CSS로 호버 효과 추가 + overflow 문제 수정 const galleryStyles = ` .react-photo-album { overflow: visible !important; } .react-photo-album--row { overflow: visible !important; } .react-photo-album--photo { transition: transform 0.3s ease, filter 0.3s ease !important; cursor: pointer; overflow: visible !important; } .react-photo-album--photo:hover { transform: scale(1.05); filter: brightness(0.9); z-index: 10; } `; function AlbumGallery() { const { name } = useParams(); const navigate = useNavigate(); const [album, setAlbum] = useState(null); const [photos, setPhotos] = useState([]); const [loading, setLoading] = useState(true); const [lightbox, setLightbox] = useState({ open: false, index: 0 }); const [imageLoaded, setImageLoaded] = useState(false); const [slideDirection, setSlideDirection] = useState(0); useEffect(() => { fetch(`/api/albums/by-name/${name}`) .then(res => res.json()) .then(data => { setAlbum(data); const allPhotos = []; if (data.conceptPhotos && typeof data.conceptPhotos === 'object') { Object.entries(data.conceptPhotos).forEach(([concept, photos]) => { photos.forEach(p => allPhotos.push({ // API에서 직접 제공하는 URL 및 크기 정보 사용 mediumUrl: p.medium_url, originalUrl: p.original_url, width: p.width || 800, height: p.height || 1200, title: concept, members: p.members ? p.members.split(', ') : [] })); }); } setPhotos(allPhotos); setLoading(false); }) .catch(error => { console.error('앨범 데이터 로드 오류:', error); setLoading(false); }); }, [name]); // 라이트박스 열기 const openLightbox = (index) => { setImageLoaded(false); setLightbox({ open: true, index }); }; // 라이트박스 닫기 const closeLightbox = useCallback(() => { setLightbox(prev => ({ ...prev, open: false })); }, []); // 라이트박스 열릴 때 body 스크롤 숨기기 useEffect(() => { if (lightbox.open) { document.documentElement.style.overflow = 'hidden'; document.body.style.overflow = 'hidden'; } else { document.documentElement.style.overflow = ''; document.body.style.overflow = ''; } return () => { document.documentElement.style.overflow = ''; document.body.style.overflow = ''; }; }, [lightbox.open]); // 이전/다음 이미지 const goToPrev = useCallback(() => { if (photos.length <= 1) return; setImageLoaded(false); setSlideDirection(-1); setLightbox(prev => ({ ...prev, index: (prev.index - 1 + photos.length) % photos.length })); }, [photos.length]); const goToNext = useCallback(() => { if (photos.length <= 1) return; setImageLoaded(false); setSlideDirection(1); setLightbox(prev => ({ ...prev, index: (prev.index + 1) % photos.length })); }, [photos.length]); // 다운로드 const downloadImage = useCallback(async () => { const photo = photos[lightbox.index]; if (!photo) return; try { const response = await fetch(photo.originalUrl); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `fromis9_${album?.title || 'photo'}_${String(lightbox.index + 1).padStart(2, '0')}.webp`; document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(url); } catch (error) { console.error('다운로드 오류:', error); } }, [photos, lightbox.index, album?.title]); // 키보드 이벤트 useEffect(() => { if (!lightbox.open) return; const handleKeyDown = (e) => { switch (e.key) { case 'ArrowLeft': goToPrev(); break; case 'ArrowRight': goToNext(); break; case 'Escape': closeLightbox(); break; default: break; } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [lightbox.open, goToPrev, goToNext, closeLightbox]); // 프리로딩 useEffect(() => { if (!lightbox.open || photos.length <= 1) return; const prevIdx = (lightbox.index - 1 + photos.length) % photos.length; const nextIdx = (lightbox.index + 1) % photos.length; [prevIdx, nextIdx].forEach(idx => { const img = new Image(); img.src = photos[idx].originalUrl; }); }, [lightbox.open, lightbox.index, photos]); if (loading) { return (
); } return ( <>
{/* 브레드크럼 스타일 헤더 */}
/ / 컨셉 포토

컨셉 포토

{photos.length}장의 사진

{/* CSS 스타일 주입 */} {/* Justified 갤러리 - 동적 비율 + 호버 */} ({ src: photo.mediumUrl, width: photo.width || 800, height: photo.height || 1200, key: idx.toString() }))} targetRowHeight={280} spacing={16} rowConstraints={{ singleRowMaxHeight: 400, minPhotos: 1 }} onClick={({ index }) => openLightbox(index)} componentsProps={{ image: { loading: 'lazy', style: { borderRadius: '12px' } } }} />
{/* 라이트박스 */} {lightbox.open && ( {/* 내부 컨테이너 - min-width, min-height 적용 (화면 줄여도 크기 유지, 스크롤) */}
{/* 상단 버튼들 */}
{/* 카운터 */}
{lightbox.index + 1} / {photos.length}
{/* 이전 버튼 - margin으로 이미지와 간격 */} {photos.length > 1 && ( )} {/* 로딩 스피너 */} {!imageLoaded && (
)} {/* 이미지 + 컨셉 정보 - 양옆 margin으로 화살표와 간격 */}
setImageLoaded(true)} initial={{ x: slideDirection * 100 }} animate={{ x: 0 }} transition={{ duration: 0.25, ease: 'easeOut' }} /> {/* 컨셉 정보 - 정보가 있을 때만 표시 */} {imageLoaded && photos[lightbox.index]?.title && (
{photos[lightbox.index]?.title} {/* 멤버가 있고 빈 문자열이 아닐 때만 표시, 쉼표로 분리해서 개별 태그 */} {photos[lightbox.index]?.members && String(photos[lightbox.index]?.members).trim() && (
{String(photos[lightbox.index]?.members).split(',').map((member, idx) => ( {member.trim()} ))}
)}
)}
{/* 다음 버튼 - margin으로 이미지와 간격 */} {photos.length > 1 && ( )} {/* 하단 점 인디케이터 - 한 줄 고정, 스크롤바 숨김 */}
{photos.map((_, i) => (
)}
); } export default AlbumGallery;