Fix : 갤러리 업데이트

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 = () => {
+            // 이미지가 완전히 로드될 때까지 대기
+            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.width = Math.round(imageWidth) + 'px';
-        this.image.style.height = containerHeight + 'px';
+        this.image.style.height = Math.round(containerHeight) + 'px';
-        this.imageWrapper.style.width = imageWidth + 'px';
+        this.imageWrapper.style.width = Math.round(imageWidth) + 'px';
-        this.imageWrapper.style.height = containerHeight + '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">