feat: useFunnel 문서 추가

apps/docs/src/pages/react/hooks/_meta.en.json

@@ -1,5 +1,6 @@
 {
   "useInterval": "useInterval",
   "useMediaQuery": "useMediaQuery",
-  "useSecTimer": "useSecTimer"
+  "useSecTimer": "useSecTimer",
+  "useFunnel": "useFunnel"
 }

apps/docs/src/pages/react/hooks/_meta.ko.json

@@ -1,5 +1,6 @@
 {
   "useInterval": "useInterval",
   "useMediaQuery": "useMediaQuery",
-  "useSecTimer": "useSecTimer"
+  "useSecTimer": "useSecTimer",
+  "useFunnel": "useFunnel"
 }

apps/docs/src/pages/react/hooks/useFunnel.en.md

@@ -0,0 +1,52 @@
+# useFunnel
+
+`useFunnel` is a custom hook that helps manage components with multiple steps or processes. It makes it easy to handle transitions between components with steps, providing `next`, `prev`, and `setStep` functions for navigation.
+
+## API
+
+```ts
+function useFunnel(initialStep: string, steps: string[]);
+```
+
+#### Parameters
+initialStep (string): Sets the initial step of the funnel.
+steps (string[]): Defines all the steps in the funnel.
+
+
+#### Return Value
+- Funnel: The funnel component object that is used as a parent component.
+- next: Moves to the next step's component.
+- prev: Moves to the previous step's component.
+- setStep: Manually moves to a specific step's component.
+
+
+## Example
+```jsx
+const MyComponent = () => {
+  const { Funnel, next, prev, setStep } 
+    = useFunnel('step1', ['step1', 'step2', 'step3']);
+
+  return (
+    <Funnel>
+      <Funnel.Step name="step1">
+        <div>Step1 Component</div>
+        <button onClick={next}>Next</button>
+      </Funnel.Step>
+      <Funnel.Step name="step2">
+        <div>Step2 Component</div>
+        <button onClick={prev}>Prev</button>
+        <button onClick={next}>Next</button>
+      </Funnel.Step>
+      <Funnel.Step name="step3">
+        <div>Step3 Component</div>
+        <button onClick={prev}>Prev</button>
+      </Funnel.Step>
+    </Funnel>
+  );
+};
+```
+
+## Notes
+1. Define each step component by setting the name property of Funnel.Step.
+2. If prev is called on the first step or next is called on the last step, the component will not transition.
+

apps/docs/src/pages/react/hooks/useFunnel.ko.md

@@ -0,0 +1,54 @@
+# useFunnel
+
+`useFunnel`은 여러 단계나 프로세스를 가진 컴포넌트를 관리하는 데 도움을 주는 커스텀 훅입니다.
+단계가 존재하는 컴포넌트 간 전환을 쉽게 관리할 수 있으며, `next`, `prev`, `setStep` 함수들을 제공하여 네비게이션을 지원합니다.
+
+## API
+
+```ts
+function useFunnel(initialStep: string, steps: string[]);
+```
+
+#### Parameters
+
+- `initialStep` (string): 퍼널의 초기 스텝을 설정합니다.
+- `totalSteps` (string[]): 퍼널의 전체 스텝을 설정합니다.
+
+#### Return value
+
+- Funnel: 퍼널 객체입니다. 상위 컴포넌트로 활용합니다.
+- next: 다음 스텝의 컴포넌트로 이동합니다.
+- prev: 이전 스텝의 컴포넌트로 이동합니다.
+- setStep: 특정 스텝의 컴포넌트로 이동합니다.
+
+## Example
+
+```jsx
+const MyComponent = () => {
+  const { Funnel, next, prev, setStep } 
+  	= useFunnel('step1', ['step1', 'step2', 'step3']);
+
+  return (
+	<Funnel>
+	  <Funnel.Step name="step1">
+	  	<div>Step1 Component</div>
+	  	<button onClick={next}>Next</button>
+	  </Funnel.step>
+	  <Funnel.Step name="step2">
+	  	<div>Step2 Component</div>
+	  	<button onClick={next}>Prev</button>
+	  </Funnel.step>
+	  <Funnel.Step name="step3">
+	  	<div>Step3 Component</div>
+		<button onClick={prev}>Prev</button>
+    	<button onClick={next}>Next</button>
+	  </Funnel.step>
+	</Funnel>
+  );
+};
+```
+
+## Notes
+
+1. Funnel.Step의 name 속성을 통해 각 스텝의 컴포넌트를 정의합니다.
+2. 첫번째 컴포넌트에서 prev를 호출하거나 마지막 컴포넌트에서 next를 호출하면 이동하지 않습니다.