feat(react): useInterval startInterval/stopInterval 함수 추가

Co-authored-by: Minsoo Kim <[email protected]>
Co-authored-by: Sangminnn <[email protected]>

Author: 3 people

.changeset/strong-bulldogs-marry.md

@@ -0,0 +1,5 @@
+---
+'@modern-kit/react': patch
+---
+
+feat(react): useInterval startInterval/stopInterval 함수 추가 - @ssi02014

docs/docs/react/hooks/useInterval.mdx

@@ -31,7 +31,11 @@ type IntervalOptions =
 const useInterval: (
   callback: SetIntervalParameters[0],
   options: IntervalOptions
-) => void;
+) => {
+  isActing: boolean;
+  startInterval: () => void;
+  stopInterval: () => void;
+};
 ```
 
 ## Usage
@@ -40,16 +44,18 @@ import { useInterval } from '@modern-kit/react';
 
 const Example = () => {
   const [number, setNumber] = useState(0);
-  const [isToggle, setIsToggle] = useState(true);
 
-  useInterval(() => setNumber(number + 1), { delay: 1000, enabled: isToggle });
+  const { isActing, stopInterval, startInterval } = useInterval(
+    () => setNumber(number + 1),
+    { delay: 1000, enabled: false } // 자동 실행 X
+  );
 
   return (
     <div>
-      <div>{number}</div>
-      <button onClick={() => setIsToggle(!isToggle)}>
-        {isToggle ? '멈추기' : '시작하기'}
-      </button>
+      <p>{number}</p>
+      <p>{`isActing: ${isActing}`}</p>
+      <button onClick={startInterval}>시작하기</button>
+      <button onClick={stopInterval}>멈추기</button>
     </div>
   );
 };
@@ -58,13 +64,19 @@ const Example = () => {
 
 export const Example = () => {
   const [number, setNumber] = useState(0);
-  const [isToggle, setIsToggle] = useState(true);
-  useInterval(() => setNumber(number + 1), { delay: 1000, enabled: isToggle });
+    const { isActing, stopInterval, startInterval } = useInterval(
+    () => setNumber(number + 1),
+    { delay: 1000, enabled: false }
+  );
   return (
     <div>
-      <div>{number}</div>
-      <button onClick={() => setIsToggle(!isToggle)}>
-        {isToggle ? '멈추기' : '시작하기'}
+      <p>{number}</p>
+      <p>{`isActing: ${isActing}`}</p>
+      <button onClick={startInterval}>
+        시작하기
+      </button>
+      <button onClick={stopInterval}>
+        멈추기
       </button>
     </div>
   );

packages/react/src/hooks/useInterval/index.ts

@@ -1,6 +1,7 @@
+import { useCallback, useEffect, useState } from 'react';
 import { isNumber } from '@modern-kit/utils';
 import { usePreservedCallback } from '../usePreservedCallback';
-import { useEffect } from 'react';
+import { usePreservedState } from '../usePreservedState';
 
 type SetIntervalParameters = Parameters<typeof setInterval>;
 
@@ -12,11 +13,30 @@ export const useInterval = (
   callback: SetIntervalParameters[0],
   options: IntervalOptions
 ) => {
-  const delay = isNumber(options) ? options : options.delay;
-  const enabled = isNumber(options) ? true : options?.enabled ?? true;
-
+  const preservedOptions = usePreservedState(options);
   const callbackAction = usePreservedCallback(callback);
 
+  const isNumberOptions = isNumber(preservedOptions);
+  const delay = isNumberOptions ? preservedOptions : preservedOptions.delay;
+
+  const [enabled, setEnabled] = useState(() =>
+    isNumberOptions ? true : preservedOptions?.enabled ?? true
+  );
+
+  const startInterval = useCallback(() => {
+    setEnabled(true);
+  }, []);
+
+  const stopInterval = useCallback(() => {
+    setEnabled(false);
+  }, []);
+
+  useEffect(() => {
+    if (!isNumberOptions) {
+      setEnabled(preservedOptions?.enabled ?? true);
+    }
+  }, [isNumberOptions, preservedOptions]);
+
   useEffect(() => {
     if (delay == null) return;
 
@@ -30,4 +50,6 @@ export const useInterval = (
 
     return () => clearInterval(intervalId);
   }, [callbackAction, enabled, delay]);
+
+  return { isActing: enabled, start: startInterval, stop: stopInterval };
 };

packages/react/src/hooks/useInterval/useInterval.spec.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
 import { useInterval } from '.';
 
 const delayTime = 300;
@@ -60,4 +60,28 @@ describe('useInterval', () => {
     vi.advanceTimersByTime(delayTime);
     expect(mockFn).not.toBeCalled();
   });
+
+  it('should correctly start and stop the interval, calling the callback at the correct times', async () => {
+    const { result } = renderHook(() =>
+      useInterval(mockFn, { delay: delayTime, enabled: false })
+    );
+
+    const startInterval = result.current.start;
+    const stopInterval = result.current.stop;
+
+    vi.advanceTimersByTime(delayTime);
+    expect(mockFn).not.toBeCalled();
+
+    act(() => startInterval());
+
+    vi.advanceTimersByTime(delayTime);
+    expect(mockFn).toBeCalledTimes(1);
+    expect(result.current.isActing).toBeTruthy();
+
+    act(() => stopInterval());
+
+    vi.advanceTimersByTime(delayTime);
+    expect(mockFn).toBeCalledTimes(1);
+    expect(result.current.isActing).toBeFalsy();
+  });
 });