From 381461c25ead967b2e92e604143717a4dba6a4d3 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Mon, 1 Jun 2026 13:48:57 +0900
Subject: [PATCH] =?UTF-8?q?fix(event):=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=B6=95=EC=A0=9C=20=ED=8F=AC=EC=8A=A4=ED=84=B0=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EB=9D=BC=EC=9D=B4=ED=8A=B8=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=EB=A1=9C=20=EC=97=B4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

새 창(target=_blank) → MobileLightbox로 변경 (메인/추가 포스터 모두).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../pages/mobile/schedule/ScheduleDetail.jsx  | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx b/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx
index bb0a593..fd16e67 100644
--- a/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx
+++ b/frontend/src/pages/mobile/schedule/ScheduleDetail.jsx
@@ -574,6 +574,12 @@ function MobileEventSection({ schedule }) {
     ? `https://map.kakao.com/link/map/${encodeURIComponent(venue.name)},${venue.lat},${venue.lng}`
     : null;
   const [mapOpen, setMapOpen] = useState(false);
+  const [lightbox, setLightbox] = useState({ open: false, index: 0 });
+  const lightboxImages = posters.map((p) => p.originalUrl || p.mediumUrl);
+  const openLightbox = (index) => {
+    setLightbox({ open: true, index });
+    window.history.pushState({ lightbox: true }, '');
+  };
   const linkLabel = (url) => {
     try { return new URL(url).hostname.replace(/^www\./, ''); } catch { return url; }
   };
@@ -603,11 +609,11 @@ function MobileEventSection({ schedule }) {
     <div className="space-y-3">
       {/* 포스터 (크게, 분리) — 패럴랙스/페이드 */}
       {posters.length > 0 && (
-        <a ref={posterRef} href={posters[0].originalUrl || posters[0].mediumUrl} target="_blank" rel="noopener noreferrer"
+        <button ref={posterRef} type="button" onClick={() => openLightbox(0)}
           className="block w-full rounded-2xl overflow-hidden shadow-lg origin-top"
           style={{ willChange: 'transform, opacity' }}>
           <img src={posters[0].mediumUrl || posters[0].originalUrl} alt={schedule.title} className="w-full h-auto object-cover" />
-        </a>
+        </button>
       )}
 
       {/* 정보 카드 (그라데이션) */}
@@ -682,11 +688,11 @@ function MobileEventSection({ schedule }) {
       {/* 추가 포스터 */}
       {posters.length > 1 && (
         <div className="grid grid-cols-4 gap-1.5">
-          {posters.slice(1).map((p) => (
-            <a key={p.id} href={p.originalUrl} target="_blank" rel="noopener noreferrer"
+          {posters.slice(1).map((p, idx) => (
+            <button key={p.id} type="button" onClick={() => openLightbox(idx + 1)}
               className="block aspect-square rounded-md overflow-hidden border border-gray-100">
               <img src={p.thumbUrl || p.mediumUrl} alt="" className="w-full h-full object-cover" />
-            </a>
+            </button>
           ))}
         </div>
       )}
@@ -723,6 +729,17 @@ function MobileEventSection({ schedule }) {
         </AnimatePresence>,
         document.body
       )}
+
+      {/* Lightbox */}
+      <MobileLightbox
+        images={lightboxImages}
+        currentIndex={lightbox.index}
+        isOpen={lightbox.open}
+        onClose={() => setLightbox((prev) => ({ ...prev, open: false }))}
+        onIndexChange={(index) => setLightbox((prev) => ({ ...prev, index }))}
+        showCounter={posters.length > 1}
+        showDownload
+      />
     </div>
   );
 }