no message

src/main/resources/templates/content/puzzle/spider.html

@@ -409,11 +409,38 @@
       canvas.addEventListener('mouseup', handlePointerUp);
       canvas.addEventListener('dblclick', handleDoubleClick);
 
+// ▼▼▼ [추가] 터치 이벤트 리스너 등록 ▼▼▼
+      canvas.addEventListener('touchstart', handlePointerDown);
+      canvas.addEventListener('touchmove', (e) => {
+        e.preventDefault(); // 모바일에서 드래그 시 화면이 스크롤되는 것을 방지
+        handlePointerMove(e);
+      });
+      canvas.addEventListener('touchend', handlePointerUp);
+
       function getCanvasCoordinates(event) {
         const rect = canvas.getBoundingClientRect();
         const scaleX = canvas.width / rect.width, scaleY = canvas.height / rect.height;
-        const clientX = event.touches ? event.touches[0].clientX : event.clientX;
-        const clientY = event.touches ? event.touches[0].clientY : event.clientY;
+
+        // 터치 이벤트와 마우스 이벤트를 모두 처리하기 위한 좌표 변수
+        let clientX, clientY;
+
+        if (event.touches && event.touches.length > 0) {
+          // 'touchstart', 'touchmove' 이벤트 처리
+          clientX = event.touches[0].clientX;
+          clientY = event.touches[0].clientY;
+        } else if (event.changedTouches && event.changedTouches.length > 0) {
+          // 'touchend' 이벤트 처리
+          clientX = event.changedTouches[0].clientX;
+          clientY = event.changedTouches[0].clientY;
+        } else {
+          // 마우스 이벤트 처리 ('mousedown', 'mousemove', 'mouseup')
+          clientX = event.clientX;
+          clientY = event.clientY;
+        }
+
+        // clientX 또는 clientY가 undefined인 경우 오류 방지
+        if (typeof clientX === 'undefined' || typeof clientY === 'undefined') return null;
+
         return { x: (clientX - rect.left) * scaleX / dpr, y: (clientY - rect.top) * scaleY / dpr };
       }
 
@@ -456,6 +483,10 @@
       // =======================================
       function handlePointerDown(event) {
         if (isProcessing || isAnimatingCompletion) return;
+        if (event.type.startsWith('touch')) {
+          event.preventDefault();
+        }
+
         const coords = getCanvasCoordinates(event);
         const element = findElementAt(coords.x, coords.y);
         if (!element) return;
@@ -506,6 +537,11 @@
         if (!isDragging) { draggedCards = []; return; }
 
         const coords = getCanvasCoordinates(event);
+        if (!coords) { // coords가 null일 경우를 대비한 방어 코드
+          isDragging = false;
+          draggedCards = [];
+          return;
+        }
         const dropTargetStackId = findStackAt(coords.x, coords.y);
         const sourceStackIndex = draggedCards.sourceStackIndex;
 
@@ -827,7 +863,9 @@
   <div class="container" style="text-align:center;">
     <ins class="adsbygoogle"
          style="display:block"
-         data-ad-client="ca-pub-9504446465764716" data-ad-slot="1234567890" data-ad-format="auto"
+         data-ad-client="ca-pub-9504446465764716"
+         data-ad-slot="5334609005"
+         data-ad-format="auto"
          data-full-width-responsive="true"></ins>
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});