[260211]

- 썸네일 슬라이드 기능 추가
- 미판매 상품 가격 표시 안함

추후 해야할일: 이미지 webp로 변환

scripts/main.js

@@ -256,3 +256,59 @@ window.exportToExcel = () => {
     link.click();
     document.body.removeChild(link);
 };
+
+let currentHoverIndex = -1;
+
+window.handleThumbnailHover = (event, productId) => {
+    const product = productsData.find((p) => p.id === productId);
+    if (!product || product.images.length <= 1) return;
+
+    const container = event.currentTarget;
+    const thumbImg = document.getElementById(`thumb-${productId}`);
+    const indicator = document.getElementById(`indicator-${productId}`);
+
+    const rect = container.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const index = Math.min(Math.floor((x / rect.width) * product.images.length), product.images.length - 1);
+
+    // [핵심] 인덱스가 실제로 바뀔 때만 딱 한 번 실행
+    if (currentHoverIndex !== index) {
+        currentHoverIndex = index;
+        const targetImgUrl = product.images[index];
+
+        requestAnimationFrame(() => {
+            // 이미 프리로드된 상태라면 즉시 교체됨
+            thumbImg.style.backgroundImage = `url("${targetImgUrl}")`;
+
+            if (indicator) {
+                Array.from(indicator.children).forEach((dot, i) => {
+                    if (i === index) {
+                        dot.style.backgroundColor = 'white';
+                        dot.style.transform = 'scale(1.2)';
+                        dot.style.opacity = '1';
+                    } else {
+                        dot.style.backgroundColor = 'rgba(255, 255, 255, 0.4)';
+                        dot.style.transform = 'scale(1)';
+                        dot.style.opacity = '0.7';
+                    }
+                });
+            }
+        });
+    }
+};
+
+window.handleThumbnailLeave = (productId) => {
+    currentHoverIndex = -1; // 인덱스 초기화
+    const product = productsData.find((p) => p.id === productId);
+    if (!product) return;
+
+    const thumbImg = document.getElementById(`thumb-${productId}`);
+    const indicator = document.getElementById(`indicator-${productId}`);
+
+    thumbImg.style.backgroundImage = `url("${product.images[0]}")`;
+    if (indicator) {
+        Array.from(indicator.children).forEach((dot, i) => {
+            dot.style.backgroundColor = i === 0 ? 'white' : 'rgba(255,255,255,0.3)';
+        });
+    }
+};