From 6d2dab613cfa67721652c6c30dabb6f3819aa23b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?siyeon00=28=EC=9D=B4=EC=8B=9C=EC=97=B0=29?=
 <siyeon00@palnet.co.kr>
Date: Thu, 4 Jun 2026 14:36:34 +0900
Subject: [PATCH] =?UTF-8?q?fix=20:=20=EC=8B=9C=EA=B0=84=20=EA=B2=B9?=
 =?UTF-8?q?=EC=B9=A8=20=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/business/SiPage.jsx | 57 +++++++++++++++++++++--------------
 1 file changed, 34 insertions(+), 23 deletions(-)

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" },