From 925cfe026acd45e8db49a878ebb9ddbb6ac166ba Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 4 Jan 2026 11:42:52 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=95=A8=EB=B2=94=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EC=BB=A4?=
 =?UTF-8?q?=EB=B2=84=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=EC=8B=9C=20=EB=9D=BC=EC=9D=B4=ED=8A=B8=EB=B0=95=EC=8A=A4=20?=
 =?UTF-8?q?=EC=97=B4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 커버 이미지 클릭 시 원본 이미지를 라이트박스로 표시
- 호버 시 확대 효과 추가
---
 frontend/src/pages/pc/AlbumDetail.jsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/pc/AlbumDetail.jsx b/frontend/src/pages/pc/AlbumDetail.jsx
index 2280825..fbc09b2 100644
--- a/frontend/src/pages/pc/AlbumDetail.jsx
+++ b/frontend/src/pages/pc/AlbumDetail.jsx
@@ -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>