From 8e621d8a5e68cffce5ad0982e7dd24edc4bba201 Mon Sep 17 00:00:00 2001
From: dladncks1217 <dlaxodud1217@gmail.com>
Date: Mon, 8 Jul 2024 22:00:56 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20move=EB=B2=84=ED=8A=BC=20throttle=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Carousel/Move.tsx |  5 +++--
 src/hooks/useThrottleCallback.ts | 26 ++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/useThrottleCallback.ts

diff --git a/src/components/Carousel/Move.tsx b/src/components/Carousel/Move.tsx
index 1c27647..f1c7688 100644
--- a/src/components/Carousel/Move.tsx
+++ b/src/components/Carousel/Move.tsx
@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, MouseEvent, useContext } from 'react';
 import { CarouselContext } from './Carousel';
+import useThrottleCallback from '@/hooks/useThrottleCallback';
 
 export interface MoveProps extends ComponentPropsWithoutRef<'button'> {
   direction: 'prev' | 'next';
@@ -13,11 +14,11 @@ const Move = ({ direction = 'next', addFunc, children, ...attributes }: MoveProp
 
   const { handleMovePrev, handleMoveNext } = context;
 
-  const handleMove = (e: MouseEvent<HTMLButtonElement>) => {
+  const handleMove = useThrottleCallback((e: MouseEvent<HTMLButtonElement>) => {
     if (addFunc) addFunc();
     if (direction === 'prev') return handleMovePrev(e);
     return handleMoveNext(e);
-  };
+  }, 500);
 
   return (
     <button onClick={handleMove} {...attributes}>
diff --git a/src/hooks/useThrottleCallback.ts b/src/hooks/useThrottleCallback.ts
new file mode 100644
index 0000000..8daa8b0
--- /dev/null
+++ b/src/hooks/useThrottleCallback.ts
@@ -0,0 +1,26 @@
+import { useRef } from 'react';
+
+function useThrottleCallback<Parameter extends any[]>(callback: (...rest: Parameter) => void, delay: number) {
+  const timerRef = useRef<NodeJS.Timeout>();
+  const restRef = useRef<Parameter>();
+
+  const timeoutCallback = () => {
+    restRef.current && callback(...restRef.current);
+
+    if (timerRef.current) {
+      timerRef.current = undefined;
+    }
+  };
+
+  return (...rest: Parameter): void => {
+    restRef.current = rest;
+
+    if (timerRef.current) return;
+
+    callback(...rest);
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(timeoutCallback, delay);
+  };
+}
+
+export default useThrottleCallback;