caadiq
a5eba6535f
- 사이트 전체 min-width 1200px → 1440px로 변경 - 헤더/갤러리 양쪽 여백 통일 (px-24) - 갤러리 CSS 정리 (호버 효과만 유지)
409 lines
16 KiB
JavaScript
409 lines
16 KiB
JavaScript
import { useState, useEffect, useCallback, memo } 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 transition 사용으로 JS 블로킹에 영향받지 않음
|
|
const LightboxIndicator = memo(function LightboxIndicator({ count, currentIndex, setLightbox }) {
|
|
const translateX = -(currentIndex * 18) + 100 - 6;
|
|
|
|
return (
|
|
<div className="absolute bottom-6 left-1/2 -translate-x-1/2 overflow-hidden" style={{ width: '200px' }}>
|
|
{/* 양옆 페이드 그라데이션 */}
|
|
<div className="absolute inset-0 pointer-events-none z-10" style={{
|
|
background: 'linear-gradient(to right, rgba(0,0,0,1) 0%, transparent 20%, transparent 80%, rgba(0,0,0,1) 100%)'
|
|
}} />
|
|
{/* 슬라이딩 컨테이너 - CSS transition으로 GPU 가속 */}
|
|
<div
|
|
className="flex items-center gap-2 justify-center"
|
|
style={{
|
|
width: `${count * 18}px`,
|
|
transform: `translateX(${translateX}px)`,
|
|
transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
|
|
}}
|
|
>
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<button
|
|
key={i}
|
|
className={`rounded-full flex-shrink-0 transition-all duration-300 ${
|
|
i === currentIndex
|
|
? 'w-3 h-3 bg-white'
|
|
: 'w-2.5 h-2.5 bg-white/40 hover:bg-white/60'
|
|
}`}
|
|
onClick={() => setLightbox(prev => ({ ...prev, index: i }))}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
// CSS로 호버 효과 추가 + overflow 문제 수정 + 로드 애니메이션
|
|
const galleryStyles = `
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
.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);
|
|
const [preloadedImages] = useState(() => new Set()); // 프리로드된 이미지 URL 추적
|
|
|
|
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]);
|
|
|
|
// 프리로딩 (이전/다음 2개씩) - 백그라운드에서 프리로드만
|
|
useEffect(() => {
|
|
if (!lightbox.open || photos.length <= 1) return;
|
|
|
|
// 양옆 이미지 프리로드
|
|
const indicesToPreload = [];
|
|
for (let offset = -2; offset <= 2; offset++) {
|
|
if (offset === 0) continue;
|
|
const idx = (lightbox.index + offset + photos.length) % photos.length;
|
|
indicesToPreload.push(idx);
|
|
}
|
|
|
|
indicesToPreload.forEach(idx => {
|
|
const url = photos[idx].originalUrl;
|
|
if (preloadedImages.has(url)) return;
|
|
|
|
const img = new Image();
|
|
img.onload = () => preloadedImages.add(url);
|
|
img.src = url;
|
|
});
|
|
}, [lightbox.open, lightbox.index, photos, preloadedImages]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="py-16 flex justify-center items-center min-h-[60vh]"
|
|
>
|
|
<div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="py-16"
|
|
>
|
|
<div className="px-24">
|
|
{/* 브레드크럼 스타일 헤더 */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
|
|
<button
|
|
onClick={() => navigate('/album')}
|
|
className="hover:text-primary transition-colors"
|
|
>
|
|
앨범
|
|
</button>
|
|
<span>/</span>
|
|
<button
|
|
onClick={() => navigate(`/album/${name}`)}
|
|
className="hover:text-primary transition-colors"
|
|
>
|
|
{album?.title}
|
|
</button>
|
|
<span>/</span>
|
|
<span className="text-gray-700">컨셉 포토</span>
|
|
</div>
|
|
<h1 className="text-3xl font-bold">컨셉 포토</h1>
|
|
<p className="text-gray-500 mt-1">{photos.length}장의 사진</p>
|
|
</div>
|
|
|
|
{/* CSS 스타일 주입 */}
|
|
<style>{galleryStyles}</style>
|
|
|
|
{/* Justified 갤러리 - 동적 비율 + 호버 */}
|
|
<RowsPhotoAlbum
|
|
photos={photos.map((photo, idx) => ({
|
|
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' }
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* 라이트박스 */}
|
|
<AnimatePresence>
|
|
{lightbox.open && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="fixed inset-0 bg-black/95 z-50 overflow-scroll lightbox-no-scrollbar"
|
|
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
|
|
>
|
|
{/* 내부 컨테이너 - min-width, min-height 적용 (화면 줄여도 크기 유지, 스크롤) */}
|
|
<div className="min-w-[1400px] min-h-[1200px] w-full h-full relative flex items-center justify-center">
|
|
{/* 상단 버튼들 */}
|
|
<div className="absolute top-6 right-6 flex gap-3 z-10">
|
|
<button
|
|
className="text-white/70 hover:text-white transition-colors"
|
|
onClick={downloadImage}
|
|
>
|
|
<Download size={28} />
|
|
</button>
|
|
<button
|
|
className="text-white/70 hover:text-white transition-colors"
|
|
onClick={closeLightbox}
|
|
>
|
|
<X size={32} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* 카운터 */}
|
|
<div className="absolute top-6 left-6 text-white/70 text-sm z-10">
|
|
{lightbox.index + 1} / {photos.length}
|
|
</div>
|
|
|
|
{/* 이전 버튼 - margin으로 이미지와 간격 */}
|
|
{photos.length > 1 && (
|
|
<button
|
|
className="absolute left-6 p-2 text-white/70 hover:text-white transition-colors z-10"
|
|
onClick={goToPrev}
|
|
>
|
|
<ChevronLeft size={48} />
|
|
</button>
|
|
)}
|
|
|
|
{/* 로딩 스피너 */}
|
|
{!imageLoaded && (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent"></div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 이미지 + 컨셉 정보 */}
|
|
<div className="flex flex-col items-center mx-24">
|
|
<motion.img
|
|
key={lightbox.index}
|
|
src={photos[lightbox.index]?.originalUrl}
|
|
alt="확대 이미지"
|
|
className={`max-w-[1100px] max-h-[900px] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
|
|
onLoad={() => setImageLoaded(true)}
|
|
initial={{ x: slideDirection * 100 }}
|
|
animate={{ x: 0 }}
|
|
transition={{ duration: 0.25, ease: 'easeOut' }}
|
|
/>
|
|
{/* 컨셉 정보 + 멤버 */}
|
|
{imageLoaded && (
|
|
(() => {
|
|
const title = photos[lightbox.index]?.title;
|
|
const hasValidTitle = title && title.trim() && title !== 'Default';
|
|
const members = photos[lightbox.index]?.members;
|
|
const hasMembers = members && String(members).trim();
|
|
|
|
if (!hasValidTitle && !hasMembers) return null;
|
|
|
|
return (
|
|
<div className="mt-6 flex flex-col items-center gap-2">
|
|
{hasValidTitle && (
|
|
<span className="px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white font-medium text-base">
|
|
{title}
|
|
</span>
|
|
)}
|
|
{hasMembers && (
|
|
<div className="flex items-center gap-2">
|
|
{String(members).split(',').map((member, idx) => (
|
|
<span key={idx} className="px-3 py-1.5 bg-primary/80 rounded-full text-white text-sm">
|
|
{member.trim()}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})()
|
|
)}
|
|
</div>
|
|
|
|
{/* 다음 버튼 - margin으로 이미지와 간격 */}
|
|
{photos.length > 1 && (
|
|
<button
|
|
className="absolute right-6 p-2 text-white/70 hover:text-white transition-colors z-10"
|
|
onClick={goToNext}
|
|
>
|
|
<ChevronRight size={48} />
|
|
</button>
|
|
)}
|
|
|
|
{/* 하단 점 인디케이터 - memo 컴포넌트로 분리 */}
|
|
<LightboxIndicator
|
|
count={photos.length}
|
|
currentIndex={lightbox.index}
|
|
setLightbox={setLightbox}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default AlbumGallery;
|