fix: 배너 슬라이더 드래그시 창 이동하지 않도록 수정 #239

frontend/src/components/Banner/BannerSlider.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
@@ -14,6 +14,8 @@ const BannerSlider: React.FC<BannerSliderProps> = ({
   interval = 3000,
 }) => {
   const [banners, setBanners] = useState<Banner[]>([]);
+  const startPosition = useRef<{ x: number; y: number } | null>(null);
+  const isDragged = useRef(false);
 
   useEffect(() => {
     const fetchBanners = async () => {
@@ -34,18 +36,41 @@ const BannerSlider: React.FC<BannerSliderProps> = ({
     autoplaySpeed: interval,
   };
 
+  const handleMouseDown = (event: React.MouseEvent) => {
+    startPosition.current = { x: event.clientX, y: event.clientY };
+    isDragged.current = false;
+  };
+
+  const handleMouseUp = (event: React.MouseEvent) => {
+    if (startPosition.current) {
+      const deltaX = Math.abs(event.clientX - startPosition.current.x);
+      const deltaY = Math.abs(event.clientY - startPosition.current.y);
+
+      if (deltaX > 5 || deltaY > 5) {
+        isDragged.current = true;
+      }
+    }
+    startPosition.current = null;
+  };
+
+  const handleClick = (redirectUrl: string) => {
+    if (!isDragged.current) {
+      window.open(redirectUrl, '_blank');
+    }
+  };
+
   return (
     <div className={className}>
-      <Slider {...settings} className={'h-full w-full'}>
+      <Slider {...settings} className="h-full w-full">
         {banners.map((banner, index) => (
-          <div key={index} className={'cursor-pointer'}>
+          <div key={index} className="cursor-pointer">
             <img
-              className={
-                'box-sizing:border-box h-full w-full rounded-md border-[1.5px] border-c_border_gray'
-              }
+              className="box-sizing:border-box h-full w-full rounded-md border-[1.5px] border-c_border_gray"
               src={banner.imageUrl}
               alt={`Banner ${index}`}
-              onClick={() => window.open(banner.redirectUrl, '_blank')}
+              onMouseDown={handleMouseDown}
+              onMouseUp={handleMouseUp}
+              onClick={() => handleClick(banner.redirectUrl)}
             />
           </div>
         ))}