feat: 앨범 상세 페이지에서 커버 이미지 클릭 시 라이트박스 열기
- 커버 이미지 클릭 시 원본 이미지를 라이트박스로 표시 - 호버 시 확대 효과 추가
This commit is contained in:
parent
b262907780
commit
925cfe026a
1 changed files with 8 additions and 3 deletions
|
|
@ -241,17 +241,22 @@ function AlbumDetail() {
|
||||||
|
|
||||||
{/* 앨범 정보 헤더 */}
|
{/* 앨범 정보 헤더 */}
|
||||||
<div className="flex gap-8 mb-10">
|
<div className="flex gap-8 mb-10">
|
||||||
{/* 앨범 커버 - 크기 증가 */}
|
{/* 앨범 커버 - 클릭하면 라이트박스 */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, scale: 0.9 }}
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
transition={{ duration: 0.4 }}
|
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
|
<img
|
||||||
src={album.cover_medium_url || album.cover_original_url}
|
src={album.cover_medium_url || album.cover_original_url}
|
||||||
alt={album.title}
|
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>
|
</motion.div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue