From 7f29a05f3d9e3e6c65f25fd6c66179d1bd4aecfd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 24 Apr 2025 07:24:27 +0000
Subject: [PATCH 1/2] Generate docs for useCounter

---
 src/docs/en/why-react-simplikit-matters.md |  2 +-
 src/docs/ko/why-react-simplikit-matters.md |  8 +-
 src/hooks/useCounter/ko/useCounter.md      | 99 +++++++---------------
 src/hooks/useCounter/useCounter.md         | 91 ++++++--------------
 4 files changed, 65 insertions(+), 135 deletions(-)

diff --git a/src/docs/en/why-react-simplikit-matters.md b/src/docs/en/why-react-simplikit-matters.md
index 972fbec3..1efc52fe 100644
--- a/src/docs/en/why-react-simplikit-matters.md
+++ b/src/docs/en/why-react-simplikit-matters.md
@@ -202,4 +202,4 @@ Compared to `react-use`, `react-simplikit` has up to about 89% smaller size:
 | Unpacked Size                                 | [237 kB](https://www.npmjs.com/package/react-simplikit)           | [454 kB](https://www.npmjs.com/package/react-use)            | -47.8%     |
 | Minified Size                                 | [8.7 kB](https://bundlephobia.com/package/react-simplikit@0.0.29) | [78.2 kB](https://bundlephobia.com/package/react-use@17.6.0) | -88.9%     |
 | Gzipped Size                                  | [2.9 kB](https://bundlephobia.com/package/react-simplikit@0.0.29) | [22 kB](https://bundlephobia.com/package/react-use@17.6.0)   | -86.9%     |
-| Average Size per Function<br/>(Minified Size) | 318.2 byte                                                          | 696.3 byte                                                     | -54.3%     |
+| Average Size per Function<br/>(Minified Size) | 318.2 byte                                                        | 696.3 byte                                                   | -54.3%     |
diff --git a/src/docs/ko/why-react-simplikit-matters.md b/src/docs/ko/why-react-simplikit-matters.md
index 3819f397..235a2e84 100644
--- a/src/docs/ko/why-react-simplikit-matters.md
+++ b/src/docs/ko/why-react-simplikit-matters.md
@@ -197,9 +197,9 @@ function AutoCompleteInput() {
 
 `react-simplikit`은 `react-use`에 대비하여, 아래와 같이 최대 약 89% 작은 크기를 가져요.
 
-|                                            | react-simplikit                                                  | react-use                                                    | 차이   |
-| ------------------------------------------ | ---------------------------------------------------------------- | ------------------------------------------------------------ | ------ |
-| Unpacked Size                              | [237 kB](https://www.npmjs.com/package/react-simplikit)          | [454 kB](https://www.npmjs.com/package/react-use)            | -47.8% |
+|                                            | react-simplikit                                                   | react-use                                                    | 차이   |
+| ------------------------------------------ | ----------------------------------------------------------------- | ------------------------------------------------------------ | ------ |
+| Unpacked Size                              | [237 kB](https://www.npmjs.com/package/react-simplikit)           | [454 kB](https://www.npmjs.com/package/react-use)            | -47.8% |
 | Minified Size                              | [8.7 kB](https://bundlephobia.com/package/react-simplikit@0.0.29) | [78.2 kB](https://bundlephobia.com/package/react-use@17.6.0) | -88.9% |
 | Gzipped Size                               | [2.9 kB](https://bundlephobia.com/package/react-simplikit@0.0.29) | [22 kB](https://bundlephobia.com/package/react-use@17.6.0)   | -86.9% |
-| 평균 함수 당 크기<br/>(Minified Size 기준) | 318.2 byte                                                         | 696.3 byte                                                     | -54.3% |
+| 평균 함수 당 크기<br/>(Minified Size 기준) | 318.2 byte                                                        | 696.3 byte                                                   | -54.3% |
diff --git a/src/hooks/useCounter/ko/useCounter.md b/src/hooks/useCounter/ko/useCounter.md
index 71b15d0b..97ae937c 100644
--- a/src/hooks/useCounter/ko/useCounter.md
+++ b/src/hooks/useCounter/ko/useCounter.md
@@ -1,55 +1,49 @@
 # useCounter
 
-`useCounter`는 증가, 감소, 초기화 기능을 갖춘 숫자형 카운터 상태를 관리하는 리액트 훅이에요. 선택적으로 최소값과 최대값을 제공하여 카운터의 범위를 제한할 수 있어요.
+`useCounter`는 숫자 카운터 상태를 증가, 감소, 초기화 기능과 함께 관리하는 리액트 훅이에요. 선택적으로 최소값과 최대값을 제공하여 카운터의 범위를 제한할 수 있어요.
 
-## 인터페이스
+## Interface
 
 ```ts
-function useCounter(options?: UseCounterOptions): UseCounterReturn;
-
-type UseCounterOptions = {
-  initialValue?: number;
-  min?: number;
-  max?: number;
-  step?: number;
-};
-ㄴ
-type UseCounterReturn = {
-  count: number;
-  increment: () => void;
-  decrement: () => void;
-  reset: () => void;
-  setCount: (value: number | ((prev: number) => number)) => void;
-};
+function useCounter(options: UseCounterOptions): UseCounterReturn;
 ```
 
 ### 파라미터
 
 <Interface
+  required
   name="options"
   type="UseCounterOptions"
-  description="카운터의 선택적 설정이에요."
+  description="카운터를 위한 옵션이에요."
   :nested="[
     {
-      name: 'initialValue',
+      name: 'options.initialValue',
       type: 'number',
-      description: '카운터의 초기값. 기본값은 0이에요.',
+      required: false,
+      defaultValue: '0',
+      description: '카운터의 초기값이에요. 기본값은 0이에요.',
     },
     {
-      name: 'min',
+      name: 'options.min',
       type: 'number',
-      description: '카운터가 도달할 수 있는 최소값. 제공되지 않으면 하한이 없어요.',
+      required: false,
+      description:
+        '카운터가 도달할 수 있는 최소값이에요. 제공되지 않으면 하한선이 없어요.',
     },
     {
-      name: 'max',
+      name: 'options.max',
       type: 'number',
-      description: '카운터가 도달할 수 있는 최대값. 제공되지 않으면 상한이 없어요.',
+      required: false,
+      description:
+        '카운터가 도달할 수 있는 최대값이에요. 제공되지 않으면 상한선이 없어요.',
     },
     {
-      name: 'step',
+      name: 'options.step',
       type: 'number',
-      description: '증가 또는 감소할 값. 기본값은 1이에요.',
-    }
+      required: false,
+      defaultValue: '1',
+      description: '증가 또는 감소할 값이에요. 기본값은 1이에요.',
+    },
   ]"
 />
 
@@ -58,34 +52,7 @@ type UseCounterReturn = {
 <Interface
   name=""
   type="UseCounterReturn"
-  description="카운트 값과 제어 함수를 포함하는 객체에요."
-  :nested="[
-    {
-      name: 'count',
-      type: 'number',
-      description: '현재 카운트 값이에요.',
-    },
-    {
-      name: 'increment',
-      type: '() => void',
-      description: '단계 크기만큼 카운터 증가해요.',
-    },
-    {
-      name: 'decrement',
-      type: '() => void',
-      description: '단계 크기만큼 카운터 감소해요.',
-    },
-    {
-      name: 'reset',
-      type: '() => void',
-      description: '카운터를 초기값으로 재설정해요.',
-    },
-    {
-      name: 'setCount',
-      type: '(value: number | ((prev: number) => number)) => void',
-      description: '카운터를 제약 조건 내에서 특정 값으로 설정해요.',
-    }
-  ]"
+  description="카운트 값과 제어 함수들이 있는 객체에요."
 />
 
 ## 예시
@@ -103,18 +70,16 @@ function ShoppingCart() {
   return (
     <div>
       <span>수량: {count}</span>
-      <button type="button" onClick={decrement}>-</button>
-      <button type="button" onClick={increment}>+</button>
-      <button type="button" onClick={reset}>초기화</button>
+      <button type="button" onClick={decrement}>
+        -
+      </button>
+      <button type="button" onClick={increment}>
+        +
+      </button>
+      <button type="button" onClick={reset}>
+        초기화
+      </button>
     </div>
   );
 }
 ```
-
-## 제약 조건
-
-이 훅은 카운터가 지정된 범위 내에서 유지되도록 자동으로 보장해요:
-
-- 값이 `max`보다 커지면 자동으로 `max` 값으로 제한돼요.
-- 값이 `min`보다 작아지면 자동으로 `min` 값으로 제한돼요.
-- `setCount`를 사용할 때 범위를 벗어나는 값은 자동으로 가장 가까운 경계값으로 조정돼요.
diff --git a/src/hooks/useCounter/useCounter.md b/src/hooks/useCounter/useCounter.md
index fa5ed032..4d648bbd 100644
--- a/src/hooks/useCounter/useCounter.md
+++ b/src/hooks/useCounter/useCounter.md
@@ -5,51 +5,45 @@
 ## Interface
 
 ```ts
-function useCounter(options?: UseCounterOptions): UseCounterReturn;
-
-type UseCounterOptions = {
-  initialValue?: number;
-  min?: number;
-  max?: number;
-  step?: number;
-};
-
-type UseCounterReturn = {
-  count: number;
-  increment: () => void;
-  decrement: () => void;
-  reset: () => void;
-  setCount: (value: number | ((prev: number) => number)) => void;
-};
+function useCounter(options: UseCounterOptions): UseCounterReturn;
 ```
 
 ### Parameters
 
 <Interface
+  required
   name="options"
   type="UseCounterOptions"
-  description="Optional configuration for the counter."
+  description="The options for the counter."
   :nested="[
     {
-      name: 'initialValue',
+      name: 'options.initialValue',
       type: 'number',
+      required: false,
+      defaultValue: '0',
       description: 'Initial value for the counter. Defaults to 0.',
     },
     {
-      name: 'min',
+      name: 'options.min',
       type: 'number',
-      description: 'Minimum value the counter can reach. If not provided, there is no lower limit.',
+      required: false,
+      description:
+        'Minimum value the counter can reach. If not provided, there is no lower limit.',
     },
     {
-      name: 'max',
+      name: 'options.max',
       type: 'number',
-      description: 'Maximum value the counter can reach. If not provided, there is no upper limit.',
+      required: false,
+      description:
+        'Maximum value the counter can reach. If not provided, there is no upper limit.',
     },
     {
-      name: 'step',
+      name: 'options.step',
       type: 'number',
+      required: false,
+      defaultValue: '1',
       description: 'Value to increment or decrement by. Defaults to 1.',
-    }
+    },
   ]"
 />
 
@@ -58,34 +52,7 @@ type UseCounterReturn = {
 <Interface
   name=""
   type="UseCounterReturn"
-  description="An object with count value and control functions."
-  :nested="[
-    {
-      name: 'count',
-      type: 'number',
-      description: 'Current count value.',
-    },
-    {
-      name: 'increment',
-      type: '() => void',
-      description: 'Increment the counter by the step amount.',
-    },
-    {
-      name: 'decrement',
-      type: '() => void',
-      description: 'Decrement the counter by the step amount.',
-    },
-    {
-      name: 'reset',
-      type: '() => void',
-      description: 'Reset the counter to its initial value.',
-    },
-    {
-      name: 'setCount',
-      type: '(value: number | ((prev: number) => number)) => void',
-      description: 'Set the counter to a specific value within constraints.',
-    }
-  ]"
+  description="object with count value and control functions."
 />
 
 ## Example
@@ -103,18 +70,16 @@ function ShoppingCart() {
   return (
     <div>
       <span>Quantity: {count}</span>
-      <button type="button" onClick={decrement}>-</button>
-      <button type="button" onClick={increment}>+</button>
-      <button type="button" onClick={reset}>Reset</button>
+      <button type="button" onClick={decrement}>
+        -
+      </button>
+      <button type="button" onClick={increment}>
+        +
+      </button>
+      <button type="button" onClick={reset}>
+        Reset
+      </button>
     </div>
   );
 }
 ```
-
-## Constraints
-
-The hook automatically ensures that the counter stays within the specified bounds:
-
-- When incrementing beyond `max`, the value will stay at `max`
-- When decrementing below `min`, the value will stay at `min`
-- When using `setCount`, any value outside the bounds will be adjusted to the nearest boundary

From c38d592cadbe91c365ae19bbe29e2dd14f71578c Mon Sep 17 00:00:00 2001
From: seungro <seungro@toss.im>
Date: Thu, 24 Apr 2025 16:33:20 +0900
Subject: [PATCH 2/2] update jsdoc

---
 src/hooks/useCounter/ko/useCounter.md | 45 +++++++++++++++++++++++----
 src/hooks/useCounter/useCounter.md    | 45 +++++++++++++++++++++------
 src/hooks/useCounter/useCounter.ts    |  5 +++
 3 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/src/hooks/useCounter/ko/useCounter.md b/src/hooks/useCounter/ko/useCounter.md
index 97ae937c..b6418f32 100644
--- a/src/hooks/useCounter/ko/useCounter.md
+++ b/src/hooks/useCounter/ko/useCounter.md
@@ -1,6 +1,6 @@
 # useCounter
 
-`useCounter`는 숫자 카운터 상태를 증가, 감소, 초기화 기능과 함께 관리하는 리액트 훅이에요. 선택적으로 최소값과 최대값을 제공하여 카운터의 범위를 제한할 수 있어요.
+`useCounter`는 숫자 카운터 상태를 증가, 감소, 초기화 기능과 함께 관리하는 리액트 훅이에요. 선택적으로, 카운터의 범위를 제한하기 위해 최소 및 최대값을 제공할 수 있어요.
 
 ## Interface
 
@@ -14,7 +14,7 @@ function useCounter(options: UseCounterOptions): UseCounterReturn;
   required
   name="options"
   type="UseCounterOptions"
-  description="카운터를 위한 옵션이에요."
+  description="카운터의 옵션이에요."
   :nested="[
     {
       name: 'options.initialValue',
@@ -42,7 +42,7 @@ function useCounter(options: UseCounterOptions): UseCounterReturn;
       type: 'number',
       required: false,
       defaultValue: '1',
-      description: '증가 또는 감소할 값이에요. 기본값은 1이에요.',
+      description: '증가 또는 감소의 단위 값이에요. 기본값은 1이에요.',
     },
   ]"
 />
@@ -52,7 +52,40 @@ function useCounter(options: UseCounterOptions): UseCounterReturn;
 <Interface
   name=""
   type="UseCounterReturn"
-  description="카운트 값과 제어 함수들이 있는 객체에요."
+  description="카운트 값과 제어 함수들이 포함된 객체에요."
+  :nested="[
+    {
+      name: 'count',
+      type: 'number',
+      required: false,
+      description: '현재 카운트 값이에요.',
+    },
+    {
+      name: 'increment',
+      type: '() => void',
+      required: false,
+      description: '카운트를 증가시키는 함수에요.',
+    },
+    {
+      name: 'decrement',
+      type: '() => void',
+      required: false,
+      description: '카운트를 감소시키는 함수에요.',
+    },
+    {
+      name: 'reset',
+      type: '() => void',
+      required: false,
+      description: '카운트를 초기 값으로 리셋하는 함수에요.',
+    },
+    {
+      name: 'setCount',
+      type: '(value: number | ((prev: number) => number)) => void',
+      required: false,
+      description:
+        '카운트를 특정 값으로 설정하거나 새로운 값을 반환하는 함수에요.',
+    },
+  ]"
 />
 
 ## 예시
@@ -69,7 +102,7 @@ function ShoppingCart() {
 
   return (
     <div>
-      <span>수량: {count}</span>
+      <span>Quantity: {count}</span>
       <button type="button" onClick={decrement}>
         -
       </button>
@@ -77,7 +110,7 @@ function ShoppingCart() {
         +
       </button>
       <button type="button" onClick={reset}>
-        초기화
+        Reset
       </button>
     </div>
   );
diff --git a/src/hooks/useCounter/useCounter.md b/src/hooks/useCounter/useCounter.md
index 4d648bbd..a24498e9 100644
--- a/src/hooks/useCounter/useCounter.md
+++ b/src/hooks/useCounter/useCounter.md
@@ -53,6 +53,39 @@ function useCounter(options: UseCounterOptions): UseCounterReturn;
   name=""
   type="UseCounterReturn"
   description="object with count value and control functions."
+  :nested="[
+    {
+      name: 'count',
+      type: 'number',
+      required: false,
+      description: 'The current count value.',
+    },
+    {
+      name: 'increment',
+      type: '() => void',
+      required: false,
+      description: 'A function to increment the count.',
+    },
+    {
+      name: 'decrement',
+      type: '() => void',
+      required: false,
+      description: 'A function to decrement the count.',
+    },
+    {
+      name: 'reset',
+      type: '() => void',
+      required: false,
+      description: 'A function to reset the count to the initial value.',
+    },
+    {
+      name: 'setCount',
+      type: '(value: number | ((prev: number) => number)) => void',
+      required: false,
+      description:
+        'A function to set the count to a specific value or a function that returns a new value.',
+    },
+  ]"
 />
 
 ## Example
@@ -70,15 +103,9 @@ function ShoppingCart() {
   return (
     <div>
       <span>Quantity: {count}</span>
-      <button type="button" onClick={decrement}>
-        -
-      </button>
-      <button type="button" onClick={increment}>
-        +
-      </button>
-      <button type="button" onClick={reset}>
-        Reset
-      </button>
+      <button type="button" onClick={decrement}>-</button>
+      <button type="button" onClick={increment}>+</button>
+      <button type="button" onClick={reset}>Reset</button>
     </div>
   );
 }
diff --git a/src/hooks/useCounter/useCounter.ts b/src/hooks/useCounter/useCounter.ts
index 4a132808..f0b216fb 100644
--- a/src/hooks/useCounter/useCounter.ts
+++ b/src/hooks/useCounter/useCounter.ts
@@ -27,6 +27,11 @@ type UseCounterReturn = {
  * @param {number} [options.step=1] - Value to increment or decrement by. Defaults to 1.
  *
  * @returns {UseCounterReturn} An object with count value and control functions.
+ * - count `number` - The current count value;
+ * - increment `() => void` - A function to increment the count;
+ * - decrement `() => void` - A function to decrement the count;
+ * - reset `() => void` - A function to reset the count to the initial value;
+ * - setCount `(value: number | ((prev: number) => number)) => void` - A function to set the count to a specific value or a function that returns a new value;
  *
  * @example
  * import { useCounter } from 'react-simplikit';