fix : 시간 겹침 이슈 해결

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 prev = () => {
+
+  const resetTimer = () => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    timerRef.current = setInterval(() => {
       setCurrent((c) => {
-      const nextIdx = c <= 0 ? total - 1 : c - 1;
+        const nextIdx = (c + 1) % total;
         scrollToCard(nextIdx);
         return nextIdx;
       });
+    }, AUTO_DELAY);
   };
-  const next = () => {
+
+  const prev = () => {
+    resetTimer();
     setCurrent((c) => {
-      const nextIdx = c >= total - 1 ? 0 : c + 1;
+      const nextIdx = c <= 0 ? total - 1 : c - 1;
       scrollToCard(nextIdx);
       return nextIdx;
     });
   };
-  useEffect(() => {
-    if (paused) return;
-    const timer = setInterval(() => {
+
+  const next = () => {
+    resetTimer();
     setCurrent((c) => {
-        const nextIdx = (c + 1) % total;
+      const nextIdx = c >= total - 1 ? 0 : c + 1;
       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" },