feat: 앨범 상세 페이지에서 커버 이미지 클릭 시 라이트박스 열기

- 커버 이미지 클릭 시 원본 이미지를 라이트박스로 표시
- 호버 시 확대 효과 추가
This commit is contained in:
caadiq 2026-01-04 11:42:52 +09:00
parent b262907780
commit 925cfe026a

View file

@ -241,17 +241,22 @@ function AlbumDetail() {
{/* 앨범 정보 헤더 */}
<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-80 h-80 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg"
className="w-80 h-80 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg cursor-pointer group"
onClick={() => setLightbox({
open: true,
images: [album.cover_original_url || album.cover_medium_url],
index: 0
})}
>
<img
src={album.cover_medium_url || album.cover_original_url}
alt={album.title}
className="w-full h-full object-cover"
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
</motion.div>