fix: useDebouncedCallback to support generic parameter type for onChange

packages/core/src/hooks/useDebouncedCallback/ko/useDebouncedCallback.md

@@ -18,7 +18,7 @@ function useDebouncedCallback(options: Object): Function;
   :nested="[
     {
       name: 'options.onChange',
-      type: 'Function',
+      type: '(newValue: T) => void',
       required: true,
       description: '디바운스할 콜백 함수예요.',
     },
@@ -52,7 +52,7 @@ function useDebouncedCallback(options: Object): Function;
 
 <Interface
   name=""
-  type="Function"
+  type="(newValue: T) => void"
   description="콜백 호출을 지연시키는 디바운스된 함수예요."
 />
 

packages/core/src/hooks/useDebouncedCallback/useDebouncedCallback.md

@@ -18,7 +18,7 @@ function useDebouncedCallback(options: Object): Function;
   :nested="[
     {
       name: 'options.onChange',
-      type: 'Function',
+      type: '(newValue: T) => void',
       required: true,
       description: 'The callback function to debounce.',
     },
@@ -52,7 +52,7 @@ function useDebouncedCallback(options: Object): Function;
 
 <Interface
   name=""
-  type="Function"
+  type="(newValue: T) => void"
   description="debounced function that delays invoking the callback."
 />
 

packages/core/src/hooks/useDebouncedCallback/useDebouncedCallback.spec.ts

@@ -20,26 +20,26 @@ describe('useDebouncedCallback', () => {
     const onChange = vi.fn();
     const { result } = renderHookSSR(() => useDebouncedCallback({ onChange, timeThreshold: 100 }));
 
-    result.current(true);
+    result.current('hi');
     expect(onChange).not.toBeCalled();
 
-    result.current(true);
+    result.current('hi');
     vi.advanceTimersByTime(50);
     expect(onChange).not.toBeCalled();
 
-    result.current(false);
+    result.current(null);
     vi.advanceTimersByTime(50);
     expect(onChange).toBeCalledTimes(1);
-    expect(onChange).toBeCalledWith(true);
+    expect(onChange).toBeCalledWith('hi');
 
-    result.current(false);
+    result.current(null);
     vi.advanceTimersByTime(50);
     expect(onChange).toBeCalledTimes(1);
-    expect(onChange).toBeCalledWith(true);
+    expect(onChange).toBeCalledWith('hi');
 
     vi.advanceTimersByTime(50);
     expect(onChange).toBeCalledTimes(2);
-    expect(onChange).toBeCalledWith(false);
+    expect(onChange).toBeCalledWith(null);
   });
 
   it('should handle leading edge', () => {

packages/core/src/hooks/useDebouncedCallback/useDebouncedCallback.ts

@@ -16,12 +16,12 @@ type DebounceOptions = {
  * Note that if both 'leading' and 'trailing' are set, the function will be called at both the start and end of the delay period. However, it must be called at least twice within debounceMs interval for this to happen, since one debounced function call cannot trigger the function twice.
  *
  * @param {Object} options - The options object.
- * @param {Function} options.onChange - The callback function to debounce.
+ * @param {(newValue: T) => void} options.onChange - The callback function to debounce.
  * @param {number} options.timeThreshold - The number of milliseconds to delay the function execution.
  * @param {boolean} [options.leading=false] - If `true`, the function is called at the start of the sequence.
  * @param {boolean} [options.trailing=true] - If `true`, the function is called at the end of the sequence.
  *
- * @returns {Function} A debounced function that delays invoking the callback.
+ * @returns {(newValue: T) => void} A debounced function that delays invoking the callback.
  *
  * @example
  * function SearchInput() {
@@ -30,17 +30,20 @@ type DebounceOptions = {
  *   return <input type="text" onChange={(e) => debouncedSetQuery(e.target.value)} />;
  * }
  */
-export function useDebouncedCallback({
+export function useDebouncedCallback<T>({
   onChange,
   timeThreshold,
   leading = false,
   trailing = true,
 }: DebounceOptions & {
-  onChange: (newValue: boolean) => void;
+  onChange: (newValue: T) => void;
   timeThreshold: number;
 }) {
   const handleChange = usePreservedCallback(onChange);
-  const ref = useRef({ value: false, clearPreviousDebounce: () => {} });
+  const ref = useRef<{ value: T | null; clearPreviousDebounce: () => void }>({
+    value: null,
+    clearPreviousDebounce: () => {},
+  });
 
   useEffect(() => {
     const current = ref.current;
@@ -63,7 +66,7 @@ export function useDebouncedCallback({
   }, [leading, trailing]);
 
   return useCallback(
-    (nextValue: boolean) => {
+    (nextValue: T) => {
       if (nextValue === ref.current.value) {
         return;
       }

packages/core/src/hooks/useImpressionRef/useImpressionRef.ts

@@ -56,10 +56,23 @@ export function useImpressionRef<Element extends HTMLElement>({
   const impressionEndHandler = usePreservedCallback(onImpressionEnd);
 
   const isIntersectingRef = useRef(false);
+  const hasImpressedRef = useRef(false);
+
   const impressionEventHandler = useDebouncedCallback({
     timeThreshold,
-    onChange: impressed => {
-      (impressed ? impressionStartHandler : impressionEndHandler)();
+    onChange: (impressed: boolean) => {
+      if (impressed) {
+        impressionStartHandler();
+        hasImpressedRef.current = true;
+        return;
+      }
+
+      if (!hasImpressedRef.current) {
+        return;
+      }
+
+      impressionEndHandler();
+      hasImpressedRef.current = false;
     },
     leading: true,
   });