From c64d0a358c3ee4d016567a917108249b0548290f Mon Sep 17 00:00:00 2001
From: "qsxft258@gmail.com" <qsxft258@gmail.com>
Date: Wed, 17 Sep 2025 22:22:46 +0900
Subject: [PATCH] =?UTF-8?q?Fix=20:=20=EA=B0=A4=EB=9F=AC=EB=A6=AC=20?=
 =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/gallery.js | 47 +++++++++++++++++++++++++++++++++--------------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/js/gallery.js b/js/gallery.js
index b5b41ab..f5ce2b5 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -306,7 +306,7 @@ class Easy360Viewer {
     }
     
     createViewer() {
-        // 컨테이너 스타일
+        // 컨테이너 스타일 - 서버 호환성 개선
         this.container.style.cssText = `
             position: relative;
             width: 100%;
@@ -315,6 +315,10 @@ class Easy360Viewer {
             background: #000;
             cursor: grab;
             user-select: none;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            touch-action: none;
         `;
         
         // 360도 이미지 래퍼 - 성능 최적화
@@ -350,12 +354,15 @@ class Easy360Viewer {
         `;
         this.image.draggable = false;
         
-        // 이미지 로드 완료 후
+        // 이미지 로드 완료 후 - 안정성 개선
         this.image.onload = () => {
-            this.hideLoading();
-            this.setupImageSize();
-            this.createDuplicateImages();
-            this.updateTransform();
+            // 이미지가 완전히 로드될 때까지 대기
+            setTimeout(() => {
+                this.hideLoading();
+                this.setupImageSize();
+                this.createDuplicateImages();
+                this.updateTransform();
+            }, 100);
         };
         
         this.image.onerror = () => {
@@ -381,11 +388,11 @@ class Easy360Viewer {
             imageWidth = containerWidth * 3; // 360도를 위해 충분히 큼
         }
         
-        // 이미지 크기 설정
-        this.image.style.width = imageWidth + 'px';
-        this.image.style.height = containerHeight + 'px';
-        this.imageWrapper.style.width = imageWidth + 'px';
-        this.imageWrapper.style.height = containerHeight + 'px';
+        // 이미지 크기 설정 - 브라우저 호환성 개선
+        this.image.style.width = Math.round(imageWidth) + 'px';
+        this.image.style.height = Math.round(containerHeight) + 'px';
+        this.imageWrapper.style.width = Math.round(imageWidth) + 'px';
+        this.imageWrapper.style.height = Math.round(containerHeight) + 'px';
         
         // 단일 이미지 너비 저장
         this.singleImageWidth = imageWidth;
@@ -396,9 +403,13 @@ class Easy360Viewer {
         const imageClone1 = this.image.cloneNode();
         const imageClone2 = this.image.cloneNode();
         
-        // 동일한 스타일 적용
+        // 동일한 스타일 적용 - 안정성 개선
         imageClone1.style.cssText = this.image.style.cssText;
         imageClone2.style.cssText = this.image.style.cssText;
+        imageClone1.src = this.image.src;
+        imageClone2.src = this.image.src;
+        imageClone1.draggable = false;
+        imageClone2.draggable = false;
         
         this.imageWrapper.appendChild(imageClone1);
         this.imageWrapper.appendChild(imageClone2);
@@ -591,8 +602,16 @@ class Easy360Viewer {
             this.currentX = this.singleImageWidth;
         }
         
-        const transform = `translateX(${-this.currentX}px) scale(${this.zoom})`;
+        // 부드러운 변환을 위해 소수점 제거
+        const translateX = Math.round(-this.currentX * 100) / 100;
+        const scale = Math.round(this.zoom * 100) / 100;
+        
+        const transform = `translateX(${translateX}px) scale(${scale})`;
         this.imageWrapper.style.transform = transform;
+        
+        // 브라우저 호환성
+        this.imageWrapper.style.webkitTransform = transform;
+        this.imageWrapper.style.msTransform = transform;
     }
     
     startAnimation() {
@@ -730,7 +749,7 @@ function createPanoramaModal() {
                 </div>
                 
                 <button class="panorama-modal-close" id="panorama-close-btn">
-                    <i class="fas fa-times"></i>
+                    <div class="close-icon"></div>
                 </button>
                 
                 <div class="panorama-help-panel" id="panorama-help-panel">