diff --git a/frontend/src/components/Banner/BannerSlider.tsx b/frontend/src/components/Banner/BannerSlider.tsx index a0bef5b0..4dd691d0 100644 --- a/frontend/src/components/Banner/BannerSlider.tsx +++ b/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 = ({ interval = 3000, }) => { const [banners, setBanners] = useState([]); + 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 = ({ 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 (
- + {banners.map((banner, index) => ( -
+
{`Banner window.open(banner.redirectUrl, '_blank')} + onMouseDown={handleMouseDown} + onMouseUp={handleMouseUp} + onClick={() => handleClick(banner.redirectUrl)} />
))}