From f8908635b65277f6f5282cb23c0181ba1bd8879a Mon Sep 17 00:00:00 2001
From: KINDNICK <68893236+KINDNICK@users.noreply.github.com>
Date: Sun, 13 Jul 2025 00:12:09 +0900
Subject: [PATCH] =?UTF-8?q?Fix=20:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B7=B0=EC=9E=89=20=ED=8C=A8=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 66 +++++++++++++++++++++++++++++++++++++++++---------
 styles.css | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 125 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 2649269..6008737 100644
--- a/index.html
+++ b/index.html
@@ -280,7 +280,7 @@
                 <h2>스튜디오 공간 갤러리</h2>
                 <p>밍글 스튜디오의 실제 공간을 사진으로 확인해보세요. 이미지를 클릭하면 크게 볼 수 있습니다.</p>
             </div>
-            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;">
+            <div class="gallery-grid">
                 <div class="studio-img-card">
                     <img src="Studio_Image/넓은 모션 캡쳐 공간 001.jpg" alt="메인 모션캡쳐 존(전경)" class="studio-img-thumb">
                     <div class="studio-img-caption">메인 모션캡쳐 존(전경)</div>
@@ -342,20 +342,64 @@
     @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
     </style>
     <script>
-    // 라이트박스 기능
+    // 라이트박스 기능 (이미지 넘기기 지원)
     document.addEventListener('DOMContentLoaded', function() {
-        document.querySelectorAll('.studio-img-thumb').forEach(function(img) {
+        // 갤러리 이미지 정보 배열 생성
+        const galleryImages = Array.from(document.querySelectorAll('.studio-img-thumb')).map(img => ({
+            src: img.getAttribute('src'),
+            alt: img.getAttribute('alt'),
+            caption: img.parentElement.querySelector('.studio-img-caption')?.textContent || ''
+        }));
+
+        document.querySelectorAll('.studio-img-thumb').forEach(function(img, idx) {
             img.addEventListener('click', function() {
-                const src = img.getAttribute('src');
-                const alt = img.getAttribute('alt');
-                const lightboxBg = document.createElement('div');
-                lightboxBg.className = 'lightbox-bg';
-                lightboxBg.innerHTML = `<span class='lightbox-close'>&times;</span><img src='${src}' alt='${alt}' class='lightbox-img'>`;
-                document.body.appendChild(lightboxBg);
-                lightboxBg.querySelector('.lightbox-close').onclick = () => lightboxBg.remove();
-                lightboxBg.onclick = (e) => { if(e.target === lightboxBg) lightboxBg.remove(); };
+                openLightbox(idx);
             });
         });
+
+        function openLightbox(startIdx) {
+            let currentIdx = startIdx;
+            const lightboxBg = document.createElement('div');
+            lightboxBg.className = 'lightbox-bg';
+            renderLightboxContent();
+            document.body.appendChild(lightboxBg);
+
+            function renderLightboxContent() {
+                lightboxBg.innerHTML = `
+                    <span class='lightbox-close'>&times;</span>
+                    <button class='lightbox-arrow lightbox-prev'>&#10094;</button>
+                    <div class='lightbox-img-wrap'>
+                        <img src='${galleryImages[currentIdx].src}' alt='${galleryImages[currentIdx].alt}' class='lightbox-img'>
+                        <div class='lightbox-caption'>${galleryImages[currentIdx].caption}</div>
+                    </div>
+                    <button class='lightbox-arrow lightbox-next'>&#10095;</button>
+                `;
+                lightboxBg.querySelector('.lightbox-close').onclick = closeLightbox;
+                lightboxBg.querySelector('.lightbox-prev').onclick = showPrev;
+                lightboxBg.querySelector('.lightbox-next').onclick = showNext;
+                lightboxBg.onclick = (e) => { if(e.target === lightboxBg) closeLightbox(); };
+                document.addEventListener('keydown', keyHandler);
+            }
+            function showPrev(e) {
+                e && e.stopPropagation();
+                currentIdx = (currentIdx - 1 + galleryImages.length) % galleryImages.length;
+                renderLightboxContent();
+            }
+            function showNext(e) {
+                e && e.stopPropagation();
+                currentIdx = (currentIdx + 1) % galleryImages.length;
+                renderLightboxContent();
+            }
+            function closeLightbox() {
+                document.removeEventListener('keydown', keyHandler);
+                lightboxBg.remove();
+            }
+            function keyHandler(e) {
+                if (e.key === 'ArrowLeft') showPrev();
+                if (e.key === 'ArrowRight') showNext();
+                if (e.key === 'Escape') closeLightbox();
+            }
+        }
     });
     </script>
 
diff --git a/styles.css b/styles.css
index 4763f98..41fedc1 100644
--- a/styles.css
+++ b/styles.css
@@ -603,6 +603,68 @@ section {
     color: #cbd5e1;
 }
 
+/* 갤러리 그리드 */
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+}
+
+/* 라이트박스 화살표 버튼 스타일 */
+.lightbox-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255,255,255,0.85);
+  border: none;
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  font-size: 2.2rem;
+  color: #ff8800;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10001;
+  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
+  outline: none;
+}
+.lightbox-arrow:hover, .lightbox-arrow:focus {
+  background: #ff8800;
+  color: #fff;
+  box-shadow: 0 8px 32px rgba(255,136,0,0.18);
+}
+.lightbox-prev {
+  left: 3vw;
+}
+.lightbox-next {
+  right: 3vw;
+}
+
+.lightbox-caption {
+  margin-top: 1.2rem;
+  color: #222;
+  background: rgba(255,255,255,0.92);
+  border-radius: 10px;
+  padding: 0.7rem 1.5rem;
+  font-size: 1.13rem;
+  font-weight: 600;
+  text-align: center;
+  max-width: 90vw;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+  position: relative;
+  z-index: 10002;
+}
+
+.lightbox-img-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 /* 반응형 디자인 */
 @media (max-width: 768px) {
     .hamburger {
@@ -657,6 +719,10 @@ section {
     .portfolio-grid {
         grid-template-columns: 1fr;
     }
+
+    .gallery-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
 }
 
 @media (max-width: 480px) {
@@ -672,4 +738,8 @@ section {
         padding: 0.8rem 1.5rem;
         font-size: 0.9rem;
     }
+
+    .gallery-grid {
+      grid-template-columns: 1fr;
+    }
 } 
\ No newline at end of file