feat: 갤러리 최적화 및 라우터 개선
- 컨셉 포토 갤러리 페이지 추가 (AlbumGallery.jsx) - react-photo-album 라이브러리로 Justified 레이아웃 구현 - 썸네일/원본 이미지 분리 (thumb_400, original 폴더) - 라우터 변경: /discography → /album - URL 형식 변경: ID 기반 → 앨범명 기반 (/album/하얀 그리움) - 앨범명 기반 API 추가 (/api/albums/by-name/:name) - 브레드크럼 스타일 네비게이션 적용 - 라이트박스 슬라이드 애니메이션 추가 - 점 형태 인디케이터로 변경
This commit is contained in:
parent
66099a1988
commit
3339b281c7
9 changed files with 642 additions and 74 deletions
|
|
@ -27,6 +27,73 @@ router.get("/", async (req, res) => {
|
|||
}
|
||||
});
|
||||
|
||||
// 앨범명(slug)으로 조회
|
||||
router.get("/by-name/:name", async (req, res) => {
|
||||
try {
|
||||
// URL 디코딩된 앨범명으로 조회
|
||||
const albumName = decodeURIComponent(req.params.name);
|
||||
const [albums] = await pool.query("SELECT * FROM albums WHERE title = ?", [
|
||||
albumName,
|
||||
]);
|
||||
|
||||
if (albums.length === 0) {
|
||||
return res.status(404).json({ error: "앨범을 찾을 수 없습니다." });
|
||||
}
|
||||
|
||||
const album = albums[0];
|
||||
|
||||
// 트랙 정보 조회 (가사 포함)
|
||||
const [tracks] = await pool.query(
|
||||
"SELECT * FROM tracks WHERE album_id = ? ORDER BY track_number",
|
||||
[album.id]
|
||||
);
|
||||
album.tracks = tracks;
|
||||
|
||||
// 티저 이미지 조회
|
||||
const [teasers] = await pool.query(
|
||||
"SELECT image_url FROM album_teasers WHERE album_id = ? ORDER BY sort_order",
|
||||
[album.id]
|
||||
);
|
||||
album.teasers = teasers.map((t) => t.image_url);
|
||||
|
||||
// 컨셉 포토 조회 (멤버 정보 포함)
|
||||
const [photos] = await pool.query(
|
||||
`SELECT
|
||||
p.id, p.photo_url, p.photo_type, p.concept_name, p.sort_order,
|
||||
GROUP_CONCAT(m.name ORDER BY m.id SEPARATOR ', ') as members
|
||||
FROM album_photos p
|
||||
LEFT JOIN album_photo_members pm ON p.id = pm.photo_id
|
||||
LEFT JOIN members m ON pm.member_id = m.id
|
||||
WHERE p.album_id = ?
|
||||
GROUP BY p.id
|
||||
ORDER BY p.sort_order`,
|
||||
[album.id]
|
||||
);
|
||||
|
||||
// 컨셉별로 그룹화
|
||||
const conceptPhotos = {};
|
||||
for (const photo of photos) {
|
||||
const concept = photo.concept_name || "Default";
|
||||
if (!conceptPhotos[concept]) {
|
||||
conceptPhotos[concept] = [];
|
||||
}
|
||||
conceptPhotos[concept].push({
|
||||
id: photo.id,
|
||||
url: photo.photo_url,
|
||||
type: photo.photo_type,
|
||||
members: photo.members,
|
||||
sortOrder: photo.sort_order,
|
||||
});
|
||||
}
|
||||
album.conceptPhotos = conceptPhotos;
|
||||
|
||||
res.json(album);
|
||||
} catch (error) {
|
||||
console.error("앨범 조회 오류:", error);
|
||||
res.status(500).json({ error: "앨범 정보를 가져오는데 실패했습니다." });
|
||||
}
|
||||
});
|
||||
|
||||
// 특정 앨범 조회 (트랙 및 상세 정보 포함)
|
||||
router.get("/:id", async (req, res) => {
|
||||
try {
|
||||
|
|
@ -54,6 +121,37 @@ router.get("/:id", async (req, res) => {
|
|||
);
|
||||
album.teasers = teasers.map((t) => t.image_url);
|
||||
|
||||
// 컨셉 포토 조회 (멤버 정보 포함)
|
||||
const [photos] = await pool.query(
|
||||
`SELECT
|
||||
p.id, p.photo_url, p.photo_type, p.concept_name, p.sort_order,
|
||||
GROUP_CONCAT(m.name ORDER BY m.id SEPARATOR ', ') as members
|
||||
FROM album_photos p
|
||||
LEFT JOIN album_photo_members pm ON p.id = pm.photo_id
|
||||
LEFT JOIN members m ON pm.member_id = m.id
|
||||
WHERE p.album_id = ?
|
||||
GROUP BY p.id
|
||||
ORDER BY p.sort_order`,
|
||||
[album.id]
|
||||
);
|
||||
|
||||
// 컨셉별로 그룹화
|
||||
const conceptPhotos = {};
|
||||
for (const photo of photos) {
|
||||
const concept = photo.concept_name || "Default";
|
||||
if (!conceptPhotos[concept]) {
|
||||
conceptPhotos[concept] = [];
|
||||
}
|
||||
conceptPhotos[concept].push({
|
||||
id: photo.id,
|
||||
url: photo.photo_url,
|
||||
type: photo.photo_type,
|
||||
members: photo.members,
|
||||
sortOrder: photo.sort_order,
|
||||
});
|
||||
}
|
||||
album.conceptPhotos = conceptPhotos;
|
||||
|
||||
res.json(album);
|
||||
} catch (error) {
|
||||
console.error("앨범 조회 오류:", error);
|
||||
|
|
|
|||
28
frontend/package-lock.json
generated
28
frontend/package-lock.json
generated
|
|
@ -13,6 +13,7 @@
|
|||
"react": "^18.2.0",
|
||||
"react-device-detect": "^2.2.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-photo-album": "^3.4.0",
|
||||
"react-router-dom": "^6.22.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -1179,14 +1180,14 @@
|
|||
"version": "15.7.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
|
||||
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "18.3.27",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
|
||||
"integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
|
|
@ -1462,7 +1463,7 @@
|
|||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
|
|
@ -2246,6 +2247,27 @@
|
|||
"react": "^18.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-photo-album": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-photo-album/-/react-photo-album-3.4.0.tgz",
|
||||
"integrity": "sha512-pPaCoxEfVDhowpqxECq4SOD5kzP1Uao8PEN11Jasxayv4cZjad3Fy8SlKt6wvtLnVJRtOjsQDU/ZnnUuberwMg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/igordanchenko"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^18 || ^19",
|
||||
"react": "^18 || ^19"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.17.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"react": "^18.2.0",
|
||||
"react-device-detect": "^2.2.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-photo-album": "^3.4.0",
|
||||
"react-router-dom": "^6.22.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import PCHome from './pages/pc/Home';
|
|||
import PCMembers from './pages/pc/Members';
|
||||
import PCDiscography from './pages/pc/Discography';
|
||||
import PCAlbumDetail from './pages/pc/AlbumDetail';
|
||||
import PCAlbumGallery from './pages/pc/AlbumGallery';
|
||||
import PCSchedule from './pages/pc/Schedule';
|
||||
|
||||
// PC 레이아웃
|
||||
|
|
@ -19,8 +20,9 @@ function App() {
|
|||
<Routes>
|
||||
<Route path="/" element={<PCHome />} />
|
||||
<Route path="/members" element={<PCMembers />} />
|
||||
<Route path="/discography" element={<PCDiscography />} />
|
||||
<Route path="/discography/:id" element={<PCAlbumDetail />} />
|
||||
<Route path="/album" element={<PCDiscography />} />
|
||||
<Route path="/album/:name" element={<PCAlbumDetail />} />
|
||||
<Route path="/album/:name/gallery" element={<PCAlbumGallery />} />
|
||||
<Route path="/schedule" element={<PCSchedule />} />
|
||||
</Routes>
|
||||
</PCLayout>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ function Header() {
|
|||
const navItems = [
|
||||
{ path: '/', label: '홈' },
|
||||
{ path: '/members', label: '멤버' },
|
||||
{ path: '/discography', label: '앨범' },
|
||||
{ path: '/album', label: '앨범' },
|
||||
{ path: '/schedule', label: '스케줄' },
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,104 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { ArrowLeft, Calendar, Music2, Play, Clock, X, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { Calendar, Music2, Clock, X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
|
||||
|
||||
function AlbumDetail() {
|
||||
const { id } = useParams();
|
||||
const { name } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [album, setAlbum] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0 });
|
||||
const [slideDirection, setSlideDirection] = useState(0);
|
||||
const [imageLoaded, setImageLoaded] = useState(false);
|
||||
|
||||
// 라이트박스 네비게이션 함수
|
||||
const goToPrev = useCallback(() => {
|
||||
if (lightbox.images.length <= 1) return;
|
||||
setImageLoaded(false);
|
||||
setSlideDirection(-1);
|
||||
setLightbox(prev => ({
|
||||
...prev,
|
||||
index: (prev.index - 1 + prev.images.length) % prev.images.length
|
||||
}));
|
||||
}, [lightbox.images.length]);
|
||||
|
||||
const goToNext = useCallback(() => {
|
||||
if (lightbox.images.length <= 1) return;
|
||||
setImageLoaded(false);
|
||||
setSlideDirection(1);
|
||||
setLightbox(prev => ({
|
||||
...prev,
|
||||
index: (prev.index + 1) % prev.images.length
|
||||
}));
|
||||
}, [lightbox.images.length]);
|
||||
|
||||
const closeLightbox = useCallback(() => {
|
||||
setLightbox(prev => ({ ...prev, open: false }));
|
||||
}, []);
|
||||
|
||||
// 이미지 다운로드 함수
|
||||
const downloadImage = useCallback(async () => {
|
||||
const imageUrl = lightbox.images[lightbox.index];
|
||||
if (!imageUrl) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(imageUrl);
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `fromis9_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);
|
||||
}
|
||||
}, [lightbox.images, lightbox.index]);
|
||||
|
||||
// 키보드 이벤트 핸들러
|
||||
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 || lightbox.images.length <= 1) return;
|
||||
|
||||
const preloadImages = [];
|
||||
const prevIdx = (lightbox.index - 1 + lightbox.images.length) % lightbox.images.length;
|
||||
const nextIdx = (lightbox.index + 1) % lightbox.images.length;
|
||||
|
||||
[prevIdx, nextIdx].forEach(idx => {
|
||||
const img = new Image();
|
||||
img.src = lightbox.images[idx];
|
||||
preloadImages.push(img);
|
||||
});
|
||||
}, [lightbox.open, lightbox.index, lightbox.images]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/albums/${id}`)
|
||||
fetch(`/api/albums/by-name/${name}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setAlbum(data);
|
||||
|
|
@ -22,7 +108,20 @@ function AlbumDetail() {
|
|||
console.error('앨범 데이터 로드 오류:', error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, [id]);
|
||||
}, [name]);
|
||||
|
||||
// URL을 썸네일/원본 버전으로 변환하는 헬퍼
|
||||
const getThumbUrl = (url) => {
|
||||
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('/');
|
||||
};
|
||||
|
||||
// 날짜 포맷팅
|
||||
const formatDate = (dateStr) => {
|
||||
|
|
@ -48,7 +147,7 @@ function AlbumDetail() {
|
|||
|
||||
// 뒤로가기
|
||||
const handleBack = () => {
|
||||
navigate('/discography');
|
||||
navigate('/album');
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
|
|
@ -80,16 +179,17 @@ function AlbumDetail() {
|
|||
className="py-16"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
{/* 뒤로가기 버튼 */}
|
||||
<motion.button
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
onClick={handleBack}
|
||||
className="flex items-center gap-2 text-gray-500 hover:text-primary mb-8 transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
<span>앨범으로 돌아가기</span>
|
||||
</motion.button>
|
||||
{/* 브레드크럼 네비게이션 */}
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500 mb-6">
|
||||
<button
|
||||
onClick={handleBack}
|
||||
className="hover:text-primary transition-colors"
|
||||
>
|
||||
앨범
|
||||
</button>
|
||||
<span>/</span>
|
||||
<span className="text-gray-700">{album?.title}</span>
|
||||
</div>
|
||||
|
||||
{/* 앨범 정보 헤더 */}
|
||||
<div className="flex gap-8 mb-10">
|
||||
|
|
@ -148,11 +248,11 @@ function AlbumDetail() {
|
|||
{album.teasers.map((teaser, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => 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"
|
||||
>
|
||||
<img
|
||||
src={teaser}
|
||||
src={getThumbUrl(teaser)}
|
||||
alt={`Teaser ${index + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
|
@ -229,36 +329,50 @@ function AlbumDetail() {
|
|||
</div>
|
||||
|
||||
{/* 컨셉 포토 섹션 */}
|
||||
{album.conceptPhotos && Object.keys(album.conceptPhotos).length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4, duration: 0.4 }}
|
||||
className="mt-10"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-bold">컨셉 포토</h2>
|
||||
<button className="text-sm text-primary hover:underline">
|
||||
전체보기 (12장)
|
||||
</button>
|
||||
</div>
|
||||
{/* 4장 정사각형 그리드 - 실제 이미지는 object-cover로 크롭 */}
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{[1, 2, 3, 4].map((num) => (
|
||||
<div
|
||||
key={num}
|
||||
className="group relative aspect-square bg-gray-200 rounded-xl overflow-hidden cursor-pointer"
|
||||
>
|
||||
{/* 실제 이미지가 들어갈 자리 - object-cover로 중앙 크롭 */}
|
||||
{/* <img src={photo.url} className="w-full h-full object-cover" /> */}
|
||||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
|
||||
{/* 더미 플레이스홀더 */}
|
||||
<div className="absolute inset-0 flex items-center justify-center text-gray-400">
|
||||
<span className="text-4xl font-bold">{num}</span>
|
||||
{(() => {
|
||||
// 모든 컨셉 포토를 하나의 배열로 합치고 처음 4개만 표시
|
||||
const allPhotos = Object.values(album.conceptPhotos).flat();
|
||||
const previewPhotos = allPhotos.slice(0, 4);
|
||||
const totalCount = allPhotos.length;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-bold">컨셉 포토</h2>
|
||||
<button
|
||||
className="text-sm text-primary hover:underline"
|
||||
onClick={() => navigate(`/album/${name}/gallery`)}
|
||||
>
|
||||
전체보기 ({totalCount}장)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{previewPhotos.map((photo, idx) => (
|
||||
<div
|
||||
key={photo.id}
|
||||
onClick={() => 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"
|
||||
>
|
||||
<img
|
||||
src={getThumbUrl(photo.url)}
|
||||
alt={`컨셉 포토 ${idx + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
|
|
@ -272,61 +386,75 @@ function AlbumDetail() {
|
|||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center"
|
||||
>
|
||||
{/* 닫기 버튼 */}
|
||||
<button
|
||||
className="absolute top-6 right-6 text-white/70 hover:text-white transition-colors"
|
||||
onClick={() => setLightbox({ ...lightbox, open: false })}
|
||||
>
|
||||
<X size={32} />
|
||||
</button>
|
||||
{/* 상단 버튼들 */}
|
||||
<div className="absolute top-6 right-6 flex gap-3 z-10">
|
||||
{/* 다운로드 버튼 */}
|
||||
<button
|
||||
className="text-white/70 hover:text-white transition-colors"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
downloadImage();
|
||||
}}
|
||||
>
|
||||
<Download size={28} />
|
||||
</button>
|
||||
{/* 닫기 버튼 */}
|
||||
<button
|
||||
className="text-white/70 hover:text-white transition-colors"
|
||||
onClick={closeLightbox}
|
||||
>
|
||||
<X size={32} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 이전 버튼 */}
|
||||
{lightbox.images.length > 1 && (
|
||||
<button
|
||||
className="absolute left-6 text-white/70 hover:text-white transition-colors"
|
||||
className="absolute left-6 text-white/70 hover:text-white transition-colors z-10"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSlideDirection(-1);
|
||||
setLightbox({
|
||||
...lightbox,
|
||||
index: (lightbox.index - 1 + lightbox.images.length) % lightbox.images.length
|
||||
});
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* 이미지 */}
|
||||
<motion.img
|
||||
key={lightbox.index}
|
||||
src={lightbox.images[lightbox.index]}
|
||||
alt="확대 이미지"
|
||||
className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
|
||||
className={`max-w-[90vw] max-h-[90vh] object-contain rounded-lg transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
|
||||
onClick={(e) => 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 && (
|
||||
<button
|
||||
className="absolute right-6 text-white/70 hover:text-white transition-colors"
|
||||
className="absolute right-6 text-white/70 hover:text-white transition-colors z-10"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSlideDirection(1);
|
||||
setLightbox({
|
||||
...lightbox,
|
||||
index: (lightbox.index + 1) % lightbox.images.length
|
||||
});
|
||||
goToNext();
|
||||
}}
|
||||
>
|
||||
<ChevronRight size={48} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 인디케이터 */}
|
||||
{/* 인디케이터 - 이미지 2개 이상일 때만 표시 */}
|
||||
{lightbox.images.length > 1 && (
|
||||
<div className="absolute bottom-6 flex gap-2">
|
||||
{lightbox.images.map((_, i) => (
|
||||
<button
|
||||
|
|
@ -339,6 +467,7 @@ function AlbumDetail() {
|
|||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
|
|
|||
316
frontend/src/pages/pc/AlbumGallery.jsx
Normal file
316
frontend/src/pages/pc/AlbumGallery.jsx
Normal file
|
|
@ -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 (
|
||||
<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="container mx-auto px-4">
|
||||
{/* 브레드크럼 스타일 헤더 */}
|
||||
<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>
|
||||
|
||||
{/* Justified 갤러리 - react-photo-album */}
|
||||
<RowsPhotoAlbum
|
||||
photos={photos.map((photo, idx) => ({
|
||||
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' }
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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 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>
|
||||
|
||||
{/* 이전 버튼 */}
|
||||
{photos.length > 1 && (
|
||||
<button
|
||||
className="absolute left-6 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>
|
||||
)}
|
||||
|
||||
{/* 이미지 */}
|
||||
<motion.img
|
||||
key={lightbox.index}
|
||||
src={photos[lightbox.index]?.originalUrl}
|
||||
alt="확대 이미지"
|
||||
className={`max-w-[90vw] max-h-[85vh] object-contain rounded-lg 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' }}
|
||||
/>
|
||||
|
||||
{/* 다음 버튼 */}
|
||||
{photos.length > 1 && (
|
||||
<button
|
||||
className="absolute right-6 text-white/70 hover:text-white transition-colors z-10"
|
||||
onClick={goToNext}
|
||||
>
|
||||
<ChevronRight size={48} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 하단 점 인디케이터 */}
|
||||
<div className="absolute bottom-6 flex gap-1.5 flex-wrap justify-center max-w-[80vw]">
|
||||
{photos.map((_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
className={`w-2 h-2 rounded-full transition-colors ${i === lightbox.index ? 'bg-white' : 'bg-white/40'}`}
|
||||
onClick={() => {
|
||||
setImageLoaded(false);
|
||||
setLightbox({ ...lightbox, index: i });
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AlbumGallery;
|
||||
|
|
@ -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)}
|
||||
>
|
||||
{/* 앨범 커버 */}
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ function Home() {
|
|||
<p className="text-gray-500 group-hover:text-white/80">5명의 멤버를 만나보세요</p>
|
||||
</Link>
|
||||
<Link
|
||||
to="/discography"
|
||||
to="/album"
|
||||
className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
|
||||
>
|
||||
<Disc3 size={40} className="mb-4 text-primary group-hover:text-white" />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue