From e7f7ecbe887abe030855850209f4420b7d828f70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=90=E1=85=A2=E1=84=92=E1=85=AE?=
 =?UTF-8?q?=E1=86=AB?= <rhymint@gmail.com>
Date: Thu, 24 Oct 2024 16:14:47 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20requestAnimationFrame=EC=9D=84=20?=
 =?UTF-8?q?=EC=9D=B4=EC=9A=A9=ED=95=B4=20=EC=95=A0=EB=8B=88=EB=A9=94?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=B5=9C=EC=A0=81=ED=99=94=20=EC=A7=84?=
 =?UTF-8?q?=ED=96=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/hooks/useMainPageYScroll.ts | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/client/src/hooks/useMainPageYScroll.ts b/client/src/hooks/useMainPageYScroll.ts
index 39022941..6844f038 100644
--- a/client/src/hooks/useMainPageYScroll.ts
+++ b/client/src/hooks/useMainPageYScroll.ts
@@ -4,6 +4,14 @@ const useMainPageYScroll = () => {
   const featureSectionRef = useRef<HTMLDivElement>(null);
   const threshold = window.innerHeight * 2;
   const translateX = useRef(0);
+  const animationFrameId = useRef<number | null>(null);
+
+  const updateTransform = () => {
+    const newTransform = `translateX(calc(200vw - ${translateX.current}px))`;
+    if (featureSectionRef.current) {
+      featureSectionRef.current.style.transform = newTransform;
+    }
+  };
 
   useEffect(() => {
     const handleScroll = () => {
@@ -28,14 +36,22 @@ const useMainPageYScroll = () => {
           featureSectionRef.current.style.position = 'static';
           featureSectionRef.current.style.top = '';
         }
-        const newTransform = `translateX(calc(200vw - ${translateX.current}px))`;
-        featureSectionRef.current.style.transform = newTransform;
+
+        if (animationFrameId.current) {
+          cancelAnimationFrame(animationFrameId.current);
+        }
+        animationFrameId.current = requestAnimationFrame(updateTransform);
       }
     };
 
     window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [featureSectionRef, window.innerHeight, window.innerWidth, window.scrollY]);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (animationFrameId.current) {
+        cancelAnimationFrame(animationFrameId.current);
+      }
+    };
+  }, [featureSectionRef]);
 
   return {featureSectionRef};
 };