+
+ /
+ {album?.title}
+
{/* 앨범 정보 헤더 */}
@@ -148,11 +248,11 @@ function AlbumDetail() {
{album.teasers.map((teaser, index) => (
-
@@ -272,61 +386,75 @@ function AlbumDetail() {
transition={{ duration: 0.2 }}
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center"
>
- {/* 닫기 버튼 */}
-
+ {/* 상단 버튼들 */}
+ e.stopPropagation()}
- initial={{ opacity: 0, x: slideDirection * 100 }}
- animate={{ opacity: 1, x: 0 }}
+ onLoad={() => setImageLoaded(true)}
+ initial={{ x: slideDirection * 100 }}
+ animate={{ x: 0 }}
transition={{ duration: 0.25, ease: 'easeOut' }}
/>
{/* 다음 버튼 */}
{lightbox.images.length > 1 && (
)}
- {/* 인디케이터 */}
+ {/* 인디케이터 - 이미지 2개 이상일 때만 표시 */}
+ {lightbox.images.length > 1 && (
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+
+ {/* 라이트박스 */}
+
+ {lightbox.open && (
+
+ {/* 상단 버튼들 */}
+ setImageLoaded(true)}
+ initial={{ x: slideDirection * 100 }}
+ animate={{ x: 0 }}
+ transition={{ duration: 0.25, ease: 'easeOut' }}
+ />
+
+ {/* 다음 버튼 */}
+ {photos.length > 1 && (
+
+ )}
+
+ {/* 하단 점 인디케이터 */}
+
+ )}
+
+
+ );
+}
+
+export default AlbumGallery;
diff --git a/frontend/src/pages/pc/Discography.jsx b/frontend/src/pages/pc/Discography.jsx
index cf2204e..26cb314 100644
--- a/frontend/src/pages/pc/Discography.jsx
+++ b/frontend/src/pages/pc/Discography.jsx
@@ -44,8 +44,8 @@ function Discography() {
};
// 앨범 클릭 핸들러
- const handleAlbumClick = (albumId) => {
- navigate(`/discography/${albumId}`);
+ const handleAlbumClick = (albumTitle) => {
+ navigate(`/album/${encodeURIComponent(albumTitle)}`);
};
if (loading) {
@@ -112,7 +112,7 @@ function Discography() {
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
className="group bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 cursor-pointer"
- onClick={() => handleAlbumClick(album.id)}
+ onClick={() => handleAlbumClick(album.title)}
>
{/* 앨범 커버 */}
setLightbox({ open: true, images: album.teasers, index })}
+ onClick={() => setLightbox({ open: true, images: album.teasers.map(t => getOriginalUrl(t)), index })}
className="w-24 h-24 bg-gray-200 rounded-lg overflow-hidden cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-xl hover:z-10"
>
@@ -229,36 +329,50 @@ function AlbumDetail() {
{/* 컨셉 포토 섹션 */}
+ {album.conceptPhotos && Object.keys(album.conceptPhotos).length > 0 && (
-
- {/* 4장 정사각형 그리드 - 실제 이미지는 object-cover로 크롭 */}
- 컨셉 포토
- -
- {[1, 2, 3, 4].map((num) => (
-
- {/* 실제 이미지가 들어갈 자리 - object-cover로 중앙 크롭 */}
- {/* 
*/}
-
- {/* 더미 플레이스홀더 */}
-
+
- {num}
+ {(() => {
+ // 모든 컨셉 포토를 하나의 배열로 합치고 처음 4개만 표시
+ const allPhotos = Object.values(album.conceptPhotos).flat();
+ const previewPhotos = allPhotos.slice(0, 4);
+ const totalCount = allPhotos.length;
+
+ return (
+ <>
+
- ))}
-
+
- 컨셉 포토
+
+ {previewPhotos.map((photo, idx) => (
+
+
+ );
+ })()}
+ )}
setLightbox({ open: true, images: [getOriginalUrl(photo.url)], index: 0 })}
+ className="aspect-square bg-gray-200 rounded-xl overflow-hidden cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-xl hover:z-10"
+ >
+ })
+
+ ))}
+
+ {/* 다운로드 버튼 */}
+
+ {/* 닫기 버튼 */}
+
+
{/* 이전 버튼 */}
{lightbox.images.length > 1 && (
)}
+ {/* 로딩 스피너 */}
+ {!imageLoaded && (
+
+
+
+ )}
+
{/* 이미지 */}
{lightbox.images.map((_, i) => (
))}
+ )}
)}
diff --git a/frontend/src/pages/pc/AlbumGallery.jsx b/frontend/src/pages/pc/AlbumGallery.jsx
new file mode 100644
index 0000000..9db000e
--- /dev/null
+++ b/frontend/src/pages/pc/AlbumGallery.jsx
@@ -0,0 +1,316 @@
+import { useState, useEffect, useCallback, useMemo } 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';
+
+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);
+
+ // URL을 썸네일/원본 버전으로 변환하는 헬퍼
+ const getThumbUrl = (url) => {
+ // https://s3.../photo/01.webp → https://s3.../photo/thumb_400/01.webp
+ const parts = url.split('/');
+ const filename = parts.pop();
+ return [...parts, 'thumb_400', filename].join('/');
+ };
+
+ const getOriginalUrl = (url) => {
+ const parts = url.split('/');
+ const filename = parts.pop();
+ return [...parts, 'original', filename].join('/');
+ };
+
+ // 이미지 dimensions 로드
+ const loadImageDimensions = (url) => {
+ return new Promise((resolve) => {
+ const img = new Image();
+ img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
+ img.onerror = () => resolve({ width: 3, height: 4 }); // 기본 3:4 비율
+ img.src = url;
+ });
+ };
+
+ useEffect(() => {
+ fetch(`/api/albums/by-name/${name}`)
+ .then(res => res.json())
+ .then(async data => {
+ setAlbum(data);
+ const allPhotos = [];
+
+ if (data.conceptPhotos && typeof data.conceptPhotos === 'object') {
+ Object.entries(data.conceptPhotos).forEach(([concept, photos]) => {
+ photos.forEach(p => allPhotos.push({
+ thumbUrl: getThumbUrl(p.url),
+ originalUrl: getOriginalUrl(p.url),
+ title: concept,
+ members: p.members ? p.members.split(', ') : []
+ }));
+ });
+ }
+
+ // 모든 이미지 dimensions 로드
+ const photosWithDimensions = await Promise.all(
+ allPhotos.map(async (photo) => {
+ const dims = await loadImageDimensions(photo.thumbUrl);
+ return { ...photo, width: dims.width, height: dims.height };
+ })
+ );
+
+ setPhotos(photosWithDimensions);
+ setLoading(false);
+ })
+ .catch(error => {
+ console.error('앨범 데이터 로드 오류:', error);
+ setLoading(false);
+ });
+ }, [id]);
+
+ // 라이트박스 열기
+ const openLightbox = (index) => {
+ setImageLoaded(false);
+ setLightbox({ open: true, index });
+ };
+
+ // 라이트박스 닫기
+ const closeLightbox = useCallback(() => {
+ setLightbox(prev => ({ ...prev, open: false }));
+ }, []);
+
+ // 이전/다음 이미지
+ 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 (
+
+ {/* 브레드크럼 스타일 헤더 */}
+ ({
+ src: photo.thumbUrl,
+ width: photo.width || 300,
+ height: photo.height || 400,
+ key: idx.toString()
+ }))}
+ targetRowHeight={300}
+ spacing={8}
+ onClick={({ index }) => openLightbox(index)}
+ componentsProps={{
+ container: { style: { cursor: 'pointer' } },
+ image: {
+ loading: 'lazy',
+ style: { borderRadius: '8px', transition: 'transform 0.3s' }
+ }
+ }}
+ />
+
+
+
+
+ {/* Justified 갤러리 - react-photo-album */}
+
+
+ /
+
+ /
+ 컨셉 포토
+
+ 컨셉 포토
+{photos.length}장의 사진
+
+
+
+
+
+ {/* 카운터 */}
+
+ {lightbox.index + 1} / {photos.length}
+
+
+ {/* 이전 버튼 */}
+ {photos.length > 1 && (
+
+ )}
+
+ {/* 로딩 스피너 */}
+ {!imageLoaded && (
+
+
+
+ )}
+
+ {/* 이미지 */}
+
+ {photos.map((_, i) => (
+
+ 5명의 멤버를 만나보세요