diff --git a/src/pages/business/SiPage.jsx b/src/pages/business/SiPage.jsx index 713af5f..691d222 100644 --- a/src/pages/business/SiPage.jsx +++ b/src/pages/business/SiPage.jsx @@ -171,26 +171,16 @@ function SiPage() { const sectionRef = useRef(null); const sliderRef = useRef(null); const cardRef = useRef(null); + const timerRef = useRef(null); + const dragStartX = useRef(null); const dragStartCurrent = useRef(null); const inView = useInView(sectionRef, { once: true, margin: "-100px" }); const [current, setCurrent] = useState(0); - const [paused, setPaused] = useState(false); const total = PROJECTS.length; const [cardWidth, setCardWidth] = useState(0); - useEffect(() => { - const update = () => { - if (cardRef.current) { - setCardWidth(cardRef.current.offsetWidth); - } - }; - update(); - window.addEventListener("resize", update); - return () => window.removeEventListener("resize", update); - }, []); - const scrollToCard = (index) => { if (window.innerWidth <= 768 && sliderRef.current && cardRef.current) { const cardW = cardRef.current.offsetWidth; @@ -201,31 +191,35 @@ function SiPage() { }); } }; + + const resetTimer = () => { + if (timerRef.current) clearInterval(timerRef.current); + timerRef.current = setInterval(() => { + setCurrent((c) => { + const nextIdx = (c + 1) % total; + scrollToCard(nextIdx); + return nextIdx; + }); + }, AUTO_DELAY); + }; + const prev = () => { + resetTimer(); setCurrent((c) => { const nextIdx = c <= 0 ? total - 1 : c - 1; scrollToCard(nextIdx); return nextIdx; }); }; + const next = () => { + resetTimer(); setCurrent((c) => { const nextIdx = c >= total - 1 ? 0 : c + 1; scrollToCard(nextIdx); return nextIdx; }); }; - useEffect(() => { - if (paused) return; - const timer = setInterval(() => { - setCurrent((c) => { - const nextIdx = (c + 1) % total; - scrollToCard(nextIdx); - return nextIdx; - }); - }, AUTO_DELAY); - return () => clearInterval(timer); - }, [paused, total]); const handleDragStart = (e) => { dragStartX.current = @@ -242,6 +236,23 @@ function SiPage() { else if (diff < -50) prev(); dragStartX.current = null; }; + + useEffect(() => { + const update = () => { + if (cardRef.current) { + setCardWidth(cardRef.current.offsetWidth); + } + }; + update(); + window.addEventListener("resize", update); + return () => window.removeEventListener("resize", update); + }, []); + + useEffect(() => { + resetTimer(); + return () => clearInterval(timerRef.current); + }, [total]); + const BUSINESS_NAV = [ { label: "System Integration", to: "/business/si" }, { label: "R&D", to: "/business/rnd" },