feat: move버튼 throttle 적용

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

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;