feat: 앨범 티저 이미지 기능 추가
- album_teasers 테이블 생성 및 API 연동 - 앨범 상세 페이지에 티저 이미지 썸네일 표시 - 이미지 클릭 시 라이트박스 모달 표시 - 좌우 슬라이드 애니메이션 적용 - 티저 썸네일 호버 효과 (확대 + 그림자)
This commit is contained in:
parent
831715da3e
commit
ef1050758a
2 changed files with 168 additions and 25 deletions
|
|
@ -47,6 +47,13 @@ router.get("/:id", async (req, res) => {
|
|||
);
|
||||
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);
|
||||
|
||||
res.json(album);
|
||||
} catch (error) {
|
||||
console.error("앨범 조회 오류:", error);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowLeft, Calendar, Music2, Play, Clock } from 'lucide-react';
|
||||
import { ArrowLeft, Calendar, Music2, Play, Clock, X, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
function AlbumDetail() {
|
||||
const { id } = 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);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/albums/${id}`)
|
||||
|
|
@ -70,6 +72,7 @@ function AlbumDetail() {
|
|||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
|
|
@ -89,13 +92,13 @@ function AlbumDetail() {
|
|||
</motion.button>
|
||||
|
||||
{/* 앨범 정보 헤더 */}
|
||||
<div className="flex gap-10 mb-10">
|
||||
{/* 앨범 커버 */}
|
||||
<div className="flex gap-8 mb-10">
|
||||
{/* 앨범 커버 - 크기 증가 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="w-72 h-72 flex-shrink-0 rounded-2xl overflow-hidden shadow-2xl"
|
||||
className="w-80 h-80 flex-shrink-0 rounded-2xl overflow-hidden shadow-2xl"
|
||||
>
|
||||
<img
|
||||
src={album.cover_url}
|
||||
|
|
@ -109,14 +112,15 @@ function AlbumDetail() {
|
|||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1, duration: 0.4 }}
|
||||
className="flex-1 pt-2"
|
||||
className="flex-1 flex flex-col"
|
||||
>
|
||||
<div>
|
||||
<span className="inline-block w-fit px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-3">
|
||||
{album.album_type}
|
||||
</span>
|
||||
<h1 className="text-4xl font-bold mb-4">{album.title}</h1>
|
||||
<h1 className="text-4xl font-bold mb-3">{album.title}</h1>
|
||||
|
||||
<div className="flex items-center gap-6 text-gray-500 mb-4">
|
||||
<div className="flex items-center gap-6 text-gray-500 mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={18} />
|
||||
<span>{formatDate(album.release_date)}</span>
|
||||
|
|
@ -131,9 +135,32 @@ function AlbumDetail() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-primary font-medium">
|
||||
<p className="text-sm text-primary font-medium mb-4">
|
||||
타이틀곡: {album.tracks?.find(t => t.is_title_track === 1)?.title || album.tracks?.[0]?.title}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 앨범 티저 이미지 */}
|
||||
{album.teasers && album.teasers.length > 0 && (
|
||||
<div className="mt-auto">
|
||||
<p className="text-xs text-gray-400 mb-2">Official Teaser</p>
|
||||
<div className="flex gap-2">
|
||||
{album.teasers.map((teaser, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => setLightbox({ open: true, images: album.teasers, 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}
|
||||
alt={`Teaser ${index + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
|
|
@ -200,8 +227,117 @@ function AlbumDetail() {
|
|||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* 컨셉 포토 섹션 */}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 라이트박스 모달 */}
|
||||
{lightbox.open && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center"
|
||||
onClick={() => setLightbox({ ...lightbox, open: false })}
|
||||
>
|
||||
{/* 닫기 버튼 */}
|
||||
<button
|
||||
className="absolute top-6 right-6 text-white/70 hover:text-white transition-colors"
|
||||
onClick={() => setLightbox({ ...lightbox, open: false })}
|
||||
>
|
||||
<X size={32} />
|
||||
</button>
|
||||
|
||||
{/* 이전 버튼 */}
|
||||
{lightbox.images.length > 1 && (
|
||||
<button
|
||||
className="absolute left-6 text-white/70 hover:text-white transition-colors"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSlideDirection(-1);
|
||||
setLightbox({
|
||||
...lightbox,
|
||||
index: (lightbox.index - 1 + lightbox.images.length) % lightbox.images.length
|
||||
});
|
||||
}}
|
||||
>
|
||||
<ChevronLeft size={48} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 이미지 */}
|
||||
<motion.img
|
||||
key={lightbox.index}
|
||||
src={lightbox.images[lightbox.index]}
|
||||
alt="확대 이미지"
|
||||
className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
initial={{ opacity: 0, x: slideDirection * 100 }}
|
||||
animate={{ opacity: 1, 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"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSlideDirection(1);
|
||||
setLightbox({
|
||||
...lightbox,
|
||||
index: (lightbox.index + 1) % lightbox.images.length
|
||||
});
|
||||
}}
|
||||
>
|
||||
<ChevronRight size={48} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 인디케이터 */}
|
||||
<div className="absolute bottom-6 flex gap-2">
|
||||
{lightbox.images.map((_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
className={`w-2 h-2 rounded-full transition-colors ${i === lightbox.index ? 'bg-white' : 'bg-white/40'}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setLightbox({ ...lightbox, index: i });
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue