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">
|
||||
{/* 앨범 커버 - 크기 증가 */}
|
||||
{/* 앨범 커버 - 클릭하면 라이트박스 */}
|
||||
<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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue