Merge pull request #347 from JEOLLOGA/fix/#346/banner-touch

[FIX] 3차 스프린트 홈배너 터치 QA 대응

Author: maylh

src/components/banner/MainBanner.tsx

@@ -24,6 +24,7 @@ const MainBanner = () => {
   const [isAnimate, setIsAnimate] = useState(true);
   const [isDragging, setIsDragging] = useState(false);
   const [startX, setStartX] = useState(0);
+  const [startY, setStartY] = useState(0);
   const [currentX, setCurrentX] = useState(0);
 
   const timerRef = useRef<NodeJS.Timeout | null>(null);
@@ -120,6 +121,55 @@ const MainBanner = () => {
     }
   };
 
+  const handleTouchStart = (e: React.TouchEvent) => {
+    stopAutoSlide();
+    setIsDragging(true);
+    const touchX = e.touches[0].clientX;
+    const touchY = e.touches[0].clientY;
+    setStartX(touchX);
+    setStartY(touchY);
+    setCurrentX(touchX);
+    setIsAnimate(false);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (!isDragging) return;
+    const touchX = e.touches[0].clientX;
+    const touchY = e.touches[0].clientY;
+
+    const diffX = Math.abs(touchX - startX);
+    const diffY = Math.abs(touchY - startY);
+
+    // 스크롤 의도 파악
+    if (diffY > diffX && diffY > 10) {
+      setIsDragging(false);
+      return;
+    }
+
+    setCurrentX(touchX);
+  };
+
+  const handleTouchEnd = () => {
+    if (!isDragging) {
+      startAutoSlide();
+      return;
+    }
+
+    setIsDragging(false);
+    startAutoSlide();
+
+    const diff = currentX - startX;
+    const threshold = 50;
+
+    if (diff < -threshold) {
+      moveNext();
+    } else if (diff > threshold) {
+      movePrev();
+    } else {
+      setIsAnimate(true);
+    }
+  };
+
   let displayIndex = currentIndex;
   if (currentIndex === 0) displayIndex = totalOriginalSlides;
   else if (currentIndex === slides.length - 1) displayIndex = 1;
@@ -134,12 +184,16 @@ const MainBanner = () => {
         style={{
           transform: `translateX(calc(-${currentIndex * 100}% + ${dragOffset}px))`,
           transition: isAnimate ? 'transform 0.5s ease-in-out' : 'none',
+          touchAction: 'pan-y',
         }}
         onTransitionEnd={handleTransitionEnd}
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseLeave}>
+        onMouseLeave={handleMouseLeave}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}>
         {slides.map((banner) => (
           <div
             key={banner.uniqueKey}