From 9282de16af060ab68b7a69afd9a251377b4ca4d7 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Sun, 1 Jun 2025 00:53:12 +0900
Subject: [PATCH 01/24] docs: improve documentation

---
 docs/src/content/en/installation.mdx          |  14 +-
 docs/src/content/ko/_meta.ts                  |  47 ++--
 .../ko/{quick-start.mdx => basic-example.mdx} |   0
 docs/src/content/ko/create-tracker.mdx        | 133 +++++-----
 docs/src/content/ko/index.mdx                 | 229 +++++-------------
 docs/src/content/ko/installation.mdx          |  18 +-
 .../content/ko/{hook.mdx => useTracker.mdx}   |   7 +-
 docs/src/content/ko/why-event-tracker.mdx     | 186 ++++++++++++++
 8 files changed, 349 insertions(+), 285 deletions(-)
 rename docs/src/content/ko/{quick-start.mdx => basic-example.mdx} (100%)
 rename docs/src/content/ko/{hook.mdx => useTracker.mdx} (94%)
 create mode 100644 docs/src/content/ko/why-event-tracker.mdx

diff --git a/docs/src/content/en/installation.mdx b/docs/src/content/en/installation.mdx
index d2c9a98..4d9af8e 100644
--- a/docs/src/content/en/installation.mdx
+++ b/docs/src/content/en/installation.mdx
@@ -2,18 +2,6 @@
 
 Using npm:
 
-```bash
+```shell npm2yarn
 npm install @offlegacy/event-tracker
 ```
-
-Using yarn:
-
-```bash
-yarn add @offlegacy/event-tracker
-```
-
-Using pnpm:
-
-```bash
-pnpm add @offlegacy/event-tracker
-```
diff --git a/docs/src/content/ko/_meta.ts b/docs/src/content/ko/_meta.ts
index 2a81597..df5ee23 100644
--- a/docs/src/content/ko/_meta.ts
+++ b/docs/src/content/ko/_meta.ts
@@ -1,6 +1,6 @@
-import { MetaRecord } from "nextra";
+import type { MetaRecord } from "nextra";
 
-const meta: MetaRecord = {
+export default {
   "getting-started-separator": {
     type: "separator",
     title: "시작하기",
@@ -12,22 +12,22 @@ const meta: MetaRecord = {
       layout: "default",
     },
   },
-  installation: {
-    title: "설치",
+  "why-event-tracker": {
+    title: "왜 Event Tracker인가요?",
     theme: {
       toc: true,
       layout: "default",
     },
   },
-  "quick-start": {
-    title: "가이드",
+  installation: {
+    title: "설치하기",
     theme: {
       toc: true,
       layout: "default",
     },
   },
-  "api-separator": {
-    title: "API",
+  "api-reference-separator": {
+    title: "API 레퍼런스",
     type: "separator",
   },
   "create-tracker": {
@@ -38,21 +38,22 @@ const meta: MetaRecord = {
     },
   },
   components: {
-    title: "컴포넌트",
+    title: "Components",
     theme: {
       toc: true,
       layout: "default",
+      collapsed: true,
     },
   },
-  hook: {
-    title: "hook",
+  useTracker: {
+    title: "useTracker",
     theme: {
       toc: true,
       layout: "default",
     },
   },
   "advanced-separator": {
-    title: "고급",
+    title: "가이드",
     type: "separator",
   },
   batching: {
@@ -62,6 +63,22 @@ const meta: MetaRecord = {
       layout: "default",
     },
   },
-};
-
-export default meta;
+  "data-type-validation": {
+    title: "데이터 타입 검증",
+    theme: {
+      toc: true,
+      layout: "default",
+    },
+  },
+  "example-separator": {
+    title: "예제",
+    type: "separator",
+  },
+  "basic-example": {
+    title: "기본",
+    theme: {
+      toc: true,
+      layout: "default",
+    },
+  },
+} satisfies MetaRecord;
diff --git a/docs/src/content/ko/quick-start.mdx b/docs/src/content/ko/basic-example.mdx
similarity index 100%
rename from docs/src/content/ko/quick-start.mdx
rename to docs/src/content/ko/basic-example.mdx
diff --git a/docs/src/content/ko/create-tracker.mdx b/docs/src/content/ko/create-tracker.mdx
index 5b6cbed..8f0dbfe 100644
--- a/docs/src/content/ko/create-tracker.mdx
+++ b/docs/src/content/ko/create-tracker.mdx
@@ -1,6 +1,6 @@
-# createTracker(config)
+# createTracker
 
-원하는 구성으로 트래커 인스턴스를 생성하는 메인 함수입니다.
+`createTracker`는 사용자 정의 설정으로 트래커 인스턴스를 생성하는 함수입니다. 이 함수의 파라미터를 통해 이벤트 트래킹을 정의하고, 반환된 튜플을 통해 트래커 인스턴스를 사용할 수 있습니다.
 
 ```tsx
 const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTracker] = createTracker({
@@ -19,95 +19,92 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTrack
 });
 ```
 
-### 구성 옵션
+## Reference
 
-#### init
+### Parameters
 
-- Type: `(initialContext: Context, setContext: SetContext) => void | Promise<void>`
-- 옵셔널
-- 모든 이벤트가 발생하기 전에 실행되는 함수
-- Promise를 반환하면 이벤트가 Promise가 해결될 때까지 지연됩니다.
+`createTracker`는 하나의 설정 객체를 인자로 받습니다.
 
-#### send
+| 옵션         | 타입                                                                                                                     | 설명                                                        |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------- |
+| `init`       | `(initialContext: Context, setContext: SetContext) => void \| Promise<void>`                                             | 모든 이벤트 발생 전에 실행되는 초기화 함수. Promise 지원.   |
+| `send`       | `(params: EventParams \| (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType` | 이벤트 전송 함수. Promise 지원.                             |
+| `DOMEvents`  | [`DOMEvents`](https://developer.mozilla.org/docs/Web/API/Event)                                                          | React DOM 이벤트 핸들러 모음 (`onClick`, `onMouseEnter` 등) |
+| `impression` | `ImpressionOptions`                                                                                                      | 노출 이벤트 트래킹 설정                                     |
+| `pageView`   | `PageViewOptions`                                                                                                        | 페이지 뷰 트래킹 설정                                       |
+| `batch`      | `BatchConfig`                                                                                                            | 이벤트 배칭 설정                                            |
+| `schemas`    | `SchemaConfig`                                                                                                           | 이벤트 스키마 검증 설정                                     |
 
-- Type: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
-- 옵셔널
-- 이벤트를 보내는 표준 함수
-- Promise를 반환하면 이벤트가 Promise가 해결될 때까지 지연됩니다.
+---
 
-#### DOMEvents
+#### `init`
 
-- Type: `DOMEvents`
-- 옵셔널
-- 표준 React DOM 이벤트 (`onClick`, `onMouseEnter`, 등)의 모음
-- 각 핸들러는 `<Track.DOMEvent type=[이벤트 유형]>`에서 해당 이벤트가 발생할 때 실행됩니다.
-- 핸들러가 Promise를 반환하면 후속 이벤트 콜백이 해결될 때까지 지연됩니다.
+- 타입: `(initialContext: Context, setContext: SetContext) => void | Promise<void>`
+- 설명: 모든 이벤트가 발생하기 전, 초기 컨텍스트를 설정하는 함수입니다. 비동기 함수 지원.
 
-#### impression
+#### `send`
 
-노출 이벤트를 트래킹하기 위한 설정입니다.
+- 타입: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
+- 설명: 이벤트를 외부로 전송하는 함수입니다. 비동기 처리 가능.
 
-- onImpression
+#### `DOMEvents`
 
-  - Type: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
-  - Optional
-  - Executed when impression occurs on a `<Track.Impression>` child
-  - Promise return value will delay subsequent callbacks
+- 타입: `DOMEvents`
+- 설명: 표준 React DOM 이벤트 핸들러 객체입니다. `<Track.DOMEvent>` 컴포넌트에서 사용됩니다.
 
-- options
-  - Type: `ImpressionOptions`
-  - 옵셔널
-  - 노출 이벤트 트래킹 구성 옵션:
-    - `threshold`: 노출 필요 비율 (기본값: 0.2)
-    - `freezeOnceVisible`: 노출 후 교차 상태 고정 (기본값: true)
-    - `initialIsIntersecting`: 초기 교차 상태 (기본값: false)
+#### `impression`
 
-#### pageView
+- `impression.onImpression`
 
-페이지 뷰 이벤트를 트래킹하기 위한 설정입니다.
+  - 타입: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
+  - 설명: `<Track.Impression>` 발생 시 실행되는 콜백
 
-##### onPageView
+- `impression.options`
 
-- Type: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
-- 옵셔널
-- `<Track.PageView>`가 마운트될 때 실행됩니다.
-- Promise를 반환하면 후속 이벤트가 해결될 때까지 지연됩니다.
+  - 타입: `ImpressionOptions`
+  - 속성:
 
-#### batch
+    - `threshold`: 노출 비율 기준 (기본값: 0.2)
+    - `freezeOnceVisible`: 노출 후 상태 고정 여부 (기본값: true)
+    - `initialIsIntersecting`: 초기 교차 여부 (기본값: false)
 
-이벤트 배칭을 위한 설정입니다.
+#### `pageView`
 
-- Type: `BatchConfig`
-- 옵셔널
-- Properties:
-  - `enable`: 배칭 활성화 (기본값: false)
-  - `interval`: 버퍼링 간격 (ms) (기본값: 3000)
-  - `thresholdSize`: 최대 배칭 크기 (기본값: 25)
-  - `onFlush`: 배치 비우기 처리 함수 (활성화된 경우 필요)
-  - `onError`: 오류 처리 함수 (옵셔널)
+- `pageView.onPageView`
 
-#### schemas
+  - 타입: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
+  - 설명: `<Track.PageView>` 마운트 시 실행됩니다.
 
-데이터 타입 검증을 위한 설정입니다.
+#### `batch`
 
-- Type: `SchemaConfig`
-- 옵셔널
-- Properties:
-  - `schemas`: [Zod](https://zod.dev/) 스키마의 레코드
-  - `onSchemaError`?: 스키마 검증 오류 처리 함수
-  - `abortOnError`?: 스키마 검증 오류가 발생한 경우 이벤트 추적 중단 여부 (기본값: false)
+- 타입: `BatchConfig`
+- 속성:
 
-### Return Value
+  - `batch.enable`: 배치 활성화 여부 (기본값: false)
+  - `batch.interval`: 전송 간격(ms, 기본값: 3000)
+  - `batch.thresholdSize`: 최대 배치 크기 (기본값: 25)
+  - `batch.onFlush`: 이벤트 전송 처리 함수
+  - `batch.onError`: 오류 발생 시 처리 함수 (옵셔널)
 
-`createTracker` 함수는 다음 튜플을 반환합니다:
+#### `schemas`
 
-1. 트래킹 컴포넌트를 포함하는 객체:
+- 타입: `SchemaConfig`
+- 속성:
 
-   - [`Provider`](/docs/components)
-   - [`DOMEvent`](/docs/components/dom-event)
-   - [`Click`](/docs/components/click)
-   - [`Impression`](/docs/components/impression)
-   - [`PageView`](/docs/components/page-view)
-   - [`SetContext`](/docs/components/set-context)
+  - `schemas.schema`: [Zod](https://zod.dev/) 기반의 스키마 정의
+  - `schemas.onSchemaError`: 스키마 오류 발생 시 처리 함수
+  - `schemas.abortOnError`: 오류 시 이벤트 중단 여부 (기본값: false)
 
-2. [커스텀 hook](/docs/hook)
+### Returns
+
+`createTracker`는 다음 두 값을 포함한 튜플을 반환합니다.
+
+```tsx
+const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTracker] = createTracker({...})
+```
+
+1. 이벤트 컴포넌트 (`Tracker`)
+
+   - `Provider`, `DOMEvent`, `Click`, `Impression`, `PageView`, `SetContext`
+
+2. 커스텀 훅 (`useTracker`)
diff --git a/docs/src/content/ko/index.mdx b/docs/src/content/ko/index.mdx
index 97aed6d..aa96cf6 100644
--- a/docs/src/content/ko/index.mdx
+++ b/docs/src/content/ko/index.mdx
@@ -1,202 +1,87 @@
-# 소개
-
-## `event-tracker`가 필요한 이유
-
-이벤트 트래킹은 많은 보일러플레이트 코드와 복잡성을 수반하는 작업입니다.  
-다음 예시를 살펴보세요.
-
-```tsx {14,15, 23-30}
-// 전통적인 이벤트 트래킹 방식
-
-const Page = () => {
-  const { user, userId } = useUser();
-
-  return (
-    <div>
-      <p>User: {user.name}</p>
-      <Counter userId={userId} />
-    </div>
-  );
-};
-
-const Counter = ({ userId }: { userId: string }) => {
-  // 이벤트 트래킹만을 위해서 'userId'를 prop으로 전달받음
-
-  const [count, setCount] = useState(0);
-  const { track } = useTrackEvent();
-
-  const handleIncrement = () => {
-    setCount(count + 1);
-
-    track({
-      event: "click",
-      params: {
-        type: "count",
-        value: count + 1,
-        userId,
-      },
-    });
-  };
-
-  return (
-    <div>
-      <p>Count: {count}</p>
-      <button onClick={handleIncrement}>Increment</button>
-    </div>
-  );
-};
-```
+import { Steps } from "nextra/components";
 
-위 코드로 알아본 이벤트 트래킹으로 인한 두 가지 주요 불편사항은 다음과 같습니다:
+# 소개
 
-1. **Prop Drilling**: `userId`가 `<Page />` 컴포넌트에서 `<Counter />` 컴포넌트로 prop으로 전달됩니다. `<Counter />` 컴포넌트가 컴포넌트 트리 깊숙이 중첩되어 있다면, prop drilling이 더 심각해져 코드의 가독성과 유지보수성이 저하될 수 있습니다.
-2. **이벤트 트래킹 로직과 비즈니스 로직의 강결합**: `handleIncrement` 함수는 카운트 증가 로직과 이벤트 트래킹 로직을 모두 포함하고 있습니다. 이벤트 트래킹 로직을 분리하면 코드를 더 깔끔하고 유지보수하기 쉽게 만들 수 있습니다.
+Event Tracker 문서에 오신 것을 환영합니다.
 
-## `event-tracker`가 제시하는 새로운 패러다임
+## Event Tracker가 무엇인가요?
 
-`event-tracker`는 이벤트 트래킹을 위한 새로운 패러다임을 소개합니다.
-`event-tracker`가 제시하는 선언적 방식은 전통적으로 이벤트 트래킹과 관련된 복잡성을 단순화하여,
-모든 개발자들이 쉽게 접근할 수 있도록 합니다.
+Event Tracker는 복잡한 이벤트 트래킹 구현 과정을 단순화하고, 개발자가 비즈니스 로직에 더 집중할 수 있도록 돕는 선언적 방식의 React 라이브러리입니다. 모든 규모의 애플리케이션에서 이벤트 트래킹을 쉽고 효율적으로 관리할 수 있도록 설계되었습니다.
 
-### 선언적 이벤트 트래킹
+```tsx
+import { createTracker } from "@offlegacy/event-tracker";
 
-```tsx {5, 10, 24, 26}
-const Page = () => {
-  const { user, userId } = useUser();
+// 트래커 인스턴스 생성
+const [Track, useTracker] = createTracker({
+  DOMEvents: {
+    onClick: (params, context) => {
+      log("Click event:", params, context);
+    },
+  },
+});
 
+// 앱에서 사용하기
+function App() {
   return (
-    <Track.Provider initialContext={{ userId }}>
-      <div>
-        <p>User: {user.name}</p>
-        <Counter />
-      </div>
+    <Track.Provider initialContext={{ userId: "userId-123" }}>
+      <Track.Click params={{ buttonId: "event-click" }}>
+        <button>Event Click!</button>
+      </Track.Click>
     </Track.Provider>
   );
-};
-
-const Counter = () => {
-  const [count, setCount] = useState(0);
+}
+```
 
-  const handleIncrement = () => {
-    setCount(count + 1);
-  };
+### 주요 기능
 
-  return (
-    <div>
-      <p>Count: {count}</p>
-      <Track.Click params={{ value: count + 1, type: "count" }}>
-        <button onClick={handleIncrement}>Increment</button>
-      </Track.Click>
-    </div>
-  );
-};
-```
+Event Tracker는 개발자 경험과 애플리케이션 성능을 모두 고려한 다양한 기능을 제공합니다.
 
-`event-tracker`를 사용하면 선언적 이벤트 트래킹이 가능해져 코드 가독성이 향상되고 복잡성이 감소합니다. 이는 개발자들이 이벤트 트래킹을 더 쉽게 이해하고 사용할 수 있도록 돕습니다.  
-이제 `handleIncrement` 함수는 카운트 증가에만 책임이 있고, 이벤트 트래킹은 `<Track.Click />` 컴포넌트가 처리합니다.  
-**이러한 선언적 접근 방식은 개발자가 '어떻게 트래킹할지'가 아닌 '무엇을 트래킹할지'에 집중하도록 합니다.**
-어떻게 트래킹할지는 React 앱 외부에서 정의되어야 합니다.
+| Feature                       | Description                                                                                                                                                                        |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 타입 안정성을 갖춘 선언적 API | [TypeScript](https://www.typescriptlang.org/)를 완벽하게 지원하여 개발 과정에서의 오류를 줄이고, 자동 완성을 통해 생산성을 높입니다.                                               |
+| 강력한 데이터 타입 검증       | [Zod](https://zod.dev/)를 활용한 스키마 기반 검증으로 데이터의 신뢰성을 확보합니다.                                                                                                |
+| 최적화된 성능                 | 배칭이나 디바운스, 스로틀링 기능을 통해 네트워크 요청을 최소화하고 애플리케이션 성능에 미치는 영향을 줄입니다.                                                                     |
+| 실행 순서 보장                | 비동기적으로 발생하는 이벤트들에 대해서도 의도한 순서대로 처리되도록 보장합니다.                                                                                                   |
+| 애널리틱스 도구 독립성        | 특정 애널리틱스 서비스에 종속되지 않고, 원하는 모든 도구([Google Analytics](https://analytics.google.com/), [Amplitude](https://amplitude.com/) 등)와 유연하게 통합할 수 있습니다. |
+| 명확한 관심사 분리            | 트래킹 로직과 비즈니스 로직을 효과적으로 분리하여 코드의 유지보수성과 확장성을 극대화합니다.                                                                                       |
 
-### 애플리케이션 외부에서 이벤트 트래킹 응집도 개선
+## 핵심 개념
 
-```tsx
-const [Track] = createTracker({
-  DOMEvents: {
-    onClick: (params, context) => {
-      log({
-        event: "click",
-        params: {
-          ...params,
-          userId: context.userId,
-        },
-      });
-    },
-  },
-  onImpression: (params, context) => {
-    log({
-      event: "impression",
-      params: {
-        ...params,
-        userId: context.userId,
-      },
-    });
-  },
-});
-```
+Event Tracker를 효과적으로 사용하기 위해 알아야 할 몇 가지 핵심 개념이 있습니다.
 
-이제 **'어떻게 추적할지'**에 대한 코드가 비즈니스 로직과 분리되었습니다.  
-애플리케이션 외부에 위치하므로 비즈니스 로직을 변경하지 않고도 이벤트 트래킹 로직을 수정할 수 있습니다.
+<Steps>
 
-### 데이터 타입 검증
+### 인스턴스 (`createTracker`)
 
-`event-tracker`는 [Zod](https://zod.dev/)를 사용하여 스키마 기반으로 데이터 유효성 검증을 제공합니다.
+라이브러리의 가장 기본적인 출발점입니다. `createTracker` 함수를 사용하여 트래커 인스턴스(`Track` 컴포넌트 컬렉션과 `useTracker` 훅)를 생성합니다. 이때, DOM 이벤트 핸들러, 노출(Impression) 이벤트 핸들러, 스키마 등을 설정하여 이벤트 트래킹을 정의합니다.
 
-```tsx
-import { z } from "zod";
-import { createTracker } from "@offlegacy/event-tracker";
+### 프로바이더 (`Track.Provider`)
 
-interface Context {
-  // ...
-}
+React의 Context API를 기반으로 구현되었습니다. 애플리케이션 또는 특정 컴포넌트 트리의 최상단에서 `Track.Provider`로 감싸 하위 컴포넌트들에 트래킹에 필요한 공통 데이터(컨텍스트)를 제공합니다. 예를 들어, `userId`, `pageName` 등의 정보를 컨텍스트로 전달하면, 각 이벤트 트래킹 시 이 정보를 활용할 수 있습니다.
 
-interface Params {
-  // ...
-}
+### 이벤트 컴포넌트 (`Track.Click`, `Track.PageView` 등)
 
-// 스키마 정의
-const schemas = {
-  page_view: z.object({
-    title: z.string(),
-  }),
-  click_button: z.object({
-    target: z.string(),
-  }),
-};
-
-// 트래커 설정
-const [Track] = createTracker<Context, Params, typeof schemas>({
-  // 기타 설정...
-
-  schema: {
-    schemas: {
-      page_view,
-      click_button,
-    },
-    onSchemaError: (error) => {
-      console.error("Schema validation error:", error);
-    },
-    abortOnError: true,
-  },
-});
+선언적으로 이벤트를 트래킹할 수 있도록 제공되는 특수 컴포넌트들입니다. `createTracker` 리턴 배열의 첫 번째 요소입니다.
 
-// 스키마 사용하기
-<Track.PageView schema="page_view" params={{ title: "Home Page" }} />;
-<Track.Click schema="click_button" params={{ target: "submit-button" }} />;
-```
+- `Track.Click`: 자식 요소에서 클릭 이벤트가 발생했을 때 트래킹합니다.
+- `Track.Impression`: 자식 요소가 화면에 노출되었을 때 트래킹합니다.
+- `Track.PageView`: 컴포넌트가 마운트될 때 페이지 뷰 이벤트를 트래킹합니다.
 
-## 주요 기능
+이 외에도 다양한 사용자 인터랙션 및 생명주기 이벤트에 대응하는 컴포넌트를 제공하거나 커스텀하여 사용할 수 있습니다. 각 컴포넌트는 `context`, `params` prop을 통해 해당 이벤트와 관련된 특정 데이터를 전달받고 활용할 수 있습니다.
 
-- 🎯 **타입 안정성을 갖춘 API**: 타입 안전성을 갖춘 선언적 이벤트 트래킹 제공
-- 🛡️ **데이터 타입 검증**: 스키마를 사용한 데이터 타입 안전성과 유효성 보장
-- ⚡️ **최적화된 성능**: 이벤트 배칭을 통한 향상된 성능
-- 🔄 **순서 보장**: 비동기 작업에 대한 실행 순서 보장
-- 🔌 **애널리틱스 도구와의 독립성**: 선택한 모든 애널리틱스 도구와 함께 작동
-- 🧩 **관심사의 분리**: 트래킹 로직과 비즈니스 로직의 분리 유지
-- 📦 **작은 번들 사이즈**: 애플리케이션에 미치는 번들 크기 영향 최소화
+### 커스텀 훅 (`useTracker`)
 
-## 핵심 개념
+컴포넌트의 생명주기나 DOM 이벤트와 직접적으로 관련되지 않은, 보다 복잡하거나 조건부적인 이벤트 트래킹이 필요할 때 사용합니다. `useTracker` 훅을 사용하면 `Track.Provider`로부터 컨텍스트 정보를 가져오고, 정의된 트래킹 로직을 명령형으로 실행할 수 있습니다.
 
-`event-tracker`는 몇 가지 핵심 개념을 기반으로 구축되었습니다:
+</Steps>
 
-1. **Tracker 생성**: `createTracker`를 사용하여 원하는 이벤트 트래킹 지침을 사용하여 트래커 인스턴스를 생성합니다.
-2. **Provider**: `Track.Provider`를 사용하여 앱을 래핑하여 컨텍스트를 제공합니다.
-3. **이벤트 컴포넌트**: `Track.Click` 또는 `Track.Impression`과 같은 이벤트 컴포넌트를 사용하여 이벤트를 트래킹합니다.
-4. **커스텀 Hook**: `useTracker` 훅을 사용하여 명령적으로 트래킹 할 수 있습니다.
+## 다음 단계
 
-다른 섹션에서 각 기능에 대한 자세한 문서를 확인할 수 있습니다:
+이러한 핵심 개념들은 서로 유기적으로 작동하여 Event Tracker의 강력하고 유연한 이벤트 트래킹 환경을 구성합니다. 더 자세한 사용법과 각 기능에 대한 심층적인 내용은 아래 문서들에서 확인하실 수 있습니다.
 
-- [createTracker](/docs/create-tracker) - `createTracker`에 대한 자세한 API 문서
-- [components](/docs/components) - 사용 가능한 트래킹 컴포넌트
-- [hook](/docs/hook) - 훅을 사용하여 트래킹
-- [Batching](/docs/batching) - 이벤트 배칭을 통한 성능 최적화
-- [Data Type Validation](/docs/data-type-validation) - 스키마를 사용하여 데이터 타입 안전성과 유효성 보장
+- [왜 Event Tracker인가요?](/docs/why-event-tracker): Event Tracker의 필요성과 주요 기능 소개
+- [`createTracker`](/docs/create-tracker): 트래커 인스턴스 생성 및 상세 설정 가이드
+- [Components](/docs/components): 사용 가능한 모든 트래킹 컴포넌트와 사용 예시
+- [`useTracker`](/docs/hook): 커스텀 훅을 활용한 사용자 지정 트래킹 기법
+- [Batching](/docs/batching): 이벤트 배칭을 통한 성능 최적화 전략
+- [Data Type Validation](/docs/data-type-validation): Zod 스키마를 활용한 데이터 유효성 검증 가이드
diff --git a/docs/src/content/ko/installation.mdx b/docs/src/content/ko/installation.mdx
index 87fba1a..fa7b78a 100644
--- a/docs/src/content/ko/installation.mdx
+++ b/docs/src/content/ko/installation.mdx
@@ -1,19 +1,9 @@
 # 설치
 
-npm을 사용하여 설치하기:
+Event Tracker는 React 애플리케이션에서 이벤트 트래킹을 쉽게 구현할 수 있도록 설계된 라이브러리입니다. `React 18.0.0` 이상의 버전에서 사용할 수 있으며, TypeScript를 완벽하게 지원합니다.
 
-```bash
-npm install @offlegacy/event-tracker
-```
+최신 안정 버전을 설치하려면 아래 명령어를 실행하세요.
 
-yarn을 사용하여 설치하기:
-
-```bash
-yarn add @offlegacy/event-tracker
-```
-
-pnpm을 사용하여 설치하기:
-
-```bash
-pnpm add @offlegacy/event-tracker
+```shell npm2yarn
+npm install @offlegacy/event-tracker
 ```
diff --git a/docs/src/content/ko/hook.mdx b/docs/src/content/ko/useTracker.mdx
similarity index 94%
rename from docs/src/content/ko/hook.mdx
rename to docs/src/content/ko/useTracker.mdx
index c775e8f..81385cb 100644
--- a/docs/src/content/ko/hook.mdx
+++ b/docs/src/content/ko/useTracker.mdx
@@ -1,7 +1,8 @@
-# hook
+# useTracker
 
-[`createTracker`](/docs/create-tracker)에서 두 번째 배열 항목으로 반환되는 커스텀 React hook입니다.  
-이 훅은 컴포넌트 내에서 이벤트 트래킹 기능과 컨텍스트 관리에 접근할 수 있게 합니다.
+[`createTracker`](/docs/create-tracker)에서 두 번째 배열 항목으로 반환되는 커스텀 React hook입니다. 이 훅은 컴포넌트 내에서 이벤트 트래킹 기능과 컨텍스트 관리에 접근할 수 있게 합니다.
+
+예를 들어, 특정 비동기 작업이 완료된 후 또는 사용자의 특정 입력 값에 따라 이벤트를 발생시켜야 할 때 유용합니다.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
diff --git a/docs/src/content/ko/why-event-tracker.mdx b/docs/src/content/ko/why-event-tracker.mdx
new file mode 100644
index 0000000..83331c5
--- /dev/null
+++ b/docs/src/content/ko/why-event-tracker.mdx
@@ -0,0 +1,186 @@
+import { Steps } from "nextra/components";
+
+# 왜 Event Tracker인가요?
+
+현대 웹 애플리케이션은 사용자의 행동을 분석하여 서비스 품질을 지속적으로 개선해야 합니다. 그러나 기존의 이벤트 트래킹 방식은 여러 문제점이 나타납니다.
+
+## Event Tracker가 필요한 이유
+
+다음은 전통적인 이벤트 트래킹 방식의 문제점을 보여주는 예시입니다.
+
+- **Prop Drilling의 고통**: 이벤트 트래킹에 필요한 데이터를 하위 컴포넌트까지 전달하기 위해 수많은 계층을 거쳐 prop을 내려보내야 하는 경우가 많습니다. 이는 코드의 가독성을 해치고 유지보수를 어렵게 만듭니다.
+- **로직의 강한 결합**: 비즈니스 로직과 이벤트 트래킹 로직이 한데 섞여 코드의 복잡도를 높이고, 각 로직의 독립적인 테스트와 수정을 어렵게 만듭니다.
+- **보일러플레이트 코드 증가**: 반복적인 트래킹 코드 작성은 개발 생산성을 저해하는 요인이 됩니다.
+
+```tsx {8,15, 24-31}
+function Page() {
+  const { user, userId } = useUser(); // 사용자 정보와 ID를 가져옵니다.
+
+  return (
+    <div>
+      <p>User: {user.name}</p>
+      {/* Counter 컴포넌트에 이벤트 트래킹을 위해 userId를 전달합니다. */}
+      <Counter userId={userId} />
+    </div>
+  );
+}
+
+// 오직 이벤트 트래킹만을 위해서 'userId'를 prop으로 전달받습니다.
+// 만약 Counter가 더 깊은 곳에 있다면, prop drilling은 더욱 심해집니다.
+function Counter({ userId }: { userId: string }) {
+  const [count, setCount] = useState(0);
+  const { track } = useTrackEvent(); // 가상의 트래킹 훅
+
+  const handleIncrement = () => {
+    const newCount = count + 1;
+    setCount(newCount);
+
+    // 비즈니스 로직 (카운트 증가)과 트래킹 로직이 혼재합니다.
+    track({
+      event: "click_increment",
+      params: {
+        type: "count",
+        value: newCount,
+        userId, // 상위로부터 전달받은 userId 사용
+      },
+    });
+  };
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={handleIncrement}>Increment</button>
+    </div>
+  );
+}
+```
+
+## Event Tracker가 제시하는 새로운 패러다임
+
+Event Tracker는 이벤트 트래킹을 위한 새로운 패러다임을 소개합니다.
+Event Tracker가 제시하는 선언적 방식은 전통적으로 이벤트 트래킹과 관련된 복잡성을 단순화하여, 모든 개발자들이 쉽게 접근할 수 있도록 합니다.
+
+<Steps>
+
+### 선언적 이벤트 트래킹
+
+```tsx {7, 10, 12, 32, 34}
+function Page() {
+  const { user, userId } = useUser();
+
+  // Track.Provider를 통해 하위 컴포넌트에 트래킹 컨텍스트(userId)를 제공합니다.
+  // 더 이상 prop drilling이 필요 없습니다.
+  return (
+    <Track.Provider initialContext={{ userId }}>
+      <div>
+        <p>User: {user.name}</p>
+        <Counter /> {/* userId를 prop으로 전달할 필요가 없습니다. */}
+      </div>
+    </Track.Provider>
+  );
+}
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  const handleIncrement = () => {
+    // 이제 handleIncrement 함수는 순수하게 카운트 증가 로직만 담당합니다.
+    setCount(count + 1);
+  };
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      {/*
+        Track.Click 컴포넌트가 클릭 이벤트를 감싸고,
+        클릭 발생 시 정의된 파라미터와 함께 이벤트를 트래킹합니다.
+        컨텍스트로 제공된 userId는 자동으로 트래킹 데이터에 포함됩니다.
+      */}
+      <Track.Click params={{ value: count + 1, type: "count" }}>
+        <button onClick={handleIncrement}>Increment</button>
+      </Track.Click>
+    </div>
+  );
+}
+```
+
+Event Tracker를 사용하면 선언적 이벤트 트래킹이 가능해져 코드 가독성이 향상되고 복잡성이 감소합니다. 이는 개발자들이 이벤트 트래킹을 더 쉽게 이해하고 사용할 수 있도록 돕습니다.
+
+이제 `handleIncrement` 함수는 카운트 증가에만 책임이 있고, 이벤트 트래킹은 `<Track.Click />` 컴포넌트가 처리합니다.
+**이러한 선언적 접근 방식은 개발자가 '어떻게 트래킹할지'가 아닌 '무엇을 트래킹할지'에 집중하도록 합니다.**
+어떻게 트래킹할지는 React 앱 외부에서 정의되어야 합니다.
+
+### 이벤트 트래킹 응집도 개선
+
+```tsx {4-10, 14-20}
+const [Track, useTracker] = createTracker({
+  // DOM 이벤트 발생 시 실행될 콜백 함수
+  DOMEvents: {
+    onClick: (params, context) => {
+      // 실제 트래킹 라이브러리(Google Analytics, Amplitude 등) 호출
+      logEvent("click_event", {
+        ...params, // { value: ..., type: "count" }
+        userId: context.userId, // Provider로부터 받은 userId
+      });
+    },
+    // 필요에 따라 onMouseOver, onFocus 등 다양한 DOM 이벤트 핸들러 정의 가능
+  },
+  // 화면 노출(Impression) 이벤트 발생 시 실행될 콜백 함수
+  onImpression: (params, context) => {
+    logEvent("impression_event", {
+      ...params,
+      userId: context.userId,
+      pagePath: window.location.pathname,
+    });
+  },
+});
+```
+
+이제 <b>'어떻게 추적할지'</b>에 대한 코드가 비즈니스 로직과 분리되었습니다. 애플리케이션 외부에 위치하므로 비즈니스 로직을 변경하지 않고도 이벤트 트래킹 로직을 수정할 수 있습니다.
+
+### 데이터 타입 검증
+
+```tsx {13-20, 24-33}
+import { z } from "zod";
+import { createTracker } from "@offlegacy/Event Tracker";
+
+interface Context {
+  /* ... */
+}
+
+interface Params {
+  /* ... */
+}
+
+// 스키마 정의
+const schemas = {
+  page_view: z.object({
+    title: z.string(),
+  }),
+  click_button: z.object({
+    target: z.string(),
+  }),
+};
+
+// 트래커 설정
+const [Track] = createTracker<Context, Params, typeof schemas>({
+  schema: {
+    schemas: {
+      page_view,
+      click_button,
+    },
+    onSchemaError: (error) => {
+      console.error("Schema validation error:", error);
+    },
+    abortOnError: true,
+  },
+});
+
+// 스키마 사용하기
+<Track.PageView schema="page_view" params={{ title: "Home Page" }} />;
+<Track.Click schema="click_button" params={{ target: "submit-button" }} />;
+```
+
+Event Tracker는 선택적으로 [Zod](https://zod.dev/) 라이브러리와 통합하여 스키마 기반의 강력한 데이터 타입 검증 기능을 제공합니다. 이를 통해 개발 단계에서부터 데이터 오류를 방지하고, 트래킹 데이터의 신뢰성을 높일 수 있습니다.
+
+</Steps>

From e8b2262e9de17b6a5d743a5020e1939829920c47 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Wed, 4 Jun 2025 04:27:09 +0900
Subject: [PATCH 02/24] docs: update

---
 docs/src/content/ko/_meta.ts                  |  2 +-
 docs/src/content/ko/components/dom-event.mdx  | 69 +++++++++++++++----
 docs/src/content/ko/components/impression.mdx |  2 +-
 docs/src/content/ko/components/index.mdx      | 17 ++++-
 docs/src/content/ko/create-tracker.mdx        | 39 ++++++++---
 docs/src/content/ko/index.mdx                 |  2 +
 docs/src/content/ko/installation.mdx          |  2 +-
 .../ko/{useTracker.mdx => use-tracker.mdx}    |  0
 8 files changed, 104 insertions(+), 29 deletions(-)
 rename docs/src/content/ko/{useTracker.mdx => use-tracker.mdx} (100%)

diff --git a/docs/src/content/ko/_meta.ts b/docs/src/content/ko/_meta.ts
index df5ee23..7705f64 100644
--- a/docs/src/content/ko/_meta.ts
+++ b/docs/src/content/ko/_meta.ts
@@ -45,7 +45,7 @@ export default {
       collapsed: true,
     },
   },
-  useTracker: {
+  "use-tracker": {
     title: "useTracker",
     theme: {
       toc: true,
diff --git a/docs/src/content/ko/components/dom-event.mdx b/docs/src/content/ko/components/dom-event.mdx
index fdc0149..1623333 100644
--- a/docs/src/content/ko/components/dom-event.mdx
+++ b/docs/src/content/ko/components/dom-event.mdx
@@ -1,6 +1,8 @@
+import { Callout } from "nextra/components";
+
 # DOMEvent
 
-DOM 이벤트를 추적하는 데 사용됩니다. 자식 컴포넌트를 감싸고 지정된 이벤트 핸들러를 실행합니다.
+DOM 이벤트를 추적하는 데 사용됩니다. 자식 컴포넌트를 감싸고 지정된 이벤트 핸들러를 실행합니다. `createTracker`의 리턴 배열의 첫 번쨰 요소인 이벤트 컴포넌트 중 하나입니다.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
@@ -24,21 +26,64 @@ function App() {
 }
 ```
 
+## Reference
+
 ### Props
 
-- `type: DOMEventNames` - 이벤트 이름 (예: onClick, onFocus)
-- 스키마와 함께 사용하는 경우
-  - `params: SchemaParams | (context: Context) => SchemaParams` - 스키마 기반 매개변수
-  - `schema: string` - 이벤트 매개변수 검증을 위한 스키마 이름
-- 스키마와 함께 사용하지 않는 경우
-  - `params: EventParams | (context: Context) => EventParams` - 이벤트 매개변수
-- `enabled?: boolean | ((context: Context, params: EventParams) => boolean)` - 이벤트 추적을 조건부로 활성화/비활성화 (기본값: `true`)
-- `debounce?: DebounceConfig` - 연속적인 이벤트 발생을 방지하는 디바운스 설정
-- `throttle?: ThrottleConfig` - 이벤트 발생 빈도를 제한하는 스로틀 설정
+| Props         | 타입             | 설명                                                  | 필수 |
+| ------------- | ---------------- | ----------------------------------------------------- | ---- |
+| DOMEventNames | DOMEventNames    | 이벤트 이름 (예: `"onClick"`, `"onFocus"`)            | O    |
+| `enabled`     | `boolean         | ((context: Context, params: EventParams) => boolean)` | -    |
+| `debounce`    | `DebounceConfig` | 연속적인 이벤트 발생을 방지하는 디바운스 설정         | -    |
+| `throttle`    | `ThrottleConfig` | 이벤트 발생 빈도를 제한하는 스로틀 설정               | -    |
+
+<Callout type="info">참고: `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다.</Callout>
+
+스키마와 함께 사용하는 경우와 아닐 경우 타입이 달라지는 속성이 있습니다.
+
+| Props    | 스키마 여부 | 타입                                                 | 설명                                    | 필수 |
+| -------- | ----------- | ---------------------------------------------------- | --------------------------------------- | ---- |
+| `params` | O           | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수                    | O    |
+| `schema` | O           | `string`                                             | 이벤트 매개변수 검증을 위한 스키마 이름 | O    |
+| `params` | -           | `EventParams \| (context: Context) => EventParams`   | 이벤트 매개변수                         | O    |
+
+---
+
+#### `params` (필수)
+
+스키마와 함께 사용하는 경우:
+
+- 타입: `SchemaParams | (context: Context) => SchemaParams`
+- 설명: 스키마 기반 매개변수
+
+스키마와 함께 사용하지 않는 경우:
+
+- 타입: `EventParams | (context: Context) => EventParams`
+- 설명: 이벤트 매개변수
+
+#### `schema` (필수)
+
+스키마와 함께 사용하는 경우:
+
+- 타입: `string`
+- 설명: 이벤트 매개변수 검증을 위한 스키마 이름
+
+#### `enabled`
+
+- 타입: `boolean | ((context: Context, params: EventParams) => boolean)`
+- 설명: 이벤트 추적을 조건부로 활성화/비활성화 (기본값: `true`)
+
+#### `debounce`
+
+- 타입: `DebounceConfig`
+- 설명: 연속적인 이벤트 발생을 방지하는 디바운스 설정
+
+#### `throttle`
 
-**참고:** `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다.
+- 타입: `ThrottleConfig`
+- 설명: 이벤트 발생 빈도를 제한하는 스로틀 설정
 
-### 추적 옵션 예제
+### Examples
 
 #### 조건부 추적
 
diff --git a/docs/src/content/ko/components/impression.mdx b/docs/src/content/ko/components/impression.mdx
index d664b5c..7bfbb58 100644
--- a/docs/src/content/ko/components/impression.mdx
+++ b/docs/src/content/ko/components/impression.mdx
@@ -1,6 +1,6 @@
 # Impression
 
-Intersection Observer API를 사용하여 노출 이벤트를 추적합니다.
+Intersection Observer API를 사용하여 노출 이벤트를 추적합니다. `createTracker`의 리턴 배열의 첫 번쨰 요소인 이벤트 컴포넌트 중 하나입니다.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
diff --git a/docs/src/content/ko/components/index.mdx b/docs/src/content/ko/components/index.mdx
index 2189f78..a565b32 100644
--- a/docs/src/content/ko/components/index.mdx
+++ b/docs/src/content/ko/components/index.mdx
@@ -1,6 +1,6 @@
 # Provider
 
-`Provider` 컴포넌트는 애플리케이션에 초기 컨텍스트를 연결하고 제공합니다.
+`Provider` 컴포넌트는 애플리케이션에 초기 컨텍스트를 연결하고 제공합니다. `createTracker`의 리턴 배열의 첫 번쨰 요소인 이벤트 컴포넌트 중 하나입니다.
 
 ```tsx
 import { createTracker } from '@offlegacy/event-tracker'
@@ -10,12 +10,23 @@ const [Track] = createTracker({...})
 function App() {
   return (
     <Track.Provider initialContext={{}}>
-      {/* 애플리케이션 컨텐츠 */}
+      {/* 애플리케이션 */}
     </Track.Provider>
   )
 }
 ```
 
+## Reference
+
 ### Props
 
-- `initialContext?: Context` - 초기 컨텍스트 값
+| Props            | 타입      | 설명             | 예제                |
+| ---------------- | --------- | ---------------- | ------------------- |
+| `initialContext` | `Context` | 초기 컨텍스트 값 | `{ userId: '123' }` |
+
+---
+
+#### `initialContext` (필수)
+
+- 타입: `Context`
+- 설명: 초기 컨텍스트 값
diff --git a/docs/src/content/ko/create-tracker.mdx b/docs/src/content/ko/create-tracker.mdx
index 8f0dbfe..dea5919 100644
--- a/docs/src/content/ko/create-tracker.mdx
+++ b/docs/src/content/ko/create-tracker.mdx
@@ -25,7 +25,7 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTrack
 
 `createTracker`는 하나의 설정 객체를 인자로 받습니다.
 
-| 옵션         | 타입                                                                                                                     | 설명                                                        |
+| 설정         | 타입                                                                                                                     | 설명                                                        |
 | ------------ | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------- |
 | `init`       | `(initialContext: Context, setContext: SetContext) => void \| Promise<void>`                                             | 모든 이벤트 발생 전에 실행되는 초기화 함수. Promise 지원.   |
 | `send`       | `(params: EventParams \| (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType` | 이벤트 전송 함수. Promise 지원.                             |
@@ -64,9 +64,9 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTrack
   - 타입: `ImpressionOptions`
   - 속성:
 
-    - `threshold`: 노출 비율 기준 (기본값: 0.2)
-    - `freezeOnceVisible`: 노출 후 상태 고정 여부 (기본값: true)
-    - `initialIsIntersecting`: 초기 교차 여부 (기본값: false)
+    - `threshold`: 노출 비율 기준 (기본값: `0.2`)
+    - `freezeOnceVisible`: 노출 후 상태 고정 여부 (기본값: `true`)
+    - `initialIsIntersecting`: 초기 교차 여부 (기본값: `false`)
 
 #### `pageView`
 
@@ -80,9 +80,9 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTrack
 - 타입: `BatchConfig`
 - 속성:
 
-  - `batch.enable`: 배치 활성화 여부 (기본값: false)
-  - `batch.interval`: 전송 간격(ms, 기본값: 3000)
-  - `batch.thresholdSize`: 최대 배치 크기 (기본값: 25)
+  - `batch.enable`: 배치 활성화 여부 (기본값: `false`)
+  - `batch.interval`: 전송 간격(ms, 기본값: `3000`)
+  - `batch.thresholdSize`: 최대 배치 크기 (기본값: `25`)
   - `batch.onFlush`: 이벤트 전송 처리 함수
   - `batch.onError`: 오류 발생 시 처리 함수 (옵셔널)
 
@@ -93,7 +93,7 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTrack
 
   - `schemas.schema`: [Zod](https://zod.dev/) 기반의 스키마 정의
   - `schemas.onSchemaError`: 스키마 오류 발생 시 처리 함수
-  - `schemas.abortOnError`: 오류 시 이벤트 중단 여부 (기본값: false)
+  - `schemas.abortOnError`: 오류 시 이벤트 중단 여부 (기본값: `false`)
 
 ### Returns
 
@@ -103,8 +103,25 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTrack
 const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTracker] = createTracker({...})
 ```
 
-1. 이벤트 컴포넌트 (`Tracker`)
+#### [Components](./components)
 
-   - `Provider`, `DOMEvent`, `Click`, `Impression`, `PageView`, `SetContext`
+리턴 배열에서 첫 요소인 이벤트 컴포넌트는 여러 가지 이벤트 컴포넌트를 포함하고 있습니다.
 
-2. 커스텀 훅 (`useTracker`)
+```tsx
+const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }] = createTracker(config);
+```
+
+- `Provider`
+- `DOMEvent`
+- `Click`
+- `Impression`
+- `PageView`
+- `SetContext`
+
+#### [useTracker](./use-tracker)
+
+```tsx
+const [, useTracker] = createTracker(config);
+```
+
+리턴 배열에서 두번째 요소인 커스텀 React hook입니다. 이 훅은 컴포넌트 내에서 이벤트 트래킹 기능과 컨텍스트 관리에 접근할 수 있게 합니다.
diff --git a/docs/src/content/ko/index.mdx b/docs/src/content/ko/index.mdx
index aa96cf6..03c0269 100644
--- a/docs/src/content/ko/index.mdx
+++ b/docs/src/content/ko/index.mdx
@@ -55,6 +55,8 @@ Event Tracker를 효과적으로 사용하기 위해 알아야 할 몇 가지 
 
 라이브러리의 가장 기본적인 출발점입니다. `createTracker` 함수를 사용하여 트래커 인스턴스(`Track` 컴포넌트 컬렉션과 `useTracker` 훅)를 생성합니다. 이때, DOM 이벤트 핸들러, 노출(Impression) 이벤트 핸들러, 스키마 등을 설정하여 이벤트 트래킹을 정의합니다.
 
+목적에 따라 구분하여 여러 가지 트래커 인스턴스를 생성할 수 있습니다. (예를 들어, Google Analytics로 보내는 이벤트와 Amplitude로 보내는 이벤트를 구분하여 생성할 수 있습니다.)
+
 ### 프로바이더 (`Track.Provider`)
 
 React의 Context API를 기반으로 구현되었습니다. 애플리케이션 또는 특정 컴포넌트 트리의 최상단에서 `Track.Provider`로 감싸 하위 컴포넌트들에 트래킹에 필요한 공통 데이터(컨텍스트)를 제공합니다. 예를 들어, `userId`, `pageName` 등의 정보를 컨텍스트로 전달하면, 각 이벤트 트래킹 시 이 정보를 활용할 수 있습니다.
diff --git a/docs/src/content/ko/installation.mdx b/docs/src/content/ko/installation.mdx
index fa7b78a..9a3705c 100644
--- a/docs/src/content/ko/installation.mdx
+++ b/docs/src/content/ko/installation.mdx
@@ -1,6 +1,6 @@
 # 설치
 
-Event Tracker는 React 애플리케이션에서 이벤트 트래킹을 쉽게 구현할 수 있도록 설계된 라이브러리입니다. `React 18.0.0` 이상의 버전에서 사용할 수 있으며, TypeScript를 완벽하게 지원합니다.
+Event Tracker는 React 애플리케이션에서 이벤트 트래킹을 쉽게 구현할 수 있도록 설계된 라이브러리입니다. `React 18.0.0` 이상의 버전에서 사용할 수 있습니다.
 
 최신 안정 버전을 설치하려면 아래 명령어를 실행하세요.
 
diff --git a/docs/src/content/ko/useTracker.mdx b/docs/src/content/ko/use-tracker.mdx
similarity index 100%
rename from docs/src/content/ko/useTracker.mdx
rename to docs/src/content/ko/use-tracker.mdx

From b8da2691e1aa73b0c0411103386b498ea663ea56 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Thu, 12 Jun 2025 20:20:57 +0900
Subject: [PATCH 03/24] docs: update en

---
 docs/src/content/en/_meta.ts                  |  42 +++-
 .../en/{quick-start.mdx => basic-example.mdx} |   6 +-
 docs/src/content/en/components.mdx            | 189 ---------------
 docs/src/content/en/components/index.mdx      |  17 +-
 docs/src/content/en/create-tracker.mdx        | 136 ++++++-----
 docs/src/content/en/hook.mdx                  | 223 -----------------
 docs/src/content/en/index.mdx                 | 229 +++++-------------
 docs/src/content/en/installation.mdx          |   4 +-
 docs/src/content/en/use-tracker.mdx           | 225 +++++++++++++++++
 docs/src/content/en/why-event-tracker.mdx     | 184 ++++++++++++++
 10 files changed, 591 insertions(+), 664 deletions(-)
 rename docs/src/content/en/{quick-start.mdx => basic-example.mdx} (83%)
 delete mode 100644 docs/src/content/en/components.mdx
 delete mode 100644 docs/src/content/en/hook.mdx
 create mode 100644 docs/src/content/en/use-tracker.mdx
 create mode 100644 docs/src/content/en/why-event-tracker.mdx

diff --git a/docs/src/content/en/_meta.ts b/docs/src/content/en/_meta.ts
index 29d0799..1c36a1e 100644
--- a/docs/src/content/en/_meta.ts
+++ b/docs/src/content/en/_meta.ts
@@ -1,6 +1,6 @@
 import { MetaRecord } from "nextra";
 
-const meta: MetaRecord = {
+export default {
   "getting-started-separator": {
     type: "separator",
     title: "Getting Started",
@@ -12,21 +12,21 @@ const meta: MetaRecord = {
       layout: "default",
     },
   },
-  installation: {
-    title: "Installation",
+  "why-event-tracker": {
+    title: "Why Event Tracker?",
     theme: {
       toc: true,
       layout: "default",
     },
   },
-  "quick-start": {
-    title: "Quick Start",
+  installation: {
+    title: "Installation",
     theme: {
       toc: true,
       layout: "default",
     },
   },
-  "api-separator": {
+  "api-reference-separator": {
     title: "API Reference",
     type: "separator",
   },
@@ -38,21 +38,21 @@ const meta: MetaRecord = {
     },
   },
   components: {
-    title: "components",
+    title: "Components",
     theme: {
       toc: true,
       layout: "default",
     },
   },
-  hook: {
-    title: "hook",
+  "use-tracker": {
+    title: "useTracker",
     theme: {
       toc: true,
       layout: "default",
     },
   },
   "advanced-separator": {
-    title: "Advanced",
+    title: "Guides",
     type: "separator",
   },
   batching: {
@@ -62,6 +62,22 @@ const meta: MetaRecord = {
       layout: "default",
     },
   },
-};
-
-export default meta;
+  "data-type-validation": {
+    title: "Data Type Validation",
+    theme: {
+      toc: true,
+      layout: "default",
+    },
+  },
+  "example-separator": {
+    title: "Examples",
+    type: "separator",
+  },
+  "basic-example": {
+    title: "Basic",
+    theme: {
+      toc: true,
+      layout: "default",
+    },
+  },
+} satisfies MetaRecord;
diff --git a/docs/src/content/en/quick-start.mdx b/docs/src/content/en/basic-example.mdx
similarity index 83%
rename from docs/src/content/en/quick-start.mdx
rename to docs/src/content/en/basic-example.mdx
index 0a5728b..6c06e3e 100644
--- a/docs/src/content/en/quick-start.mdx
+++ b/docs/src/content/en/basic-example.mdx
@@ -1,6 +1,6 @@
-# Quick Start
+# Guide
 
-Here's a simple example of how to use event-tracker:
+Here's a simple example demonstrating how to use `event-tracker`:
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
@@ -14,7 +14,7 @@ const [Track, useTracker] = createTracker({
   },
 });
 
-// Use in your app
+// Usage within the app
 function App() {
   return (
     <Track.Provider initialContext={{ userId: "user-123" }}>
diff --git a/docs/src/content/en/components.mdx b/docs/src/content/en/components.mdx
deleted file mode 100644
index 64113ec..0000000
--- a/docs/src/content/en/components.mdx
+++ /dev/null
@@ -1,189 +0,0 @@
-# Components
-
-event-tracker provides several components for tracking different types of events. Each component is designed to be easy to use while maintaining type safety and performance.
-
-## Provider
-
-The `Provider` component connects and provides initial context to your application.
-
-```tsx
-import { createTracker } from '@offlegacy/event-tracker'
-
-const [Track] = createTracker({...})
-
-function App() {
-  return (
-    <Track.Provider initialContext={{}}>
-      {/* Your app content */}
-    </Track.Provider>
-  )
-}
-```
-
-### Props
-
-- `initialContext: unknown` - Initial context value
-
-## DOMEvent
-
-Used for tracking DOM events. Wraps a child component and fires the specified event handler.
-
-```tsx
-import { createTracker } from "@offlegacy/event-tracker";
-
-const [Track] = createTracker({
-  DOMEvents: {
-    onFocus: (params, context) => {
-      // Handle focus event
-    },
-  },
-});
-
-function App() {
-  return (
-    <Track.Provider initialContext={{}}>
-      <Track.DOMEvent type="onFocus" params={{}}>
-        <input />
-      </Track.DOMEvent>
-    </Track.Provider>
-  );
-}
-```
-
-### Props
-
-- `type: DOMEventNames` - Event name (e.g., onClick, onFocus)
-- (With schema)
-  - `params: SchemaParams | (context: Context) => SchemaParams` - Event parameters
-  - `schema?: string` - A name of schema that will be used to validate the event parameters
-- (Without schema)
-  - `params: EventParams | (context: Context) => EventParams` - Event parameters
-
-## Click
-
-A specialized version of `DOMEvent` for click events (`type="onClick"`).
-
-```tsx
-import { createTracker } from "@offlegacy/event-tracker";
-
-const [Track] = createTracker({
-  DOMEvents: {
-    onClick: (params, context) => {
-      // Handle click event
-    },
-  },
-});
-
-function App() {
-  return (
-    <Track.Provider initialContext={{}}>
-      <Track.Click params={{ buttonId: "submit" }}>
-        <button>Submit</button>
-      </Track.Click>
-    </Track.Provider>
-  );
-}
-```
-
-### Props
-
-- With schema
-  - `params: SchemaParams | (context: Context) => SchemaParams` - Click event parameters
-  - `schema?: string` - A name of schema that will be used to validate the event parameters
-- Without schema
-  - `params: EventParams | (context: Context) => EventParams` - Click event parameters
-
-## Impression
-
-Tracks impression events using the Intersection Observer API.
-
-```tsx
-import { createTracker } from "@offlegacy/event-tracker";
-
-const [Track] = createTracker({
-  impression: {
-    onImpression: (params, context) => {
-      // Handle impression event
-    },
-    options: {
-      threshold: 0.5,
-    },
-  },
-});
-
-function App() {
-  return (
-    <Track.Provider initialContext={{}}>
-      <Track.Impression params={{ elementId: "hero" }} options={{ threshold: 0.8 }}>
-        <div>Tracked content</div>
-      </Track.Impression>
-    </Track.Provider>
-  );
-}
-```
-
-### Props
-
-- Without schema
-  - `params:  EventParams | (context: Context) => EventParams` - Impression event parameters
-  - `options?: ImpressionOptions` - Optional configuration (overrides global options)
-- With schema
-  - `params: SchemaParams | (context: Context) => SchemaParams` - Impression event parameters
-  - `schema?: string` - A name of schema that will be used to validate the event parameters
-  - `options?: ImpressionOptions` - Optional configuration (overrides global options)
-
-## PageView
-
-Tracks page view events on component mount.
-
-```tsx
-import { createTracker } from "@offlegacy/event-tracker";
-
-const [Track] = createTracker({
-  pageView: {
-    onPageView: (params, context) => {
-      // Handle page view event
-    },
-  },
-});
-
-function App() {
-  return (
-    <Track.Provider initialContext={{}}>
-      <Track.PageView params={{ page: "/home" }} />
-    </Track.Provider>
-  );
-}
-```
-
-### Props
-
-- With schema
-  - `params: SchemaParams | (context: Context) => SchemaParams` - Page view event parameters
-  - `schema?: string` - A name of schema that will be used to validate the event parameters
-- Without schema
-  - `params: EventParams | (context: Context) => EventParams` - Page view event parameters
-
-## SetContext
-
-Sets or updates the tracking context.
-
-```tsx
-import { createTracker } from '@offlegacy/event-tracker'
-
-const [Track] = createTracker({...})
-
-function App() {
-  return (
-    <Track.Provider initialContext={{ userId: 'user-1' }}>
-      <Track.SetContext
-        context={{ lastActive: new Date() }}
-      />
-    </Track.Provider>
-  )
-}
-```
-
-### Props
-
-- `context: unknown | ((prevContext: unknown) => unknown)` - New context value or update function
diff --git a/docs/src/content/en/components/index.mdx b/docs/src/content/en/components/index.mdx
index 814a375..13da1ae 100644
--- a/docs/src/content/en/components/index.mdx
+++ b/docs/src/content/en/components/index.mdx
@@ -1,6 +1,6 @@
 # Provider
 
-The `Provider` component connects and provides initial context to your application.
+The `Provider` component attaches and provides the initial context to your application. It is one of the event components included as the first element of the tuple returned by `createTracker`.
 
 ```tsx
 import { createTracker } from '@offlegacy/event-tracker'
@@ -10,12 +10,23 @@ const [Track] = createTracker({...})
 function App() {
   return (
     <Track.Provider initialContext={{}}>
-      {/* Your app content */}
+      {/* Application */}
     </Track.Provider>
   )
 }
 ```
 
+## Reference
+
 ### Props
 
-- `initialContext?: Context` - Initial context value
+| Props            | Type      | Description           | Example             |
+| ---------------- | --------- | --------------------- | ------------------- |
+| `initialContext` | `Context` | Initial context value | `{ userId: '123' }` |
+
+---
+
+#### `initialContext` (required)
+
+- Type: `Context`
+- Description: The initial context value provided to the application.
diff --git a/docs/src/content/en/create-tracker.mdx b/docs/src/content/en/create-tracker.mdx
index 229279b..6d143a0 100644
--- a/docs/src/content/en/create-tracker.mdx
+++ b/docs/src/content/en/create-tracker.mdx
@@ -1,6 +1,6 @@
-# createTracker(config)
+# createTracker
 
-The main function to create a tracker instance with your desired configuration.
+`createTracker` is a function used to create tracker instances with custom configurations. It allows you to define event tracking behaviors through parameters, returning a tuple containing the tracker instance and a custom hook for usage.
 
 ```tsx
 const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTracker] = createTracker({
@@ -19,95 +19,109 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTrack
 });
 ```
 
-### Configuration Options
+## Reference
 
-#### init
+### Parameters
+
+`createTracker` accepts a single configuration object as its parameter.
+
+| Option       | Type                                                                                                                     | Description                                                                          |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
+| `init`       | `(initialContext: Context, setContext: SetContext) => void \| Promise<void>`                                             | Initialization function executed before any event occurs. Supports async operations. |
+| `send`       | `(params: EventParams \| (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType` | Function for sending events externally. Supports async operations.                   |
+| `DOMEvents`  | [`DOMEvents`](https://developer.mozilla.org/docs/Web/API/Event)                                                          | Collection of React DOM event handlers (`onClick`, `onMouseEnter`, etc.).            |
+| `impression` | `ImpressionOptions`                                                                                                      | Configuration for impression event tracking.                                         |
+| `pageView`   | `PageViewOptions`                                                                                                        | Configuration for page view tracking.                                                |
+| `batch`      | `BatchConfig`                                                                                                            | Configuration for event batching.                                                    |
+| `schemas`    | `SchemaConfig`                                                                                                           | Configuration for event schema validation.                                           |
+
+---
+
+#### `init`
 
 - Type: `(initialContext: Context, setContext: SetContext) => void | Promise<void>`
-- Optional
-- Function executed before any events happen
-- If it returns a promise, events will be delayed until the promise resolves
+- Description: Function to set the initial context before any event occurs. Supports asynchronous functions.
 
-#### send
+#### `send`
 
 - Type: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
-- Optional
-- Standard function to send events
-- If it returns a promise, events will be delayed until the promise resolves
+- Description: Function for sending events externally. Supports asynchronous operations.
 
-#### DOMEvents
+#### `DOMEvents`
 
 - Type: `DOMEvents`
-- Optional
-- Collection of standard React DOM events (`onClick`, `onMouseEnter`, etc.)
-- Each handler is executed when that event occurs on a `<Track.DOMEvent type=[event type]>`
-- If a handler returns a promise, subsequent event callbacks will be delayed until it resolves
-
-#### impression
+- Description: Standard React DOM event handlers. Used by `<Track.DOMEvent>` components.
 
-Configuration for impression tracking:
+#### `impression`
 
-- onImpression
+- `impression.onImpression`
 
   - Type: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
-  - Optional
-  - Executed when impression occurs on a `<Track.Impression>` child
-  - Promise return value will delay subsequent callbacks
+  - Description: Callback executed when `<Track.Impression>` event occurs.
 
-- options
-  - Type: `ImpressionOptions`
-  - Optional
-  - Configuration options for impression tracking:
-    - `threshold`: Percentage of visibility needed (default: 0.2)
-    - `freezeOnceVisible`: Freeze intersection state after visibility (default: true)
-    - `initialIsIntersecting`: Initial intersection state (default: false)
+- `impression.options`
 
-#### pageView
+  - Type: `ImpressionOptions`
+  - Properties:
 
-Configuration for page view tracking:
+    - `threshold`: Visibility threshold ratio (default: `0.2`)
+    - `freezeOnceVisible`: Fix visibility state after impression (default: `true`)
+    - `initialIsIntersecting`: Initial intersection state (default: `false`)
 
-##### onPageView
+#### `pageView`
 
-- Type: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
-- Optional
-- Executed when `<Track.PageView>` is mounted
-- Promise return value will delay subsequent events
+- `pageView.onPageView`
 
-#### batch
+  - Type: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
+  - Description: Executed when `<Track.PageView>` component mounts.
 
-Configuration for event batching:
+#### `batch`
 
 - Type: `BatchConfig`
-- Optional
 - Properties:
-  - `enable`: Enable batching (default: false)
-  - `interval`: Flush interval in ms (default: 3000)
-  - `thresholdSize`: Max batch size (default: 25)
-  - `onFlush`: Function to handle batch flush (required if enabled)
-  - `onError`: Error handler (optional)
 
-#### schemas
+  - `batch.enable`: Enable batching (default: `false`)
+  - `batch.interval`: Sending interval in milliseconds (default: `3000`)
+  - `batch.thresholdSize`: Maximum batch size (default: `25`)
+  - `batch.onFlush`: Function to handle batched event sending
+  - `batch.onError`: Optional error handling function
 
-Configuration for data type validation:
+#### `schemas`
 
 - Type: `SchemaConfig`
-- Optional
 - Properties:
-  - `schemas`: A record of [Zod](https://zod.dev/) schemas
-  - `onSchemaError`?: Function to handle schema validation errors
-  - `abortOnError`?: Whether to abort event tracking if a schema validation error occurs (default: false)
 
-### Return Value
+  - `schemas.schema`: Schema definitions based on [Zod](https://zod.dev/)
+  - `schemas.onSchemaError`: Function executed when schema validation errors occur
+  - `schemas.abortOnError`: Abort events on validation error (default: `false`)
 
-The `createTracker` function returns a tuple containing:
+### Returns
 
-1. An object with tracking components:
+`createTracker` returns a tuple containing the following two elements:
 
-   - [`Provider`](/docs/components)
-   - [`DOMEvent`](/docs/components/dom-event)
-   - [`Click`](/docs/components/click)
-   - [`Impression`](/docs/components/impression)
-   - [`PageView`](/docs/components/page-view)
-   - [`SetContext`](/docs/components/set-context)
+```tsx
+const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTracker] = createTracker({...})
+```
+
+#### [Components](./components)
+
+The first element of the returned tuple contains various event components:
+
+```tsx
+const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }] = createTracker(config);
+```
+
+- `Provider`
+- `DOMEvent`
+- `Click`
+- `Impression`
+- `PageView`
+- `SetContext`
+
+#### [useTracker](./use-tracker)
+
+```tsx
+const [, useTracker] = createTracker(config);
+```
 
-2. The [custom hook](/docs/hook)
+The second element of the returned tuple is a custom React hook. It provides access to event tracking functionalities and context management within components.
diff --git a/docs/src/content/en/hook.mdx b/docs/src/content/en/hook.mdx
deleted file mode 100644
index 0c8c4e2..0000000
--- a/docs/src/content/en/hook.mdx
+++ /dev/null
@@ -1,223 +0,0 @@
-# hook
-
-A custom React hook returned as the second array item from [`createTracker`](/docs/create-tracker).  
-It provides access to tracking functionality and context management within your components.
-
-```tsx
-import { createTracker } from "@offlegacy/event-tracker";
-
-const [Track, useTracker] = createTracker({...})
-
-function MyComponent() {
-  const { setContext, getContext, track, trackWithSchema } = useTracker();
-
-  return (
-    // Your component content
-  );
-}
-```
-
-### Return Value
-
-The hook returns an object with the following properties:
-
-#### setContext
-
-- Type: `(context: Context) => void`
-- Sets or updates the current tracking context
-- Can be used to update user information, session data, etc.
-
-```tsx
-const { setContext } = useTracker();
-
-// Set new context
-setContext({ userId: "user-123" });
-
-// Update context based on previous value
-setContext((prev) => ({
-  ...prev,
-  lastActive: new Date(),
-}));
-```
-
-#### getContext
-
-- Type: `() => Context`
-- Returns the current tracking context
-- Useful for accessing current tracking state
-
-```tsx
-const { getContext } = useTracker();
-
-const currentContext = getContext();
-console.log("Current user:", currentContext.userId);
-```
-
-#### track
-
-- Type: `Record<keyof EventNames, (params: EventParams, options?: TrackingOptions) => void>`
-- Object containing all configured event tracking functions
-- Keys match the event names defined in your tracker configuration
-- Accepts optional `TrackingOptions` for advanced control
-
-```tsx
-const { track } = useTracker();
-
-// Track a simple click event
-track.onClick({ buttonId: "submit" });
-
-// Track with conditional logic
-track.onClick(
-  { buttonId: "premium" },
-  {
-    enabled: (context) => context.user?.isPremium,
-  },
-);
-
-// Track with debouncing
-track.onClick(
-  { buttonId: "search" },
-  {
-    debounce: { delay: 300, leading: false, trailing: true },
-  },
-);
-
-// Track with throttling
-track.onClick(
-  { buttonId: "rapid-action" },
-  {
-    throttle: { delay: 1000, leading: true, trailing: false },
-  },
-);
-
-// Track an impression
-track.onImpression({ elementId: "hero" });
-```
-
-#### trackWithSchema
-
-- Type: `Record<keyof Schemas, (params: SchemaParams, options?: TrackingOptions) => void>`
-- Object containing all configured event tracking functions with schema validation
-- Keys match the event names defined in your tracker configuration
-- Accepts optional `TrackingOptions` for advanced control
-
-```tsx
-const { trackWithSchema } = useTracker();
-
-// Track a click event with schema
-trackWithSchema.onClick({ schema: "click", params: { buttonId: "submit" } });
-
-// Track with conditional logic and schema
-trackWithSchema.onClick(
-  {
-    schema: "premium_click",
-    params: { buttonId: "premium", userId: "123" },
-  },
-  {
-    enabled: (context, params) => context.user?.id === params.userId,
-  },
-);
-
-// Track with throttling and schema
-trackWithSchema.onImpression(
-  {
-    schema: "impression",
-    params: { elementId: "hero", userId: "123" },
-  },
-  {
-    throttle: { delay: 2000, leading: true, trailing: false },
-  },
-);
-```
-
-### TrackingOptions
-
-Both `track` and `trackWithSchema` methods accept an optional second parameter with the following options:
-
-- `enabled?: boolean | ((context: Context, params: EventParams) => boolean)` - Conditionally enable/disable event tracking
-- `debounce?: DebounceConfig` - Debounce configuration to prevent rapid successive events
-- `throttle?: ThrottleConfig` - Throttle configuration to limit event frequency
-
-**Note:** `debounce` and `throttle` are mutually exclusive and cannot be used together.
-
-#### DebounceConfig
-
-```tsx
-interface DebounceConfig {
-  delay: number; // Delay in milliseconds
-  leading?: boolean; // Execute on leading edge (default: false)
-  trailing?: boolean; // Execute on trailing edge (default: true)
-}
-```
-
-#### ThrottleConfig
-
-```tsx
-interface ThrottleConfig {
-  delay: number; // Delay in milliseconds
-  leading?: boolean; // Execute on leading edge (default: true)
-  trailing?: boolean; // Execute on trailing edge (default: false)
-}
-```
-
-### Example Usage
-
-Here's a complete example showing how to use the custom hook:
-
-```tsx
-import { createTracker } from "@offlegacy/event-tracker";
-
-const [Track, useTracker] = createTracker({
-  onClick: (params) => {
-    // Send event to analytics service
-    analytics.track(params);
-  },
-  pageView: {
-    onPageView: (params) => {
-      // Send event to analytics service
-      analytics.pageView(params);
-    },
-  },
-});
-
-function UserProfile({ userId }) {
-  const { setContext, track, trackWithSchema } = useTracker();
-
-  useEffect(() => {
-    // Update context when user ID changes
-    setContext({ userId });
-
-    // Track page view
-    track.onPageView({ page: "profile" });
-  }, [userId]);
-
-  const handleSettingsClick = () => {
-    // Track custom event
-    trackWithSchema.onClick({ schema: "settings", params: { userId } });
-  };
-
-  return (
-    <div>
-      <h1>User Profile</h1>
-      <button onClick={handleSettingsClick}>Settings</button>
-    </div>
-  );
-}
-```
-
-### Best Practices
-
-1. **Context Updates**
-
-   - Use `setContext` for global state that affects multiple events
-   - Consider using the function form of `setContext` for updates based on previous state
-
-2. **Event Tracking**
-
-   - Use the specific event functions from `track` or `trackWithSchema` when possible
-
-3. **Performance**
-   - Avoid calling tracking functions in render
-   - Use callbacks or effects for tracking
-   - Consider using [batching](/docs/batching) for better performance
-   - Consider using [data type validation](/docs/data-type-validation) for data type safety
diff --git a/docs/src/content/en/index.mdx b/docs/src/content/en/index.mdx
index 2a87bb1..c2585a0 100644
--- a/docs/src/content/en/index.mdx
+++ b/docs/src/content/en/index.mdx
@@ -1,202 +1,89 @@
-# Introduction
-
-## Motivation
-
-Event tracking is a complex task that requires a lot of boilerplate code and complexity.  
-Take a look at this example.
-
-```tsx {14,15, 23-30}
-// Traditional event tracking
-
-const Page = () => {
-  const { user, userId } = useUser();
-
-  return (
-    <div>
-      <p>User: {user.name}</p>
-      <Counter userId={userId} />
-    </div>
-  );
-};
-
-const Counter = ({ userId }: { userId: string }) => {
-  // Receives 'userId' as a prop just for event tracking purposes.
-
-  const [count, setCount] = useState(0);
-  const { track } = useTrackEvent();
-
-  const handleIncrement = () => {
-    setCount(count + 1);
-
-    track({
-      event: "click",
-      params: {
-        type: "count",
-        value: count + 1,
-        userId,
-      },
-    });
-  };
+import { Steps } from "nextra/components";
 
-  return (
-    <div>
-      <p>Count: {count}</p>
-      <button onClick={handleIncrement}>Increment</button>
-    </div>
-  );
-};
-```
-
-The two main inconveniences caused by event tracking in the code are:
+# Introduction
 
-1. **Prop Drilling**: The `userId` is passed as a prop to the `<Counter />` component from the `<Page />` component. If the `<Counter />` component is nested deeper within the component tree, prop drilling can become more severe, reducing the readability and maintainability of the code.
-2. **Coupling of Event Tracking Logic and Business Logic**: The `handleIncrement` function contains both the logic for incrementing the count and tracking the event. Separating the event tracking logic can make the code cleaner and easier to maintain.
+Welcome to the Event Tracker documentation.
 
-## The New Paradigm
+## What is Event Tracker?
 
-`event-tracker` introduces a new paradigm for event tracking.
-The declarative nature of this paradigm simplifies
-the complexity traditionally associated with event tracking, making it accessible to developers of all skill levels.
+Event Tracker is a declarative React library designed to simplify the implementation of complex event tracking, allowing developers to focus more on their business logic. It is designed to efficiently manage event tracking in applications of any scale.
 
-### Declarative event tracking
+```tsx
+import { createTracker } from "@offlegacy/event-tracker";
 
-```tsx {5, 10, 24, 26}
-const Page = () => {
-  const { user, userId } = useUser();
+// Creating a tracker instance
+const [Track, useTracker] = createTracker({
+  DOMEvents: {
+    onClick: (params, context) => {
+      log("Click event:", params, context);
+    },
+  },
+});
 
+// Usage within an app
+function App() {
   return (
-    <Track.Provider initialContext={{ userId }}>
-      <div>
-        <p>User: {user.name}</p>
-        <Counter />
-      </div>
+    <Track.Provider initialContext={{ userId: "userId-123" }}>
+      <Track.Click params={{ buttonId: "event-click" }}>
+        <button>Event Click!</button>
+      </Track.Click>
     </Track.Provider>
   );
-};
+}
+```
 
-const Counter = () => {
-  const [count, setCount] = useState(0);
+### Key Features
 
-  const handleIncrement = () => {
-    setCount(count + 1);
-  };
+Event Tracker provides various features prioritizing both developer experience and application performance.
 
-  return (
-    <div>
-      <p>Count: {count}</p>
-      <Track.Click params={{ value: count + 1, type: "count" }}>
-        <button onClick={handleIncrement}>Increment</button>
-      </Track.Click>
-    </div>
-  );
-};
-```
+| Feature                          | Description                                                                                                                                                                               |
+| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Declarative API with Type Safety | Fully supports [TypeScript](https://www.typescriptlang.org/), reducing errors during development and increasing productivity through auto-completion.                                     |
+| Powerful Data Type Validation    | Ensures data reliability through schema-based validation using [Zod](https://zod.dev/).                                                                                                   |
+| Optimized Performance            | Minimizes network requests through batching, debouncing, or throttling, reducing the impact on application performance.                                                                   |
+| Guaranteed Execution Order       | Ensures asynchronous events are processed in the intended sequence.                                                                                                                       |
+| Analytics Tool Independence      | Flexible integration with any analytics tool (e.g., [Google Analytics](https://analytics.google.com/), [Amplitude](https://amplitude.com/)), without being tied to any specific provider. |
+| Clear Separation of Concerns     | Effectively separates tracking logic from business logic, maximizing code maintainability and scalability.                                                                                |
 
-Using `event-tracker` allows for declarative event tracking, which improves code readability and reduces complexity. This helps developers understand and use event tracking more easily.  
-Your `handleIncrement` function is now only responsible for incrementing the count, and the event tracking is handled by the `<Track.Click />` component.  
-**This declarative approach makes the developer focus on _'what to track'_ and not _'how to track'._**
-How to track should be defined outside of the React app.
+## Core Concepts
 
-### Improve code cohesion outside your application.
+There are several key concepts you need to understand to use Event Tracker effectively.
 
-```tsx
-const [Track] = createTracker({
-  DOMEvents: {
-    onClick: (params, context) => {
-      log({
-        event: "click",
-        params: {
-          ...params,
-          userId: context.userId,
-        },
-      });
-    },
-  },
-  onImpression: (params, context) => {
-    log({
-      event: "impression",
-      params: {
-        ...params,
-        userId: context.userId,
-      },
-    });
-  },
-});
-```
+<Steps>
 
-Your instructions for **'how to track'** is now separated from your business logic.  
-It's located outside your application, so you can change your event tracking provider without having to change your application code.
+### Instance (`createTracker`)
 
-### Data Type Validation
+The foundational starting point of the library. Use the `createTracker` function to generate a tracker instance (a collection of `Track` components and the `useTracker` hook). Define event tracking by configuring DOM event handlers, impression event handlers, schemas, and more.
 
-`event-tracker` provides built-in schema validation using [Zod](https://zod.dev/), a TypeScript-first schema validation library.
+Multiple tracker instances can be created according to specific purposes (e.g., separate instances for sending events to Google Analytics and Amplitude).
 
-```tsx
-import { z } from "zod";
-import { createTracker } from "@offlegacy/event-tracker";
+### Provider (`Track.Provider`)
 
-interface Context {
-  // ...
-}
+Implemented using React's Context API. Wrap your application or component tree at the top with `Track.Provider` to provide common tracking data (context) to child components. For example, providing information such as `userId` and `pageName` through context allows utilizing this information during each event tracking.
 
-interface Params {
-  // ...
-}
+### Event Components (`Track.Click`, `Track.PageView`, etc.)
 
-// Define Schemas
-const schemas = {
-  page_view: z.object({
-    title: z.string(),
-  }),
-  click_button: z.object({
-    target: z.string(),
-  }),
-};
-
-// Configure Tracker
-const [Track] = createTracker<Context, Params, typeof schemas>({
-  // other configurations...
-
-  schema: {
-    schemas: {
-      page_view,
-      click_button,
-    },
-    onSchemaError: (error) => {
-      console.error("Schema validation error:", error);
-    },
-    abortOnError: true,
-  },
-});
+Special components provided to track events declaratively. These are available from the first element of the array returned by `createTracker`.
 
-// Use the schemas
-<Track.PageView schema="page_view" params={{ title: "Home Page" }} />;
-<Track.Click schema="click_button" params={{ target: "submit-button" }} />;
-```
+- `Track.Click`: Tracks click events occurring on child elements.
+- `Track.Impression`: Tracks when child elements become visible on the screen.
+- `Track.PageView`: Tracks page view events upon component mount.
 
-## Key Features
+In addition, you can customize or utilize various provided components that respond to different user interactions and lifecycle events. Each component can receive and utilize specific event-related data through the `context` and `params` props.
 
-- 🎯 **Type-safe APIs**: Declarative event tracking with complete type safety
-- 🛡️ **Data Type Validation**: Ensures data type safety and consistency using schemas
-- ⚡️ **Optimized Performance**: Enhanced performance through event batching
-- 🔄 **Guaranteed Order**: Guaranteed execution order for async operations
-- 🔌 **Analytics Agnostic**: Works with any analytics provider of your choice
-- 🧩 **Clean Separation**: Keeps tracking logic separate from business logic
-- 📦 **Lightweight**: Minimal bundle size impact on your application
+### Custom Hook (`useTracker`)
 
-## Basic Concepts
+Used for more complex or conditional event tracking unrelated directly to component lifecycles or DOM events. The `useTracker` hook lets you access context information from `Track.Provider` and execute defined tracking logic imperatively.
 
-`event-tracker` is built around a few core concepts:
+</Steps>
 
-1. **Tracker Creation**: Use `createTracker` to create a tracker instance with your desired event tracking instructions.
-2. **Provider**: Wrap your app with `Track.Provider` to provide context.
-3. **Event Components**: Use components like `Track.Click` or `Track.Impression` to track events.
-4. **Hooks**: Use the `useTracker` hook to access tracking functionality in your components imperatively.
+## Next Steps
 
-Check out the other sections for detailed documentation on each feature:
+These core concepts work synergistically to provide Event Tracker's powerful and flexible event-tracking environment. For detailed usage and in-depth information about each feature, refer to the documents below:
 
-- [createTracker](/docs/create-tracker) - Detailed API documentation on `createTracker`
-- [components](/docs/components) - Available tracking components
-- [hook](/docs/hook) - Track using the hook
-- [Batching](/docs/batching) - Optimizing performance with event batching
-- [Data Type Validation](/docs/data-type-validation) - Ensuring data type safety and consistency using schemas
+- [Why Event Tracker?](/docs/why-event-tracker): Introduction to the necessity and core features of Event Tracker.
+- [`createTracker`](/docs/create-tracker): Guide to creating tracker instances and detailed configurations.
+- [Components](/docs/components): Examples and details of all available tracking components.
+- [`useTracker`](/docs/hook): Custom tracking techniques using the custom hook.
+- [Batching](/docs/batching): Strategies for optimizing performance through event batching.
+- [Data Type Validation](/docs/data-type-validation): Guide to data validation using Zod schemas.
diff --git a/docs/src/content/en/installation.mdx b/docs/src/content/en/installation.mdx
index 4d9af8e..2cba716 100644
--- a/docs/src/content/en/installation.mdx
+++ b/docs/src/content/en/installation.mdx
@@ -1,6 +1,8 @@
 # Installation
 
-Using npm:
+Event Tracker is a library designed to simplify event tracking in React applications. It supports versions `React 18.0.0` and higher.
+
+To install the latest stable version, run the following command:
 
 ```shell npm2yarn
 npm install @offlegacy/event-tracker
diff --git a/docs/src/content/en/use-tracker.mdx b/docs/src/content/en/use-tracker.mdx
new file mode 100644
index 0000000..81385cb
--- /dev/null
+++ b/docs/src/content/en/use-tracker.mdx
@@ -0,0 +1,225 @@
+# useTracker
+
+[`createTracker`](/docs/create-tracker)에서 두 번째 배열 항목으로 반환되는 커스텀 React hook입니다. 이 훅은 컴포넌트 내에서 이벤트 트래킹 기능과 컨텍스트 관리에 접근할 수 있게 합니다.
+
+예를 들어, 특정 비동기 작업이 완료된 후 또는 사용자의 특정 입력 값에 따라 이벤트를 발생시켜야 할 때 유용합니다.
+
+```tsx
+import { createTracker } from "@offlegacy/event-tracker";
+
+const [Track, useTracker] = createTracker({...})
+
+function MyComponent() {
+  const { setContext, getContext, track, trackWithSchema } = useTracker();
+
+  return (
+    // 컴포넌트 내용
+  );
+}
+```
+
+### 반환 값
+
+이 hook은 다음 속성을 포함하는 객체를 반환합니다:
+
+#### setContext
+
+- Type: `(context: Context) => void`
+- 현재 트래킹 컨텍스트를 설정하거나 업데이트합니다.
+- 사용자 정보, 세션 데이터 등을 업데이트하는 데 사용할 수 있습니다.
+
+```tsx
+const { setContext } = useTracker();
+
+// 새로운 컨텍스트 설정
+setContext({ userId: "user-123" });
+
+// 이전 값에 기반한 컨텍스트 업데이트
+setContext((prev) => ({
+  ...prev,
+  lastActive: new Date(),
+}));
+```
+
+#### getContext
+
+- Type: `() => Context`
+- 현재 트래킹 컨텍스트를 반환합니다.
+- 현재 트래킹 상태에 접근하는 데 유용합니다.
+
+```tsx
+const { getContext } = useTracker();
+
+const currentContext = getContext();
+console.log("Current user:", currentContext.userId);
+```
+
+#### track
+
+- Type: `Record<keyof EventNames, (params: EventParams, options?: TrackingOptions) => void>`
+- 모든 구성된 이벤트 트래킹 함수를 포함하는 객체
+- key는 트래커 구성에 정의된 이벤트 이름과 일치합니다.
+- 고급 제어를 위한 선택적 `TrackingOptions`를 허용합니다.
+
+```tsx
+const { track } = useTracker();
+
+// 간단한 클릭 이벤트 추적
+track.onClick({ buttonId: "submit" });
+
+// 조건부 로직과 함께 추적
+track.onClick(
+  { buttonId: "premium" },
+  {
+    enabled: (context) => context.user?.isPremium,
+  },
+);
+
+// 디바운싱과 함께 추적
+track.onClick(
+  { buttonId: "search" },
+  {
+    debounce: { delay: 300, leading: false, trailing: true },
+  },
+);
+
+// 스로틀링과 함께 추적
+track.onClick(
+  { buttonId: "rapid-action" },
+  {
+    throttle: { delay: 1000, leading: true, trailing: false },
+  },
+);
+
+// 노출 이벤트 추적
+track.onImpression({ elementId: "hero" });
+```
+
+#### trackWithSchema
+
+- Type: `Record<keyof Schemas, (params: SchemaParams, options?: TrackingOptions) => void>`
+- 스키마 검증이 포함된 모든 구성된 이벤트 트래킹 함수를 포함하는 객체
+- key는 트래커 구성에 정의된 이벤트 이름과 일치합니다.
+- 고급 제어를 위한 선택적 `TrackingOptions`를 허용합니다.
+
+```tsx
+const { trackWithSchema } = useTracker();
+
+// 스키마와 함께 클릭 이벤트 추적
+trackWithSchema.onClick({ schema: "click", params: { buttonId: "submit" } });
+
+// 조건부 로직과 스키마와 함께 추적
+trackWithSchema.onClick(
+  {
+    schema: "premium_click",
+    params: { buttonId: "premium", userId: "123" },
+  },
+  {
+    enabled: (context, params) => context.user?.id === params.userId,
+  },
+);
+
+// 스로틀링과 스키마와 함께 추적
+trackWithSchema.onImpression(
+  {
+    schema: "impression",
+    params: { elementId: "hero", userId: "123" },
+  },
+  {
+    throttle: { delay: 2000, leading: true, trailing: false },
+  },
+);
+```
+
+### TrackingOptions
+
+`track`과 `trackWithSchema` 메서드 모두 다음 옵션을 포함하는 선택적 두 번째 매개변수를 허용합니다:
+
+- `enabled?: boolean | ((context: Context, params: EventParams) => boolean)` - 이벤트 추적을 조건부로 활성화/비활성화
+- `debounce?: DebounceConfig` - 연속적인 이벤트 발생을 방지하는 디바운스 설정
+- `throttle?: ThrottleConfig` - 이벤트 발생 빈도를 제한하는 스로틀 설정
+
+**참고:** `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다.
+
+#### DebounceConfig
+
+```tsx
+interface DebounceConfig {
+  delay: number; // 밀리초 단위의 지연 시간
+  leading?: boolean; // 선행 에지에서 실행 (기본값: false)
+  trailing?: boolean; // 후행 에지에서 실행 (기본값: true)
+}
+```
+
+#### ThrottleConfig
+
+```tsx
+interface ThrottleConfig {
+  delay: number; // 밀리초 단위의 지연 시간
+  leading?: boolean; // 선행 에지에서 실행 (기본값: true)
+  trailing?: boolean; // 후행 에지에서 실행 (기본값: false)
+}
+```
+
+### 사용 예제
+
+다음은 이 hook을 사용하는 예제입니다:
+
+```tsx
+import { createTracker } from "@offlegacy/event-tracker";
+
+const [Track, useTracker] = createTracker({
+  onClick: (params) => {
+    // 이벤트를 애널리틱스 서비스로 전송
+    analytics.track(params);
+  },
+  pageView: {
+    onPageView: (params) => {
+      // Send event to analytics service
+      analytics.pageView(params);
+    },
+  },
+});
+
+function UserProfile({ userId }) {
+  const { setContext, track, trackWithSchema } = useTracker();
+
+  useEffect(() => {
+    // 사용자 ID가 변경될 때 컨텍스트 업데이트
+    setContext({ userId });
+
+    // 페이지 뷰 이벤트 트래킹
+    track.onPageView({ page: "profile" });
+  }, [userId]);
+
+  const handleSettingsClick = () => {
+    // 사용자 설정 이벤트 트래킹
+    trackWithSchema.onClick({ schema: "settings", params: { userId } });
+  };
+
+  return (
+    <div>
+      <h1>User Profile</h1>
+      <button onClick={handleSettingsClick}>Settings</button>
+    </div>
+  );
+}
+```
+
+### Best Practices
+
+1. **컨텍스트 업데이트**
+
+   - 여러 이벤트에 영향을 주는 전역 상태를 업데이트하기 위해 `setContext`를 사용하세요.
+   - 이전 상태에 기반한 업데이트를 위해 `setContext`의 함수 형태를 고려하세요.
+
+2. **이벤트 트래킹**
+
+   - 가능한 경우 `track` 또는 `trackWithSchema`에서 이벤트 함수를 사용하세요.
+
+3. **성능**
+
+   - 렌더링 중에 이벤트 트래킹 함수를 호출하지 마세요.
+   - 콜백 또는 효과를 사용하세요.
+   - [배칭](/docs/batching)을 사용하여 성능을 향상시키세요.
+   - [데이터 타입 검증](/docs/data-type-validation)을 사용하여 데이터 타입 안전성을 확인하세요.
diff --git a/docs/src/content/en/why-event-tracker.mdx b/docs/src/content/en/why-event-tracker.mdx
new file mode 100644
index 0000000..96f9050
--- /dev/null
+++ b/docs/src/content/en/why-event-tracker.mdx
@@ -0,0 +1,184 @@
+import { Steps } from "nextra/components";
+
+# Why Event Tracker?
+
+Modern web applications need to continuously analyze user behavior to improve service quality. However, traditional event tracking approaches have various issues.
+
+## Why is Event Tracker Necessary?
+
+The following example illustrates common problems with traditional event tracking methods:
+
+- **Pain of Prop Drilling**: Often, tracking data must be passed through multiple layers of components, negatively impacting readability and maintainability.
+- **Strong Coupling of Logic**: Mixing business logic and tracking logic increases complexity and makes it harder to independently test and modify each.
+- **Increased Boilerplate Code**: Repetitive tracking code significantly hampers developer productivity.
+
+```tsx {8,15,24-31}
+function Page() {
+  const { user, userId } = useUser(); // Retrieves user information and ID.
+
+  return (
+    <div>
+      <p>User: {user.name}</p>
+      {/* Passes userId to Counter component solely for event tracking purposes */}
+      <Counter userId={userId} />
+    </div>
+  );
+}
+
+// Receives 'userId' as prop exclusively for event tracking.
+// Prop drilling intensifies if Counter is placed even deeper in the tree.
+function Counter({ userId }: { userId: string }) {
+  const [count, setCount] = useState(0);
+  const { track } = useTrackEvent(); // Hypothetical tracking hook
+
+  const handleIncrement = () => {
+    const newCount = count + 1;
+    setCount(newCount);
+
+    // Mixing business logic (incrementing count) with tracking logic.
+    track({
+      event: "click_increment",
+      params: {
+        type: "count",
+        value: newCount,
+        userId, // userId received from the parent component
+      },
+    });
+  };
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={handleIncrement}>Increment</button>
+    </div>
+  );
+}
+```
+
+## New Paradigm Offered by Event Tracker
+
+Event Tracker introduces a new paradigm for event tracking. Its declarative approach simplifies traditional complexities, making event tracking accessible for all developers.
+
+<Steps>
+
+### Declarative Event Tracking
+
+```tsx {7,10,12,32,34}
+function Page() {
+  const { user, userId } = useUser();
+
+  // Provides tracking context (userId) to child components via Track.Provider.
+  // Eliminates the need for prop drilling.
+  return (
+    <Track.Provider initialContext={{ userId }}>
+      <div>
+        <p>User: {user.name}</p>
+        <Counter /> {/* No need to pass userId as prop */}
+      </div>
+    </Track.Provider>
+  );
+}
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  const handleIncrement = () => {
+    // handleIncrement now focuses solely on increment logic.
+    setCount(count + 1);
+  };
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      {/*
+        Track.Click component wraps the click event and automatically tracks the event
+        with the provided parameters. The userId provided in the context is automatically included.
+      */}
+      <Track.Click params={{ value: count + 1, type: "count" }}>
+        <button onClick={handleIncrement}>Increment</button>
+      </Track.Click>
+    </div>
+  );
+}
+```
+
+With Event Tracker, declarative event tracking significantly improves code readability and reduces complexity, helping developers more easily understand and implement tracking.
+
+Now the `handleIncrement` function is only responsible for increasing the count, while the `<Track.Click />` component handles tracking.
+**This declarative approach lets developers focus on 'what to track' rather than 'how to track.'**
+The actual tracking logic is defined externally from the React app.
+
+### Improved Cohesion in Event Tracking
+
+```tsx {4-10,14-20}
+const [Track, useTracker] = createTracker({
+  // Callback executed on DOM events
+  DOMEvents: {
+    onClick: (params, context) => {
+      // Call the actual tracking library (e.g., Google Analytics, Amplitude)
+      logEvent("click_event", {
+        ...params, // { value: ..., type: "count" }
+        userId: context.userId, // userId from Track.Provider
+      });
+    },
+    // Define additional DOM event handlers (onMouseOver, onFocus, etc.) as needed
+  },
+  // Callback executed on Impression events
+  onImpression: (params, context) => {
+    logEvent("impression_event", {
+      ...params,
+      userId: context.userId,
+      pagePath: window.location.pathname,
+    });
+  },
+});
+```
+
+Now the code for **'how to track'** is separated from business logic. Located externally, it can be modified without impacting business logic.
+
+### Data Type Validation
+
+```tsx {13-20,24-33}
+import { z } from "zod";
+import { createTracker } from "@offlegacy/event-tracker";
+
+interface Context {
+  /* ... */
+}
+
+interface Params {
+  /* ... */
+}
+
+// Schema definition
+const schemas = {
+  page_view: z.object({
+    title: z.string(),
+  }),
+  click_button: z.object({
+    target: z.string(),
+  }),
+};
+
+// Tracker setup
+const [Track] = createTracker<Context, Params, typeof schemas>({
+  schema: {
+    schemas: {
+      page_view,
+      click_button,
+    },
+    onSchemaError: (error) => {
+      console.error("Schema validation error:", error);
+    },
+    abortOnError: true,
+  },
+});
+
+// Using schemas
+<Track.PageView schema="page_view" params={{ title: "Home Page" }} />;
+<Track.Click schema="click_button" params={{ target: "submit-button" }} />;
+```
+
+Event Tracker optionally integrates with [Zod](https://zod.dev/) to offer robust schema-based data validation. This ensures data correctness from the development stage, enhancing tracking data reliability.
+
+</Steps>

From 355861d2782b330de004d6f3a340f1bec9f104d5 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Wed, 25 Jun 2025 20:51:48 +0900
Subject: [PATCH 04/24] feat(docs): new landing page

---
 docs/next.config.ts                     |   8 ++
 docs/package.json                       |   4 +-
 docs/pnpm-lock.yaml                     |  48 ++++++++
 docs/src/app/[lang]/layout.tsx          |   4 +-
 docs/src/app/[lang]/page.tsx            | 148 +++++++++++++++---------
 docs/src/components/demo-button.tsx     |  20 ++++
 docs/src/components/demo-playground.tsx |  52 +++++++++
 7 files changed, 224 insertions(+), 60 deletions(-)
 create mode 100644 docs/src/components/demo-button.tsx
 create mode 100644 docs/src/components/demo-playground.tsx

diff --git a/docs/next.config.ts b/docs/next.config.ts
index 6a5d444..ce2bbac 100644
--- a/docs/next.config.ts
+++ b/docs/next.config.ts
@@ -14,6 +14,14 @@ const nextConfig: NextConfig = {
     locales: ["en", "ko"],
     defaultLocale: "en",
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "contrib.rocks",
+      },
+    ],
+  },
 };
 
 export default withNextra(nextConfig);
diff --git a/docs/package.json b/docs/package.json
index dd03668..960d0b8 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -13,11 +13,13 @@
   "dependencies": {
     "@amplitude/analytics-browser": "^2.11.11",
     "@offlegacy/event-tracker": "^1.0.3",
+    "codehike": "^1.0.7",
     "next": "15.1.6",
     "nextra": "^4.0.7",
     "nextra-theme-docs": "^4.0.7",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "sonner": "^2.0.5"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index cf56380..331d05f 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@offlegacy/event-tracker':
         specifier: ^1.0.3
         version: 1.0.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      codehike:
+        specifier: ^1.0.7
+        version: 1.0.7
       next:
         specifier: 15.1.6
         version: 15.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -29,6 +32,9 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.0.0(react@19.0.0)
+      sonner:
+        specifier: ^2.0.5
+        version: 2.0.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
     devDependencies:
       '@eslint/eslintrc':
         specifier: ^3.2.0
@@ -121,6 +127,9 @@ packages:
   '@chevrotain/utils@11.0.3':
     resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==}
 
+  '@code-hike/lighter@1.0.1':
+    resolution: {integrity: sha512-mccvcsk5UTScRrE02oBz1/qzckyhD8YE3VQlQv++2bSVVZgNuCUX8MpokSCi5OmfRAAxbj6kmNiqq1Um8eXPrw==}
+
   '@emnapi/runtime@1.3.1':
     resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
 
@@ -856,6 +865,9 @@ packages:
     resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
 
+  ansi-sequence-parser@1.1.1:
+    resolution: {integrity: sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==}
+
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -1037,6 +1049,9 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  codehike@1.0.7:
+    resolution: {integrity: sha512-m4YOQv1l06qoGBLCgXRNT45MKAudXjir9v+WTs7Xb0gfze6LN3ZiUp08+WRA1N/QGT1SHbzvck8txvPq+C2EPg==}
+
   collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
 
@@ -1322,6 +1337,10 @@ packages:
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
+  diff@5.2.0:
+    resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
+    engines: {node: '>=0.3.1'}
+
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
@@ -2856,6 +2875,12 @@ packages:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
 
+  sonner@2.0.5:
+    resolution: {integrity: sha512-YwbHQO6cSso3HBXlbCkgrgzDNIhws14r4MO87Ofy+cV2X7ES4pOoAK3+veSmVTvqNx1BWUxlhPmZzP00Crk2aQ==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -3314,6 +3339,10 @@ snapshots:
 
   '@chevrotain/utils@11.0.3': {}
 
+  '@code-hike/lighter@1.0.1':
+    dependencies:
+      ansi-sequence-parser: 1.1.1
+
   '@emnapi/runtime@1.3.1':
     dependencies:
       tslib: 2.8.1
@@ -4083,6 +4112,8 @@ snapshots:
 
   ansi-regex@6.1.0: {}
 
+  ansi-sequence-parser@1.1.1: {}
+
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
@@ -4286,6 +4317,16 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  codehike@1.0.7:
+    dependencies:
+      '@code-hike/lighter': 1.0.1
+      diff: 5.2.0
+      estree-util-visit: 2.0.0
+      mdast-util-mdx-jsx: 3.2.0
+      unist-util-visit: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   collapse-white-space@2.1.0: {}
 
   color-convert@2.0.1:
@@ -4587,6 +4628,8 @@ snapshots:
 
   didyoumean@1.2.2: {}
 
+  diff@5.2.0: {}
+
   dlv@1.1.3: {}
 
   doctrine@2.1.0:
@@ -6867,6 +6910,11 @@ snapshots:
 
   slash@5.1.0: {}
 
+  sonner@2.0.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   source-map-js@1.2.1: {}
 
   source-map@0.7.4: {}
diff --git a/docs/src/app/[lang]/layout.tsx b/docs/src/app/[lang]/layout.tsx
index a3f739e..7782110 100644
--- a/docs/src/app/[lang]/layout.tsx
+++ b/docs/src/app/[lang]/layout.tsx
@@ -7,8 +7,8 @@ import "nextra-theme-docs/style-prefixed.css";
 import "../globals.css";
 import { TrackClick, TrackImpression, TrackProvider } from "@/tracker";
 import { Logo } from "@/logo";
-import { Lang } from "@/lib/types/lang";
-import { type Metadata } from "next";
+import type { Lang } from "@/lib/types/lang";
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: {
diff --git a/docs/src/app/[lang]/page.tsx b/docs/src/app/[lang]/page.tsx
index 61cc581..a0ee08e 100644
--- a/docs/src/app/[lang]/page.tsx
+++ b/docs/src/app/[lang]/page.tsx
@@ -1,10 +1,11 @@
 import Link from "next/link";
-import { Image } from "nextra/components";
 
 import { Logo } from "@/logo";
 import { TrackClick, TrackPageView } from "@/tracker";
 import { importPage } from "nextra/pages";
-import { Lang } from "@/lib/types/lang";
+import type { Lang } from "@/lib/types/lang";
+import { DemoCode } from "@/components/demo-playground";
+import Image from "next/image";
 
 export const metadata = {};
 
@@ -17,65 +18,76 @@ const TEXT_MAP = {
     ko: "시작하기",
     en: "Get Started",
   },
+  featureCardsTitle: {
+    ko: "Event Tracker가 제시하는 새로운 패러다임",
+    en: "New Paradigm Offered by Event Tracker",
+  },
   featureCards: [
     {
       ko: {
-        title: "타입 안전성이 보장된 API",
-        description: "타입 안전성을 갖춘 선언적 이벤트 트래킹 API를 제공합니다.",
+        title: "타입 안정성을 갖춘 선언적 API",
+        description:
+          "TypeScript를 완벽하게 지원하여 개발 과정에서의 오류를 줄이고, 자동 완성을 통해 생산성을 높입니다.",
       },
       en: {
-        title: "Type-safe APIs",
-        description: "Declarative event tracking with complete type safety",
+        title: "Declarative API with Type Safety",
+        description:
+          "Fully supports TypeScript, reducing errors during development and increasing productivity through auto-completion.",
       },
     },
     {
       ko: {
-        title: "최적화된 성능",
-        description: "이벤트 배칭을 통한 향상된 성능을 제공합니다.",
+        title: "강력한 데이터 타입 검증",
+        description: "Zod를 활용한 스키마 기반 검증으로 데이터의 신뢰성을 확보합니다.",
       },
       en: {
-        title: "Optimized Performance",
-        description: "Enhanced performance through event batching",
+        title: "Powerful Data Type Validation",
+        description: "Ensures data reliability through schema-based validation using Zod.",
       },
     },
     {
       ko: {
-        title: "순서 보장",
-        description: "비동기 작업의 실행 순서가 보장됩니다.",
+        title: "최적화된 성능",
+        description:
+          "배칭이나 디바운스, 스로틀링 기능을 통해 네트워크 요청을 최소화하고 애플리케이션 성능에 미치는 영향을 줄입니다.",
       },
       en: {
-        title: "Guaranteed Order",
-        description: "Guaranteed execution order for async operations",
+        title: "Optimized Performance	",
+        description:
+          "Minimizes network requests through batching, debouncing, or throttling, reducing the impact on application performance.",
       },
     },
     {
       ko: {
-        title: "애널리틱스 도구에 구애받지 않음",
-        description: "모든 애널리틱스 도구와 호환 가능합니다.",
+        title: "실행 순서 보장",
+        description: "비동기적으로 발생하는 이벤트들에 대해서도 의도한 순서대로 처리되도록 보장합니다.",
       },
       en: {
-        title: "Analytics Integration",
-        description: "Works with any analytics provider of your choice",
+        title: "Guaranteed Execution Order",
+        description: "Ensures asynchronous events are processed in the intended sequence.",
       },
     },
     {
       ko: {
-        title: "관심사의 분리",
-        description: "비즈니스 로직과 이벤트 트래킹 로직의 명확한 분리를 제공합니다.",
+        title: "애널리틱스 도구 독립성	",
+        description:
+          "특정 애널리틱스 서비스에 종속되지 않고, 원하는 모든 도구(Google Analytics, Amplitude 등)와 유연하게 통합할 수 있습니다.",
       },
       en: {
-        title: "Clean Separation",
-        description: "Keeps tracking logic separate from business logic",
+        title: "Analytics Tool Independence",
+        description:
+          "Flexible integration with any analytics tool (e.g., Google Analytics, Amplitude), without being tied to any specific provider.",
       },
     },
     {
       ko: {
-        title: "작은 번들 사이즈",
-        description: "애플리케이션 번들 크기에 최소한의 영향을 미칩니다.",
+        title: "명확한 관심사 분리",
+        description: "트래킹 로직과 비즈니스 로직을 효과적으로 분리하여 코드의 유지보수성과 확장성을 극대화합니다.",
       },
       en: {
-        title: "Lightweight",
-        description: "Minimal bundle size impact on your application",
+        title: "Clear Separation of Concerns",
+        description:
+          "Effectively separates tracking logic from business logic, maximizing code maintainability and scalability.",
       },
     },
   ],
@@ -86,73 +98,95 @@ export default async function Page(props: { params: Promise<{ mdxPath: string[];
   await importPage(mdxPath, lang);
 
   return (
-    <>
-      <div className="mx-auto flex min-h-screen max-w-6xl flex-col items-center px-6 py-16">
-        <div className="mb-16 flex flex-col items-center text-center">
+    <main className="mx-auto flex max-w-screen-xl flex-col gap-48 px-6 py-32">
+      <TrackPageView params={{ title: "Home" }} />
+      <div className="flex flex-col justify-between gap-10 lg:flex-row">
+        <div className="flex flex-col gap-6">
           <Logo size={200} />
-          <h1 className="mb-6 text-5xl font-bold">event-tracker</h1>
-          <p className="mb-6 max-w-2xl text-xl text-gray-600 dark:text-gray-300">{TEXT_MAP.description[lang]}</p>
-          <div className="mb-8 flex gap-4">
-            <a href="https://github.com/offlegacy/event-tracker/blob/main/LICENSE" target="_blank" rel="noopener">
-              <Image src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License" />
-            </a>
-            <a href="https://www.npmjs.com/package/@offlegacy/event-tracker" target="_blank" rel="noopener">
-              <Image src="https://img.shields.io/npm/v/@offlegacy/event-tracker?logo=npm" alt="NPM Version" />
-            </a>
+          <div className="space-y-2">
+            <h1 className="text-6xl font-bold">Event Tracker</h1>
+            <p className="max-w-2xl text-xl text-gray-600 dark:text-gray-300">{TEXT_MAP.description[lang]}</p>
           </div>
-          <TrackClick params={{ target: "Get Started button" }}>
-            <Link
-              href="/docs"
-              className="rounded-lg bg-blue-500 px-8 py-3 font-medium text-white transition-colors hover:bg-blue-600"
+          <div className="flex gap-4">
+            <TrackClick params={{ target: "Get Started button" }}>
+              <Link
+                href="/docs"
+                className="rounded-lg bg-blue-500 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-600"
+              >
+                {TEXT_MAP.get_started[lang]}
+              </Link>
+            </TrackClick>
+            <button
+              type="button"
+              className="rounded-lg border border-gray-200 px-6 py-3 text-sm font-medium text-gray-600 transition-colors hover:border-gray-300"
             >
-              {TEXT_MAP.get_started[lang]}
-            </Link>
-          </TrackClick>
+              npm i @offlegacy/event-tracker
+            </button>
+          </div>
         </div>
-
-        <div className="grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+        <DemoCode />
+      </div>
+      <div className="flex flex-col items-center justify-center gap-10">
+        <p className="text-center text-3xl font-bold">{TEXT_MAP.featureCardsTitle[lang]}</p>
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
           <FeatureCard
-            icon="🎯"
+            icon="🔧"
             title={TEXT_MAP.featureCards[0][lang].title}
             description={TEXT_MAP.featureCards[0][lang].description}
           />
           <FeatureCard
-            icon="⚡️"
+            icon="✅"
             title={TEXT_MAP.featureCards[1][lang].title}
             description={TEXT_MAP.featureCards[1][lang].description}
           />
           <FeatureCard
-            icon="🔄"
+            icon="⚡️"
             title={TEXT_MAP.featureCards[2][lang].title}
             description={TEXT_MAP.featureCards[2][lang].description}
           />
           <FeatureCard
-            icon="🔌"
+            icon="🎯"
             title={TEXT_MAP.featureCards[3][lang].title}
             description={TEXT_MAP.featureCards[3][lang].description}
           />
           <FeatureCard
-            icon="🧩"
+            icon="🎛️"
             title={TEXT_MAP.featureCards[4][lang].title}
             description={TEXT_MAP.featureCards[4][lang].description}
           />
           <FeatureCard
-            icon="📦"
+            icon="🏗️"
             title={TEXT_MAP.featureCards[5][lang].title}
             description={TEXT_MAP.featureCards[5][lang].description}
           />
         </div>
       </div>
-      <TrackPageView params={{ title: "Home" }} />
-    </>
+      <div className="flex flex-col items-center gap-10">
+        <h2 className="text-center text-4xl font-bold">Driven by the Community</h2>
+        <a
+          href="https://github.com/offlegacy/event-tracker/contributors"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="relative h-24 w-80 sm:h-32 sm:w-96"
+        >
+          <Image
+            src="https://contrib.rocks/image?repo=offlegacy/event-tracker"
+            alt="Contributors"
+            fill
+            className="object-contain"
+            unoptimized
+          />
+        </a>
+      </div>
+    </main>
   );
 }
 
 function FeatureCard({ icon, title, description }: { icon: string; title: string; description: string }) {
   return (
-    <div className="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
+    <div className="break-keep rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
       <div className="mb-4 text-3xl">{icon}</div>
-      <h3 className="mb-2 text-lg font-semibold">{title}</h3>
+      <h3 className="mb-2 text-lg font-bold">{title}</h3>
       <p className="text-gray-600 dark:text-gray-300">{description}</p>
     </div>
   );
diff --git a/docs/src/components/demo-button.tsx b/docs/src/components/demo-button.tsx
new file mode 100644
index 0000000..8069140
--- /dev/null
+++ b/docs/src/components/demo-button.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { Toaster, toast } from "sonner";
+
+export function DemoButton({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Toaster position="top-center" offset={100} />
+      <button
+        type="button"
+        className="rounded-lg bg-blue-500 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-600"
+        onClick={() => {
+          toast.success(`demo-user: click-me`);
+        }}
+      >
+        {children}
+      </button>
+    </>
+  );
+}
diff --git a/docs/src/components/demo-playground.tsx b/docs/src/components/demo-playground.tsx
new file mode 100644
index 0000000..5959a03
--- /dev/null
+++ b/docs/src/components/demo-playground.tsx
@@ -0,0 +1,52 @@
+import { highlight, Pre } from "codehike/code";
+import { DemoButton } from "./demo-button";
+
+export async function DemoCode() {
+  const isDark = typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const theme = isDark ? "github-dark" : "github-light";
+
+  const highlighted = await highlight(
+    {
+      value: `import { createTracker } from "@offlegacy/event-tracker";
+
+const [Track, useTracker] = createTracker({
+  DOMEvents: {
+    onClick: (params, context) => {
+      toast.success(\${context.userId}: \${params.buttonId}\`);
+    },
+  },
+});
+
+function App() {
+  return (
+    <Track.Provider initialContext={{ userId: "demo-user" }}>
+      <Track.Click params={{ buttonId: "click-me" }}>
+        <button>Click me</button>
+      </Track.Click>
+    </Track.Provider>
+  );
+}`,
+      lang: "tsx",
+      meta: "",
+    },
+    theme,
+  );
+
+  return (
+    <div className="group relative">
+      <div className="relative overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+        <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800/50">
+          <div className="flex items-center space-x-2">
+            <span className="ml-2 text-sm font-medium text-gray-600 dark:text-gray-400">basic-example.tsx</span>
+          </div>
+        </div>
+        <div className="relative p-6">
+          <Pre className="relative z-0 !m-0 !bg-transparent !p-0 text-sm leading-relaxed" code={highlighted} />
+        </div>
+      </div>
+      <div className="absolute bottom-4 right-4 z-10">
+        <DemoButton>Click me</DemoButton>
+      </div>
+    </div>
+  );
+}

From 1802d57c42e0f0f1ce86fd39915c7a5a478eac75 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Wed, 25 Jun 2025 21:18:59 +0900
Subject: [PATCH 05/24] chore: update

---
 docs/src/components/demo-playground.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/components/demo-playground.tsx b/docs/src/components/demo-playground.tsx
index 5959a03..86cd669 100644
--- a/docs/src/components/demo-playground.tsx
+++ b/docs/src/components/demo-playground.tsx
@@ -12,7 +12,7 @@ export async function DemoCode() {
 const [Track, useTracker] = createTracker({
   DOMEvents: {
     onClick: (params, context) => {
-      toast.success(\${context.userId}: \${params.buttonId}\`);
+      toast.success(\`\${context.userId}: \${params.buttonId}\`);
     },
   },
 });

From f12cd23a439db6e2639206485363525f44d151f6 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Thu, 3 Jul 2025 01:42:47 +0900
Subject: [PATCH 06/24] fix(docs): update code example and improve highlighting
 logic

---
 docs/src/components/demo-playground.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/docs/src/components/demo-playground.tsx b/docs/src/components/demo-playground.tsx
index 86cd669..15132da 100644
--- a/docs/src/components/demo-playground.tsx
+++ b/docs/src/components/demo-playground.tsx
@@ -1,15 +1,9 @@
 import { highlight, Pre } from "codehike/code";
 import { DemoButton } from "./demo-button";
 
-export async function DemoCode() {
-  const isDark = typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
-  const theme = isDark ? "github-dark" : "github-light";
+const code = `import { createTracker } from "@offlegacy/event-tracker";
 
-  const highlighted = await highlight(
-    {
-      value: `import { createTracker } from "@offlegacy/event-tracker";
-
-const [Track, useTracker] = createTracker({
+const [Track] = createTracker({
   DOMEvents: {
     onClick: (params, context) => {
       toast.success(\`\${context.userId}: \${params.buttonId}\`);
@@ -25,7 +19,15 @@ function App() {
       </Track.Click>
     </Track.Provider>
   );
-}`,
+}`;
+
+export async function DemoCode() {
+  const isDark = typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const theme = isDark ? "github-dark" : "github-light";
+
+  const highlighted = await highlight(
+    {
+      value: code,
       lang: "tsx",
       meta: "",
     },

From c29e387167f978955ebb068136b99c9722a6682c Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Thu, 3 Jul 2025 01:42:53 +0900
Subject: [PATCH 07/24] feat(docs): integrate event tracking into demo button
 component

---
 docs/src/components/demo-button.tsx | 31 ++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/docs/src/components/demo-button.tsx b/docs/src/components/demo-button.tsx
index 8069140..a4ce002 100644
--- a/docs/src/components/demo-button.tsx
+++ b/docs/src/components/demo-button.tsx
@@ -1,20 +1,33 @@
 "use client";
 
+import { createTracker } from "@offlegacy/event-tracker";
 import { Toaster, toast } from "sonner";
 
+const [Track] = createTracker({
+  DOMEvents: {
+    onClick: (params: { buttonId: string }, context: { userId: string }) => {
+      toast.success(`${context.userId}: ${params.buttonId}`);
+    },
+  },
+});
+
 export function DemoButton({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Toaster position="top-center" offset={100} />
-      <button
-        type="button"
-        className="rounded-lg bg-blue-500 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-600"
-        onClick={() => {
-          toast.success(`demo-user: click-me`);
-        }}
-      >
-        {children}
-      </button>
+      <Track.Provider initialContext={{ userId: "demo-user" }}>
+        <Track.Click params={{ buttonId: "click-me" }}>
+          <button
+            type="button"
+            className="rounded-lg bg-blue-500 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-600"
+            onClick={() => {
+              toast.success(`demo-user: click-me`);
+            }}
+          >
+            {children}
+          </button>
+        </Track.Click>
+      </Track.Provider>
     </>
   );
 }

From 4fb8eaaafd45265b8ec37dea8a2919076458c10c Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Wed, 9 Jul 2025 00:19:33 +0900
Subject: [PATCH 08/24] feat(docs): enhance demo components with animations and
 improved button interactions

---
 docs/src/components/demo-button.tsx     | 34 +++++++++++---
 docs/src/components/demo-playground.tsx | 60 ++++++++++++++++++-------
 2 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/docs/src/components/demo-button.tsx b/docs/src/components/demo-button.tsx
index a4ce002..fd69065 100644
--- a/docs/src/components/demo-button.tsx
+++ b/docs/src/components/demo-button.tsx
@@ -2,6 +2,7 @@
 
 import { createTracker } from "@offlegacy/event-tracker";
 import { Toaster, toast } from "sonner";
+import { motion } from "motion/react";
 
 const [Track] = createTracker({
   DOMEvents: {
@@ -14,18 +15,37 @@ const [Track] = createTracker({
 export function DemoButton({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <Toaster position="top-center" offset={100} />
+      <Toaster position="top-center" offset={60} />
       <Track.Provider initialContext={{ userId: "demo-user" }}>
-        <Track.Click params={{ buttonId: "click-me" }}>
-          <button
+        <Track.Click params={{ buttonId: "click-me" }} throttle={{ delay: 1000 }}>
+          <motion.button
             type="button"
-            className="rounded-lg bg-blue-500 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-600"
-            onClick={() => {
-              toast.success(`demo-user: click-me`);
+            className="cursor-pointer rounded-lg bg-blue-500 px-6 py-3 font-medium text-white shadow-lg transition-colors hover:bg-blue-600"
+            initial={{ scale: 0.7, opacity: 0, y: 40 }}
+            animate={{
+              scale: [1, 1.08, 1],
+              opacity: 1,
+              y: 0,
+              boxShadow: [
+                "0 4px 14px 0 rgba(59,130,246,0.25)",
+                "0 6px 20px 0 rgba(59,130,246,0.40)",
+                "0 4px 14px 0 rgba(59,130,246,0.25)",
+              ],
             }}
+            transition={{
+              type: "spring",
+              stiffness: 400,
+              damping: 18,
+              opacity: { duration: 0.4 },
+              y: { type: "spring", stiffness: 200, damping: 18 },
+              scale: { repeat: Infinity, repeatType: "loop", duration: 1.8 },
+              boxShadow: { repeat: Infinity, repeatType: "loop", duration: 1.8 },
+            }}
+            whileHover={{ scale: 1.13, boxShadow: "0 8px 32px 0 rgba(59,130,246,0.55)" }}
+            whileTap={{ scale: 0.96 }}
           >
             {children}
-          </button>
+          </motion.button>
         </Track.Click>
       </Track.Provider>
     </>
diff --git a/docs/src/components/demo-playground.tsx b/docs/src/components/demo-playground.tsx
index 15132da..38acffb 100644
--- a/docs/src/components/demo-playground.tsx
+++ b/docs/src/components/demo-playground.tsx
@@ -1,11 +1,19 @@
-import { highlight, Pre } from "codehike/code";
+"use client";
+
+import { highlight, Pre, type HighlightedCode } from "codehike/code";
 import { DemoButton } from "./demo-button";
+import { useTheme } from "nextra-theme-docs";
+import { useSystemDarkMode } from "../logo/useSystemDarkMode";
+import { useEffect, useState } from "react";
+import { motion } from "motion/react";
 
 const code = `import { createTracker } from "@offlegacy/event-tracker";
+import { capture } from "you-can-use-analytics";
 
 const [Track] = createTracker({
   DOMEvents: {
     onClick: (params, context) => {
+      capture("click", { ...params, ...context });
       toast.success(\`\${context.userId}: \${params.buttonId}\`);
     },
   },
@@ -14,41 +22,59 @@ const [Track] = createTracker({
 function App() {
   return (
     <Track.Provider initialContext={{ userId: "demo-user" }}>
-      <Track.Click params={{ buttonId: "click-me" }}>
+      <Track.Click params={{ buttonId: "click-me" }} throttle={{ delay: 1000 }}>
         <button>Click me</button>
       </Track.Click>
     </Track.Provider>
   );
 }`;
 
-export async function DemoCode() {
-  const isDark = typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
-  const theme = isDark ? "github-dark" : "github-light";
+export function DemoCode() {
+  const { theme } = useTheme();
+  const isSystemDarkMode = useSystemDarkMode();
+  const resolvedTheme = theme === "system" ? (isSystemDarkMode ? "dark" : "light") : theme;
+  const codeTheme = resolvedTheme === "dark" ? "github-dark" : "github-light";
+  const [highlighted, setHighlighted] = useState<HighlightedCode | null>(null);
 
-  const highlighted = await highlight(
-    {
-      value: code,
-      lang: "tsx",
-      meta: "",
-    },
-    theme,
-  );
+  useEffect(() => {
+    highlight(
+      {
+        value: code,
+        lang: "tsx",
+        meta: "",
+      },
+      codeTheme,
+    ).then(setHighlighted);
+  }, [codeTheme]);
+
+  if (!highlighted) return null;
 
   return (
-    <div className="group relative">
+    <motion.div
+      className="group relative"
+      initial={{ opacity: 0, y: 32, scale: 0.96, filter: "blur(4px)" }}
+      animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
+      transition={{
+        type: "spring",
+        stiffness: 120,
+        damping: 18,
+        mass: 0.8,
+        delay: 0.1,
+      }}
+    >
       <div className="relative overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
         <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800/50">
           <div className="flex items-center space-x-2">
             <span className="ml-2 text-sm font-medium text-gray-600 dark:text-gray-400">basic-example.tsx</span>
           </div>
         </div>
-        <div className="relative p-6">
+        <div className="relative overflow-x-auto p-6">
           <Pre className="relative z-0 !m-0 !bg-transparent !p-0 text-sm leading-relaxed" code={highlighted} />
         </div>
       </div>
-      <div className="absolute bottom-4 right-4 z-10">
+      <div className="absolute bottom-6 right-6 z-10">
         <DemoButton>Click me</DemoButton>
       </div>
-    </div>
+    </motion.div>
   );
 }

From cacf35d4137461c90fec3620b551ecff15025e68 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Wed, 9 Jul 2025 00:19:45 +0900
Subject: [PATCH 09/24] feat(docs): add InstallCopyButton component for easy
 command copying

---
 docs/src/components/install-copy-button.tsx | 55 +++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 docs/src/components/install-copy-button.tsx

diff --git a/docs/src/components/install-copy-button.tsx b/docs/src/components/install-copy-button.tsx
new file mode 100644
index 0000000..cd16267
--- /dev/null
+++ b/docs/src/components/install-copy-button.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { Copy, Check } from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
+import { useCopyToClipboard } from "@uidotdev/usehooks";
+import { useState } from "react";
+
+const COMMAND = "npm i @offlegacy/event-tracker";
+
+export function InstallCopyButton() {
+  const [, copyToClipboard] = useCopyToClipboard();
+  const [showCheck, setShowCheck] = useState(false);
+
+  return (
+    <button
+      type="button"
+      className="inline-flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-gray-300 bg-white px-7 py-3 text-base font-semibold shadow-sm transition-all duration-200 hover:border-blue-400 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-blue-500 dark:hover:bg-gray-800/60 dark:focus:ring-blue-500 dark:focus:ring-offset-gray-900"
+      aria-label="Copy install command"
+      onClick={() => {
+        copyToClipboard(COMMAND);
+        setShowCheck(true);
+        setTimeout(() => setShowCheck(false), 1000);
+      }}
+    >
+      <span className="w-full text-center font-mono text-xs">{COMMAND}</span>
+      <span className="relative h-5 w-5">
+        <AnimatePresence mode="wait" initial={false}>
+          {showCheck ? (
+            <motion.span
+              key="check"
+              initial={{ opacity: 0, scale: 0.7, rotate: -30 }}
+              animate={{ opacity: 1, scale: 1, rotate: 0 }}
+              exit={{ opacity: 0, scale: 0.7, rotate: 30 }}
+              transition={{ type: "spring", stiffness: 400, damping: 20 }}
+              className="absolute inset-0 flex items-center justify-center text-green-500 dark:text-green-400"
+            >
+              <Check size={20} />
+            </motion.span>
+          ) : (
+            <motion.span
+              key="copy"
+              initial={{ opacity: 0, scale: 0.7, rotate: 30 }}
+              animate={{ opacity: 1, scale: 1, rotate: 0 }}
+              exit={{ opacity: 0, scale: 0.7, rotate: -30 }}
+              transition={{ type: "spring", stiffness: 400, damping: 20 }}
+              className="absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500"
+            >
+              <Copy size={20} />
+            </motion.span>
+          )}
+        </AnimatePresence>
+      </span>
+    </button>
+  );
+}

From b9431dc5ae96c1957fe75578faf563a2dabf84ad Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Wed, 9 Jul 2025 00:20:02 +0900
Subject: [PATCH 10/24] feat(docs): refine feature descriptions and improve
 layout for better clarity

---
 docs/src/app/[lang]/page.tsx | 94 +++++++++++++++++-------------------
 1 file changed, 44 insertions(+), 50 deletions(-)

diff --git a/docs/src/app/[lang]/page.tsx b/docs/src/app/[lang]/page.tsx
index a0ee08e..ca07957 100644
--- a/docs/src/app/[lang]/page.tsx
+++ b/docs/src/app/[lang]/page.tsx
@@ -6,88 +6,92 @@ import { importPage } from "nextra/pages";
 import type { Lang } from "@/lib/types/lang";
 import { DemoCode } from "@/components/demo-playground";
 import Image from "next/image";
+import { InstallCopyButton } from "@/components/install-copy-button";
 
 export const metadata = {};
 
 const TEXT_MAP = {
   description: {
-    ko: "React 애플리케이션을 위한 완전한 이벤트 트래킹 시스템.",
-    en: "Comprehensive solution for event tracking in React applications.",
+    ko: "React 애플리케이션을 위한 완전한 이벤트 트래킹 시스템",
+    en: "Comprehensive solution for event tracking in React applications",
   },
   get_started: {
     ko: "시작하기",
     en: "Get Started",
   },
   featureCardsTitle: {
-    ko: "Event Tracker가 제시하는 새로운 패러다임",
-    en: "New Paradigm Offered by Event Tracker",
+    ko: "Event Tracker가 제시하는 새로운 이벤트 트래킹 패러다임",
+    en: "New Paradigm of Event Tracking Offered by Event Tracker",
   },
   featureCards: [
     {
       ko: {
-        title: "타입 안정성을 갖춘 선언적 API",
-        description:
-          "TypeScript를 완벽하게 지원하여 개발 과정에서의 오류를 줄이고, 자동 완성을 통해 생산성을 높입니다.",
+        title: "선언적 API",
+        description: "트래킹을 위한 별도의 설정이나 복잡한 코드 없이, 컴포넌트 형태로 직관적으로 선언할 수 있습니다.",
       },
       en: {
-        title: "Declarative API with Type Safety",
-        description:
-          "Fully supports TypeScript, reducing errors during development and increasing productivity through auto-completion.",
+        title: "Declarative API",
+        description: "Track events intuitively through component-based declarations, without boilerplate.",
       },
     },
     {
       ko: {
         title: "강력한 데이터 타입 검증",
-        description: "Zod를 활용한 스키마 기반 검증으로 데이터의 신뢰성을 확보합니다.",
+        description:
+          "Zod 기반의 정적 스키마 검증으로 런타임 이전에 오류를 방지하고, 수집되는 이벤트 데이터의 신뢰도를 보장합니다.",
       },
       en: {
         title: "Powerful Data Type Validation",
-        description: "Ensures data reliability through schema-based validation using Zod.",
+        description:
+          "Schema-based validation with Zod catches issues before runtime and guarantees the integrity of your event data.",
       },
     },
     {
       ko: {
         title: "최적화된 성능",
         description:
-          "배칭이나 디바운스, 스로틀링 기능을 통해 네트워크 요청을 최소화하고 애플리케이션 성능에 미치는 영향을 줄입니다.",
+          "배칭, 디바운스, 스로틀링 등 네트워크 요청을 최소화하는 다양한 전략이 내장되어 있어, 성능 저하 없이 안정적으로 트래킹할 수 있습니다.",
       },
       en: {
-        title: "Optimized Performance	",
+        title: "Optimized Performance",
         description:
-          "Minimizes network requests through batching, debouncing, or throttling, reducing the impact on application performance.",
+          "Built-in strategies like batching, debouncing, and throttling minimize network overhead, enabling efficient and reliable tracking.",
       },
     },
     {
       ko: {
         title: "실행 순서 보장",
-        description: "비동기적으로 발생하는 이벤트들에 대해서도 의도한 순서대로 처리되도록 보장합니다.",
+        description:
+          "비동기 상황에서도 이벤트가 의도한 순서대로 처리되도록 설계되어, 복잡한 사용자 흐름에서도 정확한 트래킹이 가능합니다.",
       },
       en: {
         title: "Guaranteed Execution Order",
-        description: "Ensures asynchronous events are processed in the intended sequence.",
+        description:
+          "Ensures that events are processed in the intended order, even under asynchronous conditions—crucial for accurate tracking in complex flows.",
       },
     },
     {
       ko: {
-        title: "애널리틱스 도구 독립성	",
+        title: "애널리틱스 도구 독립성",
         description:
-          "특정 애널리틱스 서비스에 종속되지 않고, 원하는 모든 도구(Google Analytics, Amplitude 등)와 유연하게 통합할 수 있습니다.",
+          "Google Analytics, Amplitude, Segment 등 어떤 도구든 자유롭게 연동할 수 있어, 기존 인프라를 변경하지 않고도 도입이 가능합니다.",
       },
       en: {
         title: "Analytics Tool Independence",
         description:
-          "Flexible integration with any analytics tool (e.g., Google Analytics, Amplitude), without being tied to any specific provider.",
+          "Easily integrates with tools like Google Analytics, Amplitude, or Segment—without forcing you to switch or couple to a specific vendor.",
       },
     },
     {
       ko: {
         title: "명확한 관심사 분리",
-        description: "트래킹 로직과 비즈니스 로직을 효과적으로 분리하여 코드의 유지보수성과 확장성을 극대화합니다.",
+        description:
+          "트래킹 로직을 비즈니스 코드에서 완전히 분리함으로써 코드의 가독성, 테스트 용이성, 유지보수성을 모두 향상시킵니다.",
       },
       en: {
         title: "Clear Separation of Concerns",
         description:
-          "Effectively separates tracking logic from business logic, maximizing code maintainability and scalability.",
+          "Keeps tracking logic out of your business logic, resulting in cleaner code that’s easier to test, maintain, and evolve.",
       },
     },
   ],
@@ -98,67 +102,58 @@ export default async function Page(props: { params: Promise<{ mdxPath: string[];
   await importPage(mdxPath, lang);
 
   return (
-    <main className="mx-auto flex max-w-screen-xl flex-col gap-48 px-6 py-32">
+    <main className="mx-auto flex max-w-screen-xl flex-col gap-48 break-keep px-6 py-32">
       <TrackPageView params={{ title: "Home" }} />
-      <div className="flex flex-col justify-between gap-10 lg:flex-row">
+      <div className="flex flex-col justify-between gap-10 xl:flex-row">
         <div className="flex flex-col gap-6">
           <Logo size={200} />
           <div className="space-y-2">
             <h1 className="text-6xl font-bold">Event Tracker</h1>
             <p className="max-w-2xl text-xl text-gray-600 dark:text-gray-300">{TEXT_MAP.description[lang]}</p>
           </div>
-          <div className="flex gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row">
             <TrackClick params={{ target: "Get Started button" }}>
               <Link
                 href="/docs"
-                className="rounded-lg bg-blue-500 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-600"
+                className="flex items-center justify-center rounded-lg bg-blue-500 px-5 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-600"
               >
                 {TEXT_MAP.get_started[lang]}
               </Link>
             </TrackClick>
-            <button
-              type="button"
-              className="rounded-lg border border-gray-200 px-6 py-3 text-sm font-medium text-gray-600 transition-colors hover:border-gray-300"
-            >
-              npm i @offlegacy/event-tracker
-            </button>
+            <InstallCopyButton />
           </div>
         </div>
-        <DemoCode />
+        <div className="min-h-[572.75px]">
+          <DemoCode />
+        </div>
       </div>
-      <div className="flex flex-col items-center justify-center gap-10">
+      <div className="flex flex-col items-center justify-center gap-16">
         <p className="text-center text-3xl font-bold">{TEXT_MAP.featureCardsTitle[lang]}</p>
         <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
           <FeatureCard
-            icon="🔧"
             title={TEXT_MAP.featureCards[0][lang].title}
             description={TEXT_MAP.featureCards[0][lang].description}
           />
           <FeatureCard
-            icon="✅"
-            title={TEXT_MAP.featureCards[1][lang].title}
-            description={TEXT_MAP.featureCards[1][lang].description}
-          />
-          <FeatureCard
-            icon="⚡️"
             title={TEXT_MAP.featureCards[2][lang].title}
             description={TEXT_MAP.featureCards[2][lang].description}
           />
           <FeatureCard
-            icon="🎯"
-            title={TEXT_MAP.featureCards[3][lang].title}
-            description={TEXT_MAP.featureCards[3][lang].description}
-          />
-          <FeatureCard
-            icon="🎛️"
             title={TEXT_MAP.featureCards[4][lang].title}
             description={TEXT_MAP.featureCards[4][lang].description}
           />
           <FeatureCard
-            icon="🏗️"
+            title={TEXT_MAP.featureCards[3][lang].title}
+            description={TEXT_MAP.featureCards[3][lang].description}
+          />
+          <FeatureCard
             title={TEXT_MAP.featureCards[5][lang].title}
             description={TEXT_MAP.featureCards[5][lang].description}
           />
+          <FeatureCard
+            title={TEXT_MAP.featureCards[1][lang].title}
+            description={TEXT_MAP.featureCards[1][lang].description}
+          />
         </div>
       </div>
       <div className="flex flex-col items-center gap-10">
@@ -182,10 +177,9 @@ export default async function Page(props: { params: Promise<{ mdxPath: string[];
   );
 }
 
-function FeatureCard({ icon, title, description }: { icon: string; title: string; description: string }) {
+function FeatureCard({ title, description }: { title: string; description: string }) {
   return (
     <div className="break-keep rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
-      <div className="mb-4 text-3xl">{icon}</div>
       <h3 className="mb-2 text-lg font-bold">{title}</h3>
       <p className="text-gray-600 dark:text-gray-300">{description}</p>
     </div>

From 7d30a1492cd31e258c9b192e58d41ed5d9acf988 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Wed, 9 Jul 2025 00:27:46 +0900
Subject: [PATCH 11/24] feat(docs): update layout metadata and improve footer
 styling

---
 docs/src/app/[lang]/layout.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/docs/src/app/[lang]/layout.tsx b/docs/src/app/[lang]/layout.tsx
index 7782110..2e5efa7 100644
--- a/docs/src/app/[lang]/layout.tsx
+++ b/docs/src/app/[lang]/layout.tsx
@@ -13,13 +13,14 @@ import type { Metadata } from "next";
 export const metadata: Metadata = {
   title: {
     template: "%s | Event Tracker",
-    default: "Event Tracker",
+    default: "Event Tracker | Comprehensive solution for event tracking in React applications",
   },
   description: "Comprehensive solution for event tracking in React applications.",
+  metadataBase: new URL("https://event-tracker.offlegacy.org"),
   openGraph: {
     title: {
       template: "%s | Event Tracker",
-      default: "Event Tracker",
+      default: "Event Tracker | Comprehensive solution for event tracking in React applications",
     },
     images: ["img/og-webp.webp"],
     description: "Comprehensive solution for event tracking in React applications.",
@@ -35,7 +36,7 @@ const navbar = (
       <TrackClick params={{ target: "logo" }}>
         <div className="flex items-center gap-2">
           <Logo />
-          <b>Event Tracker</b>
+          <b className="text-lg font-bold">Event Tracker</b>
         </div>
       </TrackClick>
     }
@@ -46,7 +47,7 @@ const navbar = (
 );
 const footer = (
   <TrackImpression params={{ target: "footer" }}>
-    <Footer>MIT {new Date().getFullYear()} © OffLegacy</Footer>
+    <Footer>MIT {new Date().getFullYear()} &copy; OffLegacy</Footer>
   </TrackImpression>
 );
 
@@ -81,7 +82,7 @@ export default async function RootLayout({
             pageMap={pageMap}
             docsRepositoryBase="https://github.com/offlegacy/event-tracker/tree/main/docs"
             footer={footer}
-            darkMode
+            darkMode={false}
           >
             {children}
           </Layout>

From 038f8271c5bc2f45ccaef0f2ed40f12cff664114 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Wed, 9 Jul 2025 00:27:51 +0900
Subject: [PATCH 12/24] chore(docs): update package dependencies and lockfile
 versions

---
 docs/package.json   |  23 +-
 docs/pnpm-lock.yaml | 812 +++++++++++++++++++++++++-------------------
 2 files changed, 477 insertions(+), 358 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 960d0b8..d454c2d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -12,25 +12,28 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.11.11",
-    "@offlegacy/event-tracker": "^1.0.3",
+    "@offlegacy/event-tracker": "latest",
+    "@uidotdev/usehooks": "^2.4.1",
     "codehike": "^1.0.7",
-    "next": "15.1.6",
-    "nextra": "^4.0.7",
-    "nextra-theme-docs": "^4.0.7",
-    "react": "^19.0.0",
+    "lucide-react": "^0.525.0",
+    "motion": "^12.23.0",
+    "next": "15.3.5",
+    "nextra": "^4.2.17",
+    "nextra-theme-docs": "^4.2.17",
+    "react": "^19.1.0",
     "react-dom": "^19.0.0",
-    "sonner": "^2.0.5"
+    "sonner": "^2.0.6"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/eslintrc": "^3.3.1",
     "@types/node": "^20",
-    "@types/react": "^19.0.0",
+    "@types/react": "^19.1.8",
     "@types/react-dom": "^19.0.0",
     "eslint": "^9",
-    "eslint-config-next": "15.1.6",
+    "eslint-config-next": "15.3.5",
     "pagefind": "^1.3.0",
     "postcss": "^8",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.6.13",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index 331d05f..f419721 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -12,48 +12,57 @@ importers:
         specifier: ^2.11.11
         version: 2.11.11
       '@offlegacy/event-tracker':
-        specifier: ^1.0.3
-        version: 1.0.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: latest
+        version: 1.3.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(zod@3.24.1)
+      '@uidotdev/usehooks':
+        specifier: ^2.4.1
+        version: 2.4.1(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
       codehike:
         specifier: ^1.0.7
         version: 1.0.7
+      lucide-react:
+        specifier: ^0.525.0
+        version: 0.525.0(react@19.1.0)
+      motion:
+        specifier: ^12.23.0
+        version: 12.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
       next:
-        specifier: 15.1.6
-        version: 15.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: 15.3.5
+        version: 15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
       nextra:
-        specifier: ^4.0.7
-        version: 4.0.7(acorn@8.14.0)(next@15.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.7.3)
+        specifier: ^4.2.17
+        version: 4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3)
       nextra-theme-docs:
-        specifier: ^4.0.7
-        version: 4.0.7(@types/react@19.0.8)(next@15.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(nextra@4.0.7(acorn@8.14.0)(next@15.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.7.3))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^4.2.17
+        version: 4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3))(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
       react:
-        specifier: ^19.0.0
-        version: 19.0.0
+        specifier: ^19.1.0
+        version: 19.1.0
       react-dom:
         specifier: ^19.0.0
-        version: 19.0.0(react@19.0.0)
+        version: 19.0.0(react@19.1.0)
       sonner:
-        specifier: ^2.0.5
-        version: 2.0.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^2.0.6
+        version: 2.0.6(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
     devDependencies:
       '@eslint/eslintrc':
-        specifier: ^3.2.0
-        version: 3.2.0
+        specifier: ^3.3.1
+        version: 3.3.1
       '@types/node':
         specifier: ^20
         version: 20.17.16
       '@types/react':
-        specifier: ^19.0.0
-        version: 19.0.8
+        specifier: ^19.1.8
+        version: 19.1.8
       '@types/react-dom':
         specifier: ^19.0.0
-        version: 19.0.3(@types/react@19.0.8)
+        version: 19.0.3(@types/react@19.1.8)
       eslint:
         specifier: ^9
         version: 9.18.0(jiti@1.21.7)
       eslint-config-next:
-        specifier: 15.1.6
-        version: 15.1.6(eslint@9.18.0(jiti@1.21.7))(typescript@5.7.3)
+        specifier: 15.3.5
+        version: 15.3.5(eslint@9.18.0(jiti@1.21.7))(typescript@5.7.3)
       pagefind:
         specifier: ^1.3.0
         version: 1.3.0
@@ -61,8 +70,8 @@ importers:
         specifier: ^8
         version: 8.5.1
       prettier-plugin-tailwindcss:
-        specifier: ^0.6.11
-        version: 0.6.11(prettier@3.4.2)
+        specifier: ^0.6.13
+        version: 0.6.13(prettier@3.4.2)
       tailwindcss:
         specifier: ^3.4.1
         version: 3.4.17
@@ -130,8 +139,8 @@ packages:
   '@code-hike/lighter@1.0.1':
     resolution: {integrity: sha512-mccvcsk5UTScRrE02oBz1/qzckyhD8YE3VQlQv++2bSVVZgNuCUX8MpokSCi5OmfRAAxbj6kmNiqq1Um8eXPrw==}
 
-  '@emnapi/runtime@1.3.1':
-    resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
+  '@emnapi/runtime@1.4.4':
+    resolution: {integrity: sha512-hHyapA4A3gPaDCNfiqyZUStTMqIkKRshqPIuDOXv1hcBnD4U3l8cP0T1HMCfGRxQ6V64TGCcoswChANyOAwbQg==}
 
   '@eslint-community/eslint-utils@4.4.1':
     resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
@@ -151,8 +160,8 @@ packages:
     resolution: {integrity: sha512-gFHJ+xBOo4G3WRlR1e/3G8A6/KZAH6zcE/hkLRCZTi/B9avAG365QhFA8uOGzTMqgTghpn7/fSnscW++dpMSAw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/eslintrc@3.2.0':
-    resolution: {integrity: sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==}
+  '@eslint/eslintrc@3.3.1':
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/js@9.18.0':
@@ -188,8 +197,8 @@ packages:
   '@floating-ui/utils@0.2.9':
     resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
 
-  '@formatjs/intl-localematcher@0.5.10':
-    resolution: {integrity: sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==}
+  '@formatjs/intl-localematcher@0.6.1':
+    resolution: {integrity: sha512-ePEgLgVCqi2BBFnTMWPfIghu6FkbZnnBVhO2sSxvLfrdFw7wCHAHiDoM2h4NRgjbaY7+B7HgOLZGkK187pZTZg==}
 
   '@headlessui/react@2.2.0':
     resolution: {integrity: sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==}
@@ -224,107 +233,118 @@ packages:
   '@iconify/utils@2.2.1':
     resolution: {integrity: sha512-0/7J7hk4PqXmxo5PDBDxmnecw5PxklZJfNjIVG9FM0mEfVrvfudS22rYWsqVk6gR3UJ/mSYS90X4R3znXnqfNA==}
 
-  '@img/sharp-darwin-arm64@0.33.5':
-    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
+  '@img/sharp-darwin-arm64@0.34.2':
+    resolution: {integrity: sha512-OfXHZPppddivUJnqyKoi5YVeHRkkNE2zUFT2gbpKxp/JZCFYEYubnMg+gOp6lWfasPrTS+KPosKqdI+ELYVDtg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-darwin-x64@0.33.5':
-    resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==}
+  '@img/sharp-darwin-x64@0.34.2':
+    resolution: {integrity: sha512-dYvWqmjU9VxqXmjEtjmvHnGqF8GrVjM2Epj9rJ6BUIXvk8slvNDJbhGFvIoXzkDhrJC2jUxNLz/GUjjvSzfw+g==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-arm64@1.0.4':
-    resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==}
+  '@img/sharp-libvips-darwin-arm64@1.1.0':
+    resolution: {integrity: sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-x64@1.0.4':
-    resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==}
+  '@img/sharp-libvips-darwin-x64@1.1.0':
+    resolution: {integrity: sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-linux-arm64@1.0.4':
-    resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
+  '@img/sharp-libvips-linux-arm64@1.1.0':
+    resolution: {integrity: sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew==}
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-libvips-linux-arm@1.0.5':
-    resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
+  '@img/sharp-libvips-linux-arm@1.1.0':
+    resolution: {integrity: sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA==}
     cpu: [arm]
     os: [linux]
 
-  '@img/sharp-libvips-linux-s390x@1.0.4':
-    resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
+  '@img/sharp-libvips-linux-ppc64@1.1.0':
+    resolution: {integrity: sha512-tiXxFZFbhnkWE2LA8oQj7KYR+bWBkiV2nilRldT7bqoEZ4HiDOcePr9wVDAZPi/Id5fT1oY9iGnDq20cwUz8lQ==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.1.0':
+    resolution: {integrity: sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==}
     cpu: [s390x]
     os: [linux]
 
-  '@img/sharp-libvips-linux-x64@1.0.4':
-    resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
+  '@img/sharp-libvips-linux-x64@1.1.0':
+    resolution: {integrity: sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==}
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
-    resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
+  '@img/sharp-libvips-linuxmusl-arm64@1.1.0':
+    resolution: {integrity: sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w==}
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
-    resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
+  '@img/sharp-libvips-linuxmusl-x64@1.1.0':
+    resolution: {integrity: sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==}
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-linux-arm64@0.33.5':
-    resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
+  '@img/sharp-linux-arm64@0.34.2':
+    resolution: {integrity: sha512-D8n8wgWmPDakc83LORcfJepdOSN6MvWNzzz2ux0MnIbOqdieRZwVYY32zxVx+IFUT8er5KPcyU3XXsn+GzG/0Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-linux-arm@0.33.5':
-    resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
+  '@img/sharp-linux-arm@0.34.2':
+    resolution: {integrity: sha512-0DZzkvuEOqQUP9mo2kjjKNok5AmnOr1jB2XYjkaoNRwpAYMDzRmAqUIa1nRi58S2WswqSfPOWLNOr0FDT3H5RQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
 
-  '@img/sharp-linux-s390x@0.33.5':
-    resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
+  '@img/sharp-linux-s390x@0.34.2':
+    resolution: {integrity: sha512-EGZ1xwhBI7dNISwxjChqBGELCWMGDvmxZXKjQRuqMrakhO8QoMgqCrdjnAqJq/CScxfRn+Bb7suXBElKQpPDiw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
 
-  '@img/sharp-linux-x64@0.33.5':
-    resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
+  '@img/sharp-linux-x64@0.34.2':
+    resolution: {integrity: sha512-sD7J+h5nFLMMmOXYH4DD9UtSNBD05tWSSdWAcEyzqW8Cn5UxXvsHAxmxSesYUsTOBmUnjtxghKDl15EvfqLFbQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-linuxmusl-arm64@0.33.5':
-    resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
+  '@img/sharp-linuxmusl-arm64@0.34.2':
+    resolution: {integrity: sha512-NEE2vQ6wcxYav1/A22OOxoSOGiKnNmDzCYFOZ949xFmrWZOVII1Bp3NqVVpvj+3UeHMFyN5eP/V5hzViQ5CZNA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-linuxmusl-x64@0.33.5':
-    resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
+  '@img/sharp-linuxmusl-x64@0.34.2':
+    resolution: {integrity: sha512-DOYMrDm5E6/8bm/yQLCWyuDJwUnlevR8xtF8bs+gjZ7cyUNYXiSf/E8Kp0Ss5xasIaXSHzb888V1BE4i1hFhAA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-wasm32@0.33.5':
-    resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
+  '@img/sharp-wasm32@0.34.2':
+    resolution: {integrity: sha512-/VI4mdlJ9zkaq53MbIG6rZY+QRN3MLbR6usYlgITEzi4Rpx5S6LFKsycOQjkOGmqTNmkIdLjEvooFKwww6OpdQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [wasm32]
 
-  '@img/sharp-win32-ia32@0.33.5':
-    resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==}
+  '@img/sharp-win32-arm64@0.34.2':
+    resolution: {integrity: sha512-cfP/r9FdS63VA5k0xiqaNaEoGxBg9k7uE+RQGzuK9fHt7jib4zAVVseR9LsE4gJcNWgT6APKMNnCcnyOtmSEUQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.34.2':
+    resolution: {integrity: sha512-QLjGGvAbj0X/FXl8n1WbtQ6iVBpWU7JO94u/P2M4a8CFYsvQi4GW2mRy/JqkRx0qpBzaOdKJKw8uc930EX2AHw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ia32]
     os: [win32]
 
-  '@img/sharp-win32-x64@0.33.5':
-    resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==}
+  '@img/sharp-win32-x64@0.34.2':
+    resolution: {integrity: sha512-aUdT6zEYtDKCaxkofmmJDJYGCf0+pJg3eU9/oBuqvEeoB9dKI6ZLc/1iLJCTuJQDO4ptntAlkUmHgGjyuobZbw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [win32]
@@ -445,56 +465,56 @@ packages:
     resolution: {integrity: sha512-jMxvwzkKzd3cXo2EB9GM2ic0eYo2rP/BS6gJt6HnWbsDO1O8GSD4k7o2Cpr2YERtMpGF/MGcDfsfj2EbQPtrXw==}
     engines: {node: '>= 10'}
 
-  '@next/env@15.1.6':
-    resolution: {integrity: sha512-d9AFQVPEYNr+aqokIiPLNK/MTyt3DWa/dpKveiAaVccUadFbhFEvY6FXYX2LJO2Hv7PHnLBu2oWwB4uBuHjr/w==}
+  '@next/env@15.3.5':
+    resolution: {integrity: sha512-7g06v8BUVtN2njAX/r8gheoVffhiKFVt4nx74Tt6G4Hqw9HCLYQVx/GkH2qHvPtAHZaUNZ0VXAa0pQP6v1wk7g==}
 
-  '@next/eslint-plugin-next@15.1.6':
-    resolution: {integrity: sha512-+slMxhTgILUntZDGNgsKEYHUvpn72WP1YTlkmEhS51vnVd7S9jEEy0n9YAMcI21vUG4akTw9voWH02lrClt/yw==}
+  '@next/eslint-plugin-next@15.3.5':
+    resolution: {integrity: sha512-BZwWPGfp9po/rAnJcwUBaM+yT/+yTWIkWdyDwc74G9jcfTrNrmsHe+hXHljV066YNdVs8cxROxX5IgMQGX190w==}
 
-  '@next/swc-darwin-arm64@15.1.6':
-    resolution: {integrity: sha512-u7lg4Mpl9qWpKgy6NzEkz/w0/keEHtOybmIl0ykgItBxEM5mYotS5PmqTpo+Rhg8FiOiWgwr8USxmKQkqLBCrw==}
+  '@next/swc-darwin-arm64@15.3.5':
+    resolution: {integrity: sha512-lM/8tilIsqBq+2nq9kbTW19vfwFve0NR7MxfkuSUbRSgXlMQoJYg+31+++XwKVSXk4uT23G2eF/7BRIKdn8t8w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@15.1.6':
-    resolution: {integrity: sha512-x1jGpbHbZoZ69nRuogGL2MYPLqohlhnT9OCU6E6QFewwup+z+M6r8oU47BTeJcWsF2sdBahp5cKiAcDbwwK/lg==}
+  '@next/swc-darwin-x64@15.3.5':
+    resolution: {integrity: sha512-WhwegPQJ5IfoUNZUVsI9TRAlKpjGVK0tpJTL6KeiC4cux9774NYE9Wu/iCfIkL/5J8rPAkqZpG7n+EfiAfidXA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@15.1.6':
-    resolution: {integrity: sha512-jar9sFw0XewXsBzPf9runGzoivajeWJUc/JkfbLTC4it9EhU8v7tCRLH7l5Y1ReTMN6zKJO0kKAGqDk8YSO2bg==}
+  '@next/swc-linux-arm64-gnu@15.3.5':
+    resolution: {integrity: sha512-LVD6uMOZ7XePg3KWYdGuzuvVboxujGjbcuP2jsPAN3MnLdLoZUXKRc6ixxfs03RH7qBdEHCZjyLP/jBdCJVRJQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@15.1.6':
-    resolution: {integrity: sha512-+n3u//bfsrIaZch4cgOJ3tXCTbSxz0s6brJtU3SzLOvkJlPQMJ+eHVRi6qM2kKKKLuMY+tcau8XD9CJ1OjeSQQ==}
+  '@next/swc-linux-arm64-musl@15.3.5':
+    resolution: {integrity: sha512-k8aVScYZ++BnS2P69ClK7v4nOu702jcF9AIHKu6llhHEtBSmM2zkPGl9yoqbSU/657IIIb0QHpdxEr0iW9z53A==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@15.1.6':
-    resolution: {integrity: sha512-SpuDEXixM3PycniL4iVCLyUyvcl6Lt0mtv3am08sucskpG0tYkW1KlRhTgj4LI5ehyxriVVcfdoxuuP8csi3kQ==}
+  '@next/swc-linux-x64-gnu@15.3.5':
+    resolution: {integrity: sha512-2xYU0DI9DGN/bAHzVwADid22ba5d/xrbrQlr2U+/Q5WkFUzeL0TDR963BdrtLS/4bMmKZGptLeg6282H/S2i8A==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@15.1.6':
-    resolution: {integrity: sha512-L4druWmdFSZIIRhF+G60API5sFB7suTbDRhYWSjiw0RbE+15igQvE2g2+S973pMGvwN3guw7cJUjA/TmbPWTHQ==}
+  '@next/swc-linux-x64-musl@15.3.5':
+    resolution: {integrity: sha512-TRYIqAGf1KCbuAB0gjhdn5Ytd8fV+wJSM2Nh2is/xEqR8PZHxfQuaiNhoF50XfY90sNpaRMaGhF6E+qjV1b9Tg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@15.1.6':
-    resolution: {integrity: sha512-s8w6EeqNmi6gdvM19tqKKWbCyOBvXFbndkGHl+c9YrzsLARRdCHsD9S1fMj8gsXm9v8vhC8s3N8rjuC/XrtkEg==}
+  '@next/swc-win32-arm64-msvc@15.3.5':
+    resolution: {integrity: sha512-h04/7iMEUSMY6fDGCvdanKqlO1qYvzNxntZlCzfE8i5P0uqzVQWQquU1TIhlz0VqGQGXLrFDuTJVONpqGqjGKQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@15.1.6':
-    resolution: {integrity: sha512-6xomMuu54FAFxttYr5PJbEfu96godcxBTRk1OhAvJq0/EnmFU/Ybiax30Snis4vdWZ9LGpf7Roy5fSs7v/5ROQ==}
+  '@next/swc-win32-x64-msvc@15.3.5':
+    resolution: {integrity: sha512-5fhH6fccXxnX2KhllnGhkYMndhOiLOLEiVGYjP2nizqeGWkN10sA9taATlXwake2E2XMvYZjjz0Uj7T0y+z1yw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -515,11 +535,12 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
-  '@offlegacy/event-tracker@1.0.3':
-    resolution: {integrity: sha512-RAbZgPRSk3NDe6hUa3GrezmBCf4pFe7H6XoAqE0u0Y1tnZugk+9Lx1ImC0yT6sERCtG9kPHlWPNpTv4WzsOiWQ==}
+  '@offlegacy/event-tracker@1.3.0':
+    resolution: {integrity: sha512-js1f8wBkNH7LAorneda0BAW3pElfE9EmhJTmUJgB8j7Q5ccWrTUdP9pjPK28bOPA7r4FNaoQojunN6m49Cd7Dg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      zod: ^3.20.0
 
   '@pagefind/darwin-arm64@1.3.0':
     resolution: {integrity: sha512-365BEGl6ChOsauRjyVpBjXybflXAOvoMROw3TucAROHIcdBvXk9/2AmEvGFU0r75+vdQI4LJdJdpH4Y6Yqaj4A==}
@@ -590,29 +611,29 @@ packages:
   '@rushstack/eslint-patch@1.10.5':
     resolution: {integrity: sha512-kkKUDVlII2DQiKy7UstOR1ErJP8kUKAQ4oa+SQtM0K+lPdmmjj0YnnxBgtTVYH7mUKtbsxeFC9y0AmK7Yb78/A==}
 
-  '@shikijs/core@1.29.1':
-    resolution: {integrity: sha512-Mo1gGGkuOYjDu5H8YwzmOuly9vNr8KDVkqj9xiKhhhFS8jisAtDSEWB9hzqRHLVQgFdA310e8XRJcW4tYhRB2A==}
+  '@shikijs/core@2.5.0':
+    resolution: {integrity: sha512-uu/8RExTKtavlpH7XqnVYBrfBkUc20ngXiX9NSrBhOVZYv/7XQRKUyhtkeflY5QsxC0GbJThCerruZfsUaSldg==}
 
-  '@shikijs/engine-javascript@1.29.1':
-    resolution: {integrity: sha512-Hpi8k9x77rCQ7F/7zxIOUruNkNidMyBnP5qAGbLFqg4kRrg1HZhkB8btib5EXbQWTtLb5gBHOdBwshk20njD7Q==}
+  '@shikijs/engine-javascript@2.5.0':
+    resolution: {integrity: sha512-VjnOpnQf8WuCEZtNUdjjwGUbtAVKuZkVQ/5cHy/tojVVRIRtlWMYVjyWhxOmIq05AlSOv72z7hRNRGVBgQOl0w==}
 
-  '@shikijs/engine-oniguruma@1.29.1':
-    resolution: {integrity: sha512-gSt2WhLNgEeLstcweQOSp+C+MhOpTsgdNXRqr3zP6M+BUBZ8Md9OU2BYwUYsALBxHza7hwaIWtFHjQ/aOOychw==}
+  '@shikijs/engine-oniguruma@2.5.0':
+    resolution: {integrity: sha512-pGd1wRATzbo/uatrCIILlAdFVKdxImWJGQ5rFiB5VZi2ve5xj3Ax9jny8QvkaV93btQEwR/rSz5ERFpC5mKNIw==}
 
-  '@shikijs/langs@1.29.1':
-    resolution: {integrity: sha512-iERn4HlyuT044/FgrvLOaZgKVKf3PozjKjyV/RZ5GnlyYEAZFcgwHGkYboeBv2IybQG1KVS/e7VGgiAU4JY2Gw==}
+  '@shikijs/langs@2.5.0':
+    resolution: {integrity: sha512-Qfrrt5OsNH5R+5tJ/3uYBBZv3SuGmnRPejV9IlIbFH3HTGLDlkqgHymAlzklVmKBjAaVmkPkyikAV/sQ1wSL+w==}
 
-  '@shikijs/themes@1.29.1':
-    resolution: {integrity: sha512-lb11zf72Vc9uxkl+aec2oW1HVTHJ2LtgZgumb4Rr6By3y/96VmlU44bkxEb8WBWH3RUtbqAJEN0jljD9cF7H7g==}
+  '@shikijs/themes@2.5.0':
+    resolution: {integrity: sha512-wGrk+R8tJnO0VMzmUExHR+QdSaPUl/NKs+a4cQQRWyoc3YFbUzuLEi/KWK1hj+8BfHRKm2jNhhJck1dfstJpiw==}
 
-  '@shikijs/twoslash@1.29.1':
-    resolution: {integrity: sha512-SN2aam87NjkpjS0O2Zq9SeXSDX1CztLBAROXrJpEe5Qe19dkMUUXY8uhw32Qu/FKjqsK8ycEP2S6FZrd9A2pzw==}
+  '@shikijs/twoslash@2.5.0':
+    resolution: {integrity: sha512-OdyoZRbzTB80qHFHdaXT070OG9hiljxbsJMZmrMAPWXG2e4FV8wbC63VBM5BJXa1DH645nw20VX1MzASkO5V9g==}
 
-  '@shikijs/types@1.29.1':
-    resolution: {integrity: sha512-aBqAuhYRp5vSir3Pc9+QPu9WESBOjUo03ao0IHLC4TyTioSsp/SkbAZSrIH4ghYYC1T1KTEpRSBa83bas4RnPA==}
+  '@shikijs/types@2.5.0':
+    resolution: {integrity: sha512-ygl5yhxki9ZLNuNpPitBWvcy9fsSKKaRuO4BAlMyagszQidxcpLAr0qiW/q43DtSIDxO6hEbtYLiFZNXO/hdGw==}
 
-  '@shikijs/vscode-textmate@10.0.1':
-    resolution: {integrity: sha512-fTIQwLF+Qhuws31iw7Ncl1R3HUDtGwIipiJ9iU+UsDUwMhegFcQKQHd51nZjb7CArq0MvON8rbgCGQYWHUKAdg==}
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
@@ -777,8 +798,8 @@ packages:
     peerDependencies:
       '@types/react': ^19.0.0
 
-  '@types/react@19.0.8':
-    resolution: {integrity: sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==}
+  '@types/react@19.1.8':
+    resolution: {integrity: sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==}
 
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
@@ -841,6 +862,13 @@ packages:
     peerDependencies:
       typescript: '*'
 
+  '@uidotdev/usehooks@2.4.1':
+    resolution: {integrity: sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
@@ -1327,8 +1355,8 @@ packages:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
-  detect-libc@2.0.3:
-    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
+  detect-libc@2.0.4:
+    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
 
   devlop@1.1.0:
@@ -1420,8 +1448,8 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
-  eslint-config-next@15.1.6:
-    resolution: {integrity: sha512-Wd1uy6y7nBbXUSg9QAuQ+xYEKli5CgUhLjz1QHW11jLDis5vK5XB3PemL6jEmy7HrdhaRFDz+GTZ/3FoH+EUjg==}
+  eslint-config-next@15.3.5:
+    resolution: {integrity: sha512-oQdvnIgP68wh2RlR3MdQpvaJ94R6qEFl+lnu8ZKxPj5fsAHrSF/HlAOZcsimLw3DT6bnEQIUdbZC2Ab6sWyptg==}
     peerDependencies:
       eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
       typescript: '>=3.3.1'
@@ -1631,6 +1659,20 @@ packages:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
 
+  framer-motion@12.23.0:
+    resolution: {integrity: sha512-xf6NxTGAyf7zR4r2KlnhFmsRfKIbjqeBupEDBAaEtVIBJX96sAon00kMlsKButSIRwPSHjbRrAPnYdJJ9kyhbA==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2075,6 +2117,11 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
+  lucide-react@0.525.0:
+    resolution: {integrity: sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   markdown-extensions@2.0.0:
     resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
     engines: {node: '>=16'}
@@ -2300,6 +2347,26 @@ packages:
   mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
+  motion-dom@12.22.0:
+    resolution: {integrity: sha512-ooH7+/BPw9gOsL9VtPhEJHE2m4ltnhMlcGMhEqA0YGNhKof7jdaszvsyThXI6LVIKshJUZ9/CP6HNqQhJfV7kw==}
+
+  motion-utils@12.19.0:
+    resolution: {integrity: sha512-BuFTHINYmV07pdWs6lj6aI63vr2N4dg0vR+td0rtrdpWOhBzIkEklZyLcvKBoEtwSqx8Jg06vUB5RS0xDiUybw==}
+
+  motion@12.23.0:
+    resolution: {integrity: sha512-PPNwblArRH9GRC4F3KtOTiIaYd+mtp324vYq3HIL+ueseoAVqPRK5TPFTAQBcIprfVd0NWo3DLzZSiyWaYFXXQ==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -2324,8 +2391,8 @@ packages:
       react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  next@15.1.6:
-    resolution: {integrity: sha512-Hch4wzbaX0vKQtalpXvUiw5sYivBy4cm5rzUKrBnUB/y436LGrvOUqYvlSeNVCWFO/770gDlltR9gqZH62ct4Q==}
+  next@15.3.5:
+    resolution: {integrity: sha512-RkazLBMMDJSJ4XZQ81kolSpwiCt907l0xcgcpF4xC2Vml6QVcPNXW0NQRwQ80FFtSn7UM52XN0anaw8TEJXaiw==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
     hasBin: true
     peerDependencies:
@@ -2345,16 +2412,16 @@ packages:
       sass:
         optional: true
 
-  nextra-theme-docs@4.0.7:
-    resolution: {integrity: sha512-KZMphMeN8r4mRVczDwlmIfDAzFyfYdJyE4TWqx9OblybazMD8gwHSC7nZAidLZSLzwWEUrf8vnBWN4KcXqyM8w==}
+  nextra-theme-docs@4.2.17:
+    resolution: {integrity: sha512-QQ7iPHQ7zqh7dKJZ3SQbxqoFt7r8RHD9v7dFtJ+x8evEfxwM23oBGHNBqIjBoPl5uSwtvufEiVd7WMhK+Dxdww==}
     peerDependencies:
       next: '>=14'
-      nextra: 4.0.7
+      nextra: 4.2.17
       react: '>=18'
       react-dom: '>=18'
 
-  nextra@4.0.7:
-    resolution: {integrity: sha512-jf+jpJoAE//bS0xZn0tn7fAGascdyI4U/JBj0kiI53gUsdcXV3j5/Lw6n/XLoeoPM0ptfb5WbVP2wrKIwNX59g==}
+  nextra@4.2.17:
+    resolution: {integrity: sha512-WBZGSUeUJqkYm3F3F7+4N1oMP84r/YK/rAg96wkywu/MIsuUREY8fLXQgQbKkvcLbBl/7Wk2Iy+9xlhDu+weNg==}
     engines: {node: '>=18'}
     peerDependencies:
       next: '>=14'
@@ -2416,8 +2483,8 @@ packages:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
 
-  oniguruma-to-es@2.3.0:
-    resolution: {integrity: sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g==}
+  oniguruma-to-es@3.1.1:
+    resolution: {integrity: sha512-bUH8SDvPkH3ho3dvwJwfonjlQ4R80vjyvrU8YpxuROddv55vAEJrTuCuCVUhhsHbtlD9tGGbaNApGQckXhS8iQ==}
 
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
@@ -2563,8 +2630,8 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier-plugin-tailwindcss@0.6.11:
-    resolution: {integrity: sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==}
+  prettier-plugin-tailwindcss@0.6.13:
+    resolution: {integrity: sha512-uQ0asli1+ic8xrrSmIOaElDu0FacR4x69GynTh2oZjFY10JUt6EEumTQl5tB4fMeD6I1naKd+4rXQQ7esT2i1g==}
     engines: {node: '>=14.21.3'}
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
@@ -2655,8 +2722,8 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  react@19.0.0:
-    resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
+  react@19.1.0:
+    resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
 
   read-cache@1.0.0:
@@ -2685,14 +2752,14 @@ packages:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
 
-  regex-recursion@5.1.1:
-    resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==}
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
 
   regex-utilities@2.3.0:
     resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
 
-  regex@5.1.1:
-    resolution: {integrity: sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==}
+  regex@6.0.1:
+    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
 
   regexp.prototype.flags@1.5.4:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
@@ -2704,11 +2771,11 @@ packages:
   rehype-parse@9.0.1:
     resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
 
-  rehype-pretty-code@0.14.0:
-    resolution: {integrity: sha512-hBeKF/Wkkf3zyUS8lal9RCUuhypDWLQc+h9UrP9Pav25FUm/AQAVh4m5gdvJxh4Oz+U+xKvdsV01p1LdvsZTiQ==}
+  rehype-pretty-code@0.14.1:
+    resolution: {integrity: sha512-IpG4OL0iYlbx78muVldsK86hdfNoht0z63AP7sekQNW2QOTmjxB7RbTO+rhIYNGRljgHxgVZoPwUl6bIC9SbjA==}
     engines: {node: '>=18'}
     peerDependencies:
-      shiki: ^1.3.0
+      shiki: ^1.0.0 || ^2.0.0 || ^3.0.0
 
   rehype-raw@7.0.0:
     resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
@@ -2821,6 +2888,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -2833,8 +2905,8 @@ packages:
     resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
     engines: {node: '>= 0.4'}
 
-  sharp@0.33.5:
-    resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
+  sharp@0.34.2:
+    resolution: {integrity: sha512-lszvBmB9QURERtyKT2bNmsgxXK0ShJrL/fvqlonCo7e6xBF8nT8xU6pW+PMIbLsz0RxQk3rgH9kd8UmvOzlMJg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
   shebang-command@2.0.0:
@@ -2845,8 +2917,8 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shiki@1.29.1:
-    resolution: {integrity: sha512-TghWKV9pJTd/N+IgAIVJtr0qZkB7FfFCUrrEJc0aRmZupo3D1OCVRknQWVRVA7AX/M0Ld7QfoAruPzr3CnUJuw==}
+  shiki@2.5.0:
+    resolution: {integrity: sha512-mI//trrsaiCIPsja5CNfsyNOqgAZUb6VpJA+340toL42UpzQlXpwRV9nch69X6gaUxrr9kaOOa6e3y3uAkGFxQ==}
 
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
@@ -2875,8 +2947,8 @@ packages:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
 
-  sonner@2.0.5:
-    resolution: {integrity: sha512-YwbHQO6cSso3HBXlbCkgrgzDNIhws14r4MO87Ofy+cV2X7ES4pOoAK3+veSmVTvqNx1BWUxlhPmZzP00Crk2aQ==}
+  sonner@2.0.6:
+    resolution: {integrity: sha512-yHFhk8T/DK3YxjFQXIrcHT1rGEeTLliVzWbO0xN8GberVun2RiBnxAjXAYpZrqwEVHBG9asI/Li8TAAhN9m59Q==}
     peerDependencies:
       react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
       react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
@@ -3343,7 +3415,7 @@ snapshots:
     dependencies:
       ansi-sequence-parser: 1.1.1
 
-  '@emnapi/runtime@1.3.1':
+  '@emnapi/runtime@1.4.4':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -3367,7 +3439,7 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
-  '@eslint/eslintrc@3.2.0':
+  '@eslint/eslintrc@3.3.1':
     dependencies:
       ajv: 6.12.6
       debug: 4.4.0
@@ -3399,34 +3471,34 @@ snapshots:
       '@floating-ui/core': 1.6.9
       '@floating-ui/utils': 0.2.9
 
-  '@floating-ui/react-dom@2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+  '@floating-ui/react-dom@2.1.2(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@floating-ui/dom': 1.6.13
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
 
-  '@floating-ui/react@0.26.28(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+  '@floating-ui/react@0.26.28(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@floating-ui/react-dom': 2.1.2(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
       '@floating-ui/utils': 0.2.9
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
       tabbable: 6.2.0
 
   '@floating-ui/utils@0.2.9': {}
 
-  '@formatjs/intl-localematcher@0.5.10':
+  '@formatjs/intl-localematcher@0.6.1':
     dependencies:
       tslib: 2.8.1
 
-  '@headlessui/react@2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+  '@headlessui/react@2.2.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@floating-ui/react': 0.26.28(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      '@react-aria/focus': 3.19.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      '@react-aria/interactions': 3.23.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      '@tanstack/react-virtual': 3.11.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      '@floating-ui/react': 0.26.28(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      '@react-aria/focus': 3.19.1(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      '@react-aria/interactions': 3.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      '@tanstack/react-virtual': 3.11.2(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
 
   '@humanfs/core@0.19.1': {}
 
@@ -3456,79 +3528,85 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@img/sharp-darwin-arm64@0.33.5':
+  '@img/sharp-darwin-arm64@0.34.2':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.0.4
+      '@img/sharp-libvips-darwin-arm64': 1.1.0
     optional: true
 
-  '@img/sharp-darwin-x64@0.33.5':
+  '@img/sharp-darwin-x64@0.34.2':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.0.4
+      '@img/sharp-libvips-darwin-x64': 1.1.0
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-darwin-arm64@1.0.4':
+  '@img/sharp-libvips-darwin-x64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-darwin-x64@1.0.4':
+  '@img/sharp-libvips-linux-arm64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linux-arm64@1.0.4':
+  '@img/sharp-libvips-linux-arm@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linux-arm@1.0.5':
+  '@img/sharp-libvips-linux-ppc64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linux-s390x@1.0.4':
+  '@img/sharp-libvips-linux-s390x@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linux-x64@1.0.4':
+  '@img/sharp-libvips-linux-x64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+  '@img/sharp-libvips-linuxmusl-arm64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+  '@img/sharp-libvips-linuxmusl-x64@1.1.0':
     optional: true
 
-  '@img/sharp-linux-arm64@0.33.5':
+  '@img/sharp-linux-arm64@0.34.2':
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.0.4
+      '@img/sharp-libvips-linux-arm64': 1.1.0
     optional: true
 
-  '@img/sharp-linux-arm@0.33.5':
+  '@img/sharp-linux-arm@0.34.2':
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.0.5
+      '@img/sharp-libvips-linux-arm': 1.1.0
     optional: true
 
-  '@img/sharp-linux-s390x@0.33.5':
+  '@img/sharp-linux-s390x@0.34.2':
     optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.0.4
+      '@img/sharp-libvips-linux-s390x': 1.1.0
     optional: true
 
-  '@img/sharp-linux-x64@0.33.5':
+  '@img/sharp-linux-x64@0.34.2':
     optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.0.4
+      '@img/sharp-libvips-linux-x64': 1.1.0
     optional: true
 
-  '@img/sharp-linuxmusl-arm64@0.33.5':
+  '@img/sharp-linuxmusl-arm64@0.34.2':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.1.0
     optional: true
 
-  '@img/sharp-linuxmusl-x64@0.33.5':
+  '@img/sharp-linuxmusl-x64@0.34.2':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.1.0
     optional: true
 
-  '@img/sharp-wasm32@0.33.5':
+  '@img/sharp-wasm32@0.34.2':
     dependencies:
-      '@emnapi/runtime': 1.3.1
+      '@emnapi/runtime': 1.4.4
     optional: true
 
-  '@img/sharp-win32-ia32@0.33.5':
+  '@img/sharp-win32-arm64@0.34.2':
     optional: true
 
-  '@img/sharp-win32-x64@0.33.5':
+  '@img/sharp-win32-ia32@0.34.2':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.2':
     optional: true
 
   '@isaacs/cliui@8.0.2':
@@ -3650,34 +3728,34 @@ snapshots:
       '@napi-rs/simple-git-win32-arm64-msvc': 0.1.19
       '@napi-rs/simple-git-win32-x64-msvc': 0.1.19
 
-  '@next/env@15.1.6': {}
+  '@next/env@15.3.5': {}
 
-  '@next/eslint-plugin-next@15.1.6':
+  '@next/eslint-plugin-next@15.3.5':
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/swc-darwin-arm64@15.1.6':
+  '@next/swc-darwin-arm64@15.3.5':
     optional: true
 
-  '@next/swc-darwin-x64@15.1.6':
+  '@next/swc-darwin-x64@15.3.5':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@15.1.6':
+  '@next/swc-linux-arm64-gnu@15.3.5':
     optional: true
 
-  '@next/swc-linux-arm64-musl@15.1.6':
+  '@next/swc-linux-arm64-musl@15.3.5':
     optional: true
 
-  '@next/swc-linux-x64-gnu@15.1.6':
+  '@next/swc-linux-x64-gnu@15.3.5':
     optional: true
 
-  '@next/swc-linux-x64-musl@15.1.6':
+  '@next/swc-linux-x64-musl@15.3.5':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@15.1.6':
+  '@next/swc-win32-arm64-msvc@15.3.5':
     optional: true
 
-  '@next/swc-win32-x64-msvc@15.1.6':
+  '@next/swc-win32-x64-msvc@15.3.5':
     optional: true
 
   '@nodelib/fs.scandir@2.1.5':
@@ -3694,10 +3772,11 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
-  '@offlegacy/event-tracker@1.0.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+  '@offlegacy/event-tracker@1.3.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(zod@3.24.1)':
     dependencies:
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
+      zod: 3.24.1
 
   '@pagefind/darwin-arm64@1.3.0':
     optional: true
@@ -3717,96 +3796,96 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@react-aria/focus@3.19.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+  '@react-aria/focus@3.19.1(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@react-aria/interactions': 3.23.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      '@react-aria/utils': 3.27.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      '@react-types/shared': 3.27.0(react@19.0.0)
+      '@react-aria/interactions': 3.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      '@react-aria/utils': 3.27.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      '@react-types/shared': 3.27.0(react@19.1.0)
       '@swc/helpers': 0.5.15
       clsx: 2.1.1
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
 
-  '@react-aria/interactions@3.23.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+  '@react-aria/interactions@3.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@react-aria/ssr': 3.9.7(react@19.0.0)
-      '@react-aria/utils': 3.27.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      '@react-types/shared': 3.27.0(react@19.0.0)
+      '@react-aria/ssr': 3.9.7(react@19.1.0)
+      '@react-aria/utils': 3.27.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      '@react-types/shared': 3.27.0(react@19.1.0)
       '@swc/helpers': 0.5.15
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
 
-  '@react-aria/ssr@3.9.7(react@19.0.0)':
+  '@react-aria/ssr@3.9.7(react@19.1.0)':
     dependencies:
       '@swc/helpers': 0.5.15
-      react: 19.0.0
+      react: 19.1.0
 
-  '@react-aria/utils@3.27.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+  '@react-aria/utils@3.27.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@react-aria/ssr': 3.9.7(react@19.0.0)
-      '@react-stately/utils': 3.10.5(react@19.0.0)
-      '@react-types/shared': 3.27.0(react@19.0.0)
+      '@react-aria/ssr': 3.9.7(react@19.1.0)
+      '@react-stately/utils': 3.10.5(react@19.1.0)
+      '@react-types/shared': 3.27.0(react@19.1.0)
       '@swc/helpers': 0.5.15
       clsx: 2.1.1
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
 
-  '@react-stately/utils@3.10.5(react@19.0.0)':
+  '@react-stately/utils@3.10.5(react@19.1.0)':
     dependencies:
       '@swc/helpers': 0.5.15
-      react: 19.0.0
+      react: 19.1.0
 
-  '@react-types/shared@3.27.0(react@19.0.0)':
+  '@react-types/shared@3.27.0(react@19.1.0)':
     dependencies:
-      react: 19.0.0
+      react: 19.1.0
 
   '@rtsao/scc@1.1.0': {}
 
   '@rushstack/eslint-patch@1.10.5': {}
 
-  '@shikijs/core@1.29.1':
+  '@shikijs/core@2.5.0':
     dependencies:
-      '@shikijs/engine-javascript': 1.29.1
-      '@shikijs/engine-oniguruma': 1.29.1
-      '@shikijs/types': 1.29.1
-      '@shikijs/vscode-textmate': 10.0.1
+      '@shikijs/engine-javascript': 2.5.0
+      '@shikijs/engine-oniguruma': 2.5.0
+      '@shikijs/types': 2.5.0
+      '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.4
 
-  '@shikijs/engine-javascript@1.29.1':
+  '@shikijs/engine-javascript@2.5.0':
     dependencies:
-      '@shikijs/types': 1.29.1
-      '@shikijs/vscode-textmate': 10.0.1
-      oniguruma-to-es: 2.3.0
+      '@shikijs/types': 2.5.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 3.1.1
 
-  '@shikijs/engine-oniguruma@1.29.1':
+  '@shikijs/engine-oniguruma@2.5.0':
     dependencies:
-      '@shikijs/types': 1.29.1
-      '@shikijs/vscode-textmate': 10.0.1
+      '@shikijs/types': 2.5.0
+      '@shikijs/vscode-textmate': 10.0.2
 
-  '@shikijs/langs@1.29.1':
+  '@shikijs/langs@2.5.0':
     dependencies:
-      '@shikijs/types': 1.29.1
+      '@shikijs/types': 2.5.0
 
-  '@shikijs/themes@1.29.1':
+  '@shikijs/themes@2.5.0':
     dependencies:
-      '@shikijs/types': 1.29.1
+      '@shikijs/types': 2.5.0
 
-  '@shikijs/twoslash@1.29.1(typescript@5.7.3)':
+  '@shikijs/twoslash@2.5.0(typescript@5.7.3)':
     dependencies:
-      '@shikijs/core': 1.29.1
-      '@shikijs/types': 1.29.1
+      '@shikijs/core': 2.5.0
+      '@shikijs/types': 2.5.0
       twoslash: 0.2.12(typescript@5.7.3)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@shikijs/types@1.29.1':
+  '@shikijs/types@2.5.0':
     dependencies:
-      '@shikijs/vscode-textmate': 10.0.1
+      '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
-  '@shikijs/vscode-textmate@10.0.1': {}
+  '@shikijs/vscode-textmate@10.0.2': {}
 
   '@swc/counter@0.1.3': {}
 
@@ -3814,18 +3893,18 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@tanstack/react-virtual@3.11.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+  '@tanstack/react-virtual@3.11.2(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@tanstack/virtual-core': 3.11.2
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
 
   '@tanstack/virtual-core@3.11.2': {}
 
-  '@theguild/remark-mermaid@0.2.0(react@19.0.0)':
+  '@theguild/remark-mermaid@0.2.0(react@19.1.0)':
     dependencies:
       mermaid: 11.4.1
-      react: 19.0.0
+      react: 19.1.0
       unist-util-visit: 5.0.0
     transitivePeerDependencies:
       - supports-color
@@ -3994,11 +4073,11 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
-  '@types/react-dom@19.0.3(@types/react@19.0.8)':
+  '@types/react-dom@19.0.3(@types/react@19.1.8)':
     dependencies:
-      '@types/react': 19.0.8
+      '@types/react': 19.1.8
 
-  '@types/react@19.0.8':
+  '@types/react@19.1.8':
     dependencies:
       csstype: 3.1.3
 
@@ -4093,6 +4172,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@uidotdev/usehooks@2.4.1(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
+
   '@ungap/structured-clone@1.3.0': {}
 
   acorn-jsx@5.3.2(acorn@8.14.0):
@@ -4217,10 +4301,10 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
-  better-react-mathjax@2.0.3(react@19.0.0):
+  better-react-mathjax@2.0.3(react@19.1.0):
     dependencies:
       mathjax-full: 3.2.2
-      react: 19.0.0
+      react: 19.1.0
 
   binary-extensions@2.3.0: {}
 
@@ -4619,7 +4703,7 @@ snapshots:
 
   dequal@2.0.3: {}
 
-  detect-libc@2.0.3:
+  detect-libc@2.0.4:
     optional: true
 
   devlop@1.1.0:
@@ -4777,9 +4861,9 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-next@15.1.6(eslint@9.18.0(jiti@1.21.7))(typescript@5.7.3):
+  eslint-config-next@15.3.5(eslint@9.18.0(jiti@1.21.7))(typescript@5.7.3):
     dependencies:
-      '@next/eslint-plugin-next': 15.1.6
+      '@next/eslint-plugin-next': 15.3.5
       '@rushstack/eslint-patch': 1.10.5
       '@typescript-eslint/eslint-plugin': 8.21.0(@typescript-eslint/parser@8.21.0(eslint@9.18.0(jiti@1.21.7))(typescript@5.7.3))(eslint@9.18.0(jiti@1.21.7))(typescript@5.7.3)
       '@typescript-eslint/parser': 8.21.0(eslint@9.18.0(jiti@1.21.7))(typescript@5.7.3)
@@ -4921,7 +5005,7 @@ snapshots:
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.19.1
       '@eslint/core': 0.10.0
-      '@eslint/eslintrc': 3.2.0
+      '@eslint/eslintrc': 3.3.1
       '@eslint/js': 9.18.0
       '@eslint/plugin-kit': 0.2.5
       '@humanfs/node': 0.16.6
@@ -5094,6 +5178,15 @@ snapshots:
 
   format@0.2.2: {}
 
+  framer-motion@12.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      motion-dom: 12.22.0
+      motion-utils: 12.19.0
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
+
   fsevents@2.3.3:
     optional: true
 
@@ -5627,6 +5720,10 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
+  lucide-react@0.525.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   markdown-extensions@2.0.0: {}
 
   markdown-table@3.0.4: {}
@@ -6170,6 +6267,20 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.5.4
 
+  motion-dom@12.22.0:
+    dependencies:
+      motion-utils: 12.19.0
+
+  motion-utils@12.19.0: {}
+
+  motion@12.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      framer-motion: 12.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
+
   ms@2.1.3: {}
 
   mz@2.7.0:
@@ -6184,65 +6295,65 @@ snapshots:
 
   negotiator@1.0.0: {}
 
-  next-themes@0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+  next-themes@0.4.4(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
 
-  next@15.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+  next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      '@next/env': 15.1.6
+      '@next/env': 15.3.5
       '@swc/counter': 0.1.3
       '@swc/helpers': 0.5.15
       busboy: 1.6.0
       caniuse-lite: 1.0.30001695
       postcss: 8.4.31
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
-      styled-jsx: 5.1.6(react@19.0.0)
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
+      styled-jsx: 5.1.6(react@19.1.0)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 15.1.6
-      '@next/swc-darwin-x64': 15.1.6
-      '@next/swc-linux-arm64-gnu': 15.1.6
-      '@next/swc-linux-arm64-musl': 15.1.6
-      '@next/swc-linux-x64-gnu': 15.1.6
-      '@next/swc-linux-x64-musl': 15.1.6
-      '@next/swc-win32-arm64-msvc': 15.1.6
-      '@next/swc-win32-x64-msvc': 15.1.6
-      sharp: 0.33.5
+      '@next/swc-darwin-arm64': 15.3.5
+      '@next/swc-darwin-x64': 15.3.5
+      '@next/swc-linux-arm64-gnu': 15.3.5
+      '@next/swc-linux-arm64-musl': 15.3.5
+      '@next/swc-linux-x64-gnu': 15.3.5
+      '@next/swc-linux-x64-musl': 15.3.5
+      '@next/swc-win32-arm64-msvc': 15.3.5
+      '@next/swc-win32-x64-msvc': 15.3.5
+      sharp: 0.34.2
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
 
-  nextra-theme-docs@4.0.7(@types/react@19.0.8)(next@15.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(nextra@4.0.7(acorn@8.14.0)(next@15.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.7.3))(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+  nextra-theme-docs@4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3))(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      '@headlessui/react': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@headlessui/react': 2.2.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
       clsx: 2.1.1
-      next: 15.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      next-themes: 0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      nextra: 4.0.7(acorn@8.14.0)(next@15.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.7.3)
-      react: 19.0.0
-      react-compiler-runtime: 0.0.0-experimental-22c6e49-20241219(react@19.0.0)
-      react-dom: 19.0.0(react@19.0.0)
+      next: 15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      next-themes: 0.4.4(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      nextra: 4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3)
+      react: 19.1.0
+      react-compiler-runtime: 0.0.0-experimental-22c6e49-20241219(react@19.1.0)
+      react-dom: 19.0.0(react@19.1.0)
       scroll-into-view-if-needed: 3.1.0
       zod: 3.24.1
       zod-validation-error: 3.4.0(zod@3.24.1)
-      zustand: 5.0.3(@types/react@19.0.8)(react@19.0.0)
+      zustand: 5.0.3(@types/react@19.1.8)(react@19.1.0)
     transitivePeerDependencies:
       - '@types/react'
       - immer
       - use-sync-external-store
 
-  nextra@4.0.7(acorn@8.14.0)(next@15.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.7.3):
+  nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3):
     dependencies:
-      '@formatjs/intl-localematcher': 0.5.10
-      '@headlessui/react': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@formatjs/intl-localematcher': 0.6.1
+      '@headlessui/react': 2.2.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
       '@mdx-js/mdx': 3.1.0(acorn@8.14.0)
       '@napi-rs/simple-git': 0.1.19
-      '@shikijs/twoslash': 1.29.1(typescript@5.7.3)
-      '@theguild/remark-mermaid': 0.2.0(react@19.0.0)
+      '@shikijs/twoslash': 2.5.0(typescript@5.7.3)
+      '@theguild/remark-mermaid': 0.2.0(react@19.1.0)
       '@theguild/remark-npm2yarn': 0.3.3
-      better-react-mathjax: 2.0.3(react@19.0.0)
+      better-react-mathjax: 2.0.3(react@19.1.0)
       clsx: 2.1.1
       estree-util-to-js: 2.0.0
       estree-util-value-to-estree: 3.2.1
@@ -6254,24 +6365,25 @@ snapshots:
       mdast-util-gfm: 3.0.0
       mdast-util-to-hast: 13.2.0
       negotiator: 1.0.0
-      next: 15.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      react: 19.0.0
-      react-compiler-runtime: 0.0.0-experimental-22c6e49-20241219(react@19.0.0)
-      react-dom: 19.0.0(react@19.0.0)
-      react-medium-image-zoom: 5.2.13(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      next: 15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-compiler-runtime: 0.0.0-experimental-22c6e49-20241219(react@19.1.0)
+      react-dom: 19.0.0(react@19.1.0)
+      react-medium-image-zoom: 5.2.13(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
       rehype-katex: 7.0.1
-      rehype-pretty-code: 0.14.0(shiki@1.29.1)
+      rehype-pretty-code: 0.14.1(shiki@2.5.0)
       rehype-raw: 7.0.0
       remark-frontmatter: 5.0.0
       remark-gfm: 4.0.0
       remark-math: 6.0.0
       remark-reading-time: 2.0.1
       remark-smartypants: 3.0.2
-      shiki: 1.29.1
+      shiki: 2.5.0
       slash: 5.1.0
       title: 4.0.1
       unist-util-remove: 4.0.0
       unist-util-visit: 5.0.0
+      unist-util-visit-children: 3.0.0
       yaml: 2.7.0
       zod: 3.24.1
       zod-validation-error: 3.4.0(zod@3.24.1)
@@ -6339,11 +6451,11 @@ snapshots:
     dependencies:
       mimic-fn: 4.0.0
 
-  oniguruma-to-es@2.3.0:
+  oniguruma-to-es@3.1.1:
     dependencies:
       emoji-regex-xs: 1.0.0
-      regex: 5.1.1
-      regex-recursion: 5.1.1
+      regex: 6.0.1
+      regex-recursion: 6.0.2
 
   optionator@0.9.4:
     dependencies:
@@ -6494,7 +6606,7 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-tailwindcss@0.6.11(prettier@3.4.2):
+  prettier-plugin-tailwindcss@0.6.13(prettier@3.4.2):
     dependencies:
       prettier: 3.4.2
 
@@ -6512,23 +6624,23 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  react-compiler-runtime@0.0.0-experimental-22c6e49-20241219(react@19.0.0):
+  react-compiler-runtime@0.0.0-experimental-22c6e49-20241219(react@19.1.0):
     dependencies:
-      react: 19.0.0
+      react: 19.1.0
 
-  react-dom@19.0.0(react@19.0.0):
+  react-dom@19.0.0(react@19.1.0):
     dependencies:
-      react: 19.0.0
+      react: 19.1.0
       scheduler: 0.25.0
 
   react-is@16.13.1: {}
 
-  react-medium-image-zoom@5.2.13(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+  react-medium-image-zoom@5.2.13(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
 
-  react@19.0.0: {}
+  react@19.1.0: {}
 
   read-cache@1.0.0:
     dependencies:
@@ -6581,14 +6693,13 @@ snapshots:
       get-proto: 1.0.1
       which-builtin-type: 1.2.1
 
-  regex-recursion@5.1.1:
+  regex-recursion@6.0.2:
     dependencies:
-      regex: 5.1.1
       regex-utilities: 2.3.0
 
   regex-utilities@2.3.0: {}
 
-  regex@5.1.1:
+  regex@6.0.1:
     dependencies:
       regex-utilities: 2.3.0
 
@@ -6617,13 +6728,13 @@ snapshots:
       hast-util-from-html: 2.0.3
       unified: 11.0.5
 
-  rehype-pretty-code@0.14.0(shiki@1.29.1):
+  rehype-pretty-code@0.14.1(shiki@2.5.0):
     dependencies:
       '@types/hast': 3.0.4
       hast-util-to-string: 3.0.1
       parse-numeric-range: 1.3.0
       rehype-parse: 9.0.1
-      shiki: 1.29.1
+      shiki: 2.5.0
       unified: 11.0.5
       unist-util-visit: 5.0.0
 
@@ -6807,6 +6918,9 @@ snapshots:
 
   semver@7.6.3: {}
 
+  semver@7.7.2:
+    optional: true
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -6829,31 +6943,33 @@ snapshots:
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
 
-  sharp@0.33.5:
+  sharp@0.34.2:
     dependencies:
       color: 4.2.3
-      detect-libc: 2.0.3
-      semver: 7.6.3
+      detect-libc: 2.0.4
+      semver: 7.7.2
     optionalDependencies:
-      '@img/sharp-darwin-arm64': 0.33.5
-      '@img/sharp-darwin-x64': 0.33.5
-      '@img/sharp-libvips-darwin-arm64': 1.0.4
-      '@img/sharp-libvips-darwin-x64': 1.0.4
-      '@img/sharp-libvips-linux-arm': 1.0.5
-      '@img/sharp-libvips-linux-arm64': 1.0.4
-      '@img/sharp-libvips-linux-s390x': 1.0.4
-      '@img/sharp-libvips-linux-x64': 1.0.4
-      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
-      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
-      '@img/sharp-linux-arm': 0.33.5
-      '@img/sharp-linux-arm64': 0.33.5
-      '@img/sharp-linux-s390x': 0.33.5
-      '@img/sharp-linux-x64': 0.33.5
-      '@img/sharp-linuxmusl-arm64': 0.33.5
-      '@img/sharp-linuxmusl-x64': 0.33.5
-      '@img/sharp-wasm32': 0.33.5
-      '@img/sharp-win32-ia32': 0.33.5
-      '@img/sharp-win32-x64': 0.33.5
+      '@img/sharp-darwin-arm64': 0.34.2
+      '@img/sharp-darwin-x64': 0.34.2
+      '@img/sharp-libvips-darwin-arm64': 1.1.0
+      '@img/sharp-libvips-darwin-x64': 1.1.0
+      '@img/sharp-libvips-linux-arm': 1.1.0
+      '@img/sharp-libvips-linux-arm64': 1.1.0
+      '@img/sharp-libvips-linux-ppc64': 1.1.0
+      '@img/sharp-libvips-linux-s390x': 1.1.0
+      '@img/sharp-libvips-linux-x64': 1.1.0
+      '@img/sharp-libvips-linuxmusl-arm64': 1.1.0
+      '@img/sharp-libvips-linuxmusl-x64': 1.1.0
+      '@img/sharp-linux-arm': 0.34.2
+      '@img/sharp-linux-arm64': 0.34.2
+      '@img/sharp-linux-s390x': 0.34.2
+      '@img/sharp-linux-x64': 0.34.2
+      '@img/sharp-linuxmusl-arm64': 0.34.2
+      '@img/sharp-linuxmusl-x64': 0.34.2
+      '@img/sharp-wasm32': 0.34.2
+      '@img/sharp-win32-arm64': 0.34.2
+      '@img/sharp-win32-ia32': 0.34.2
+      '@img/sharp-win32-x64': 0.34.2
     optional: true
 
   shebang-command@2.0.0:
@@ -6862,15 +6978,15 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shiki@1.29.1:
+  shiki@2.5.0:
     dependencies:
-      '@shikijs/core': 1.29.1
-      '@shikijs/engine-javascript': 1.29.1
-      '@shikijs/engine-oniguruma': 1.29.1
-      '@shikijs/langs': 1.29.1
-      '@shikijs/themes': 1.29.1
-      '@shikijs/types': 1.29.1
-      '@shikijs/vscode-textmate': 10.0.1
+      '@shikijs/core': 2.5.0
+      '@shikijs/engine-javascript': 2.5.0
+      '@shikijs/engine-oniguruma': 2.5.0
+      '@shikijs/langs': 2.5.0
+      '@shikijs/themes': 2.5.0
+      '@shikijs/types': 2.5.0
+      '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
   side-channel-list@1.0.0:
@@ -6910,10 +7026,10 @@ snapshots:
 
   slash@5.1.0: {}
 
-  sonner@2.0.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+  sonner@2.0.6(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      react: 19.1.0
+      react-dom: 19.0.0(react@19.1.0)
 
   source-map-js@1.2.1: {}
 
@@ -7016,10 +7132,10 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.4
 
-  styled-jsx@5.1.6(react@19.0.0):
+  styled-jsx@5.1.6(react@19.1.0):
     dependencies:
       client-only: 0.0.1
-      react: 19.0.0
+      react: 19.1.0
 
   stylis@4.3.5: {}
 
@@ -7364,9 +7480,9 @@ snapshots:
 
   zod@3.24.1: {}
 
-  zustand@5.0.3(@types/react@19.0.8)(react@19.0.0):
+  zustand@5.0.3(@types/react@19.1.8)(react@19.1.0):
     optionalDependencies:
-      '@types/react': 19.0.8
-      react: 19.0.0
+      '@types/react': 19.1.8
+      react: 19.1.0
 
   zwitch@2.0.4: {}

From 59b2c35d4aaf75f332c27d6dd21c97b7aef0aab9 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Wed, 9 Jul 2025 01:33:30 +0900
Subject: [PATCH 13/24] feat(docs): new documentation

---
 docs/README.md                                |  36 ----
 docs/next.config.ts                           |   3 +-
 docs/package.json                             |   7 +-
 docs/pnpm-lock.yaml                           | 147 +++++++-------
 .../[lang]/{docs => }/[[...mdxPath]]/page.tsx |   4 +-
 docs/src/app/[lang]/_meta.ts                  |  15 --
 docs/src/app/[lang]/page.tsx                  | 187 ------------------
 docs/src/components/home-page.tsx             |  85 ++++++++
 docs/src/content/en/_meta.tsx                 |  16 ++
 docs/src/content/en/{ => docs}/_meta.ts       |  12 +-
 .../content/en/{ => docs}/basic-example.mdx   |   0
 docs/src/content/en/{ => docs}/batching.mdx   |   0
 .../content/en/{ => docs}/components/_meta.ts |   0
 .../en/{ => docs}/components/click.mdx        |   0
 .../en/{ => docs}/components/dom-event.mdx    |   0
 .../en/{ => docs}/components/impression.mdx   |   0
 .../en/{ => docs}/components/index.mdx        |   0
 .../en/{ => docs}/components/page-view.mdx    |   0
 .../en/{ => docs}/components/set-context.mdx  |   0
 .../content/en/{ => docs}/create-tracker.mdx  |   0
 .../en/{ => docs}/data-type-validation.mdx    |   0
 .../content/en/{ => docs}/installation.mdx    |   0
 docs/src/content/en/docs/introduction.mdx     |  89 +++++++++
 .../src/content/en/{ => docs}/use-tracker.mdx |   0
 .../en/{ => docs}/why-event-tracker.mdx       |   0
 docs/src/content/en/index.mdx                 | 129 ++++--------
 docs/src/content/ko/_meta.tsx                 |  16 ++
 docs/src/content/ko/{ => docs}/_meta.ts       |  11 +-
 .../content/ko/{ => docs}/basic-example.mdx   |   0
 docs/src/content/ko/{ => docs}/batching.mdx   |   0
 .../content/ko/{ => docs}/components/_meta.ts |   0
 .../ko/{ => docs}/components/click.mdx        |   0
 .../ko/{ => docs}/components/dom-event.mdx    |  12 +-
 .../ko/{ => docs}/components/impression.mdx   |   0
 .../ko/{ => docs}/components/index.mdx        |   0
 .../ko/{ => docs}/components/page-view.mdx    |   0
 .../ko/{ => docs}/components/set-context.mdx  |   0
 .../content/ko/{ => docs}/create-tracker.mdx  |   0
 .../ko/{ => docs}/data-type-validation.mdx    |   0
 .../content/ko/{ => docs}/installation.mdx    |   0
 docs/src/content/ko/docs/introduction.mdx     |  89 +++++++++
 .../src/content/ko/{ => docs}/use-tracker.mdx |   0
 .../ko/{ => docs}/why-event-tracker.mdx       |   0
 docs/src/content/ko/index.mdx                 | 129 ++++--------
 docs/{ => src}/mdx-components.ts              |   2 +-
 docs/src/middleware.ts                        |  12 +-
 package.json                                  |   1 +
 47 files changed, 480 insertions(+), 522 deletions(-)
 delete mode 100644 docs/README.md
 rename docs/src/app/[lang]/{docs => }/[[...mdxPath]]/page.tsx (90%)
 delete mode 100644 docs/src/app/[lang]/_meta.ts
 delete mode 100644 docs/src/app/[lang]/page.tsx
 create mode 100644 docs/src/components/home-page.tsx
 create mode 100644 docs/src/content/en/_meta.tsx
 rename docs/src/content/en/{ => docs}/_meta.ts (89%)
 rename docs/src/content/en/{ => docs}/basic-example.mdx (100%)
 rename docs/src/content/en/{ => docs}/batching.mdx (100%)
 rename docs/src/content/en/{ => docs}/components/_meta.ts (100%)
 rename docs/src/content/en/{ => docs}/components/click.mdx (100%)
 rename docs/src/content/en/{ => docs}/components/dom-event.mdx (100%)
 rename docs/src/content/en/{ => docs}/components/impression.mdx (100%)
 rename docs/src/content/en/{ => docs}/components/index.mdx (100%)
 rename docs/src/content/en/{ => docs}/components/page-view.mdx (100%)
 rename docs/src/content/en/{ => docs}/components/set-context.mdx (100%)
 rename docs/src/content/en/{ => docs}/create-tracker.mdx (100%)
 rename docs/src/content/en/{ => docs}/data-type-validation.mdx (100%)
 rename docs/src/content/en/{ => docs}/installation.mdx (100%)
 create mode 100644 docs/src/content/en/docs/introduction.mdx
 rename docs/src/content/en/{ => docs}/use-tracker.mdx (100%)
 rename docs/src/content/en/{ => docs}/why-event-tracker.mdx (100%)
 create mode 100644 docs/src/content/ko/_meta.tsx
 rename docs/src/content/ko/{ => docs}/_meta.ts (90%)
 rename docs/src/content/ko/{ => docs}/basic-example.mdx (100%)
 rename docs/src/content/ko/{ => docs}/batching.mdx (100%)
 rename docs/src/content/ko/{ => docs}/components/_meta.ts (100%)
 rename docs/src/content/ko/{ => docs}/components/click.mdx (100%)
 rename docs/src/content/ko/{ => docs}/components/dom-event.mdx (92%)
 rename docs/src/content/ko/{ => docs}/components/impression.mdx (100%)
 rename docs/src/content/ko/{ => docs}/components/index.mdx (100%)
 rename docs/src/content/ko/{ => docs}/components/page-view.mdx (100%)
 rename docs/src/content/ko/{ => docs}/components/set-context.mdx (100%)
 rename docs/src/content/ko/{ => docs}/create-tracker.mdx (100%)
 rename docs/src/content/ko/{ => docs}/data-type-validation.mdx (100%)
 rename docs/src/content/ko/{ => docs}/installation.mdx (100%)
 create mode 100644 docs/src/content/ko/docs/introduction.mdx
 rename docs/src/content/ko/{ => docs}/use-tracker.mdx (100%)
 rename docs/src/content/ko/{ => docs}/why-event-tracker.mdx (100%)
 rename docs/{ => src}/mdx-components.ts (80%)

diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index e215bc4..0000000
--- a/docs/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/docs/next.config.ts b/docs/next.config.ts
index ce2bbac..c453c5e 100644
--- a/docs/next.config.ts
+++ b/docs/next.config.ts
@@ -6,10 +6,11 @@ const withNextra = nextra({
   search: {
     codeblocks: false,
   },
-  contentDirBasePath: "/docs",
+  readingTime: true,
 });
 
 const nextConfig: NextConfig = {
+  reactStrictMode: true,
   i18n: {
     locales: ["en", "ko"],
     defaultLocale: "en",
diff --git a/docs/package.json b/docs/package.json
index d454c2d..963f1e0 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -21,14 +21,13 @@
     "nextra": "^4.2.17",
     "nextra-theme-docs": "^4.2.17",
     "react": "^19.1.0",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.1.0",
     "sonner": "^2.0.6"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
     "@types/node": "^20",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.0.0",
+    "@types/react-dom": "^19.1.6",
     "eslint": "^9",
     "eslint-config-next": "15.3.5",
     "pagefind": "^1.3.0",
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index f419721..3e7d84b 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -13,10 +13,10 @@ importers:
         version: 2.11.11
       '@offlegacy/event-tracker':
         specifier: latest
-        version: 1.3.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(zod@3.24.1)
+        version: 1.3.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(zod@3.24.1)
       '@uidotdev/usehooks':
         specifier: ^2.4.1
-        version: 2.4.1(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+        version: 2.4.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       codehike:
         specifier: ^1.0.7
         version: 1.0.7
@@ -25,25 +25,25 @@ importers:
         version: 0.525.0(react@19.1.0)
       motion:
         specifier: ^12.23.0
-        version: 12.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+        version: 12.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       next:
         specifier: 15.3.5
-        version: 15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+        version: 15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       nextra:
         specifier: ^4.2.17
-        version: 4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3)
+        version: 4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3)
       nextra-theme-docs:
         specifier: ^4.2.17
-        version: 4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3))(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+        version: 4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react:
         specifier: ^19.1.0
         version: 19.1.0
       react-dom:
-        specifier: ^19.0.0
-        version: 19.0.0(react@19.1.0)
+        specifier: ^19.1.0
+        version: 19.1.0(react@19.1.0)
       sonner:
         specifier: ^2.0.6
-        version: 2.0.6(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+        version: 2.0.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
     devDependencies:
       '@eslint/eslintrc':
         specifier: ^3.3.1
@@ -51,12 +51,9 @@ importers:
       '@types/node':
         specifier: ^20
         version: 20.17.16
-      '@types/react':
-        specifier: ^19.1.8
-        version: 19.1.8
       '@types/react-dom':
-        specifier: ^19.0.0
-        version: 19.0.3(@types/react@19.1.8)
+        specifier: ^19.1.6
+        version: 19.1.6(@types/react@19.1.8)
       eslint:
         specifier: ^9
         version: 9.18.0(jiti@1.21.7)
@@ -793,8 +790,8 @@ packages:
   '@types/node@20.17.16':
     resolution: {integrity: sha512-vOTpLduLkZXePLxHiHsBLp98mHGnl8RptV4YAO3HfKO5UHjDvySGbxKtpYfy8Sx5+WKcgc45qNreJJRVM3L6mw==}
 
-  '@types/react-dom@19.0.3':
-    resolution: {integrity: sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==}
+  '@types/react-dom@19.1.6':
+    resolution: {integrity: sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==}
     peerDependencies:
       '@types/react': ^19.0.0
 
@@ -2708,10 +2705,10 @@ packages:
     peerDependencies:
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  react-dom@19.0.0:
-    resolution: {integrity: sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==}
+  react-dom@19.1.0:
+    resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
     peerDependencies:
-      react: ^19.0.0
+      react: ^19.1.0
 
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@@ -2873,8 +2870,8 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  scheduler@0.25.0:
-    resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==}
+  scheduler@0.26.0:
+    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
 
   scroll-into-view-if-needed@3.1.0:
     resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
@@ -3471,18 +3468,18 @@ snapshots:
       '@floating-ui/core': 1.6.9
       '@floating-ui/utils': 0.2.9
 
-  '@floating-ui/react-dom@2.1.2(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
+  '@floating-ui/react-dom@2.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@floating-ui/dom': 1.6.13
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
 
-  '@floating-ui/react@0.26.28(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
+  '@floating-ui/react@0.26.28(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      '@floating-ui/react-dom': 2.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@floating-ui/utils': 0.2.9
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
       tabbable: 6.2.0
 
   '@floating-ui/utils@0.2.9': {}
@@ -3491,14 +3488,14 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@headlessui/react@2.2.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
+  '@headlessui/react@2.2.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@floating-ui/react': 0.26.28(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
-      '@react-aria/focus': 3.19.1(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
-      '@react-aria/interactions': 3.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
-      '@tanstack/react-virtual': 3.11.2(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      '@floating-ui/react': 0.26.28(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@react-aria/focus': 3.19.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@react-aria/interactions': 3.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@tanstack/react-virtual': 3.11.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
 
   '@humanfs/core@0.19.1': {}
 
@@ -3772,10 +3769,10 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
-  '@offlegacy/event-tracker@1.3.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(zod@3.24.1)':
+  '@offlegacy/event-tracker@1.3.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(zod@3.24.1)':
     dependencies:
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
       zod: 3.24.1
 
   '@pagefind/darwin-arm64@1.3.0':
@@ -3796,31 +3793,31 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@react-aria/focus@3.19.1(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
+  '@react-aria/focus@3.19.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@react-aria/interactions': 3.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
-      '@react-aria/utils': 3.27.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      '@react-aria/interactions': 3.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@react-aria/utils': 3.27.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@react-types/shared': 3.27.0(react@19.1.0)
       '@swc/helpers': 0.5.15
       clsx: 2.1.1
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
 
-  '@react-aria/interactions@3.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
+  '@react-aria/interactions@3.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@react-aria/ssr': 3.9.7(react@19.1.0)
-      '@react-aria/utils': 3.27.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      '@react-aria/utils': 3.27.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@react-types/shared': 3.27.0(react@19.1.0)
       '@swc/helpers': 0.5.15
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
 
   '@react-aria/ssr@3.9.7(react@19.1.0)':
     dependencies:
       '@swc/helpers': 0.5.15
       react: 19.1.0
 
-  '@react-aria/utils@3.27.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
+  '@react-aria/utils@3.27.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@react-aria/ssr': 3.9.7(react@19.1.0)
       '@react-stately/utils': 3.10.5(react@19.1.0)
@@ -3828,7 +3825,7 @@ snapshots:
       '@swc/helpers': 0.5.15
       clsx: 2.1.1
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
 
   '@react-stately/utils@3.10.5(react@19.1.0)':
     dependencies:
@@ -3893,11 +3890,11 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@tanstack/react-virtual@3.11.2(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
+  '@tanstack/react-virtual@3.11.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@tanstack/virtual-core': 3.11.2
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
 
   '@tanstack/virtual-core@3.11.2': {}
 
@@ -4073,7 +4070,7 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
-  '@types/react-dom@19.0.3(@types/react@19.1.8)':
+  '@types/react-dom@19.1.6(@types/react@19.1.8)':
     dependencies:
       '@types/react': 19.1.8
 
@@ -4172,10 +4169,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@uidotdev/usehooks@2.4.1(react-dom@19.0.0(react@19.1.0))(react@19.1.0)':
+  '@uidotdev/usehooks@2.4.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
 
   '@ungap/structured-clone@1.3.0': {}
 
@@ -5178,14 +5175,14 @@ snapshots:
 
   format@0.2.2: {}
 
-  framer-motion@12.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
+  framer-motion@12.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       motion-dom: 12.22.0
       motion-utils: 12.19.0
       tslib: 2.8.1
     optionalDependencies:
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
 
   fsevents@2.3.3:
     optional: true
@@ -6273,13 +6270,13 @@ snapshots:
 
   motion-utils@12.19.0: {}
 
-  motion@12.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
+  motion@12.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      framer-motion: 12.23.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      framer-motion: 12.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       tslib: 2.8.1
     optionalDependencies:
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
 
   ms@2.1.3: {}
 
@@ -6295,12 +6292,12 @@ snapshots:
 
   negotiator@1.0.0: {}
 
-  next-themes@0.4.4(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
+  next-themes@0.4.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
 
-  next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
+  next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       '@next/env': 15.3.5
       '@swc/counter': 0.1.3
@@ -6309,7 +6306,7 @@ snapshots:
       caniuse-lite: 1.0.30001695
       postcss: 8.4.31
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
       styled-jsx: 5.1.6(react@19.1.0)
     optionalDependencies:
       '@next/swc-darwin-arm64': 15.3.5
@@ -6325,16 +6322,16 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  nextra-theme-docs@4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3))(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
+  nextra-theme-docs@4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      '@headlessui/react': 2.2.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      '@headlessui/react': 2.2.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       clsx: 2.1.1
-      next: 15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
-      next-themes: 0.4.4(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
-      nextra: 4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3)
+      next: 15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      next-themes: 0.4.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      nextra: 4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3)
       react: 19.1.0
       react-compiler-runtime: 0.0.0-experimental-22c6e49-20241219(react@19.1.0)
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
       scroll-into-view-if-needed: 3.1.0
       zod: 3.24.1
       zod-validation-error: 3.4.0(zod@3.24.1)
@@ -6344,10 +6341,10 @@ snapshots:
       - immer
       - use-sync-external-store
 
-  nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0))(react-dom@19.0.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3):
+  nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3):
     dependencies:
       '@formatjs/intl-localematcher': 0.6.1
-      '@headlessui/react': 2.2.0(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      '@headlessui/react': 2.2.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@mdx-js/mdx': 3.1.0(acorn@8.14.0)
       '@napi-rs/simple-git': 0.1.19
       '@shikijs/twoslash': 2.5.0(typescript@5.7.3)
@@ -6365,11 +6362,11 @@ snapshots:
       mdast-util-gfm: 3.0.0
       mdast-util-to-hast: 13.2.0
       negotiator: 1.0.0
-      next: 15.3.5(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      next: 15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react: 19.1.0
       react-compiler-runtime: 0.0.0-experimental-22c6e49-20241219(react@19.1.0)
-      react-dom: 19.0.0(react@19.1.0)
-      react-medium-image-zoom: 5.2.13(react-dom@19.0.0(react@19.1.0))(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
+      react-medium-image-zoom: 5.2.13(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       rehype-katex: 7.0.1
       rehype-pretty-code: 0.14.1(shiki@2.5.0)
       rehype-raw: 7.0.0
@@ -6628,17 +6625,17 @@ snapshots:
     dependencies:
       react: 19.1.0
 
-  react-dom@19.0.0(react@19.1.0):
+  react-dom@19.1.0(react@19.1.0):
     dependencies:
       react: 19.1.0
-      scheduler: 0.25.0
+      scheduler: 0.26.0
 
   react-is@16.13.1: {}
 
-  react-medium-image-zoom@5.2.13(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
+  react-medium-image-zoom@5.2.13(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
 
   react@19.1.0: {}
 
@@ -6908,7 +6905,7 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  scheduler@0.25.0: {}
+  scheduler@0.26.0: {}
 
   scroll-into-view-if-needed@3.1.0:
     dependencies:
@@ -7026,10 +7023,10 @@ snapshots:
 
   slash@5.1.0: {}
 
-  sonner@2.0.6(react-dom@19.0.0(react@19.1.0))(react@19.1.0):
+  sonner@2.0.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       react: 19.1.0
-      react-dom: 19.0.0(react@19.1.0)
+      react-dom: 19.1.0(react@19.1.0)
 
   source-map-js@1.2.1: {}
 
diff --git a/docs/src/app/[lang]/docs/[[...mdxPath]]/page.tsx b/docs/src/app/[lang]/[[...mdxPath]]/page.tsx
similarity index 90%
rename from docs/src/app/[lang]/docs/[[...mdxPath]]/page.tsx
rename to docs/src/app/[lang]/[[...mdxPath]]/page.tsx
index 1420818..37e0e99 100644
--- a/docs/src/app/[lang]/docs/[[...mdxPath]]/page.tsx
+++ b/docs/src/app/[lang]/[[...mdxPath]]/page.tsx
@@ -1,9 +1,9 @@
 import { generateStaticParamsFor, importPage } from "nextra/pages";
 
-import { useMDXComponents } from "../../../../../mdx-components";
+import { useMDXComponents } from "@/mdx-components";
 
 import { TrackPageView } from "@/tracker";
-import { Lang } from "@/lib/types/lang";
+import type { Lang } from "@/lib/types/lang";
 
 export const generateStaticParams = generateStaticParamsFor("mdxPath");
 
diff --git a/docs/src/app/[lang]/_meta.ts b/docs/src/app/[lang]/_meta.ts
deleted file mode 100644
index c50c667..0000000
--- a/docs/src/app/[lang]/_meta.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { MetaRecord } from "nextra";
-
-const meta: MetaRecord = {
-  index: {
-    title: "Home",
-    type: "page",
-    display: "hidden",
-  },
-  docs: {
-    title: "Documentation",
-    type: "page",
-  },
-};
-
-export default meta;
diff --git a/docs/src/app/[lang]/page.tsx b/docs/src/app/[lang]/page.tsx
deleted file mode 100644
index ca07957..0000000
--- a/docs/src/app/[lang]/page.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import Link from "next/link";
-
-import { Logo } from "@/logo";
-import { TrackClick, TrackPageView } from "@/tracker";
-import { importPage } from "nextra/pages";
-import type { Lang } from "@/lib/types/lang";
-import { DemoCode } from "@/components/demo-playground";
-import Image from "next/image";
-import { InstallCopyButton } from "@/components/install-copy-button";
-
-export const metadata = {};
-
-const TEXT_MAP = {
-  description: {
-    ko: "React 애플리케이션을 위한 완전한 이벤트 트래킹 시스템",
-    en: "Comprehensive solution for event tracking in React applications",
-  },
-  get_started: {
-    ko: "시작하기",
-    en: "Get Started",
-  },
-  featureCardsTitle: {
-    ko: "Event Tracker가 제시하는 새로운 이벤트 트래킹 패러다임",
-    en: "New Paradigm of Event Tracking Offered by Event Tracker",
-  },
-  featureCards: [
-    {
-      ko: {
-        title: "선언적 API",
-        description: "트래킹을 위한 별도의 설정이나 복잡한 코드 없이, 컴포넌트 형태로 직관적으로 선언할 수 있습니다.",
-      },
-      en: {
-        title: "Declarative API",
-        description: "Track events intuitively through component-based declarations, without boilerplate.",
-      },
-    },
-    {
-      ko: {
-        title: "강력한 데이터 타입 검증",
-        description:
-          "Zod 기반의 정적 스키마 검증으로 런타임 이전에 오류를 방지하고, 수집되는 이벤트 데이터의 신뢰도를 보장합니다.",
-      },
-      en: {
-        title: "Powerful Data Type Validation",
-        description:
-          "Schema-based validation with Zod catches issues before runtime and guarantees the integrity of your event data.",
-      },
-    },
-    {
-      ko: {
-        title: "최적화된 성능",
-        description:
-          "배칭, 디바운스, 스로틀링 등 네트워크 요청을 최소화하는 다양한 전략이 내장되어 있어, 성능 저하 없이 안정적으로 트래킹할 수 있습니다.",
-      },
-      en: {
-        title: "Optimized Performance",
-        description:
-          "Built-in strategies like batching, debouncing, and throttling minimize network overhead, enabling efficient and reliable tracking.",
-      },
-    },
-    {
-      ko: {
-        title: "실행 순서 보장",
-        description:
-          "비동기 상황에서도 이벤트가 의도한 순서대로 처리되도록 설계되어, 복잡한 사용자 흐름에서도 정확한 트래킹이 가능합니다.",
-      },
-      en: {
-        title: "Guaranteed Execution Order",
-        description:
-          "Ensures that events are processed in the intended order, even under asynchronous conditions—crucial for accurate tracking in complex flows.",
-      },
-    },
-    {
-      ko: {
-        title: "애널리틱스 도구 독립성",
-        description:
-          "Google Analytics, Amplitude, Segment 등 어떤 도구든 자유롭게 연동할 수 있어, 기존 인프라를 변경하지 않고도 도입이 가능합니다.",
-      },
-      en: {
-        title: "Analytics Tool Independence",
-        description:
-          "Easily integrates with tools like Google Analytics, Amplitude, or Segment—without forcing you to switch or couple to a specific vendor.",
-      },
-    },
-    {
-      ko: {
-        title: "명확한 관심사 분리",
-        description:
-          "트래킹 로직을 비즈니스 코드에서 완전히 분리함으로써 코드의 가독성, 테스트 용이성, 유지보수성을 모두 향상시킵니다.",
-      },
-      en: {
-        title: "Clear Separation of Concerns",
-        description:
-          "Keeps tracking logic out of your business logic, resulting in cleaner code that’s easier to test, maintain, and evolve.",
-      },
-    },
-  ],
-} as const;
-
-export default async function Page(props: { params: Promise<{ mdxPath: string[]; lang: Lang }> }) {
-  const { mdxPath, lang } = await props.params;
-  await importPage(mdxPath, lang);
-
-  return (
-    <main className="mx-auto flex max-w-screen-xl flex-col gap-48 break-keep px-6 py-32">
-      <TrackPageView params={{ title: "Home" }} />
-      <div className="flex flex-col justify-between gap-10 xl:flex-row">
-        <div className="flex flex-col gap-6">
-          <Logo size={200} />
-          <div className="space-y-2">
-            <h1 className="text-6xl font-bold">Event Tracker</h1>
-            <p className="max-w-2xl text-xl text-gray-600 dark:text-gray-300">{TEXT_MAP.description[lang]}</p>
-          </div>
-          <div className="flex flex-col gap-4 sm:flex-row">
-            <TrackClick params={{ target: "Get Started button" }}>
-              <Link
-                href="/docs"
-                className="flex items-center justify-center rounded-lg bg-blue-500 px-5 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-600"
-              >
-                {TEXT_MAP.get_started[lang]}
-              </Link>
-            </TrackClick>
-            <InstallCopyButton />
-          </div>
-        </div>
-        <div className="min-h-[572.75px]">
-          <DemoCode />
-        </div>
-      </div>
-      <div className="flex flex-col items-center justify-center gap-16">
-        <p className="text-center text-3xl font-bold">{TEXT_MAP.featureCardsTitle[lang]}</p>
-        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
-          <FeatureCard
-            title={TEXT_MAP.featureCards[0][lang].title}
-            description={TEXT_MAP.featureCards[0][lang].description}
-          />
-          <FeatureCard
-            title={TEXT_MAP.featureCards[2][lang].title}
-            description={TEXT_MAP.featureCards[2][lang].description}
-          />
-          <FeatureCard
-            title={TEXT_MAP.featureCards[4][lang].title}
-            description={TEXT_MAP.featureCards[4][lang].description}
-          />
-          <FeatureCard
-            title={TEXT_MAP.featureCards[3][lang].title}
-            description={TEXT_MAP.featureCards[3][lang].description}
-          />
-          <FeatureCard
-            title={TEXT_MAP.featureCards[5][lang].title}
-            description={TEXT_MAP.featureCards[5][lang].description}
-          />
-          <FeatureCard
-            title={TEXT_MAP.featureCards[1][lang].title}
-            description={TEXT_MAP.featureCards[1][lang].description}
-          />
-        </div>
-      </div>
-      <div className="flex flex-col items-center gap-10">
-        <h2 className="text-center text-4xl font-bold">Driven by the Community</h2>
-        <a
-          href="https://github.com/offlegacy/event-tracker/contributors"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="relative h-24 w-80 sm:h-32 sm:w-96"
-        >
-          <Image
-            src="https://contrib.rocks/image?repo=offlegacy/event-tracker"
-            alt="Contributors"
-            fill
-            className="object-contain"
-            unoptimized
-          />
-        </a>
-      </div>
-    </main>
-  );
-}
-
-function FeatureCard({ title, description }: { title: string; description: string }) {
-  return (
-    <div className="break-keep rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
-      <h3 className="mb-2 text-lg font-bold">{title}</h3>
-      <p className="text-gray-600 dark:text-gray-300">{description}</p>
-    </div>
-  );
-}
diff --git a/docs/src/components/home-page.tsx b/docs/src/components/home-page.tsx
new file mode 100644
index 0000000..3f6bbad
--- /dev/null
+++ b/docs/src/components/home-page.tsx
@@ -0,0 +1,85 @@
+import Link from "next/link";
+
+import { Logo } from "@/logo";
+import { TrackClick, TrackPageView } from "@/tracker";
+import { DemoCode } from "@/components/demo-playground";
+import Image from "next/image";
+import { InstallCopyButton } from "@/components/install-copy-button";
+
+type FeatureCardText = {
+  title: string;
+  description: string;
+};
+
+type Props = {
+  description: string;
+  get_started: string;
+  featureCardsTitle: string;
+  featureCards: FeatureCardText[];
+};
+
+export default async function HomePage(props: Props) {
+  const { description, get_started, featureCardsTitle, featureCards } = props;
+  return (
+    <main className="mx-auto flex max-w-screen-xl flex-col gap-48 break-keep px-6 py-32">
+      <TrackPageView params={{ title: "Home" }} />
+      <div className="flex flex-col justify-between gap-10 xl:flex-row">
+        <div className="flex flex-col gap-6">
+          <Logo size={200} />
+          <div className="space-y-2">
+            <h1 className="text-6xl font-bold">Event Tracker</h1>
+            <p className="max-w-2xl text-xl text-gray-600 dark:text-gray-300">{description}</p>
+          </div>
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <TrackClick params={{ target: "Get Started button" }}>
+              <Link
+                href="/docs/introduction"
+                className="flex items-center justify-center rounded-lg bg-blue-500 px-5 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-600"
+              >
+                {get_started}
+              </Link>
+            </TrackClick>
+            <InstallCopyButton />
+          </div>
+        </div>
+        <div className="min-h-[572.75px]">
+          <DemoCode />
+        </div>
+      </div>
+      <div className="flex flex-col items-center justify-center gap-16">
+        <p className="text-center text-3xl font-bold">{featureCardsTitle}</p>
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+          {featureCards.map((card) => (
+            <FeatureCard key={card.title} title={card.title} description={card.description} />
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-10">
+        <h2 className="text-center text-4xl font-bold">Driven by the Community</h2>
+        <a
+          href="https://github.com/offlegacy/event-tracker/contributors"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="relative h-24 w-80 sm:h-32 sm:w-96"
+        >
+          <Image
+            src="https://contrib.rocks/image?repo=offlegacy/event-tracker"
+            alt="Contributors"
+            fill
+            className="object-contain"
+            unoptimized
+          />
+        </a>
+      </div>
+    </main>
+  );
+}
+
+function FeatureCard({ title, description }: { title: string; description: string }) {
+  return (
+    <div className="break-keep rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
+      <h3 className="mb-2 text-lg font-bold">{title}</h3>
+      <p className="text-gray-600 dark:text-gray-300">{description}</p>
+    </div>
+  );
+}
diff --git a/docs/src/content/en/_meta.tsx b/docs/src/content/en/_meta.tsx
new file mode 100644
index 0000000..43b6655
--- /dev/null
+++ b/docs/src/content/en/_meta.tsx
@@ -0,0 +1,16 @@
+import type { MetaRecord } from "nextra";
+
+export default {
+  index: {
+    type: "page",
+    display: "hidden",
+    theme: {
+      layout: "full",
+      toc: false,
+    },
+  },
+  docs: {
+    type: "page",
+    title: "Docs",
+  },
+} satisfies MetaRecord;
diff --git a/docs/src/content/en/_meta.ts b/docs/src/content/en/docs/_meta.ts
similarity index 89%
rename from docs/src/content/en/_meta.ts
rename to docs/src/content/en/docs/_meta.ts
index 1c36a1e..52a1f1e 100644
--- a/docs/src/content/en/_meta.ts
+++ b/docs/src/content/en/docs/_meta.ts
@@ -1,11 +1,11 @@
-import { MetaRecord } from "nextra";
+import type { MetaRecord } from "nextra";
 
 export default {
   "getting-started-separator": {
     type: "separator",
     title: "Getting Started",
   },
-  index: {
+  introduction: {
     title: "Introduction",
     theme: {
       toc: true,
@@ -37,13 +37,7 @@ export default {
       layout: "default",
     },
   },
-  components: {
-    title: "Components",
-    theme: {
-      toc: true,
-      layout: "default",
-    },
-  },
+  components: { title: "Components" },
   "use-tracker": {
     title: "useTracker",
     theme: {
diff --git a/docs/src/content/en/basic-example.mdx b/docs/src/content/en/docs/basic-example.mdx
similarity index 100%
rename from docs/src/content/en/basic-example.mdx
rename to docs/src/content/en/docs/basic-example.mdx
diff --git a/docs/src/content/en/batching.mdx b/docs/src/content/en/docs/batching.mdx
similarity index 100%
rename from docs/src/content/en/batching.mdx
rename to docs/src/content/en/docs/batching.mdx
diff --git a/docs/src/content/en/components/_meta.ts b/docs/src/content/en/docs/components/_meta.ts
similarity index 100%
rename from docs/src/content/en/components/_meta.ts
rename to docs/src/content/en/docs/components/_meta.ts
diff --git a/docs/src/content/en/components/click.mdx b/docs/src/content/en/docs/components/click.mdx
similarity index 100%
rename from docs/src/content/en/components/click.mdx
rename to docs/src/content/en/docs/components/click.mdx
diff --git a/docs/src/content/en/components/dom-event.mdx b/docs/src/content/en/docs/components/dom-event.mdx
similarity index 100%
rename from docs/src/content/en/components/dom-event.mdx
rename to docs/src/content/en/docs/components/dom-event.mdx
diff --git a/docs/src/content/en/components/impression.mdx b/docs/src/content/en/docs/components/impression.mdx
similarity index 100%
rename from docs/src/content/en/components/impression.mdx
rename to docs/src/content/en/docs/components/impression.mdx
diff --git a/docs/src/content/en/components/index.mdx b/docs/src/content/en/docs/components/index.mdx
similarity index 100%
rename from docs/src/content/en/components/index.mdx
rename to docs/src/content/en/docs/components/index.mdx
diff --git a/docs/src/content/en/components/page-view.mdx b/docs/src/content/en/docs/components/page-view.mdx
similarity index 100%
rename from docs/src/content/en/components/page-view.mdx
rename to docs/src/content/en/docs/components/page-view.mdx
diff --git a/docs/src/content/en/components/set-context.mdx b/docs/src/content/en/docs/components/set-context.mdx
similarity index 100%
rename from docs/src/content/en/components/set-context.mdx
rename to docs/src/content/en/docs/components/set-context.mdx
diff --git a/docs/src/content/en/create-tracker.mdx b/docs/src/content/en/docs/create-tracker.mdx
similarity index 100%
rename from docs/src/content/en/create-tracker.mdx
rename to docs/src/content/en/docs/create-tracker.mdx
diff --git a/docs/src/content/en/data-type-validation.mdx b/docs/src/content/en/docs/data-type-validation.mdx
similarity index 100%
rename from docs/src/content/en/data-type-validation.mdx
rename to docs/src/content/en/docs/data-type-validation.mdx
diff --git a/docs/src/content/en/installation.mdx b/docs/src/content/en/docs/installation.mdx
similarity index 100%
rename from docs/src/content/en/installation.mdx
rename to docs/src/content/en/docs/installation.mdx
diff --git a/docs/src/content/en/docs/introduction.mdx b/docs/src/content/en/docs/introduction.mdx
new file mode 100644
index 0000000..c2585a0
--- /dev/null
+++ b/docs/src/content/en/docs/introduction.mdx
@@ -0,0 +1,89 @@
+import { Steps } from "nextra/components";
+
+# Introduction
+
+Welcome to the Event Tracker documentation.
+
+## What is Event Tracker?
+
+Event Tracker is a declarative React library designed to simplify the implementation of complex event tracking, allowing developers to focus more on their business logic. It is designed to efficiently manage event tracking in applications of any scale.
+
+```tsx
+import { createTracker } from "@offlegacy/event-tracker";
+
+// Creating a tracker instance
+const [Track, useTracker] = createTracker({
+  DOMEvents: {
+    onClick: (params, context) => {
+      log("Click event:", params, context);
+    },
+  },
+});
+
+// Usage within an app
+function App() {
+  return (
+    <Track.Provider initialContext={{ userId: "userId-123" }}>
+      <Track.Click params={{ buttonId: "event-click" }}>
+        <button>Event Click!</button>
+      </Track.Click>
+    </Track.Provider>
+  );
+}
+```
+
+### Key Features
+
+Event Tracker provides various features prioritizing both developer experience and application performance.
+
+| Feature                          | Description                                                                                                                                                                               |
+| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Declarative API with Type Safety | Fully supports [TypeScript](https://www.typescriptlang.org/), reducing errors during development and increasing productivity through auto-completion.                                     |
+| Powerful Data Type Validation    | Ensures data reliability through schema-based validation using [Zod](https://zod.dev/).                                                                                                   |
+| Optimized Performance            | Minimizes network requests through batching, debouncing, or throttling, reducing the impact on application performance.                                                                   |
+| Guaranteed Execution Order       | Ensures asynchronous events are processed in the intended sequence.                                                                                                                       |
+| Analytics Tool Independence      | Flexible integration with any analytics tool (e.g., [Google Analytics](https://analytics.google.com/), [Amplitude](https://amplitude.com/)), without being tied to any specific provider. |
+| Clear Separation of Concerns     | Effectively separates tracking logic from business logic, maximizing code maintainability and scalability.                                                                                |
+
+## Core Concepts
+
+There are several key concepts you need to understand to use Event Tracker effectively.
+
+<Steps>
+
+### Instance (`createTracker`)
+
+The foundational starting point of the library. Use the `createTracker` function to generate a tracker instance (a collection of `Track` components and the `useTracker` hook). Define event tracking by configuring DOM event handlers, impression event handlers, schemas, and more.
+
+Multiple tracker instances can be created according to specific purposes (e.g., separate instances for sending events to Google Analytics and Amplitude).
+
+### Provider (`Track.Provider`)
+
+Implemented using React's Context API. Wrap your application or component tree at the top with `Track.Provider` to provide common tracking data (context) to child components. For example, providing information such as `userId` and `pageName` through context allows utilizing this information during each event tracking.
+
+### Event Components (`Track.Click`, `Track.PageView`, etc.)
+
+Special components provided to track events declaratively. These are available from the first element of the array returned by `createTracker`.
+
+- `Track.Click`: Tracks click events occurring on child elements.
+- `Track.Impression`: Tracks when child elements become visible on the screen.
+- `Track.PageView`: Tracks page view events upon component mount.
+
+In addition, you can customize or utilize various provided components that respond to different user interactions and lifecycle events. Each component can receive and utilize specific event-related data through the `context` and `params` props.
+
+### Custom Hook (`useTracker`)
+
+Used for more complex or conditional event tracking unrelated directly to component lifecycles or DOM events. The `useTracker` hook lets you access context information from `Track.Provider` and execute defined tracking logic imperatively.
+
+</Steps>
+
+## Next Steps
+
+These core concepts work synergistically to provide Event Tracker's powerful and flexible event-tracking environment. For detailed usage and in-depth information about each feature, refer to the documents below:
+
+- [Why Event Tracker?](/docs/why-event-tracker): Introduction to the necessity and core features of Event Tracker.
+- [`createTracker`](/docs/create-tracker): Guide to creating tracker instances and detailed configurations.
+- [Components](/docs/components): Examples and details of all available tracking components.
+- [`useTracker`](/docs/hook): Custom tracking techniques using the custom hook.
+- [Batching](/docs/batching): Strategies for optimizing performance through event batching.
+- [Data Type Validation](/docs/data-type-validation): Guide to data validation using Zod schemas.
diff --git a/docs/src/content/en/use-tracker.mdx b/docs/src/content/en/docs/use-tracker.mdx
similarity index 100%
rename from docs/src/content/en/use-tracker.mdx
rename to docs/src/content/en/docs/use-tracker.mdx
diff --git a/docs/src/content/en/why-event-tracker.mdx b/docs/src/content/en/docs/why-event-tracker.mdx
similarity index 100%
rename from docs/src/content/en/why-event-tracker.mdx
rename to docs/src/content/en/docs/why-event-tracker.mdx
diff --git a/docs/src/content/en/index.mdx b/docs/src/content/en/index.mdx
index c2585a0..4c05ecc 100644
--- a/docs/src/content/en/index.mdx
+++ b/docs/src/content/en/index.mdx
@@ -1,89 +1,42 @@
-import { Steps } from "nextra/components";
-
-# Introduction
-
-Welcome to the Event Tracker documentation.
-
-## What is Event Tracker?
-
-Event Tracker is a declarative React library designed to simplify the implementation of complex event tracking, allowing developers to focus more on their business logic. It is designed to efficiently manage event tracking in applications of any scale.
-
-```tsx
-import { createTracker } from "@offlegacy/event-tracker";
-
-// Creating a tracker instance
-const [Track, useTracker] = createTracker({
-  DOMEvents: {
-    onClick: (params, context) => {
-      log("Click event:", params, context);
+---
+title: Event Tracker | Comprehensive solution for event tracking in React applications
+---
+
+import HomePage from "@/components/home-page";
+
+<HomePage
+  description="Comprehensive solution for event tracking in React applications"
+  get_started="Get Started"
+  featureCardsTitle="New Paradigm of Event Tracking Offered by Event Tracker"
+  featureCards={[
+    {
+      title: "Declarative API",
+      description: "Track events intuitively through component-based declarations, without boilerplate.",
     },
-  },
-});
-
-// Usage within an app
-function App() {
-  return (
-    <Track.Provider initialContext={{ userId: "userId-123" }}>
-      <Track.Click params={{ buttonId: "event-click" }}>
-        <button>Event Click!</button>
-      </Track.Click>
-    </Track.Provider>
-  );
-}
-```
-
-### Key Features
-
-Event Tracker provides various features prioritizing both developer experience and application performance.
-
-| Feature                          | Description                                                                                                                                                                               |
-| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Declarative API with Type Safety | Fully supports [TypeScript](https://www.typescriptlang.org/), reducing errors during development and increasing productivity through auto-completion.                                     |
-| Powerful Data Type Validation    | Ensures data reliability through schema-based validation using [Zod](https://zod.dev/).                                                                                                   |
-| Optimized Performance            | Minimizes network requests through batching, debouncing, or throttling, reducing the impact on application performance.                                                                   |
-| Guaranteed Execution Order       | Ensures asynchronous events are processed in the intended sequence.                                                                                                                       |
-| Analytics Tool Independence      | Flexible integration with any analytics tool (e.g., [Google Analytics](https://analytics.google.com/), [Amplitude](https://amplitude.com/)), without being tied to any specific provider. |
-| Clear Separation of Concerns     | Effectively separates tracking logic from business logic, maximizing code maintainability and scalability.                                                                                |
-
-## Core Concepts
-
-There are several key concepts you need to understand to use Event Tracker effectively.
-
-<Steps>
-
-### Instance (`createTracker`)
-
-The foundational starting point of the library. Use the `createTracker` function to generate a tracker instance (a collection of `Track` components and the `useTracker` hook). Define event tracking by configuring DOM event handlers, impression event handlers, schemas, and more.
-
-Multiple tracker instances can be created according to specific purposes (e.g., separate instances for sending events to Google Analytics and Amplitude).
-
-### Provider (`Track.Provider`)
-
-Implemented using React's Context API. Wrap your application or component tree at the top with `Track.Provider` to provide common tracking data (context) to child components. For example, providing information such as `userId` and `pageName` through context allows utilizing this information during each event tracking.
-
-### Event Components (`Track.Click`, `Track.PageView`, etc.)
-
-Special components provided to track events declaratively. These are available from the first element of the array returned by `createTracker`.
-
-- `Track.Click`: Tracks click events occurring on child elements.
-- `Track.Impression`: Tracks when child elements become visible on the screen.
-- `Track.PageView`: Tracks page view events upon component mount.
-
-In addition, you can customize or utilize various provided components that respond to different user interactions and lifecycle events. Each component can receive and utilize specific event-related data through the `context` and `params` props.
-
-### Custom Hook (`useTracker`)
-
-Used for more complex or conditional event tracking unrelated directly to component lifecycles or DOM events. The `useTracker` hook lets you access context information from `Track.Provider` and execute defined tracking logic imperatively.
-
-</Steps>
-
-## Next Steps
-
-These core concepts work synergistically to provide Event Tracker's powerful and flexible event-tracking environment. For detailed usage and in-depth information about each feature, refer to the documents below:
-
-- [Why Event Tracker?](/docs/why-event-tracker): Introduction to the necessity and core features of Event Tracker.
-- [`createTracker`](/docs/create-tracker): Guide to creating tracker instances and detailed configurations.
-- [Components](/docs/components): Examples and details of all available tracking components.
-- [`useTracker`](/docs/hook): Custom tracking techniques using the custom hook.
-- [Batching](/docs/batching): Strategies for optimizing performance through event batching.
-- [Data Type Validation](/docs/data-type-validation): Guide to data validation using Zod schemas.
+    {
+      title: "Analytics Tool Independence",
+      description:
+        "Easily integrates with tools like Google Analytics, Amplitude, or Segment—without forcing you to switch or couple to a specific vendor.",
+    },
+    {
+      title: "Clear Separation of Concerns",
+      description:
+        "Keeps tracking logic out of your business logic, resulting in cleaner code that’s easier to test, maintain, and evolve.",
+    },
+    {
+      title: "Optimized Performance",
+      description:
+        "Built-in strategies like batching, debouncing, and throttling minimize network overhead, enabling efficient and reliable tracking.",
+    },
+    {
+      title: "Guaranteed Execution Order",
+      description:
+        "Ensures that events are processed in the intended order, even under asynchronous conditions—crucial for accurate tracking in complex flows.",
+    },
+    {
+      title: "Powerful Data Type Validation",
+      description:
+        "Schema-based validation with Zod catches issues before runtime and guarantees the integrity of your event data.",
+    },
+  ]}
+/>
diff --git a/docs/src/content/ko/_meta.tsx b/docs/src/content/ko/_meta.tsx
new file mode 100644
index 0000000..6fef8c5
--- /dev/null
+++ b/docs/src/content/ko/_meta.tsx
@@ -0,0 +1,16 @@
+import type { MetaRecord } from "nextra";
+
+export default {
+  index: {
+    type: "page",
+    display: "hidden",
+    theme: {
+      layout: "full",
+      toc: false,
+    },
+  },
+  docs: {
+    type: "page",
+    title: "문서보기",
+  },
+} satisfies MetaRecord;
diff --git a/docs/src/content/ko/_meta.ts b/docs/src/content/ko/docs/_meta.ts
similarity index 90%
rename from docs/src/content/ko/_meta.ts
rename to docs/src/content/ko/docs/_meta.ts
index 7705f64..bb10b12 100644
--- a/docs/src/content/ko/_meta.ts
+++ b/docs/src/content/ko/docs/_meta.ts
@@ -5,7 +5,7 @@ export default {
     type: "separator",
     title: "시작하기",
   },
-  index: {
+  introduction: {
     title: "소개",
     theme: {
       toc: true,
@@ -37,14 +37,7 @@ export default {
       layout: "default",
     },
   },
-  components: {
-    title: "Components",
-    theme: {
-      toc: true,
-      layout: "default",
-      collapsed: true,
-    },
-  },
+  components: { title: "Components" },
   "use-tracker": {
     title: "useTracker",
     theme: {
diff --git a/docs/src/content/ko/basic-example.mdx b/docs/src/content/ko/docs/basic-example.mdx
similarity index 100%
rename from docs/src/content/ko/basic-example.mdx
rename to docs/src/content/ko/docs/basic-example.mdx
diff --git a/docs/src/content/ko/batching.mdx b/docs/src/content/ko/docs/batching.mdx
similarity index 100%
rename from docs/src/content/ko/batching.mdx
rename to docs/src/content/ko/docs/batching.mdx
diff --git a/docs/src/content/ko/components/_meta.ts b/docs/src/content/ko/docs/components/_meta.ts
similarity index 100%
rename from docs/src/content/ko/components/_meta.ts
rename to docs/src/content/ko/docs/components/_meta.ts
diff --git a/docs/src/content/ko/components/click.mdx b/docs/src/content/ko/docs/components/click.mdx
similarity index 100%
rename from docs/src/content/ko/components/click.mdx
rename to docs/src/content/ko/docs/components/click.mdx
diff --git a/docs/src/content/ko/components/dom-event.mdx b/docs/src/content/ko/docs/components/dom-event.mdx
similarity index 92%
rename from docs/src/content/ko/components/dom-event.mdx
rename to docs/src/content/ko/docs/components/dom-event.mdx
index 1623333..60c5994 100644
--- a/docs/src/content/ko/components/dom-event.mdx
+++ b/docs/src/content/ko/docs/components/dom-event.mdx
@@ -30,12 +30,12 @@ function App() {
 
 ### Props
 
-| Props         | 타입             | 설명                                                  | 필수 |
-| ------------- | ---------------- | ----------------------------------------------------- | ---- |
-| DOMEventNames | DOMEventNames    | 이벤트 이름 (예: `"onClick"`, `"onFocus"`)            | O    |
-| `enabled`     | `boolean         | ((context: Context, params: EventParams) => boolean)` | -    |
-| `debounce`    | `DebounceConfig` | 연속적인 이벤트 발생을 방지하는 디바운스 설정         | -    |
-| `throttle`    | `ThrottleConfig` | 이벤트 발생 빈도를 제한하는 스로틀 설정               | -    |
+| Props         | 타입             | 설명                                                   | 필수 |
+| ------------- | ---------------- | ------------------------------------------------------ | ---- |
+| DOMEventNames | DOMEventNames    | 이벤트 이름 (예: `"onClick"`, `"onFocus"`)             | O    |
+| `enabled`     | `boolean`        | `((context: Context, params: EventParams) => boolean)` | -    |
+| `debounce`    | `DebounceConfig` | 연속적인 이벤트 발생을 방지하는 디바운스 설정          | -    |
+| `throttle`    | `ThrottleConfig` | 이벤트 발생 빈도를 제한하는 스로틀 설정                | -    |
 
 <Callout type="info">참고: `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다.</Callout>
 
diff --git a/docs/src/content/ko/components/impression.mdx b/docs/src/content/ko/docs/components/impression.mdx
similarity index 100%
rename from docs/src/content/ko/components/impression.mdx
rename to docs/src/content/ko/docs/components/impression.mdx
diff --git a/docs/src/content/ko/components/index.mdx b/docs/src/content/ko/docs/components/index.mdx
similarity index 100%
rename from docs/src/content/ko/components/index.mdx
rename to docs/src/content/ko/docs/components/index.mdx
diff --git a/docs/src/content/ko/components/page-view.mdx b/docs/src/content/ko/docs/components/page-view.mdx
similarity index 100%
rename from docs/src/content/ko/components/page-view.mdx
rename to docs/src/content/ko/docs/components/page-view.mdx
diff --git a/docs/src/content/ko/components/set-context.mdx b/docs/src/content/ko/docs/components/set-context.mdx
similarity index 100%
rename from docs/src/content/ko/components/set-context.mdx
rename to docs/src/content/ko/docs/components/set-context.mdx
diff --git a/docs/src/content/ko/create-tracker.mdx b/docs/src/content/ko/docs/create-tracker.mdx
similarity index 100%
rename from docs/src/content/ko/create-tracker.mdx
rename to docs/src/content/ko/docs/create-tracker.mdx
diff --git a/docs/src/content/ko/data-type-validation.mdx b/docs/src/content/ko/docs/data-type-validation.mdx
similarity index 100%
rename from docs/src/content/ko/data-type-validation.mdx
rename to docs/src/content/ko/docs/data-type-validation.mdx
diff --git a/docs/src/content/ko/installation.mdx b/docs/src/content/ko/docs/installation.mdx
similarity index 100%
rename from docs/src/content/ko/installation.mdx
rename to docs/src/content/ko/docs/installation.mdx
diff --git a/docs/src/content/ko/docs/introduction.mdx b/docs/src/content/ko/docs/introduction.mdx
new file mode 100644
index 0000000..03c0269
--- /dev/null
+++ b/docs/src/content/ko/docs/introduction.mdx
@@ -0,0 +1,89 @@
+import { Steps } from "nextra/components";
+
+# 소개
+
+Event Tracker 문서에 오신 것을 환영합니다.
+
+## Event Tracker가 무엇인가요?
+
+Event Tracker는 복잡한 이벤트 트래킹 구현 과정을 단순화하고, 개발자가 비즈니스 로직에 더 집중할 수 있도록 돕는 선언적 방식의 React 라이브러리입니다. 모든 규모의 애플리케이션에서 이벤트 트래킹을 쉽고 효율적으로 관리할 수 있도록 설계되었습니다.
+
+```tsx
+import { createTracker } from "@offlegacy/event-tracker";
+
+// 트래커 인스턴스 생성
+const [Track, useTracker] = createTracker({
+  DOMEvents: {
+    onClick: (params, context) => {
+      log("Click event:", params, context);
+    },
+  },
+});
+
+// 앱에서 사용하기
+function App() {
+  return (
+    <Track.Provider initialContext={{ userId: "userId-123" }}>
+      <Track.Click params={{ buttonId: "event-click" }}>
+        <button>Event Click!</button>
+      </Track.Click>
+    </Track.Provider>
+  );
+}
+```
+
+### 주요 기능
+
+Event Tracker는 개발자 경험과 애플리케이션 성능을 모두 고려한 다양한 기능을 제공합니다.
+
+| Feature                       | Description                                                                                                                                                                        |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 타입 안정성을 갖춘 선언적 API | [TypeScript](https://www.typescriptlang.org/)를 완벽하게 지원하여 개발 과정에서의 오류를 줄이고, 자동 완성을 통해 생산성을 높입니다.                                               |
+| 강력한 데이터 타입 검증       | [Zod](https://zod.dev/)를 활용한 스키마 기반 검증으로 데이터의 신뢰성을 확보합니다.                                                                                                |
+| 최적화된 성능                 | 배칭이나 디바운스, 스로틀링 기능을 통해 네트워크 요청을 최소화하고 애플리케이션 성능에 미치는 영향을 줄입니다.                                                                     |
+| 실행 순서 보장                | 비동기적으로 발생하는 이벤트들에 대해서도 의도한 순서대로 처리되도록 보장합니다.                                                                                                   |
+| 애널리틱스 도구 독립성        | 특정 애널리틱스 서비스에 종속되지 않고, 원하는 모든 도구([Google Analytics](https://analytics.google.com/), [Amplitude](https://amplitude.com/) 등)와 유연하게 통합할 수 있습니다. |
+| 명확한 관심사 분리            | 트래킹 로직과 비즈니스 로직을 효과적으로 분리하여 코드의 유지보수성과 확장성을 극대화합니다.                                                                                       |
+
+## 핵심 개념
+
+Event Tracker를 효과적으로 사용하기 위해 알아야 할 몇 가지 핵심 개념이 있습니다.
+
+<Steps>
+
+### 인스턴스 (`createTracker`)
+
+라이브러리의 가장 기본적인 출발점입니다. `createTracker` 함수를 사용하여 트래커 인스턴스(`Track` 컴포넌트 컬렉션과 `useTracker` 훅)를 생성합니다. 이때, DOM 이벤트 핸들러, 노출(Impression) 이벤트 핸들러, 스키마 등을 설정하여 이벤트 트래킹을 정의합니다.
+
+목적에 따라 구분하여 여러 가지 트래커 인스턴스를 생성할 수 있습니다. (예를 들어, Google Analytics로 보내는 이벤트와 Amplitude로 보내는 이벤트를 구분하여 생성할 수 있습니다.)
+
+### 프로바이더 (`Track.Provider`)
+
+React의 Context API를 기반으로 구현되었습니다. 애플리케이션 또는 특정 컴포넌트 트리의 최상단에서 `Track.Provider`로 감싸 하위 컴포넌트들에 트래킹에 필요한 공통 데이터(컨텍스트)를 제공합니다. 예를 들어, `userId`, `pageName` 등의 정보를 컨텍스트로 전달하면, 각 이벤트 트래킹 시 이 정보를 활용할 수 있습니다.
+
+### 이벤트 컴포넌트 (`Track.Click`, `Track.PageView` 등)
+
+선언적으로 이벤트를 트래킹할 수 있도록 제공되는 특수 컴포넌트들입니다. `createTracker` 리턴 배열의 첫 번째 요소입니다.
+
+- `Track.Click`: 자식 요소에서 클릭 이벤트가 발생했을 때 트래킹합니다.
+- `Track.Impression`: 자식 요소가 화면에 노출되었을 때 트래킹합니다.
+- `Track.PageView`: 컴포넌트가 마운트될 때 페이지 뷰 이벤트를 트래킹합니다.
+
+이 외에도 다양한 사용자 인터랙션 및 생명주기 이벤트에 대응하는 컴포넌트를 제공하거나 커스텀하여 사용할 수 있습니다. 각 컴포넌트는 `context`, `params` prop을 통해 해당 이벤트와 관련된 특정 데이터를 전달받고 활용할 수 있습니다.
+
+### 커스텀 훅 (`useTracker`)
+
+컴포넌트의 생명주기나 DOM 이벤트와 직접적으로 관련되지 않은, 보다 복잡하거나 조건부적인 이벤트 트래킹이 필요할 때 사용합니다. `useTracker` 훅을 사용하면 `Track.Provider`로부터 컨텍스트 정보를 가져오고, 정의된 트래킹 로직을 명령형으로 실행할 수 있습니다.
+
+</Steps>
+
+## 다음 단계
+
+이러한 핵심 개념들은 서로 유기적으로 작동하여 Event Tracker의 강력하고 유연한 이벤트 트래킹 환경을 구성합니다. 더 자세한 사용법과 각 기능에 대한 심층적인 내용은 아래 문서들에서 확인하실 수 있습니다.
+
+- [왜 Event Tracker인가요?](/docs/why-event-tracker): Event Tracker의 필요성과 주요 기능 소개
+- [`createTracker`](/docs/create-tracker): 트래커 인스턴스 생성 및 상세 설정 가이드
+- [Components](/docs/components): 사용 가능한 모든 트래킹 컴포넌트와 사용 예시
+- [`useTracker`](/docs/hook): 커스텀 훅을 활용한 사용자 지정 트래킹 기법
+- [Batching](/docs/batching): 이벤트 배칭을 통한 성능 최적화 전략
+- [Data Type Validation](/docs/data-type-validation): Zod 스키마를 활용한 데이터 유효성 검증 가이드
diff --git a/docs/src/content/ko/use-tracker.mdx b/docs/src/content/ko/docs/use-tracker.mdx
similarity index 100%
rename from docs/src/content/ko/use-tracker.mdx
rename to docs/src/content/ko/docs/use-tracker.mdx
diff --git a/docs/src/content/ko/why-event-tracker.mdx b/docs/src/content/ko/docs/why-event-tracker.mdx
similarity index 100%
rename from docs/src/content/ko/why-event-tracker.mdx
rename to docs/src/content/ko/docs/why-event-tracker.mdx
diff --git a/docs/src/content/ko/index.mdx b/docs/src/content/ko/index.mdx
index 03c0269..2bfc973 100644
--- a/docs/src/content/ko/index.mdx
+++ b/docs/src/content/ko/index.mdx
@@ -1,89 +1,42 @@
-import { Steps } from "nextra/components";
-
-# 소개
-
-Event Tracker 문서에 오신 것을 환영합니다.
-
-## Event Tracker가 무엇인가요?
-
-Event Tracker는 복잡한 이벤트 트래킹 구현 과정을 단순화하고, 개발자가 비즈니스 로직에 더 집중할 수 있도록 돕는 선언적 방식의 React 라이브러리입니다. 모든 규모의 애플리케이션에서 이벤트 트래킹을 쉽고 효율적으로 관리할 수 있도록 설계되었습니다.
-
-```tsx
-import { createTracker } from "@offlegacy/event-tracker";
-
-// 트래커 인스턴스 생성
-const [Track, useTracker] = createTracker({
-  DOMEvents: {
-    onClick: (params, context) => {
-      log("Click event:", params, context);
+---
+title: Event Tracker | Comprehensive solution for event tracking in React applications
+---
+
+import HomePage from "@/components/home-page";
+
+<HomePage
+  description="React 애플리케이션을 위한 완전한 이벤트 트래킹 시스템"
+  get_started="시작하기"
+  featureCardsTitle="Event Tracker가 제시하는 새로운 이벤트 트래킹 패러다임"
+  featureCards={[
+    {
+      title: "선언적 API",
+      description: "트래킹을 위한 별도의 설정이나 복잡한 코드 없이, 컴포넌트 형태로 직관적으로 선언할 수 있습니다.",
     },
-  },
-});
-
-// 앱에서 사용하기
-function App() {
-  return (
-    <Track.Provider initialContext={{ userId: "userId-123" }}>
-      <Track.Click params={{ buttonId: "event-click" }}>
-        <button>Event Click!</button>
-      </Track.Click>
-    </Track.Provider>
-  );
-}
-```
-
-### 주요 기능
-
-Event Tracker는 개발자 경험과 애플리케이션 성능을 모두 고려한 다양한 기능을 제공합니다.
-
-| Feature                       | Description                                                                                                                                                                        |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 타입 안정성을 갖춘 선언적 API | [TypeScript](https://www.typescriptlang.org/)를 완벽하게 지원하여 개발 과정에서의 오류를 줄이고, 자동 완성을 통해 생산성을 높입니다.                                               |
-| 강력한 데이터 타입 검증       | [Zod](https://zod.dev/)를 활용한 스키마 기반 검증으로 데이터의 신뢰성을 확보합니다.                                                                                                |
-| 최적화된 성능                 | 배칭이나 디바운스, 스로틀링 기능을 통해 네트워크 요청을 최소화하고 애플리케이션 성능에 미치는 영향을 줄입니다.                                                                     |
-| 실행 순서 보장                | 비동기적으로 발생하는 이벤트들에 대해서도 의도한 순서대로 처리되도록 보장합니다.                                                                                                   |
-| 애널리틱스 도구 독립성        | 특정 애널리틱스 서비스에 종속되지 않고, 원하는 모든 도구([Google Analytics](https://analytics.google.com/), [Amplitude](https://amplitude.com/) 등)와 유연하게 통합할 수 있습니다. |
-| 명확한 관심사 분리            | 트래킹 로직과 비즈니스 로직을 효과적으로 분리하여 코드의 유지보수성과 확장성을 극대화합니다.                                                                                       |
-
-## 핵심 개념
-
-Event Tracker를 효과적으로 사용하기 위해 알아야 할 몇 가지 핵심 개념이 있습니다.
-
-<Steps>
-
-### 인스턴스 (`createTracker`)
-
-라이브러리의 가장 기본적인 출발점입니다. `createTracker` 함수를 사용하여 트래커 인스턴스(`Track` 컴포넌트 컬렉션과 `useTracker` 훅)를 생성합니다. 이때, DOM 이벤트 핸들러, 노출(Impression) 이벤트 핸들러, 스키마 등을 설정하여 이벤트 트래킹을 정의합니다.
-
-목적에 따라 구분하여 여러 가지 트래커 인스턴스를 생성할 수 있습니다. (예를 들어, Google Analytics로 보내는 이벤트와 Amplitude로 보내는 이벤트를 구분하여 생성할 수 있습니다.)
-
-### 프로바이더 (`Track.Provider`)
-
-React의 Context API를 기반으로 구현되었습니다. 애플리케이션 또는 특정 컴포넌트 트리의 최상단에서 `Track.Provider`로 감싸 하위 컴포넌트들에 트래킹에 필요한 공통 데이터(컨텍스트)를 제공합니다. 예를 들어, `userId`, `pageName` 등의 정보를 컨텍스트로 전달하면, 각 이벤트 트래킹 시 이 정보를 활용할 수 있습니다.
-
-### 이벤트 컴포넌트 (`Track.Click`, `Track.PageView` 등)
-
-선언적으로 이벤트를 트래킹할 수 있도록 제공되는 특수 컴포넌트들입니다. `createTracker` 리턴 배열의 첫 번째 요소입니다.
-
-- `Track.Click`: 자식 요소에서 클릭 이벤트가 발생했을 때 트래킹합니다.
-- `Track.Impression`: 자식 요소가 화면에 노출되었을 때 트래킹합니다.
-- `Track.PageView`: 컴포넌트가 마운트될 때 페이지 뷰 이벤트를 트래킹합니다.
-
-이 외에도 다양한 사용자 인터랙션 및 생명주기 이벤트에 대응하는 컴포넌트를 제공하거나 커스텀하여 사용할 수 있습니다. 각 컴포넌트는 `context`, `params` prop을 통해 해당 이벤트와 관련된 특정 데이터를 전달받고 활용할 수 있습니다.
-
-### 커스텀 훅 (`useTracker`)
-
-컴포넌트의 생명주기나 DOM 이벤트와 직접적으로 관련되지 않은, 보다 복잡하거나 조건부적인 이벤트 트래킹이 필요할 때 사용합니다. `useTracker` 훅을 사용하면 `Track.Provider`로부터 컨텍스트 정보를 가져오고, 정의된 트래킹 로직을 명령형으로 실행할 수 있습니다.
-
-</Steps>
-
-## 다음 단계
-
-이러한 핵심 개념들은 서로 유기적으로 작동하여 Event Tracker의 강력하고 유연한 이벤트 트래킹 환경을 구성합니다. 더 자세한 사용법과 각 기능에 대한 심층적인 내용은 아래 문서들에서 확인하실 수 있습니다.
-
-- [왜 Event Tracker인가요?](/docs/why-event-tracker): Event Tracker의 필요성과 주요 기능 소개
-- [`createTracker`](/docs/create-tracker): 트래커 인스턴스 생성 및 상세 설정 가이드
-- [Components](/docs/components): 사용 가능한 모든 트래킹 컴포넌트와 사용 예시
-- [`useTracker`](/docs/hook): 커스텀 훅을 활용한 사용자 지정 트래킹 기법
-- [Batching](/docs/batching): 이벤트 배칭을 통한 성능 최적화 전략
-- [Data Type Validation](/docs/data-type-validation): Zod 스키마를 활용한 데이터 유효성 검증 가이드
+    {
+      title: "애널리틱스 도구 독립성",
+      description:
+        "Google Analytics, Amplitude, Segment 등 어떤 도구든 자유롭게 연동할 수 있어, 기존 인프라를 변경하지 않고도 도입이 가능합니다.",
+    },
+    {
+      title: "명확한 관심사 분리",
+      description:
+        "트래킹 로직을 비즈니스 코드에서 완전히 분리함으로써 코드의 가독성, 테스트 용이성, 유지보수성을 모두 향상시킵니다.",
+    },
+    {
+      title: "최적화된 성능",
+      description:
+        "배칭, 디바운스, 스로틀링 등 네트워크 요청을 최소화하는 다양한 전략이 내장되어 있어, 성능 저하 없이 안정적으로 트래킹할 수 있습니다.",
+    },
+    {
+      title: "실행 순서 보장",
+      description:
+        "비동기 상황에서도 이벤트가 의도한 순서대로 처리되도록 설계되어, 복잡한 사용자 흐름에서도 정확한 트래킹이 가능합니다.",
+    },
+    {
+      title: "강력한 데이터 타입 검증",
+      description:
+        "Zod 기반의 정적 스키마 검증으로 런타임 이전에 오류를 방지하고, 수집되는 이벤트 데이터의 신뢰도를 보장합니다.",
+    },
+  ]}
+/>
diff --git a/docs/mdx-components.ts b/docs/src/mdx-components.ts
similarity index 80%
rename from docs/mdx-components.ts
rename to docs/src/mdx-components.ts
index 3e463a6..a304c9d 100644
--- a/docs/mdx-components.ts
+++ b/docs/src/mdx-components.ts
@@ -1,5 +1,5 @@
 import { useMDXComponents as getThemeComponents } from "nextra-theme-docs";
-import { MDXComponents } from "nextra/mdx-components";
+import type { MDXComponents } from "nextra/mdx-components";
 
 const themeComponents = getThemeComponents();
 
diff --git a/docs/src/middleware.ts b/docs/src/middleware.ts
index 9b06bd6..9cc1483 100644
--- a/docs/src/middleware.ts
+++ b/docs/src/middleware.ts
@@ -1,5 +1,15 @@
 export { middleware } from "nextra/locales";
 
 export const config = {
-  matcher: ["/((?!api|_next/static|_next/image|img|favicon.ico|icon.svg|apple-icon.png|manifest|_pagefind).*)"],
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * - img (image files)
+     */
+    "/((?!api|_next/static|_next/image|favicon.ico|img|_pagefind).*)",
+  ],
 };
diff --git a/package.json b/package.json
index 88b7774..4979ed4 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup",
+    "build:docs": "cd docs && pnpm build",
     "dev:docs": "cd docs && pnpm dev",
     "test": "vitest --run",
     "test:watch": "vitest",

From 60bb54c485644fa2ce1ff2ba04adf95a905be6dd Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Fri, 11 Jul 2025 20:27:45 +0900
Subject: [PATCH 14/24] docs: update ko

---
 docs/src/components/demo-button.tsx           |    2 +-
 docs/src/components/demo-playground.tsx       |    2 +-
 docs/src/content/en/index.mdx                 |    2 +-
 docs/src/content/ko/docs/_meta.ts             |   28 +
 docs/src/content/ko/docs/basic-example.mdx    |  759 +++++++++++-
 docs/src/content/ko/docs/batching.mdx         |   97 +-
 docs/src/content/ko/docs/components/click.mdx |  132 ++-
 .../content/ko/docs/components/dom-event.mdx  |  115 +-
 .../content/ko/docs/components/impression.mdx |  104 +-
 docs/src/content/ko/docs/components/index.mdx |   43 +-
 .../content/ko/docs/components/page-view.mdx  |   92 +-
 .../ko/docs/components/set-context.mdx        |   49 +-
 docs/src/content/ko/docs/create-tracker.mdx   |   11 +
 .../content/ko/docs/data-type-validation.mdx  |  123 +-
 docs/src/content/ko/docs/installation.mdx     |    2 +-
 docs/src/content/ko/docs/instance-example.mdx | 1031 +++++++++++++++++
 docs/src/content/ko/docs/introduction.mdx     |   16 +-
 docs/src/content/ko/docs/use-tracker.mdx      |  145 ++-
 .../src/content/ko/docs/why-event-tracker.mdx |    8 +-
 .../ko/docs/with-google-analytics-example.mdx |  624 ++++++++++
 .../ko/docs/with-selfhost-server-example.mdx  |  718 ++++++++++++
 docs/src/content/ko/docs/with-zod-example.mdx |  770 ++++++++++++
 docs/src/content/ko/index.mdx                 |    4 +-
 23 files changed, 4581 insertions(+), 296 deletions(-)
 create mode 100644 docs/src/content/ko/docs/instance-example.mdx
 create mode 100644 docs/src/content/ko/docs/with-google-analytics-example.mdx
 create mode 100644 docs/src/content/ko/docs/with-selfhost-server-example.mdx
 create mode 100644 docs/src/content/ko/docs/with-zod-example.mdx

diff --git a/docs/src/components/demo-button.tsx b/docs/src/components/demo-button.tsx
index fd69065..b2c4a70 100644
--- a/docs/src/components/demo-button.tsx
+++ b/docs/src/components/demo-button.tsx
@@ -15,7 +15,7 @@ const [Track] = createTracker({
 export function DemoButton({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <Toaster position="top-center" offset={60} />
+      <Toaster position="top-right" />
       <Track.Provider initialContext={{ userId: "demo-user" }}>
         <Track.Click params={{ buttonId: "click-me" }} throttle={{ delay: 1000 }}>
           <motion.button
diff --git a/docs/src/components/demo-playground.tsx b/docs/src/components/demo-playground.tsx
index 38acffb..49a224b 100644
--- a/docs/src/components/demo-playground.tsx
+++ b/docs/src/components/demo-playground.tsx
@@ -65,7 +65,7 @@ export function DemoCode() {
       <div className="relative overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
         <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800/50">
           <div className="flex items-center space-x-2">
-            <span className="ml-2 text-sm font-medium text-gray-600 dark:text-gray-400">basic-example.tsx</span>
+            <span className="ml-2 text-sm font-medium text-gray-600 dark:text-gray-400">example-basic.tsx</span>
           </div>
         </div>
         <div className="relative overflow-x-auto p-6">
diff --git a/docs/src/content/en/index.mdx b/docs/src/content/en/index.mdx
index 4c05ecc..cdc1b7c 100644
--- a/docs/src/content/en/index.mdx
+++ b/docs/src/content/en/index.mdx
@@ -7,7 +7,7 @@ import HomePage from "@/components/home-page";
 <HomePage
   description="Comprehensive solution for event tracking in React applications"
   get_started="Get Started"
-  featureCardsTitle="New Paradigm of Event Tracking Offered by Event Tracker"
+  featureCardsTitle="Event tracking paradigm presented by Event Tracker"
   featureCards={[
     {
       title: "Declarative API",
diff --git a/docs/src/content/ko/docs/_meta.ts b/docs/src/content/ko/docs/_meta.ts
index bb10b12..573061c 100644
--- a/docs/src/content/ko/docs/_meta.ts
+++ b/docs/src/content/ko/docs/_meta.ts
@@ -74,4 +74,32 @@ export default {
       layout: "default",
     },
   },
+  "instance-example": {
+    title: "트래킹 인스턴스 만들기",
+    theme: {
+      toc: true,
+      layout: "default",
+    },
+  },
+  "with-google-analytics-example": {
+    title: "Google Analytics 연동하기",
+    theme: {
+      toc: true,
+      layout: "default",
+    },
+  },
+  "with-selfhost-server-example": {
+    title: "자체 서버 연동하기",
+    theme: {
+      toc: true,
+      layout: "default",
+    },
+  },
+  "with-zod-example": {
+    title: "Zod와 함께 사용하기",
+    theme: {
+      toc: true,
+      layout: "default",
+    },
+  },
 } satisfies MetaRecord;
diff --git a/docs/src/content/ko/docs/basic-example.mdx b/docs/src/content/ko/docs/basic-example.mdx
index cbb1b64..5f6635a 100644
--- a/docs/src/content/ko/docs/basic-example.mdx
+++ b/docs/src/content/ko/docs/basic-example.mdx
@@ -1,27 +1,774 @@
-# 가이드
+# 기본
 
-다음은 `event-tracker`를 사용하는 간단한 예제입니다:
+`event-tracker`의 기본적인 사용법과 핵심 개념을 알아보겠습니다. 이 가이드를 통해 선언적 이벤트 트래킹의 강력함을 경험해보세요.
+
+## 빠른 시작
+
+### 1. 기본 설정
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
 
 // 트래커 인스턴스 생성
 const [Track, useTracker] = createTracker({
+  // 초기화 함수
+  init: (initialContext, setContext) => {
+    // 세션 ID 생성
+    const sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    setContext({ ...initialContext, sessionId });
+  },
+
+  // 이벤트 전송 함수
+  send: (params, context) => {
+    console.log("이벤트 전송:", params, context);
+    // 실제 애널리틱스 서비스로 전송
+    analytics.track(params.eventName, {
+      ...params,
+      userId: context.userId,
+      sessionId: context.sessionId,
+      timestamp: Date.now(),
+    });
+  },
+
+  // DOM 이벤트 핸들러
   DOMEvents: {
     onClick: (params, context) => {
-      log("Click event:", params, context);
+      console.log("클릭 이벤트:", params, context);
+    },
+  },
+
+  // 노출 이벤트 설정
+  impression: {
+    onImpression: (params, context) => {
+      console.log("노출 이벤트:", params, context);
+    },
+    options: {
+      threshold: 0.5, // 50% 이상 보일 때 트리거
+      freezeOnceVisible: true, // 한 번 보이면 더 이상 트리거하지 않음
+    },
+  },
+
+  // 페이지 뷰 설정
+  pageView: {
+    onPageView: (params, context) => {
+      console.log("페이지 뷰:", params, context);
     },
   },
 });
 
-// 앱에서 사용하기
+export { Track, useTracker };
+```
+
+### 2. 기본 사용법
+
+```tsx
+// App.tsx
+import { Track, useTracker } from "./tracker";
+
 function App() {
   return (
     <Track.Provider initialContext={{ userId: "user-123" }}>
-      <Track.Click params={{ buttonId: "submit" }}>
-        <button>Submit</button>
+      <HomePage />
+    </Track.Provider>
+  );
+}
+
+function HomePage() {
+  const { track } = useTracker();
+
+  const handleCustomEvent = async () => {
+    await track({
+      eventName: "custom_action",
+      category: "engagement",
+      action: "button_click",
+      label: "homepage_cta",
+      value: 1,
+    });
+  };
+
+  return (
+    <div>
+      <h1>홈페이지</h1>
+
+      {/* 페이지 뷰 자동 트래킹 */}
+      <Track.PageView
+        params={{
+          pagePath: "/",
+          pageTitle: "홈페이지",
+          category: "main",
+        }}
+      />
+
+      {/* 버튼 클릭 트래킹 */}
+      <Track.Click
+        params={{
+          buttonId: "cta-button",
+          buttonText: "시작하기",
+          category: "conversion",
+        }}
+      >
+        <button onClick={handleCustomEvent}>시작하기</button>
       </Track.Click>
+
+      {/* 배너 노출 트래킹 */}
+      <Track.Impression
+        params={{
+          elementId: "hero-banner",
+          elementType: "banner",
+          visibilityPercentage: 80,
+        }}
+      >
+        <div className="hero-banner">
+          <h2>환영합니다!</h2>
+          <p>새로운 경험을 시작해보세요.</p>
+        </div>
+      </Track.Impression>
+    </div>
+  );
+}
+```
+
+## 핵심 컴포넌트
+
+### 1. Track.Provider
+
+트래킹 컨텍스트를 제공하는 최상위 컴포넌트입니다.
+
+```tsx
+<Track.Provider
+  initialContext={{
+    userId: "user-123",
+    userType: "premium",
+    trackingConsent: true,
+    page: "homepage",
+  }}
+>
+  {/* 자식 컴포넌트들 */}
+</Track.Provider>
+```
+
+**주요 속성:**
+
+- `initialContext`: 초기 컨텍스트 객체
+- `enabled`: 트래킹 활성화 여부 (기본값: true)
+
+### 2. Track.Click
+
+클릭 이벤트를 자동으로 트래킹하는 컴포넌트입니다.
+
+```tsx
+<Track.Click
+  params={{
+    buttonId: "submit-button",
+    buttonText: "제출",
+    category: "form",
+    action: "submit",
+  }}
+  enabled={(context) => context.trackingConsent}
+  debounce={{ delay: 300 }}
+>
+  <button>제출</button>
+</Track.Click>
+```
+
+**주요 속성:**
+
+- `params`: 이벤트 파라미터 (객체 또는 함수)
+- `enabled`: 트래킹 활성화 조건
+- `debounce`: 디바운스 설정
+- `throttle`: 스로틀 설정
+
+### 3. Track.Impression
+
+요소가 화면에 노출될 때 트래킹하는 컴포넌트입니다.
+
+```tsx
+<Track.Impression
+  params={{
+    elementId: "product-card-1",
+    elementType: "product",
+    position: 1,
+    category: "product_list",
+  }}
+  options={{
+    threshold: 0.5,
+    freezeOnceVisible: true,
+    rootMargin: "0px 0px -100px 0px",
+  }}
+>
+  <div className="product-card">
+    <img src="/product1.jpg" alt="상품 1" />
+    <h3>상품명</h3>
+    <p>₩29,900</p>
+  </div>
+</Track.Impression>
+```
+
+**주요 속성:**
+
+- `params`: 이벤트 파라미터
+- `options`: Intersection Observer 옵션
+- `enabled`: 트래킹 활성화 조건
+
+### 4. Track.PageView
+
+페이지 뷰를 자동으로 트래킹하는 컴포넌트입니다.
+
+```tsx
+<Track.PageView
+  params={{
+    pagePath: "/products",
+    pageTitle: "상품 목록",
+    category: "product",
+    referrer: document.referrer,
+  }}
+/>
+```
+
+## 실제 사용 시나리오
+
+### 1. 전자상거래 사이트
+
+```tsx
+// components/ProductList.tsx
+import { Track, useTracker } from "../tracker";
+
+function ProductList({ products }) {
+  const { track } = useTracker();
+
+  const handleAddToCart = async (product) => {
+    try {
+      // 장바구니 추가 로직
+      await addToCart(product.id);
+
+      // 트래킹
+      await track({
+        eventName: "add_to_cart",
+        productId: product.id,
+        productName: product.name,
+        price: product.price,
+        currency: "KRW",
+        quantity: 1,
+        category: product.category,
+      });
+    } catch (error) {
+      console.error("장바구니 추가 실패:", error);
+    }
+  };
+
+  return (
+    <Track.Provider initialContext={{ userId: "user-123", page: "product-list" }}>
+      {/* 페이지 뷰 트래킹 */}
+      <Track.PageView
+        params={{
+          pagePath: "/products",
+          category: "product_list",
+          productCount: products.length,
+        }}
+      />
+
+      <div className="product-grid">
+        {products.map((product, index) => (
+          <Track.Impression
+            key={product.id}
+            params={{
+              productId: product.id,
+              position: index + 1,
+              elementType: "product",
+              category: product.category,
+            }}
+          >
+            <div className="product-card">
+              <img src={product.image} alt={product.name} />
+              <h3>{product.name}</h3>
+              <p>₩{product.price.toLocaleString()}</p>
+
+              {/* 장바구니 버튼 */}
+              <Track.Click
+                params={{
+                  productId: product.id,
+                  action: "add_to_cart",
+                  price: product.price,
+                  position: index + 1,
+                }}
+              >
+                <button onClick={() => handleAddToCart(product)}>장바구니 담기</button>
+              </Track.Click>
+
+              {/* 상세보기 버튼 */}
+              <Track.Click
+                params={{
+                  productId: product.id,
+                  action: "view_detail",
+                  position: index + 1,
+                }}
+              >
+                <button>상세보기</button>
+              </Track.Click>
+            </div>
+          </Track.Impression>
+        ))}
+      </div>
     </Track.Provider>
   );
 }
 ```
+
+### 2. 블로그/콘텐츠 사이트
+
+```tsx
+// components/BlogPost.tsx
+import { Track, useTracker } from "../tracker";
+
+function BlogPost({ post }) {
+  const { track } = useTracker();
+
+  const handleShare = async (platform) => {
+    await track({
+      eventName: "share_article",
+      articleId: post.id,
+      articleTitle: post.title,
+      platform: platform,
+      category: "social_sharing",
+    });
+  };
+
+  const handleComment = async () => {
+    await track({
+      eventName: "comment_article",
+      articleId: post.id,
+      category: "engagement",
+    });
+  };
+
+  return (
+    <Track.Provider initialContext={{ userId: "user-123", articleId: post.id }}>
+      {/* 페이지 뷰 트래킹 */}
+      <Track.PageView
+        params={{
+          pagePath: `/blog/${post.id}`,
+          pageTitle: post.title,
+          category: "blog",
+          author: post.author,
+          publishDate: post.publishDate,
+        }}
+      />
+
+      <article>
+        <h1>{post.title}</h1>
+        <p>작성자: {post.author}</p>
+
+        {/* 본문 노출 트래킹 */}
+        <Track.Impression
+          params={{
+            elementId: "article-content",
+            elementType: "content",
+            category: "blog_content",
+          }}
+        >
+          <div className="article-content">{post.content}</div>
+        </Track.Impression>
+
+        {/* 공유 버튼들 */}
+        <div className="share-buttons">
+          <Track.Click
+            params={{
+              action: "share",
+              platform: "facebook",
+              articleId: post.id,
+            }}
+          >
+            <button onClick={() => handleShare("facebook")}>Facebook 공유</button>
+          </Track.Click>
+
+          <Track.Click
+            params={{
+              action: "share",
+              platform: "twitter",
+              articleId: post.id,
+            }}
+          >
+            <button onClick={() => handleShare("twitter")}>Twitter 공유</button>
+          </Track.Click>
+        </div>
+
+        {/* 댓글 버튼 */}
+        <Track.Click
+          params={{
+            action: "comment",
+            articleId: post.id,
+          }}
+        >
+          <button onClick={handleComment}>댓글 작성</button>
+        </Track.Click>
+      </article>
+    </Track.Provider>
+  );
+}
+```
+
+### 3. 폼 및 사용자 입력
+
+```tsx
+// components/ContactForm.tsx
+import { Track, useTracker } from "../tracker";
+import { useState } from "react";
+
+function ContactForm() {
+  const { track } = useTracker();
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      // 폼 제출 로직
+      await submitForm(formData);
+
+      // 성공 트래킹
+      await track({
+        eventName: "form_submit",
+        formId: "contact-form",
+        formType: "contact",
+        fieldCount: Object.keys(formData).length,
+        category: "conversion",
+      });
+    } catch (error) {
+      // 실패 트래킹
+      await track({
+        eventName: "form_error",
+        formId: "contact-form",
+        errorType: error.message,
+        category: "error",
+      });
+    }
+  };
+
+  return (
+    <Track.Provider initialContext={{ userId: "user-123", formId: "contact-form" }}>
+      <form onSubmit={handleSubmit}>
+        {/* 이름 입력 필드 */}
+        <Track.Click
+          params={{
+            action: "focus_field",
+            fieldName: "name",
+            formId: "contact-form",
+          }}
+        >
+          <input
+            type="text"
+            name="name"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            placeholder="이름"
+          />
+        </Track.Click>
+
+        {/* 이메일 입력 필드 */}
+        <Track.Click
+          params={{
+            action: "focus_field",
+            fieldName: "email",
+            formId: "contact-form",
+          }}
+        >
+          <input
+            type="email"
+            name="email"
+            value={formData.email}
+            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+            placeholder="이메일"
+          />
+        </Track.Click>
+
+        {/* 메시지 입력 필드 */}
+        <Track.Click
+          params={{
+            action: "focus_field",
+            fieldName: "message",
+            formId: "contact-form",
+          }}
+        >
+          <textarea
+            name="message"
+            value={formData.message}
+            onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+            placeholder="메시지"
+          />
+        </Track.Click>
+
+        {/* 제출 버튼 */}
+        <Track.Click
+          params={{
+            action: "submit_form",
+            formId: "contact-form",
+            fieldCount: Object.keys(formData).length,
+          }}
+        >
+          <button type="submit">제출</button>
+        </Track.Click>
+      </form>
+    </Track.Provider>
+  );
+}
+```
+
+## 성능 최적화
+
+### 1. 조건부 트래킹
+
+```tsx
+// 사용자 타입에 따른 조건부 트래킹
+<Track.Click
+  params={{ feature: "premium-download" }}
+  enabled={(context) => context.userType === "premium"}
+>
+  <button>프리미엄 다운로드</button>
+</Track.Click>
+
+// 트래킹 동의에 따른 조건부 트래킹
+<Track.Click
+  params={{ action: "tracking_consent" }}
+  enabled={(context) => context.trackingConsent}
+>
+  <button>동의하기</button>
+</Track.Click>
+
+// 환경에 따른 조건부 트래킹
+<Track.Click
+  params={{ action: "debug_action" }}
+  enabled={() => process.env.NODE_ENV === "development"}
+>
+  <button>디버그 액션</button>
+</Track.Click>
+```
+
+### 2. 디바운스와 스로틀
+
+```tsx
+// 검색 입력 디바운스
+<Track.Click
+  params={{ action: "search" }}
+  debounce={{ delay: 300, leading: false, trailing: true }}
+>
+  <button>검색</button>
+</Track.Click>
+
+// 빠른 액션 스로틀
+<Track.Click
+  params={{ action: "rapid_action" }}
+  throttle={{ delay: 1000, leading: true, trailing: false }}
+>
+  <button>빠른 액션</button>
+</Track.Click>
+
+// 스크롤 이벤트 스로틀
+<Track.Click
+  params={{ action: "scroll" }}
+  throttle={{ delay: 100, leading: false, trailing: true }}
+>
+  <div className="scrollable-content">
+    {/* 스크롤 가능한 콘텐츠 */}
+  </div>
+</Track.Click>
+```
+
+### 3. 동적 파라미터
+
+```tsx
+// 컨텍스트 기반 동적 파라미터
+<Track.Click
+  params={(context) => ({
+    action: "custom_action",
+    userId: context.userId,
+    timestamp: Date.now(),
+    userType: context.userType,
+    page: context.page
+  })}
+>
+  <button>동적 액션</button>
+</Track.Click>
+
+// 이벤트 기반 동적 파라미터
+<Track.Click
+  params={(context, event) => ({
+    action: "button_click",
+    buttonId: event.target.id,
+    buttonText: event.target.textContent,
+    clickX: event.clientX,
+    clickY: event.clientY,
+    timestamp: Date.now()
+  })}
+>
+  <button id="dynamic-button">동적 버튼</button>
+</Track.Click>
+```
+
+## useTracker 훅 활용
+
+### 1. 기본 사용법
+
+```tsx
+function AdvancedComponent() {
+  const { track, context, setContext } = useTracker();
+
+  const handleComplexAction = async () => {
+    try {
+      // 복잡한 비즈니스 로직
+      const result = await processComplexAction();
+
+      // 성공 트래킹
+      await track({
+        eventName: "complex_action_completed",
+        result: result.status,
+        duration: result.duration,
+        userId: context.userId,
+        sessionId: context.sessionId,
+      });
+
+      // 컨텍스트 업데이트
+      setContext({
+        ...context,
+        lastAction: result,
+        actionCount: (context.actionCount || 0) + 1,
+      });
+    } catch (error) {
+      // 에러 트래킹
+      await track({
+        eventName: "complex_action_failed",
+        error: error.message,
+        userId: context.userId,
+      });
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={handleComplexAction}>복잡한 액션</button>
+      <p>액션 횟수: {context.actionCount || 0}</p>
+    </div>
+  );
+}
+```
+
+### 2. 배치 트래킹
+
+```tsx
+function BatchTrackingExample() {
+  const { track } = useTracker();
+
+  const handleBatchAction = async () => {
+    const events = [
+      { eventName: "step_1", step: 1 },
+      { eventName: "step_2", step: 2 },
+      { eventName: "step_3", step: 3 },
+    ];
+
+    // 순차적 트래킹
+    for (const event of events) {
+      await track(event);
+      await new Promise((resolve) => setTimeout(resolve, 100)); // 지연
+    }
+
+    // 또는 병렬 트래킹
+    await Promise.all(events.map((event) => track(event)));
+  };
+
+  return <button onClick={handleBatchAction}>배치 액션</button>;
+}
+```
+
+## 에러 처리 및 디버깅
+
+### 1. 에러 처리
+
+```tsx
+const [Track, useTracker] = createTracker({
+  send: async (params, context) => {
+    try {
+      await analytics.track(params.eventName, {
+        ...params,
+        userId: context.userId,
+        timestamp: Date.now(),
+      });
+    } catch (error) {
+      console.error("트래킹 에러:", error);
+
+      // 에러 추적 서비스로 전송
+      errorTracking.captureException(error);
+
+      // 로컬 스토리지에 저장하여 나중에 재전송
+      saveFailedEvent(params, context);
+    }
+  },
+});
+
+// 실패한 이벤트 저장
+const saveFailedEvent = (params, context) => {
+  try {
+    const failedEvents = JSON.parse(localStorage.getItem("failedEvents") || "[]");
+    failedEvents.push({ params, context, timestamp: Date.now() });
+    localStorage.setItem("failedEvents", JSON.stringify(failedEvents.slice(-50))); // 최대 50개
+  } catch (error) {
+    console.error("실패한 이벤트 저장 실패:", error);
+  }
+};
+```
+
+### 2. 디버깅 모드
+
+```tsx
+const [Track, useTracker] = createTracker({
+  send: (params, context) => {
+    // 개발 환경에서 상세 로깅
+    if (process.env.NODE_ENV === "development") {
+      console.group("🔍 이벤트 트래킹");
+      console.log("이벤트명:", params.eventName);
+      console.log("파라미터:", params);
+      console.log("컨텍스트:", context);
+      console.log("타임스탬프:", new Date().toISOString());
+      console.groupEnd();
+    }
+
+    // 실제 트래킹 로직
+    analytics.track(params.eventName, {
+      ...params,
+      userId: context.userId,
+      timestamp: Date.now(),
+    });
+  },
+});
+```
+
+### 3. 성능 모니터링
+
+```tsx
+const [Track, useTracker] = createTracker({
+  send: async (params, context) => {
+    const startTime = performance.now();
+
+    try {
+      await analytics.track(params.eventName, {
+        ...params,
+        userId: context.userId,
+        timestamp: Date.now(),
+      });
+
+      const duration = performance.now() - startTime;
+
+      // 성능 메트릭 기록
+      if (duration > 1000) {
+        // 1초 이상 걸린 경우
+        console.warn("느린 트래킹:", params.eventName, duration);
+      }
+    } catch (error) {
+      const duration = performance.now() - startTime;
+      console.error("트래킹 실패:", params.eventName, duration, error);
+    }
+  },
+});
+```
diff --git a/docs/src/content/ko/docs/batching.mdx b/docs/src/content/ko/docs/batching.mdx
index e003e7f..1016f3d 100644
--- a/docs/src/content/ko/docs/batching.mdx
+++ b/docs/src/content/ko/docs/batching.mdx
@@ -1,32 +1,30 @@
-# 배칭
+import { Callout } from "nextra/components";
 
-## 개요
+# 배칭
 
-이벤트 배칭은 여러 이벤트를 묶어서 애널리틱스 서비스에 보내기 전에 진행하는 성능 최적화 기술입니다. 이는 다음과 같은 경우에 특히 유용합니다:
+이벤트 배칭은 여러 개의 이벤트를 일정 조건 하에 하나의 네트워크 요청으로 묶어 전송하는 기능입니다. 다음과 같은 경우에 유용하게 사용할 수 있습니다.
 
-- 내부 배칭 기능이 있는 애널리틱스 서비스(Amplitude 또는 Google Analytics)를 사용하지 않는 경우
+- Amplitude, Google Analytics 등 내부 배칭 기능이 없는 애널리틱스 서비스를 사용하는 경우
 - 네트워크 요청 수를 줄이고 싶은 경우
-- 성능을 최적화하고 싶은 경우
+- 브라우저 종료 시 이벤트 유실을 방지하고 싶은 경우
 
-## 설정
+## Usage
 
-트래커 설정에서 배칭을 활성화합니다:
+`createTracker` 설정에서 `batch` 옵션을 활성화하면 사용할 수 있습니다.
 
 ```tsx
 const [Track, useTracker] = createTracker({
-  // ... other config
+  // ... 다른 설정
   batch: {
     enable: true,
     interval: 2000,
     thresholdSize: 100,
     onFlush: (batch, isBrowserClosing) => {
       if (isBrowserClosing) {
-        // 브라우저가 닫힐 때 신뢰할 수 있는 전송을 위해 sendBeacon 사용
         navigator.sendBeacon("/analytics/collect/batch", JSON.stringify(batch));
         return;
       }
 
-      // 일반 배칭 처리
       fetch("/analytics/collect/batch", {
         method: "POST",
         body: JSON.stringify(batch),
@@ -36,41 +34,38 @@ const [Track, useTracker] = createTracker({
 });
 ```
 
-### 옵션
+## Options
+
+| 옵션            | 타입                                                 | 설명                                       | 기본값  |
+| --------------- | ---------------------------------------------------- | ------------------------------------------ | ------- |
+| `enable`        | `boolean`                                            | 배칭 기능 활성화 여부                      | `false` |
+| `interval`      | `number`                                             | 배치 전송 간격 (밀리초 단위)               | `3000`  |
+| `thresholdSize` | `number`                                             | 배치 전송 전에 쌓일 수 있는 최대 이벤트 수 | `25`    |
+| `onFlush`       | `(batch, isBrowserClosing) => void \| Promise<void>` | 배치 전송 처리 함수. 필수                  | -       |
+| `onError`       | `(error: Error) => void \| Promise<void>`            | 전송 중 오류 발생 시 호출되는 함수 (선택)  | -       |
+
+<Callout type="info">`onFlush`는 **필수 항목**이며, 배치된 이벤트를 실제로 어떻게 전송할지를 정의합니다.</Callout>
 
-- `enable: boolean` (기본값: `false`)
-  - 배칭 활성화/비활성화
-- `interval: number` (기본값: `3000`)
-  - 배칭 처리 간격 (ms)
-- `thresholdSize: number` (기본값: `25`)
-  - 배칭 처리 전 최대 이벤트 수
-- `onFlush: (batch: Batch[], isBrowserClosing: boolean) => void | Promise<void>`
-  - 배칭 활성화 시 필요
-  - 배칭 처리 함수
-  - `isBrowserClosing` 브라우저 닫힘 시 배칭 처리 여부
-- `onError: (error: Error) => void | Promise<void>`
-  - 배칭 처리 실패 시 오류 처리 함수
+## How It Works
 
-## 작동 방식
+1. 각 이벤트의 **핸들러 반환값**은 메모리에 수집됩니다.
+2. 아래 중 하나가 발생하면 `onFlush`가 호출됩니다:
 
-1. 이벤트는 메모리에 수집됩니다
-2. 다음 중 하나가 발생할 때 배칭이 처리됩니다:
-   - 구성된 간격이 도달합니다
-   - 배칭 크기가 임계치에 도달합니다
-   - 브라우저가 닫힐 때
+   - `interval` 시간이 경과했을 때
+   - 수집된 이벤트 수가 `thresholdSize`에 도달했을 때
+   - 브라우저가 닫히는 이벤트가 감지되었을 때
 
-### 예시
+## Examples
 
 ```tsx
 const [Track, useTracker] = createTracker({
   DOMEvents: {
-    onClick: (clickParams, context) => {
-      // 반환 값이 배칭됩니다
+    onClick: (params, context) => {
       return {
-        ...clickParams,
+        ...params,
         ...context,
         event_type: "click",
-        timestamp: new Date().getTime(),
+        timestamp: Date.now(),
       };
     },
   },
@@ -79,7 +74,15 @@ const [Track, useTracker] = createTracker({
     interval: 2000,
     thresholdSize: 100,
     onFlush: (batch, isBrowserClosing) => {
-      // Process the batch
+      if (isBrowserClosing) {
+        navigator.sendBeacon("/analytics/collect/batch", JSON.stringify(batch));
+        return;
+      }
+
+      fetch("/analytics/collect/batch", {
+        method: "POST",
+        body: JSON.stringify(batch),
+      });
     },
   },
 });
@@ -95,15 +98,16 @@ function App() {
 }
 ```
 
-버튼을 여러 번 클릭했을 때:
+이 예제에서:
 
-1. 각 클릭은 `onClick` 핸들러를 실행합니다
-2. 각 핸들러의 반환 값은 배치 큐에 추가됩니다
-3. 2초(또는 임계치에 도달할 때)가 지나면 `onFlush`가 모든 수집된 이벤트와 함께 호출됩니다
+1. `<Track.Click>`이 실행될 때마다 이벤트 핸들러가 반환하는 객체가 배치 큐에 저장됩니다.
+2. 2초 후 또는 100개의 이벤트가 쌓이면 `onFlush`가 호출되어 서버로 전송됩니다.
+3. 브라우저가 닫히는 시점에서는 `sendBeacon`으로 전송됩니다.
 
-## 브라우저 닫힘 시 동작
+## 브라우저 종료 시 처리
 
-브라우저가 닫힐 때, [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon)을 사용하여 이벤트 전송을 보장합니다:
+브라우저가 닫힐 때도 이벤트 유실을 방지하기 위해
+[`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon)을 활용할 수 있습니다:
 
 ```tsx
 onFlush: (batch, isBrowserClosing) => {
@@ -112,7 +116,6 @@ onFlush: (batch, isBrowserClosing) => {
     return;
   }
 
-  // 일반 배칭 처리
   fetch("/analytics/collect/batch", {
     method: "POST",
     body: JSON.stringify(batch),
@@ -120,9 +123,9 @@ onFlush: (batch, isBrowserClosing) => {
 };
 ```
 
-## 유의 사항
+## Notes
 
-1. 이벤트 핸들러의 **반환 값**만 배칭되며, 핸들러 자체는 배칭되지 않습니다
-2. 배칭된 이벤트는 원래 매개변수와 컨텍스트를 유지합니다
-3. 이벤트는 순서대로 처리되며, 사용자 작업의 순서를 유지합니다
-4. 브라우저 닫힘 시 이벤트 전송을 보장하기 위해 [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon)을 사용합니다
+1. **이벤트 핸들러의 반환값만 배칭됩니다.** 이벤트 핸들러 자체는 항상 호출됩니다.
+2. **배치된 이벤트는 컨텍스트 정보를 포함한 상태로 저장됩니다.**
+3. **전송 순서를 보장합니다.** 클릭 → 노출 순으로 발생한 이벤트는 그 순서대로 전송됩니다.
+4. 브라우저 종료 시 `isBrowserClosing` 플래그가 `true`로 설정되어 `onFlush`에서 분기 처리할 수 있습니다.
diff --git a/docs/src/content/ko/docs/components/click.mdx b/docs/src/content/ko/docs/components/click.mdx
index 96469f7..e7fac3e 100644
--- a/docs/src/content/ko/docs/components/click.mdx
+++ b/docs/src/content/ko/docs/components/click.mdx
@@ -1,6 +1,8 @@
+import { Callout } from "nextra/components";
+
 # Click
 
-클릭 이벤트(`type="onClick"`)를 위한 `DOMEvent`의 특수 버전입니다.
+Click 이벤트(`type="onClick"`)를 위한 `DOMEvent`의 전용 컴포넌트입니다. `createTracker`의 리턴 배열의 첫 번쨰 요소인 이벤트 컴포넌트 중 하나입니다.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
@@ -24,49 +26,88 @@ function App() {
 }
 ```
 
+## Signature
+
+```ts
+function Click<TKey extends keyof TSchemas>({
+  children,
+  enabled,
+  ...props
+}: {
+  children: ReactNode;
+  enabled?: EnabledCondition<TContext, TEventParams>;
+} & TrackingOptions<TContext, TEventParams> &
+  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
+```
+
+## Reference
+
 ### Props
 
-- 스키마와 함께 사용하는 경우
-  - `params: SchemaParams | (context: Context) => SchemaParams` - 스키마 기반 클릭 이벤트 매개변수
-  - `schema: string` - 이벤트 매개변수 검증을 위한 스키마 이름
-- 스키마와 함께 사용하지 않는 경우
-  - `params: EventParams | (context: Context) => EventParams` - 클릭 이벤트 매개변수
-- `enabled?: boolean | ((context: Context, params: EventParams) => boolean)` - 이벤트 추적을 조건부로 활성화/비활성화 (기본값: `true`)
-- `debounce?: DebounceConfig` - 연속적인 이벤트 발생을 방지하는 디바운스 설정
-- `throttle?: ThrottleConfig` - 이벤트 발생 빈도를 제한하는 스로틀 설정
+| Props      | 타입                                                              | 설명                                                    | 필수 |
+| ---------- | ----------------------------------------------------------------- | ------------------------------------------------------- | ---- |
+| `enabled`  | `boolean \| ((context: Context, params: EventParams) => boolean)` | 이벤트 추적을 조건부로 활성화/비활성화 (기본값: `true`) | -    |
+| `debounce` | `DebounceConfig`                                                  | 연속적인 이벤트 발생을 방지하는 디바운스 설정           | -    |
+| `throttle` | `ThrottleConfig`                                                  | 이벤트 발생 빈도를 제한하는 스로틀 설정                 | -    |
+| `schema`   | `string`                                                          | 이벤트 매개변수 검증을 위한 스키마 이름                 | O    |
 
-**참고:** `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다.
+<Callout type="info">
+  참고: `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다. 타입 에러를 발생시켜 사전에 방지합니다.
+</Callout>
 
-### 추적 옵션 예제
+스키마와 함께 사용하는 경우와 아닐 경우 타입이 달라지는 속성이 있습니다.
 
-#### 조건부 추적
+스키마가 있을 경우:
 
-```tsx
-<Track.Click params={{ buttonId: "premium-feature" }} enabled={(context, params) => context.user?.isPremium}>
-  <button>프리미엄 기능</button>
-</Track.Click>
-```
+| Props    | 타입                                                 | 설명                 | 필수 |
+| -------- | ---------------------------------------------------- | -------------------- | ---- |
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 | O    |
 
-#### 디바운스 추적
+스키마가 없을 경우:
 
-```tsx
-<Track.Click params={{ buttonId: "search" }} debounce={{ delay: 300, leading: false, trailing: true }}>
-  <button>검색</button>
-</Track.Click>
-```
+| Props    | 타입                                               | 설명            | 필수 |
+| -------- | -------------------------------------------------- | --------------- | ---- |
+| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 | O    |
 
-#### 스로틀 추적
+---
 
-```tsx
-<Track.Click params={{ buttonId: "rapid-action" }} throttle={{ delay: 1000, leading: true, trailing: false }}>
-  <button>빠른 액션</button>
-</Track.Click>
-```
+#### `params` (필수)
 
-## 이벤트 이름을 변경한 경우
+스키마와 함께 사용하는 경우:
 
-`eventName` 속성을 사용하면 사용자 정의 클릭 이벤트 핸들러 이름을 지정할 수 있습니다.  
-이 속성을 사용하면 핸들러 이름이 변경되어도 유연하게 대처할 수 있습니다.
+- 타입: `SchemaParams | (context: Context) => SchemaParams`
+- 설명: 스키마 기반 매개변수
+
+스키마와 함께 사용하지 않는 경우:
+
+- 타입: `EventParams | (context: Context) => EventParams`
+- 설명: 이벤트 매개변수
+
+#### `enabled`
+
+- 타입: `boolean | ((context: Context, params: EventParams) => boolean)`
+- 설명: 이벤트 추적을 조건부로 활성화/비활성화 (기본값: `true`)
+
+#### `debounce`
+
+- 타입: `DebounceConfig`
+- 설명: 연속적인 이벤트 발생을 방지하는 디바운스 설정
+
+#### `throttle`
+
+- 타입: `ThrottleConfig`
+- 설명: 이벤트 발생 빈도를 제한하는 스로틀 설정
+
+#### `schema`
+
+스키마와 함께 사용하는 경우:
+
+- 타입: `string`
+- 설명: 이벤트 매개변수 검증을 위한 스키마 이름
+
+## Examples
+
+### 이벤트 이름을 변경한 경우
 
 ```tsx {8, 10}
 function MyButton({ onButtonClick }: { onButtonClick?: () => void }) {
@@ -83,3 +124,30 @@ function App() {
   );
 }
 ```
+
+`eventName` 속성을 사용하면 사용자 정의 클릭 이벤트 핸들러 이름을 지정할 수 있습니다.  
+이 속성을 사용하면 핸들러 이름이 변경되어도 유연하게 대처할 수 있습니다.
+
+### 조건부 추적
+
+```tsx
+<Track.Click params={{ buttonId: "premium-feature" }} enabled={(context, params) => context.user?.isPremium}>
+  <button>프리미엄 기능</button>
+</Track.Click>
+```
+
+### 디바운스 추적
+
+```tsx
+<Track.Click params={{ buttonId: "search" }} debounce={{ delay: 300, leading: false, trailing: true }}>
+  <button>검색</button>
+</Track.Click>
+```
+
+### 스로틀 추적
+
+```tsx
+<Track.Click params={{ buttonId: "rapid-action" }} throttle={{ delay: 1000, leading: true, trailing: false }}>
+  <button>빠른 액션</button>
+</Track.Click>
+```
diff --git a/docs/src/content/ko/docs/components/dom-event.mdx b/docs/src/content/ko/docs/components/dom-event.mdx
index 60c5994..acea1da 100644
--- a/docs/src/content/ko/docs/components/dom-event.mdx
+++ b/docs/src/content/ko/docs/components/dom-event.mdx
@@ -26,26 +26,53 @@ function App() {
 }
 ```
 
+## Signature
+
+```ts
+function DOMEvent<TKey extends keyof TSchemas>({
+  children,
+  type,
+  eventName,
+  enabled,
+  ...props
+}: {
+  children: React.ReactNode;
+  type: DOMEventNames;
+  eventName?: string;
+  enabled?: EnabledCondition<TContext, TEventParams>;
+} & TrackingOptions<TContext, TEventParams> &
+  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
+```
+
 ## Reference
 
 ### Props
 
-| Props         | 타입             | 설명                                                   | 필수 |
-| ------------- | ---------------- | ------------------------------------------------------ | ---- |
-| DOMEventNames | DOMEventNames    | 이벤트 이름 (예: `"onClick"`, `"onFocus"`)             | O    |
-| `enabled`     | `boolean`        | `((context: Context, params: EventParams) => boolean)` | -    |
-| `debounce`    | `DebounceConfig` | 연속적인 이벤트 발생을 방지하는 디바운스 설정          | -    |
-| `throttle`    | `ThrottleConfig` | 이벤트 발생 빈도를 제한하는 스로틀 설정                | -    |
+| Props         | 타입                                                              | 설명                                                    | 필수 |
+| ------------- | ----------------------------------------------------------------- | ------------------------------------------------------- | ---- |
+| DOMEventNames | DOMEventNames                                                     | 이벤트 이름 (예: `"onClick"`, `"onFocus"`)              | O    |
+| `enabled`     | `boolean \| ((context: Context, params: EventParams) => boolean)` | 이벤트 추적을 조건부로 활성화/비활성화 (기본값: `true`) | -    |
+| `debounce`    | `DebounceConfig`                                                  | 연속적인 이벤트 발생을 방지하는 디바운스 설정           | -    |
+| `throttle`    | `ThrottleConfig`                                                  | 이벤트 발생 빈도를 제한하는 스로틀 설정                 | -    |
+| `schema`      | `string`                                                          | 이벤트 매개변수 검증을 위한 스키마 이름                 | -    |
 
-<Callout type="info">참고: `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다.</Callout>
+<Callout type="info">
+  참고: `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다. 타입 에러를 발생시켜 사전에 방지합니다.
+</Callout>
 
 스키마와 함께 사용하는 경우와 아닐 경우 타입이 달라지는 속성이 있습니다.
 
-| Props    | 스키마 여부 | 타입                                                 | 설명                                    | 필수 |
-| -------- | ----------- | ---------------------------------------------------- | --------------------------------------- | ---- |
-| `params` | O           | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수                    | O    |
-| `schema` | O           | `string`                                             | 이벤트 매개변수 검증을 위한 스키마 이름 | O    |
-| `params` | -           | `EventParams \| (context: Context) => EventParams`   | 이벤트 매개변수                         | O    |
+스키마가 있을 경우:
+
+| Props    | 타입                                                 | 설명                 | 필수 |
+| -------- | ---------------------------------------------------- | -------------------- | ---- |
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 | O    |
+
+스키마가 없을 경우:
+
+| Props    | 타입                                               | 설명            | 필수 |
+| -------- | -------------------------------------------------- | --------------- | ---- |
+| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 | O    |
 
 ---
 
@@ -61,13 +88,6 @@ function App() {
 - 타입: `EventParams | (context: Context) => EventParams`
 - 설명: 이벤트 매개변수
 
-#### `schema` (필수)
-
-스키마와 함께 사용하는 경우:
-
-- 타입: `string`
-- 설명: 이벤트 매개변수 검증을 위한 스키마 이름
-
 #### `enabled`
 
 - 타입: `boolean | ((context: Context, params: EventParams) => boolean)`
@@ -83,9 +103,37 @@ function App() {
 - 타입: `ThrottleConfig`
 - 설명: 이벤트 발생 빈도를 제한하는 스로틀 설정
 
-### Examples
+#### `schema`
 
-#### 조건부 추적
+스키마와 함께 사용하는 경우:
+
+- 타입: `string`
+- 설명: 이벤트 매개변수 검증을 위한 스키마 이름
+
+## Examples
+
+### 이벤트 이름을 변경한 경우
+
+```tsx {8, 10}
+function MyInput({ onInputFocus }: { onInputFocus?: () => void }) {
+  return <input onFocus={onInputFocus} />;
+}
+
+function App() {
+  return (
+    <Track.Provider initialContext={{}}>
+      <Track.DOMEvent type="onFocus" params={{...}} eventName="onInputFocus">
+        <MyInput />
+      </Track.DOMEvent>
+    </Track.Provider>
+  );
+}
+```
+
+`eventName` 속성을 사용하면 사용자 정의 이벤트 핸들러 이름을 지정할 수 있습니다.  
+이 속성을 사용하면 핸들러 이름이 변경되어도 유연하게 대처할 수 있습니다.
+
+### 조건부 추적
 
 ```tsx
 <Track.DOMEvent type="onFocus" params={{ inputId: "email" }} enabled={(context) => context.trackingEnabled}>
@@ -93,7 +141,7 @@ function App() {
 </Track.DOMEvent>
 ```
 
-#### 디바운스 추적
+### 디바운스 추적
 
 ```tsx
 <Track.DOMEvent
@@ -105,7 +153,7 @@ function App() {
 </Track.DOMEvent>
 ```
 
-#### 스로틀 추적
+### 스로틀 추적
 
 ```tsx
 <Track.DOMEvent
@@ -116,24 +164,3 @@ function App() {
   <div>스크롤 가능한 콘텐츠</div>
 </Track.DOMEvent>
 ```
-
-## 이벤트 이름을 변경한 경우
-
-`eventName` 속성을 사용하면 사용자 정의 이벤트 핸들러 이름을 지정할 수 있습니다.  
-이 속성을 사용하면 핸들러 이름이 변경되어도 유연하게 대처할 수 있습니다.
-
-```tsx {8, 10}
-function MyInput({ onInputFocus }: { onInputFocus?: () => void }) {
-  return <input onFocus={onInputFocus} />;
-}
-
-function App() {
-  return (
-    <Track.Provider initialContext={{}}>
-      <Track.DOMEvent type="onFocus" params={{...}} eventName="onInputFocus">
-        <MyInput />
-      </Track.DOMEvent>
-    </Track.Provider>
-  );
-}
-```
diff --git a/docs/src/content/ko/docs/components/impression.mdx b/docs/src/content/ko/docs/components/impression.mdx
index 7bfbb58..abc726c 100644
--- a/docs/src/content/ko/docs/components/impression.mdx
+++ b/docs/src/content/ko/docs/components/impression.mdx
@@ -1,6 +1,8 @@
+import { Callout } from "nextra/components";
+
 # Impression
 
-Intersection Observer API를 사용하여 노출 이벤트를 추적합니다. `createTracker`의 리턴 배열의 첫 번쨰 요소인 이벤트 컴포넌트 중 하나입니다.
+Intersection Observer API를 사용하여 노출 이벤트를 추적합니다. `createTracker`의 리턴 배열의 첫 번째 요소인 이벤트 컴포넌트 중 하나입니다.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
@@ -27,23 +29,97 @@ function App() {
 }
 ```
 
+## Signature
+
+```ts
+function Impression<TKey extends keyof TSchemas>({
+  children,
+  options,
+  enabled,
+  ...props
+}: {
+  children: ReactNode;
+  options?: ImpressionOptions;
+  enabled?: EnabledCondition<TContext, TEventParams>;
+} & TrackingOptions<TContext, TEventParams> &
+  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
+```
+
+## Reference
+
 ### Props
 
-- `options?: ImpressionOptions` - 선택적 설정 (전역 옵션을 덮어씀)
-- 스키마와 함께 사용하는 경우
-  - `params: SchemaParams | (context: Context) => SchemaParams` - 스키마 기반 노출 이벤트 매개변수
-  - `schema: string` - 이벤트 매개변수 검증을 위한 스키마 이름
-- 스키마와 함께 사용하지 않는 경우
-  - `params: EventParams | (context: Context) => EventParams` - 노출 이벤트 매개변수
-- `enabled?: boolean | ((context: Context, params: EventParams) => boolean)` - 이벤트 추적을 조건부로 활성화/비활성화 (기본값: `true`)
-- `debounce?: DebounceConfig` - 연속적인 이벤트 발생을 방지하는 디바운스 설정
-- `throttle?: ThrottleConfig` - 이벤트 발생 빈도를 제한하는 스로틀 설정
+| Props      | 타입                                                              | 설명                                                    | 필수 |
+| ---------- | ----------------------------------------------------------------- | ------------------------------------------------------- | ---- |
+| `enabled`  | `boolean \| ((context: Context, params: EventParams) => boolean)` | 이벤트 추적을 조건부로 활성화/비활성화 (기본값: `true`) | -    |
+| `debounce` | `DebounceConfig`                                                  | 연속적인 이벤트 발생을 방지하는 디바운스 설정           | -    |
+| `throttle` | `ThrottleConfig`                                                  | 이벤트 발생 빈도를 제한하는 스로틀 설정                 | -    |
+| `options`  | `ImpressionOptions`                                               | `IntersectionObserver` 설정. 전역 옵션을 덮어씀         | -    |
+| `schema`   | `string`                                                          | 이벤트 매개변수 검증을 위한 스키마 이름                 | O    |
+
+<Callout type="info">
+  참고: `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다. 타입 에러를 발생시켜 사전에 방지합니다.
+</Callout>
+
+스키마와 함께 사용하는 경우와 아닐 경우 타입이 달라지는 속성이 있습니다.
+
+스키마가 있을 경우:
+
+| Props    | 타입                                                 | 설명                 | 필수 |
+| -------- | ---------------------------------------------------- | -------------------- | ---- |
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 | O    |
+
+스키마가 없을 경우:
+
+| Props    | 타입                                               | 설명            | 필수 |
+| -------- | -------------------------------------------------- | --------------- | ---- |
+| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 | O    |
+
+---
+
+#### `params` (필수)
+
+스키마와 함께 사용하는 경우:
+
+- 타입: `SchemaParams | (context: Context) => SchemaParams`
+- 설명: 스키마 기반 매개변수
+
+스키마와 함께 사용하지 않는 경우:
+
+- 타입: `EventParams | (context: Context) => EventParams`
+- 설명: 이벤트 매개변수
+
+#### `enabled`
+
+- 타입: `boolean | ((context: Context, params: EventParams) => boolean)`
+- 설명: 이벤트 추적을 조건부로 활성화/비활성화 (기본값: `true`)
+
+#### `debounce`
+
+- 타입: `DebounceConfig`
+- 설명: 연속적인 이벤트 발생을 방지하는 디바운스 설정
+
+#### `throttle`
+
+- 타입: `ThrottleConfig`
+- 설명: 이벤트 발생 빈도를 제한하는 스로틀 설정
+
+#### `options`
+
+- 타입: `ImpressionOptions`
+- 설명: [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 동작을 제어하는 옵션입니다. 예: `threshold`, `rootMargin` 등
+  전역 설정을 덮어쓰며 개별 노출 이벤트에 대해 세부 설정할 수 있습니다.
+
+#### `schema`
+
+스키마와 함께 사용하는 경우:
 
-**참고:** `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다.
+- 타입: `string`
+- 설명: 이벤트 매개변수 검증을 위한 스키마 이름
 
-### 추적 옵션 예제
+## Examples
 
-#### 조건부 추적
+### 조건부 추적
 
 ```tsx
 <Track.Impression
@@ -55,7 +131,7 @@ function App() {
 </Track.Impression>
 ```
 
-#### 스로틀 노출 추적
+### 스로틀 노출 추적
 
 ```tsx
 <Track.Impression
diff --git a/docs/src/content/ko/docs/components/index.mdx b/docs/src/content/ko/docs/components/index.mdx
index a565b32..f5c123e 100644
--- a/docs/src/content/ko/docs/components/index.mdx
+++ b/docs/src/content/ko/docs/components/index.mdx
@@ -16,13 +16,19 @@ function App() {
 }
 ```
 
+## Signature
+
+```ts
+function Provider({ children, initialContext }: { children: ReactNode; initialContext?: TContext }): JSX.Element;
+```
+
 ## Reference
 
 ### Props
 
-| Props            | 타입      | 설명             | 예제                |
-| ---------------- | --------- | ---------------- | ------------------- |
-| `initialContext` | `Context` | 초기 컨텍스트 값 | `{ userId: '123' }` |
+| Props            | 타입      | 설명             | 필수 |
+| ---------------- | --------- | ---------------- | ---- |
+| `initialContext` | `Context` | 초기 컨텍스트 값 | O    |
 
 ---
 
@@ -30,3 +36,34 @@ function App() {
 
 - 타입: `Context`
 - 설명: 초기 컨텍스트 값
+
+## Examples
+
+### 초기 컨텍스트를 설정한 경우
+
+```tsx
+import { createTracker } from "@offlegacy/event-tracker";
+
+type Context = {
+  userId: string;
+  trackingEnabled: boolean;
+};
+
+const [Track] = createTracker<Context>({});
+
+function App() {
+  return (
+    <Track.Provider
+      initialContext={{
+        userId: "user-123",
+        trackingEnabled: true,
+      }}
+    >
+      <MainPage />
+    </Track.Provider>
+  );
+}
+```
+
+`initialContext`는 모든 하위 트래킹 컴포넌트에서 참조 가능한 초기 상태를 정의합니다.
+이 컨텍스트는 `enabled`, `params`, 그리고 `SetContext`에서 사용될 수 있습니다.
diff --git a/docs/src/content/ko/docs/components/page-view.mdx b/docs/src/content/ko/docs/components/page-view.mdx
index 507cad1..9ee02d9 100644
--- a/docs/src/content/ko/docs/components/page-view.mdx
+++ b/docs/src/content/ko/docs/components/page-view.mdx
@@ -1,6 +1,8 @@
+import { Callout } from "nextra/components";
+
 # PageView
 
-컴포넌트가 마운트될 때 페이지 뷰 이벤트를 추적합니다.
+컴포넌트가 마운트될 때 페이지 뷰 이벤트를 추적합니다. `createTracker`의 리턴 배열의 첫 번째 요소인 이벤트 컴포넌트 중 하나입니다.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
@@ -22,22 +24,86 @@ function App() {
 }
 ```
 
+## Signature
+
+```ts
+function PageView<TKey extends keyof TSchemas>({
+  enabled,
+  ...props
+}: {
+  enabled?: EnabledCondition<TContext, TEventParams>;
+} & TrackingOptions<TContext, TEventParams> &
+  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
+```
+
+## Reference
+
 ### Props
 
-- 스키마와 함께 사용하는 경우
-  - `params: SchemaParams | (context: Context) => SchemaParams` - 스키마 기반 페이지 뷰 이벤트 매개변수
-  - `schema: string` - 이벤트 매개변수 검증을 위한 스키마 이름
-- 스키마와 함께 사용하지 않는 경우
-  - `params: EventParams | (context: Context) => EventParams` - 페이지 뷰 이벤트 매개변수
-- `enabled?: boolean | ((context: Context, params: EventParams) => boolean)` - 이벤트 추적을 조건부로 활성화/비활성화 (기본값: `true`)
-- `debounce?: DebounceConfig` - 연속적인 이벤트 발생을 방지하는 디바운스 설정
-- `throttle?: ThrottleConfig` - 이벤트 발생 빈도를 제한하는 스로틀 설정
+| Props      | 타입                                                              | 설명                                                    | 필수 |
+| ---------- | ----------------------------------------------------------------- | ------------------------------------------------------- | ---- |
+| `enabled`  | `boolean \| ((context: Context, params: EventParams) => boolean)` | 이벤트 추적을 조건부로 활성화/비활성화 (기본값: `true`) | -    |
+| `debounce` | `DebounceConfig`                                                  | 연속적인 이벤트 발생을 방지하는 디바운스 설정           | -    |
+| `throttle` | `ThrottleConfig`                                                  | 이벤트 발생 빈도를 제한하는 스로틀 설정                 | -    |
+| `schema`   | `string`                                                          | 이벤트 매개변수 검증을 위한 스키마 이름                 | O    |
+
+<Callout type="info">
+  참고: `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다. 타입 에러를 발생시켜 사전에 방지합니다.
+</Callout>
+
+스키마와 함께 사용하는 경우와 아닐 경우 타입이 달라지는 속성이 있습니다.
+
+스키마가 있을 경우:
+
+| Props    | 타입                                                 | 설명                 | 필수 |
+| -------- | ---------------------------------------------------- | -------------------- | ---- |
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 | O    |
+
+스키마가 없을 경우:
+
+| Props    | 타입                                               | 설명            | 필수 |
+| -------- | -------------------------------------------------- | --------------- | ---- |
+| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 | O    |
+
+---
+
+#### `params` (필수)
+
+스키마와 함께 사용하는 경우:
+
+- 타입: `SchemaParams | (context: Context) => SchemaParams`
+- 설명: 스키마 기반 매개변수
+
+스키마와 함께 사용하지 않는 경우:
+
+- 타입: `EventParams | (context: Context) => EventParams`
+- 설명: 이벤트 매개변수
+
+#### `enabled`
+
+- 타입: `boolean | ((context: Context, params: EventParams) => boolean)`
+- 설명: 이벤트 추적을 조건부로 활성화/비활성화 (기본값: `true`)
+
+#### `debounce`
+
+- 타입: `DebounceConfig`
+- 설명: 연속적인 이벤트 발생을 방지하는 디바운스 설정
+
+#### `throttle`
+
+- 타입: `ThrottleConfig`
+- 설명: 이벤트 발생 빈도를 제한하는 스로틀 설정
+
+#### `schema`
+
+스키마와 함께 사용하는 경우:
 
-**참고:** `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다.
+- 타입: `string`
+- 설명: 이벤트 매개변수 검증을 위한 스키마 이름
 
-### 추적 옵션 예제
+## Examples
 
-#### 조건부 추적
+### 조건부 추적
 
 ```tsx
 <Track.PageView
@@ -46,7 +112,7 @@ function App() {
 />
 ```
 
-#### 디바운스 페이지 뷰
+### 디바운스 페이지 뷰
 
 ```tsx
 <Track.PageView params={{ page: "/search-results" }} debounce={{ delay: 1000, leading: true, trailing: false }} />
diff --git a/docs/src/content/ko/docs/components/set-context.mdx b/docs/src/content/ko/docs/components/set-context.mdx
index 543639e..d34eafa 100644
--- a/docs/src/content/ko/docs/components/set-context.mdx
+++ b/docs/src/content/ko/docs/components/set-context.mdx
@@ -1,23 +1,54 @@
+import { Callout } from "nextra/components";
+
 # SetContext
 
-트래킹 컨텍스트를 설정하거나 업데이트합니다.
+트래킹 컨텍스트를 설정하거나 업데이트합니다. `createTracker`의 리턴 배열의 첫 번째 요소인 유틸리티 컴포넌트 중 하나입니다.
 
 ```tsx
-import { createTracker } from '@offlegacy/event-tracker'
+import { createTracker } from "@offlegacy/event-tracker";
 
-const [Track] = createTracker({...})
+const [Track] = createTracker({ ... });
 
 function App() {
   return (
-    <Track.Provider initialContext={{ userId: 'user-1' }}>
-      <Track.SetContext
-        context={{ lastActive: new Date() }}
-      />
+    <Track.Provider initialContext={{ userId: "user-1" }}>
+      <Track.SetContext context={{ lastActive: new Date() }} />
     </Track.Provider>
-  )
+  );
 }
 ```
 
+## Signature
+
+```ts
+function SetContext({ context }: { context: TContext | ((prevContext: TContext) => TContext) }): null;
+```
+
+## Reference
+
 ### Props
 
-- `context: Context | ((prevContext: Context) => Context)` - New context value or update function
+| Props     | 타입                                             | 설명                                                         | 필수 |
+| --------- | ------------------------------------------------ | ------------------------------------------------------------ | ---- |
+| `context` | `Context \| ((prevContext: Context) => Context)` | 새로운 컨텍스트 값 또는 기존 값을 기반으로 업데이트하는 함수 | O    |
+
+---
+
+#### `context` (필수)
+
+- 타입: `Context | ((prevContext: Context) => Context)`
+- 설명: 새 컨텍스트 값을 직접 지정하거나, 이전 컨텍스트 값을 기반으로 업데이트할 수 있습니다. 이 컴포넌트는 한 번 렌더링되면 지정된 컨텍스트로 추적 컨텍스트가 갱신됩니다.
+
+## Examples
+
+### 정적 컨텍스트 설정
+
+```tsx
+<Track.SetContext context={{ userId: "user-123" }} />
+```
+
+### 이전 컨텍스트 기반 업데이트
+
+```tsx
+<Track.SetContext context={(prev) => ({ ...prev, lastSeen: new Date() })} />
+```
diff --git a/docs/src/content/ko/docs/create-tracker.mdx b/docs/src/content/ko/docs/create-tracker.mdx
index dea5919..05cee3f 100644
--- a/docs/src/content/ko/docs/create-tracker.mdx
+++ b/docs/src/content/ko/docs/create-tracker.mdx
@@ -19,6 +19,17 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTrack
 });
 ```
 
+## Signature
+
+```ts
+function createTracker<
+  TContext extends Context = Context,
+  TEventParams extends EventParams = EventParams,
+  TSchemas extends Schemas = Schemas,
+  TTaskResult extends TaskResult = TaskResult,
+>(config: TrackerConfig<TContext, TEventParams, TSchemas, TTaskResult>): [EventComponents, UseTracker];
+```
+
 ## Reference
 
 ### Parameters
diff --git a/docs/src/content/ko/docs/data-type-validation.mdx b/docs/src/content/ko/docs/data-type-validation.mdx
index 14a4eeb..5d11357 100644
--- a/docs/src/content/ko/docs/data-type-validation.mdx
+++ b/docs/src/content/ko/docs/data-type-validation.mdx
@@ -1,69 +1,96 @@
+import { Callout, Steps } from "nextra/components";
+
 # 데이터 타입 검증
 
-## 소개
+Event Tracker는 이벤트 파라미터의 정확성을 보장하기 위해 [Zod](https://zod.dev/)를 활용한 스키마 기반 데이터 타입 검증 기능을 제공합니다.  
+이 기능을 사용하면 이벤트가 수집되기 전에 사전 정의된 구조와 일치하는지 검증할 수 있으며, 이는 데이터 신뢰성과 오류 방지, 정형 분석을 위한 기반으로 유용합니다.
+
+## Usage
+
+Zod 스키마를 정의하고, `createTracker` 설정에서 `schemas` 옵션으로 전달하면 됩니다.
+
+```tsx
+import { createTracker } from "@offlegacy/event-tracker";
+import { z } from "zod";
+
+const schemas = {
+  page_view: z.object({
+    title: z.string(),
+  }),
+  click_button: z.object({
+    target: z.string(),
+  }),
+};
 
-이벤트 트래킹에서 정확한 데이터 타입을 확인하는 것은 데이터 신뢰성과 의미 있는 분석을 위해 매우 중요합니다.  
-`event-tracker`는 [Zod](https://zod.dev/)를 사용하여 내장된 데이터 타입 검증을 제공합니다.
-이 기능을 사용하면 이벤트 매개변수에 대한 스키마를 정의할 수 있으며, 데이터가 처리되기 전에 예상되는 데이터 타입과 일치하는지 확인할 수 있습니다.
-이는 이벤트 트래킹에서 일관성을 유지하고 오류를 방지하는 데 매우 유용합니다.
+const [Track] = createTracker<{}, {}, typeof schemas>({
+  schemas: {
+    schemas,
+    onSchemaError: (error) => {
+      console.error("스키마 검증 실패:", error);
+    },
+    abortOnError: true,
+  },
+});
+```
 
-## 설정
+## Options
 
-`event-tracker`에서 데이터 타입 검증을 구성하려면 Zod를 사용하여 스키마를 정의하고 트래커 설정에 전달해야 합니다.
+| 옵션            | 타입                                         | 설명                                     | 기본값  |
+| --------------- | -------------------------------------------- | ---------------------------------------- | ------- |
+| `schemas`       | `Record<string, ZodSchema>`                  | 이벤트 이름과 Zod 스키마의 매핑          | 필수    |
+| `onSchemaError` | `(error: ZodError) => void \| Promise<void>` | 스키마 검증 실패 시 호출되는 함수        | 선택    |
+| `abortOnError`  | `boolean`                                    | 오류 발생 시 이벤트 처리를 중단할지 여부 | `false` |
 
-### 옵션
+<Callout type="info">스키마 오류가 발생했을 때 `abortOnError: true`인 경우, 해당 이벤트는 추적되지 않습니다.</Callout>
 
-- **schemas**: Zod 스키마의 레코드로, 이벤트 매개변수의 구조를 정의합니다.
-- **onSchemaError**: 스키마 검증이 실패할 때 호출되는 콜백 함수입니다.
-- **abortOnError**: 스키마 검증 오류가 발생할 때 이벤트 처리를 중단할지 여부를 나타내는 부울 값입니다. 기본값은 `false`입니다.
+## Examples
 
-## 예시
+<Steps>
 
-1. **스키마 정의**: Zod를 사용하여 이벤트 매개변수의 예상 구조를 정의합니다.
+### Zod 스키마 정의
 
-   ```typescript
-   import { z } from "zod";
+```ts
+import { z } from "zod";
 
-   const page_view = z.object({
-     title: z.string(),
-   });
+const schemas = {
+  page_view: z.object({
+    title: z.string(),
+  }),
+  click_button: z.object({
+    target: z.string(),
+  }),
+};
+```
 
-   const click_button = z.object({
-     target: z.string(),
-   });
-   ```
+### `createTracker`에 등록
 
-2. **트래커 설정**: `createTracker` 함수에 스키마를 전달합니다.
+```tsx
+const [Track] = createTracker<{}, {}, typeof schemas>({
+  schemas: {
+    schemas,
+    abortOnError: true,
+    onSchemaError: (error) => {
+      console.error("스키마 오류 발생", error);
+    },
+  },
+});
+```
 
-   ```tsx
-   import { createTracker } from "@offlegacy/event-tracker";
+### 스키마 기반 이벤트 트래킹
 
-   const schemas = {
-     page_view;
-     clic_button;
-   };
+```tsx
+<Track.PageView schema="page_view" params={{ title: "Home" }} />
+<Track.Click schema="click_button" params={{ target: "submit-button" }} />
+```
 
-   const [Track] = createTracker<{}, {}, typeof schemas>({
-     schema: {
-       schemas,
-       onSchemaError: (error) => {
-         console.error("Schema validation error:", error);
-       },
-       abortOnError: true,
-     },
-     // other configurations...
-   });
-   ```
+스키마 검증이 성공하면 이벤트는 `send` 또는 각 핸들러로 전달됩니다.
+실패하면 `onSchemaError`가 호출되고, `abortOnError`가 true일 경우 이벤트는 무시됩니다.
 
-3. **이벤트 검증**: 이벤트가 추적될 때, 정의된 스키마에 대해 검증됩니다. 또한 TypeScript를 사용하여 사전에 검증됩니다.
-   ```tsx
-   <Track.PageView schema='page_view' params={{ title: "Home Page" }} />
-   <Track.Click schema='click_button' params={{ target: "submit-button" }} />
-   ```
+</Steps>
 
-## 유의 사항
+## Notes
 
-- Zod 스키마는 기본적으로 [`.parse()`](https://zod.dev/?id=parse)를 사용하여 검증됩니다.
-- 부드러운 타입 추론을 위해, `createTracker` 함수 외부에서 스키마를 정의하고 `createTracker`의 세 번째 타입 인자에 `typeof schemas`를 할당하길 권장합니다.
+- Zod 스키마는 기본적으로 [parse](https://zod.dev/?id=parse)를 사용하여 검증됩니다.
+- 부드러운 타입 추론을 위해, createTracker 함수 외부에서 스키마를 정의하고 createTracker의 세 번째 타입 인자에 typeof schemas를 할당하길 권장합니다.
 
 _향후 다른 스키마 검증 라이브러리를 지원할 계획입니다._
diff --git a/docs/src/content/ko/docs/installation.mdx b/docs/src/content/ko/docs/installation.mdx
index 9a3705c..7fd6c2a 100644
--- a/docs/src/content/ko/docs/installation.mdx
+++ b/docs/src/content/ko/docs/installation.mdx
@@ -1,6 +1,6 @@
 # 설치
 
-Event Tracker는 React 애플리케이션에서 이벤트 트래킹을 쉽게 구현할 수 있도록 설계된 라이브러리입니다. `React 18.0.0` 이상의 버전에서 사용할 수 있습니다.
+Event Tracker는 React 애플리케이션에서 이벤트 트래킹을 쉽게 구현할 수 있도록 설계된 라이브러리입니다. `React@^16.8.0` 이상의 버전에서 사용할 수 있습니다.
 
 최신 안정 버전을 설치하려면 아래 명령어를 실행하세요.
 
diff --git a/docs/src/content/ko/docs/instance-example.mdx b/docs/src/content/ko/docs/instance-example.mdx
new file mode 100644
index 0000000..965ee64
--- /dev/null
+++ b/docs/src/content/ko/docs/instance-example.mdx
@@ -0,0 +1,1031 @@
+# 트래킹 인스턴스 만들기
+
+`event-tracker`를 사용하여 여러 개의 트래커 인스턴스를 생성하고 활용하는 방법을 알아보겠습니다. 각 인스턴스는 서로 다른 목적이나 애널리틱스 서비스를 위해 사용할 수 있습니다.
+
+## 인스턴스 분리 전략
+
+### 1. 애널리틱스 서비스별 분리
+
+- Google Analytics, Amplitude, Mixpanel 등 각각의 서비스에 맞는 인스턴스
+- 서비스별 특화된 이벤트 구조와 파라미터
+
+### 2. 목적별 분리
+
+- 사용자 행동 분석, 성능 모니터링, 에러 추적 등
+- 각 목적에 맞는 데이터 구조와 전송 방식
+
+### 3. 환경별 분리
+
+- 개발, 스테이징, 프로덕션 환경
+- 환경별 다른 설정과 데이터 처리
+
+## 기본 설정
+
+### 1. Google Analytics 인스턴스
+
+```tsx
+// trackers/ga4Tracker.ts
+import { createTracker } from "@offlegacy/event-tracker";
+
+interface GA4Context {
+  userId?: string;
+  sessionId?: string;
+  pageTitle?: string;
+  pagePath?: string;
+}
+
+interface GA4EventParams {
+  eventName: string;
+  eventCategory?: string;
+  eventAction?: string;
+  eventLabel?: string;
+  eventValue?: number;
+  customParameters?: Record<string, any>;
+}
+
+// GA4 이벤트 전송 함수
+const sendGA4Event = (params: GA4EventParams, context: GA4Context) => {
+  window.gtag("event", params.eventName, {
+    event_category: params.eventCategory,
+    event_action: params.eventAction,
+    event_label: params.eventLabel,
+    value: params.eventValue,
+    user_id: context.userId,
+    session_id: context.sessionId,
+    page_title: context.pageTitle,
+    page_path: context.pagePath,
+    ...params.customParameters,
+  });
+};
+
+// GA4 트래커 인스턴스
+export const [GATrack, useGATracker] = createTracker<GA4Context, GA4EventParams>({
+  init: (initialContext, setContext) => {
+    const sessionId = `ga_session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    const pageTitle = document.title;
+    const pagePath = window.location.pathname;
+
+    setContext({
+      ...initialContext,
+      sessionId,
+      pageTitle,
+      pagePath,
+    });
+  },
+
+  send: (params, context) => {
+    sendGA4Event(params, context);
+  },
+
+  DOMEvents: {
+    onClick: (params, context) => {
+      sendGA4Event(
+        {
+          eventName: "click",
+          eventCategory: "engagement",
+          eventAction: "click",
+          eventLabel: params.eventLabel || "button_click",
+          customParameters: {
+            button_id: params.buttonId,
+            button_text: params.buttonText,
+            page_location: context.pagePath,
+            ...params.customParameters,
+          },
+        },
+        context,
+      );
+    },
+  },
+
+  impression: {
+    onImpression: (params, context) => {
+      sendGA4Event(
+        {
+          eventName: "impression",
+          eventCategory: "engagement",
+          eventAction: "view",
+          eventLabel: params.elementId,
+          customParameters: {
+            element_id: params.elementId,
+            element_type: params.elementType,
+            visibility_percentage: params.visibilityPercentage,
+            ...params.customParameters,
+          },
+        },
+        context,
+      );
+    },
+    options: {
+      threshold: 0.5,
+      freezeOnceVisible: true,
+    },
+  },
+
+  pageView: {
+    onPageView: (params, context) => {
+      sendGA4Event(
+        {
+          eventName: "page_view",
+          eventCategory: "navigation",
+          eventAction: "page_view",
+          eventLabel: params.pagePath || context.pagePath,
+          customParameters: {
+            page_title: params.pageTitle || context.pageTitle,
+            page_path: params.pagePath || context.pagePath,
+            referrer: params.referrer,
+            ...params.customParameters,
+          },
+        },
+        context,
+      );
+    },
+  },
+});
+
+export { GATrack, useGATracker };
+```
+
+### 2. Amplitude 인스턴스
+
+```tsx
+// trackers/amplitudeTracker.ts
+import { createTracker } from "@offlegacy/event-tracker";
+import * as amplitude from "@amplitude/analytics-browser";
+
+interface AmplitudeContext {
+  userId?: string;
+  deviceId?: string;
+  sessionId?: number;
+  userProperties?: Record<string, any>;
+}
+
+interface AmplitudeEventParams {
+  eventType: string;
+  eventProperties?: Record<string, any>;
+  userProperties?: Record<string, any>;
+}
+
+// Amplitude 이벤트 전송 함수
+const sendAmplitudeEvent = (params: AmplitudeEventParams, context: AmplitudeContext) => {
+  amplitude.track(params.eventType, {
+    ...params.eventProperties,
+    user_id: context.userId,
+    device_id: context.deviceId,
+    session_id: context.sessionId,
+  });
+
+  // 사용자 속성 업데이트
+  if (params.userProperties) {
+    amplitude.setUserProperties(params.userProperties);
+  }
+};
+
+// Amplitude 트래커 인스턴스
+export const [AmpTrack, useAmpTracker] = createTracker<AmplitudeContext, AmplitudeEventParams>({
+  init: (initialContext, setContext) => {
+    // Amplitude 초기화
+    if (process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY) {
+      amplitude.init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY, {
+        defaultTracking: false,
+      });
+    }
+
+    const sessionId = Date.now();
+    const deviceId = amplitude.getDeviceId() || `device_${Math.random().toString(36).substr(2, 9)}`;
+
+    setContext({
+      ...initialContext,
+      sessionId,
+      deviceId,
+    });
+  },
+
+  send: (params, context) => {
+    sendAmplitudeEvent(params, context);
+  },
+
+  DOMEvents: {
+    onClick: (params, context) => {
+      sendAmplitudeEvent(
+        {
+          eventType: "Button Clicked",
+          eventProperties: {
+            button_id: params.buttonId,
+            button_text: params.buttonText,
+            page_path: window.location.pathname,
+            timestamp: Date.now(),
+            ...params.eventProperties,
+          },
+        },
+        context,
+      );
+    },
+  },
+
+  impression: {
+    onImpression: (params, context) => {
+      sendAmplitudeEvent(
+        {
+          eventType: "Content Viewed",
+          eventProperties: {
+            element_id: params.elementId,
+            element_type: params.elementType,
+            visibility_percentage: params.visibilityPercentage,
+            timestamp: Date.now(),
+            ...params.eventProperties,
+          },
+        },
+        context,
+      );
+    },
+    options: {
+      threshold: 0.3,
+      freezeOnceVisible: true,
+    },
+  },
+
+  pageView: {
+    onPageView: (params, context) => {
+      sendAmplitudeEvent(
+        {
+          eventType: "Page Viewed",
+          eventProperties: {
+            page_path: params.pagePath || window.location.pathname,
+            page_title: params.pageTitle || document.title,
+            referrer: params.referrer || document.referrer,
+            timestamp: Date.now(),
+            ...params.eventProperties,
+          },
+        },
+        context,
+      );
+    },
+  },
+});
+
+export { AmpTrack, useAmpTracker };
+```
+
+### 3. 성능 모니터링 인스턴스
+
+```tsx
+// trackers/performanceTracker.ts
+import { createTracker } from "@offlegacy/event-tracker";
+
+interface PerformanceContext {
+  userId?: string;
+  sessionId?: string;
+  deviceInfo?: {
+    userAgent: string;
+    screenSize: string;
+    connectionType?: string;
+  };
+}
+
+interface PerformanceEventParams {
+  metricName: string;
+  value: number;
+  unit?: string;
+  category?: "navigation" | "resource" | "user" | "custom";
+  metadata?: Record<string, any>;
+}
+
+// 성능 이벤트 전송 함수
+const sendPerformanceEvent = (params: PerformanceEventParams, context: PerformanceContext) => {
+  // 성능 모니터링 서비스로 전송
+  performanceAPI.track(params.metricName, {
+    value: params.value,
+    unit: params.unit,
+    category: params.category,
+    user_id: context.userId,
+    session_id: context.sessionId,
+    device_info: context.deviceInfo,
+    timestamp: Date.now(),
+    ...params.metadata,
+  });
+};
+
+// 성능 트래커 인스턴스
+export const [PerfTrack, usePerfTracker] = createTracker<PerformanceContext, PerformanceEventParams>({
+  init: (initialContext, setContext) => {
+    const sessionId = `perf_session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+    // 디바이스 정보 수집
+    const deviceInfo = {
+      userAgent: navigator.userAgent,
+      screenSize: `${screen.width}x${screen.height}`,
+      connectionType: (navigator as any).connection?.effectiveType,
+    };
+
+    setContext({
+      ...initialContext,
+      sessionId,
+      deviceInfo,
+    });
+  },
+
+  send: (params, context) => {
+    sendPerformanceEvent(params, context);
+  },
+
+  DOMEvents: {
+    onClick: (params, context) => {
+      // 클릭 응답 시간 측정
+      const clickTime = performance.now();
+      sendPerformanceEvent(
+        {
+          metricName: "click_response_time",
+          value: clickTime,
+          unit: "ms",
+          category: "user",
+          metadata: {
+            button_id: params.buttonId,
+            interaction_type: "click",
+          },
+        },
+        context,
+      );
+    },
+  },
+
+  pageView: {
+    onPageView: (params, context) => {
+      // 페이지 로드 성능 측정
+      const navigationEntry = performance.getEntriesByType("navigation")[0] as PerformanceNavigationTiming;
+
+      if (navigationEntry) {
+        sendPerformanceEvent(
+          {
+            metricName: "page_load_time",
+            value: navigationEntry.loadEventEnd - navigationEntry.loadEventStart,
+            unit: "ms",
+            category: "navigation",
+            metadata: {
+              page_path: params.pagePath || window.location.pathname,
+              dom_content_loaded: navigationEntry.domContentLoadedEventEnd - navigationEntry.domContentLoadedEventStart,
+              first_paint: performance.getEntriesByName("first-paint")[0]?.startTime || 0,
+            },
+          },
+          context,
+        );
+      }
+    },
+  },
+});
+
+export { PerfTrack, usePerfTracker };
+```
+
+### 4. 에러 추적 인스턴스
+
+```tsx
+// trackers/errorTracker.ts
+import { createTracker } from "@offlegacy/event-tracker";
+
+interface ErrorContext {
+  userId?: string;
+  sessionId?: string;
+  pageInfo?: {
+    url: string;
+    title: string;
+    referrer: string;
+  };
+}
+
+interface ErrorEventParams {
+  errorType: "javascript" | "network" | "resource" | "custom";
+  errorMessage: string;
+  errorStack?: string;
+  severity?: "low" | "medium" | "high" | "critical";
+  metadata?: Record<string, any>;
+}
+
+// 에러 이벤트 전송 함수
+const sendErrorEvent = (params: ErrorEventParams, context: ErrorContext) => {
+  // 에러 추적 서비스로 전송
+  errorTracking.captureException(new Error(params.errorMessage), {
+    tags: {
+      error_type: params.errorType,
+      severity: params.severity || "medium",
+    },
+    extra: {
+      error_stack: params.errorStack,
+      user_id: context.userId,
+      session_id: context.sessionId,
+      page_info: context.pageInfo,
+      ...params.metadata,
+    },
+  });
+};
+
+// 에러 트래커 인스턴스
+export const [ErrorTrack, useErrorTracker] = createTracker<ErrorContext, ErrorEventParams>({
+  init: (initialContext, setContext) => {
+    const sessionId = `error_session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+    const pageInfo = {
+      url: window.location.href,
+      title: document.title,
+      referrer: document.referrer,
+    };
+
+    setContext({
+      ...initialContext,
+      sessionId,
+      pageInfo,
+    });
+
+    // 전역 에러 핸들러 설정
+    window.addEventListener("error", (event) => {
+      sendErrorEvent(
+        {
+          errorType: "javascript",
+          errorMessage: event.message,
+          errorStack: event.error?.stack,
+          severity: "high",
+          metadata: {
+            filename: event.filename,
+            lineno: event.lineno,
+            colno: event.colno,
+          },
+        },
+        { ...initialContext, sessionId, pageInfo },
+      );
+    });
+
+    // 네트워크 에러 핸들러
+    window.addEventListener("unhandledrejection", (event) => {
+      sendErrorEvent(
+        {
+          errorType: "network",
+          errorMessage: event.reason?.message || "Unhandled Promise Rejection",
+          errorStack: event.reason?.stack,
+          severity: "medium",
+          metadata: {
+            promise_reason: event.reason,
+          },
+        },
+        { ...initialContext, sessionId, pageInfo },
+      );
+    });
+  },
+
+  send: (params, context) => {
+    sendErrorEvent(params, context);
+  },
+});
+
+export { ErrorTrack, useErrorTracker };
+```
+
+## 실제 사용 예제
+
+### 1. 다중 인스턴스 조합 사용
+
+```tsx
+// components/MultiTrackerApp.tsx
+import { GATrack, useGATracker } from "../trackers/ga4Tracker";
+import { AmpTrack, useAmpTracker } from "../trackers/amplitudeTracker";
+import { PerfTrack, usePerfTracker } from "../trackers/performanceTracker";
+import { ErrorTrack, useErrorTracker } from "../trackers/errorTracker";
+
+function MultiTrackerApp() {
+  return (
+    // Google Analytics 트래커
+    <GATrack.Provider
+      initialContext={{
+        userId: "user-123",
+      }}
+    >
+      {/* Amplitude 트래커 */}
+      <AmpTrack.Provider
+        initialContext={{
+          userId: "user-123",
+          userProperties: {
+            plan: "premium",
+            signup_date: "2024-01-01",
+          },
+        }}
+      >
+        {/* 성능 모니터링 트래커 */}
+        <PerfTrack.Provider
+          initialContext={{
+            userId: "user-123",
+          }}
+        >
+          {/* 에러 추적 트래커 */}
+          <ErrorTrack.Provider
+            initialContext={{
+              userId: "user-123",
+            }}
+          >
+            <MainContent />
+          </ErrorTrack.Provider>
+        </PerfTrack.Provider>
+      </AmpTrack.Provider>
+    </GATrack.Provider>
+  );
+}
+
+function MainContent() {
+  const { track: gaTrack } = useGATracker();
+  const { track: ampTrack } = useAmpTracker();
+  const { track: perfTrack } = usePerfTracker();
+  const { track: errorTrack } = useErrorTracker();
+
+  const handlePurchase = async () => {
+    try {
+      // 구매 로직
+      const purchaseResult = await processPurchase();
+
+      // 각 서비스별로 다른 형식의 이벤트 전송
+
+      // Google Analytics - 전자상거래 이벤트
+      await gaTrack({
+        eventName: "purchase",
+        eventCategory: "ecommerce",
+        eventAction: "purchase",
+        eventValue: purchaseResult.amount,
+        customParameters: {
+          transaction_id: purchaseResult.transactionId,
+          currency: "KRW",
+          items: purchaseResult.items,
+        },
+      });
+
+      // Amplitude - 사용자 행동 이벤트
+      await ampTrack({
+        eventType: "Purchase Completed",
+        eventProperties: {
+          amount: purchaseResult.amount,
+          currency: "KRW",
+          transaction_id: purchaseResult.transactionId,
+          item_count: purchaseResult.items.length,
+          payment_method: purchaseResult.paymentMethod,
+        },
+        userProperties: {
+          last_purchase_date: new Date().toISOString(),
+          total_purchases: (purchaseResult.userTotalPurchases || 0) + 1,
+        },
+      });
+
+      // 성능 모니터링 - 구매 완료 시간
+      await perfTrack({
+        metricName: "purchase_completion_time",
+        value: Date.now() - purchaseResult.startTime,
+        unit: "ms",
+        category: "user",
+        metadata: {
+          purchase_amount: purchaseResult.amount,
+          item_count: purchaseResult.items.length,
+        },
+      });
+    } catch (error) {
+      // 에러 추적
+      await errorTrack({
+        errorType: "custom",
+        errorMessage: "Purchase failed",
+        errorStack: error.stack,
+        severity: "high",
+        metadata: {
+          purchase_amount: purchaseResult?.amount,
+          error_details: error.message,
+        },
+      });
+    }
+  };
+
+  return (
+    <div>
+      <h1>다중 트래커 예제</h1>
+
+      {/* Google Analytics 페이지 뷰 */}
+      <GATrack.PageView
+        params={{
+          pagePath: "/multi-tracker-example",
+          pageTitle: "다중 트래커 예제 페이지",
+          category: "demo",
+        }}
+      />
+
+      {/* Amplitude 페이지 뷰 */}
+      <AmpTrack.PageView
+        params={{
+          pagePath: "/multi-tracker-example",
+          pageTitle: "다중 트래커 예제 페이지",
+          eventProperties: {
+            page_category: "demo",
+            user_segment: "premium",
+          },
+        }}
+      />
+
+      {/* 성능 모니터링 페이지 뷰 */}
+      <PerfTrack.PageView
+        params={{
+          pagePath: "/multi-tracker-example",
+        }}
+      />
+
+      <button onClick={handlePurchase}>구매하기 (다중 트래킹)</button>
+    </div>
+  );
+}
+```
+
+### 2. 조건부 인스턴스 사용
+
+```tsx
+// components/ConditionalTracker.tsx
+import { GATrack, useGATracker } from "../trackers/ga4Tracker";
+import { AmpTrack, useAmpTracker } from "../trackers/amplitudeTracker";
+
+function ConditionalTracker({ userType, trackingConsent }: { userType: "free" | "premium"; trackingConsent: boolean }) {
+  if (!trackingConsent) {
+    return <div>트래킹이 비활성화되었습니다.</div>;
+  }
+
+  // 사용자 타입에 따라 다른 트래커 사용
+  if (userType === "premium") {
+    return (
+      <AmpTrack.Provider
+        initialContext={{
+          userId: "premium-user-123",
+          userProperties: {
+            plan: "premium",
+            features: ["advanced_analytics", "custom_events"],
+          },
+        }}
+      >
+        <PremiumUserContent />
+      </AmpTrack.Provider>
+    );
+  }
+
+  return (
+    <GATrack.Provider
+      initialContext={{
+        userId: "free-user-123",
+      }}
+    >
+      <FreeUserContent />
+    </GATrack.Provider>
+  );
+}
+
+function PremiumUserContent() {
+  const { track } = useAmpTracker();
+
+  const handlePremiumAction = async () => {
+    await track({
+      eventType: "Premium Feature Used",
+      eventProperties: {
+        feature_name: "advanced_analytics",
+        usage_count: 1,
+        timestamp: Date.now(),
+      },
+      userProperties: {
+        last_premium_action: new Date().toISOString(),
+      },
+    });
+  };
+
+  return (
+    <div>
+      <h2>프리미엄 사용자 콘텐츠</h2>
+      <button onClick={handlePremiumAction}>프리미엄 기능 사용</button>
+    </div>
+  );
+}
+
+function FreeUserContent() {
+  const { track } = useGATracker();
+
+  const handleUpgradeClick = async () => {
+    await track({
+      eventName: "upgrade_click",
+      eventCategory: "conversion",
+      eventAction: "click",
+      eventLabel: "upgrade_button",
+      customParameters: {
+        button_location: "header",
+        current_plan: "free",
+      },
+    });
+  };
+
+  return (
+    <div>
+      <h2>무료 사용자 콘텐츠</h2>
+      <button onClick={handleUpgradeClick}>프리미엄으로 업그레이드</button>
+    </div>
+  );
+}
+```
+
+### 3. 인스턴스 팩토리 패턴
+
+```tsx
+// utils/trackerFactory.ts
+import { createTracker } from "@offlegacy/event-tracker";
+
+interface TrackerConfig {
+  type: "ga4" | "amplitude" | "performance" | "error";
+  enabled: boolean;
+  apiKey?: string;
+  customConfig?: Record<string, any>;
+}
+
+// 트래커 팩토리 클래스
+class TrackerFactory {
+  private static instances = new Map<string, any>();
+
+  static createTracker(config: TrackerConfig) {
+    const key = `${config.type}_${config.enabled}`;
+
+    if (this.instances.has(key)) {
+      return this.instances.get(key);
+    }
+
+    let tracker;
+
+    switch (config.type) {
+      case "ga4":
+        tracker = this.createGA4Tracker(config);
+        break;
+      case "amplitude":
+        tracker = this.createAmplitudeTracker(config);
+        break;
+      case "performance":
+        tracker = this.createPerformanceTracker(config);
+        break;
+      case "error":
+        tracker = this.createErrorTracker(config);
+        break;
+      default:
+        throw new Error(`Unknown tracker type: ${config.type}`);
+    }
+
+    this.instances.set(key, tracker);
+    return tracker;
+  }
+
+  private static createGA4Tracker(config: TrackerConfig) {
+    return createTracker({
+      // GA4 설정
+      init: (initialContext, setContext) => {
+        if (!config.enabled) return;
+
+        // GA4 초기화 로직
+        if (config.apiKey) {
+          window.gtag("config", config.apiKey);
+        }
+
+        setContext({
+          ...initialContext,
+          sessionId: `ga_${Date.now()}`,
+        });
+      },
+
+      send: (params, context) => {
+        if (!config.enabled) return;
+
+        window.gtag("event", params.eventName, {
+          ...params,
+          user_id: context.userId,
+        });
+      },
+
+      DOMEvents: {
+        onClick: (params, context) => {
+          if (!config.enabled) return;
+
+          window.gtag("event", "click", {
+            button_id: params.buttonId,
+            user_id: context.userId,
+          });
+        },
+      },
+    });
+  }
+
+  private static createAmplitudeTracker(config: TrackerConfig) {
+    return createTracker({
+      // Amplitude 설정
+      init: (initialContext, setContext) => {
+        if (!config.enabled || !config.apiKey) return;
+
+        // Amplitude 초기화 로직
+        import("@amplitude/analytics-browser").then(({ default: amplitude }) => {
+          amplitude.init(config.apiKey!);
+        });
+
+        setContext({
+          ...initialContext,
+          sessionId: Date.now(),
+        });
+      },
+
+      send: (params, context) => {
+        if (!config.enabled) return;
+
+        // Amplitude 이벤트 전송
+        import("@amplitude/analytics-browser").then(({ default: amplitude }) => {
+          amplitude.track(params.eventType, {
+            ...params.eventProperties,
+            user_id: context.userId,
+          });
+        });
+      },
+    });
+  }
+
+  private static createPerformanceTracker(config: TrackerConfig) {
+    return createTracker({
+      // 성능 모니터링 설정
+      init: (initialContext, setContext) => {
+        if (!config.enabled) return;
+
+        setContext({
+          ...initialContext,
+          sessionId: `perf_${Date.now()}`,
+        });
+      },
+
+      send: (params, context) => {
+        if (!config.enabled) return;
+
+        // 성능 메트릭 전송
+        console.log("Performance metric:", params);
+      },
+    });
+  }
+
+  private static createErrorTracker(config: TrackerConfig) {
+    return createTracker({
+      // 에러 추적 설정
+      init: (initialContext, setContext) => {
+        if (!config.enabled) return;
+
+        setContext({
+          ...initialContext,
+          sessionId: `error_${Date.now()}`,
+        });
+
+        // 전역 에러 핸들러 설정
+        window.addEventListener("error", (event) => {
+          console.error("Global error:", event);
+        });
+      },
+
+      send: (params, context) => {
+        if (!config.enabled) return;
+
+        // 에러 이벤트 전송
+        console.error("Error event:", params);
+      },
+    });
+  }
+
+  static clearInstances() {
+    this.instances.clear();
+  }
+}
+
+export { TrackerFactory };
+```
+
+## 고급 패턴
+
+### 1. 인스턴스 조합 훅
+
+```tsx
+// hooks/useMultiTracker.ts
+import { useGATracker } from "../trackers/ga4Tracker";
+import { useAmpTracker } from "../trackers/amplitudeTracker";
+import { usePerfTracker } from "../trackers/performanceTracker";
+import { useErrorTracker } from "../trackers/errorTracker";
+
+export function useMultiTracker() {
+  const gaTracker = useGATracker();
+  const ampTracker = useAmpTracker();
+  const perfTracker = usePerfTracker();
+  const errorTracker = useErrorTracker();
+
+  const trackAll = async (eventName: string, params: any) => {
+    try {
+      // 모든 트래커에 이벤트 전송
+      await Promise.allSettled([
+        gaTracker.track({ eventName, ...params }),
+        ampTracker.track({ eventType: eventName, eventProperties: params }),
+        perfTracker.track({ metricName: eventName, value: 1, category: "custom" }),
+      ]);
+    } catch (error) {
+      await errorTracker.track({
+        errorType: "custom",
+        errorMessage: `Failed to track event: ${eventName}`,
+        errorStack: error.stack,
+        severity: "medium",
+        metadata: { eventName, params },
+      });
+    }
+  };
+
+  const trackConditional = async (
+    eventName: string,
+    params: any,
+    conditions: { ga?: boolean; amp?: boolean; perf?: boolean },
+  ) => {
+    const promises = [];
+
+    if (conditions.ga) {
+      promises.push(gaTracker.track({ eventName, ...params }));
+    }
+
+    if (conditions.amp) {
+      promises.push(ampTracker.track({ eventType: eventName, eventProperties: params }));
+    }
+
+    if (conditions.perf) {
+      promises.push(perfTracker.track({ metricName: eventName, value: 1, category: "custom" }));
+    }
+
+    try {
+      await Promise.allSettled(promises);
+    } catch (error) {
+      await errorTracker.track({
+        errorType: "custom",
+        errorMessage: `Failed to track conditional event: ${eventName}`,
+        errorStack: error.stack,
+        severity: "medium",
+        metadata: { eventName, params, conditions },
+      });
+    }
+  };
+
+  return {
+    gaTracker,
+    ampTracker,
+    perfTracker,
+    errorTracker,
+    trackAll,
+    trackConditional,
+  };
+}
+```
+
+### 2. 인스턴스 관리자
+
+```tsx
+// managers/TrackerManager.ts
+class TrackerManager {
+  private trackers = new Map<string, any>();
+  private configs = new Map<string, any>();
+
+  register(name: string, tracker: any, config: any) {
+    this.trackers.set(name, tracker);
+    this.configs.set(name, config);
+  }
+
+  get(name: string) {
+    return this.trackers.get(name);
+  }
+
+  enable(name: string) {
+    const config = this.configs.get(name);
+    if (config) {
+      config.enabled = true;
+    }
+  }
+
+  disable(name: string) {
+    const config = this.configs.get(name);
+    if (config) {
+      config.enabled = false;
+    }
+  }
+
+  trackAll(eventName: string, params: any) {
+    this.trackers.forEach((tracker, name) => {
+      const config = this.configs.get(name);
+      if (config?.enabled) {
+        try {
+          tracker.track({ eventName, ...params });
+        } catch (error) {
+          console.error(`Failed to track with ${name}:`, error);
+        }
+      }
+    });
+  }
+
+  getStatus() {
+    const status: Record<string, boolean> = {};
+    this.configs.forEach((config, name) => {
+      status[name] = config.enabled;
+    });
+    return status;
+  }
+}
+
+export const trackerManager = new TrackerManager();
+```
diff --git a/docs/src/content/ko/docs/introduction.mdx b/docs/src/content/ko/docs/introduction.mdx
index 03c0269..7b9c0a4 100644
--- a/docs/src/content/ko/docs/introduction.mdx
+++ b/docs/src/content/ko/docs/introduction.mdx
@@ -36,14 +36,14 @@ function App() {
 
 Event Tracker는 개발자 경험과 애플리케이션 성능을 모두 고려한 다양한 기능을 제공합니다.
 
-| Feature                       | Description                                                                                                                                                                        |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 타입 안정성을 갖춘 선언적 API | [TypeScript](https://www.typescriptlang.org/)를 완벽하게 지원하여 개발 과정에서의 오류를 줄이고, 자동 완성을 통해 생산성을 높입니다.                                               |
-| 강력한 데이터 타입 검증       | [Zod](https://zod.dev/)를 활용한 스키마 기반 검증으로 데이터의 신뢰성을 확보합니다.                                                                                                |
-| 최적화된 성능                 | 배칭이나 디바운스, 스로틀링 기능을 통해 네트워크 요청을 최소화하고 애플리케이션 성능에 미치는 영향을 줄입니다.                                                                     |
-| 실행 순서 보장                | 비동기적으로 발생하는 이벤트들에 대해서도 의도한 순서대로 처리되도록 보장합니다.                                                                                                   |
-| 애널리틱스 도구 독립성        | 특정 애널리틱스 서비스에 종속되지 않고, 원하는 모든 도구([Google Analytics](https://analytics.google.com/), [Amplitude](https://amplitude.com/) 등)와 유연하게 통합할 수 있습니다. |
-| 명확한 관심사 분리            | 트래킹 로직과 비즈니스 로직을 효과적으로 분리하여 코드의 유지보수성과 확장성을 극대화합니다.                                                                                       |
+| Feature                 | Description                                                                                                                                                                     |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 선언적 API              | 트래킹을 위한 별도의 설정이나 복잡한 코드 없이, 컴포넌트 형태로 직관적으로 선언할 수 있습니다.                                                                                  |
+| 애널리틱스 도구 독립성  | [Google Analytics](https://analytics.google.com/), [Amplitude](https://amplitude.com/) 등 어떤 도구든 자유롭게 연동할 수 있어, 기존 인프라를 변경하지 않고도 도입이 가능합니다. |
+| 명확한 관심사 분리      | 트래킹 로직을 비즈니스 코드에서 완전히 분리함으로써 코드의 가독성, 테스트 용이성, 유지보수성을 모두 향상시킵니다.                                                               |
+| 최적화된 성능           | 배칭, 디바운스, 스로틀링 등 네트워크 요청을 최소화하는 다양한 전략이 내장되어 있어, 성능 저하 없이 안정적으로 트래킹할 수 있습니다.                                             |
+| 실행 순서 보장          | 비동기 상황에서도 이벤트가 의도한 순서대로 처리되도록 설계되어, 복잡한 사용자 흐름에서도 정확한 트래킹이 가능합니다.                                                            |
+| 강력한 데이터 타입 검증 | [Zod](https://zod.dev/) 기반의 정적 스키마 검증으로 런타임 이전에 오류를 방지하고, 수집되는 이벤트 데이터의 신뢰도를 보장합니다.                                                |
 
 ## 핵심 개념
 
diff --git a/docs/src/content/ko/docs/use-tracker.mdx b/docs/src/content/ko/docs/use-tracker.mdx
index 81385cb..d0cf124 100644
--- a/docs/src/content/ko/docs/use-tracker.mdx
+++ b/docs/src/content/ko/docs/use-tracker.mdx
@@ -1,32 +1,49 @@
+import { Callout } from "nextra/components";
+
 # useTracker
 
-[`createTracker`](/docs/create-tracker)에서 두 번째 배열 항목으로 반환되는 커스텀 React hook입니다. 이 훅은 컴포넌트 내에서 이벤트 트래킹 기능과 컨텍스트 관리에 접근할 수 있게 합니다.
+React 컴포넌트 내부에서 트래킹 컨텍스트를 설정하거나, 명령형 방식으로 이벤트를 추적할 수 있습니다. `useTracker`는 [`createTracker`](/docs/create-tracker)에서 반환되는 두 번째 항목입니다.
 
-예를 들어, 특정 비동기 작업이 완료된 후 또는 사용자의 특정 입력 값에 따라 이벤트를 발생시켜야 할 때 유용합니다.
+주로 컴포넌트 마운트 이후, 사용자 입력이나 비동기 작업이 완료된 시점에서 수동으로 이벤트를 트리거할 때 사용됩니다.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
 
-const [Track, useTracker] = createTracker({...})
+const [Track, useTracker] = createTracker({...});
 
 function MyComponent() {
   const { setContext, getContext, track, trackWithSchema } = useTracker();
 
-  return (
-    // 컴포넌트 내용
-  );
+  // 명령형 이벤트 트래킹
 }
 ```
 
-### 반환 값
+## Signature
 
-이 hook은 다음 속성을 포함하는 객체를 반환합니다:
+```ts
+function useTracker(): {
+  send: (params: EventParamsWithContext<TContext, TEventParams>) => TaskReturnType<TTaskResult> | undefined;
+  setContext: (context: TContext | ((prevContext: TContext) => TContext)) => void;
+  getContext: () => TContext;
+  trackWithSchema: TUseTrackerTrackWithSchema;
+  track: TUseTrackerTrack;
+};
+```
 
-#### setContext
+## Reference
 
-- Type: `(context: Context) => void`
-- 현재 트래킹 컨텍스트를 설정하거나 업데이트합니다.
-- 사용자 정보, 세션 데이터 등을 업데이트하는 데 사용할 수 있습니다.
+### Returns
+
+| 속성              | 타입                                                            | 설명                                        |
+| ----------------- | --------------------------------------------------------------- | ------------------------------------------- |
+| `setContext`      | `(context: Context \| (prev: Context) => Context) => void`      | 트래킹 컨텍스트 설정 또는 업데이트          |
+| `getContext`      | `() => Context`                                                 | 현재 트래킹 컨텍스트 반환                   |
+| `track`           | `Record<keyof EventNames, (params, options?) => void>`          | 일반 이벤트 추적 함수 집합                  |
+| `trackWithSchema` | `Record<keyof Schemas, ({ schema, params }, options?) => void>` | 스키마 기반 검증 포함 이벤트 추적 함수 집합 |
+
+---
+
+#### `setContext`
 
 ```tsx
 const { setContext } = useTracker();
@@ -41,11 +58,10 @@ setContext((prev) => ({
 }));
 ```
 
-#### getContext
+- 현재 트래킹 컨텍스트를 설정하거나 업데이트합니다.
+- 사용자 정보, 세션 데이터 등을 업데이트하는 데 사용할 수 있습니다.
 
-- Type: `() => Context`
-- 현재 트래킹 컨텍스트를 반환합니다.
-- 현재 트래킹 상태에 접근하는 데 유용합니다.
+#### `getContext`
 
 ```tsx
 const { getContext } = useTracker();
@@ -54,12 +70,10 @@ const currentContext = getContext();
 console.log("Current user:", currentContext.userId);
 ```
 
-#### track
+- 현재 트래킹 컨텍스트를 반환합니다.
+- 현재 트래킹 상태에 접근하는 데 유용합니다.
 
-- Type: `Record<keyof EventNames, (params: EventParams, options?: TrackingOptions) => void>`
-- 모든 구성된 이벤트 트래킹 함수를 포함하는 객체
-- key는 트래커 구성에 정의된 이벤트 이름과 일치합니다.
-- 고급 제어를 위한 선택적 `TrackingOptions`를 허용합니다.
+#### `track`
 
 ```tsx
 const { track } = useTracker();
@@ -95,12 +109,11 @@ track.onClick(
 track.onImpression({ elementId: "hero" });
 ```
 
-#### trackWithSchema
-
-- Type: `Record<keyof Schemas, (params: SchemaParams, options?: TrackingOptions) => void>`
-- 스키마 검증이 포함된 모든 구성된 이벤트 트래킹 함수를 포함하는 객체
+- 모든 구성된 이벤트 트래킹 함수를 포함하는 객체
 - key는 트래커 구성에 정의된 이벤트 이름과 일치합니다.
-- 고급 제어를 위한 선택적 `TrackingOptions`를 허용합니다.
+- 고급 제어를 위한 선택적 TrackingOptions를 허용합니다.
+
+#### `trackWithSchema`
 
 ```tsx
 const { trackWithSchema } = useTracker();
@@ -131,39 +144,65 @@ trackWithSchema.onImpression(
 );
 ```
 
-### TrackingOptions
+- 스키마 검증이 포함된 모든 구성된 이벤트 트래킹 함수를 포함하는 객체
+- key는 트래커 구성에 정의된 이벤트 이름과 일치합니다.
+- 고급 제어를 위한 선택적 TrackingOptions를 허용합니다.
 
-`track`과 `trackWithSchema` 메서드 모두 다음 옵션을 포함하는 선택적 두 번째 매개변수를 허용합니다:
+## TrackingOptions
 
-- `enabled?: boolean | ((context: Context, params: EventParams) => boolean)` - 이벤트 추적을 조건부로 활성화/비활성화
-- `debounce?: DebounceConfig` - 연속적인 이벤트 발생을 방지하는 디바운스 설정
-- `throttle?: ThrottleConfig` - 이벤트 발생 빈도를 제한하는 스로틀 설정
+`track`, `trackWithSchema` 함수는 모두 아래 옵션을 선택적으로 받을 수 있습니다:
 
-**참고:** `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다.
+| 옵션       | 타입                                        | 설명                                  |
+| ---------- | ------------------------------------------- | ------------------------------------- |
+| `enabled`  | `boolean \| ((context, params) => boolean)` | 조건부로 이벤트 추적 활성화 여부 설정 |
+| `debounce` | `DebounceConfig`                            | 연속된 이벤트를 제한 (후행 호출 1회)  |
+| `throttle` | `ThrottleConfig`                            | 짧은 시간 내 중복 호출 방지           |
 
-#### DebounceConfig
+<Callout type="info">
+  참고: `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다. 타입 에러를 발생시켜 사전에 방지합니다.
+</Callout>
 
-```tsx
+#### `DebounceConfig`
+
+```ts
 interface DebounceConfig {
-  delay: number; // 밀리초 단위의 지연 시간
-  leading?: boolean; // 선행 에지에서 실행 (기본값: false)
-  trailing?: boolean; // 후행 에지에서 실행 (기본값: true)
+  delay: number;
+  leading?: boolean; // 기본값: false
+  trailing?: boolean; // 기본값: true
 }
 ```
 
-#### ThrottleConfig
+#### `ThrottleConfig`
 
-```tsx
+```ts
 interface ThrottleConfig {
-  delay: number; // 밀리초 단위의 지연 시간
-  leading?: boolean; // 선행 에지에서 실행 (기본값: true)
-  trailing?: boolean; // 후행 에지에서 실행 (기본값: false)
+  delay: number;
+  leading?: boolean; // 기본값: true
+  trailing?: boolean; // 기본값: false
 }
 ```
 
-### 사용 예제
+## Best Practices
+
+### 컨텍스트 관리
+
+- 여러 이벤트에 영향을 주는 전역 상태를 업데이트하기 위해 `setContext`를 사용하세요.
+- 이전 상태에 기반한 업데이트를 위해 `setContext`의 함수 형태를 고려하세요.
+
+### 이벤트 트래킹
+
+- 가능한 경우 `track` 또는 `trackWithSchema`에서 이벤트 함수를 사용하세요.
 
-다음은 이 hook을 사용하는 예제입니다:
+### 성능 최적화
+
+- 렌더링 중에 이벤트 트래킹 함수를 호출하지 마세요.
+- 콜백 또는 효과를 사용하세요.
+- [배칭](/docs/batching)을 사용하여 성능을 향상시키세요.
+- [데이터 타입 검증](/docs/data-type-validation)을 사용하여 데이터 타입 안전성을 확인하세요.
+
+## Examples
+
+### 기본
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
@@ -205,21 +244,3 @@ function UserProfile({ userId }) {
   );
 }
 ```
-
-### Best Practices
-
-1. **컨텍스트 업데이트**
-
-   - 여러 이벤트에 영향을 주는 전역 상태를 업데이트하기 위해 `setContext`를 사용하세요.
-   - 이전 상태에 기반한 업데이트를 위해 `setContext`의 함수 형태를 고려하세요.
-
-2. **이벤트 트래킹**
-
-   - 가능한 경우 `track` 또는 `trackWithSchema`에서 이벤트 함수를 사용하세요.
-
-3. **성능**
-
-   - 렌더링 중에 이벤트 트래킹 함수를 호출하지 마세요.
-   - 콜백 또는 효과를 사용하세요.
-   - [배칭](/docs/batching)을 사용하여 성능을 향상시키세요.
-   - [데이터 타입 검증](/docs/data-type-validation)을 사용하여 데이터 타입 안전성을 확인하세요.
diff --git a/docs/src/content/ko/docs/why-event-tracker.mdx b/docs/src/content/ko/docs/why-event-tracker.mdx
index 83331c5..9079f1c 100644
--- a/docs/src/content/ko/docs/why-event-tracker.mdx
+++ b/docs/src/content/ko/docs/why-event-tracker.mdx
@@ -8,10 +8,6 @@ import { Steps } from "nextra/components";
 
 다음은 전통적인 이벤트 트래킹 방식의 문제점을 보여주는 예시입니다.
 
-- **Prop Drilling의 고통**: 이벤트 트래킹에 필요한 데이터를 하위 컴포넌트까지 전달하기 위해 수많은 계층을 거쳐 prop을 내려보내야 하는 경우가 많습니다. 이는 코드의 가독성을 해치고 유지보수를 어렵게 만듭니다.
-- **로직의 강한 결합**: 비즈니스 로직과 이벤트 트래킹 로직이 한데 섞여 코드의 복잡도를 높이고, 각 로직의 독립적인 테스트와 수정을 어렵게 만듭니다.
-- **보일러플레이트 코드 증가**: 반복적인 트래킹 코드 작성은 개발 생산성을 저해하는 요인이 됩니다.
-
 ```tsx {8,15, 24-31}
 function Page() {
   const { user, userId } = useUser(); // 사용자 정보와 ID를 가져옵니다.
@@ -55,6 +51,10 @@ function Counter({ userId }: { userId: string }) {
 }
 ```
 
+- **Prop Drilling의 고통**: 이벤트 트래킹에 필요한 데이터를 하위 컴포넌트까지 전달하기 위해 수많은 계층을 거쳐 prop을 내려보내야 하는 경우가 많습니다. 이는 코드의 가독성을 해치고 유지보수를 어렵게 만듭니다.
+- **로직의 강한 결합**: 비즈니스 로직과 이벤트 트래킹 로직이 한데 섞여 코드의 복잡도를 높이고, 각 로직의 독립적인 테스트와 수정을 어렵게 만듭니다.
+- **보일러플레이트 코드 증가**: 반복적인 트래킹 코드 작성은 개발 생산성을 저해하는 요인이 됩니다.
+
 ## Event Tracker가 제시하는 새로운 패러다임
 
 Event Tracker는 이벤트 트래킹을 위한 새로운 패러다임을 소개합니다.
diff --git a/docs/src/content/ko/docs/with-google-analytics-example.mdx b/docs/src/content/ko/docs/with-google-analytics-example.mdx
new file mode 100644
index 0000000..3444078
--- /dev/null
+++ b/docs/src/content/ko/docs/with-google-analytics-example.mdx
@@ -0,0 +1,624 @@
+# Google Analytics 연동하기
+
+Google Analytics 4(GA4)와 함께 `event-tracker`를 사용하는 방법을 알아보겠습니다. GA4의 이벤트 기반 모델과 완벽하게 호환되어 효과적인 사용자 행동 분석이 가능합니다.
+
+## GA4 설정
+
+먼저 Google Analytics 4를 설정하고 `gtag` 함수를 사용할 수 있도록 준비합니다.
+
+### 1. GA4 스크립트 추가
+
+```html
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- Google Analytics 4 -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "GA_MEASUREMENT_ID");
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+```
+
+### 2. TypeScript 타입 정의
+
+```tsx
+// types/gtag.d.ts
+declare global {
+  interface Window {
+    gtag: (command: "config" | "event" | "set" | "consent", targetId: string, config?: Record<string, any>) => void;
+  }
+}
+
+export {};
+```
+
+## 기본 설정
+
+### GA4 트래커 생성
+
+```tsx
+// tracker/ga4Tracker.ts
+import { createTracker } from "@offlegacy/event-tracker";
+
+interface GA4Context {
+  userId?: string;
+  sessionId?: string;
+  pageTitle?: string;
+  pagePath?: string;
+  userProperties?: Record<string, any>;
+}
+
+interface GA4EventParams {
+  eventName: string;
+  eventCategory?: string;
+  eventAction?: string;
+  eventLabel?: string;
+  eventValue?: number;
+  customParameters?: Record<string, any>;
+}
+
+// GA4 이벤트 전송 함수
+const sendGA4Event = (params: GA4EventParams, context: GA4Context) => {
+  const { eventName, customParameters = {} } = params;
+
+  // GA4 이벤트 전송
+  window.gtag("event", eventName, {
+    // 기본 파라미터
+    event_category: params.eventCategory,
+    event_action: params.eventAction,
+    event_label: params.eventLabel,
+    value: params.eventValue,
+
+    // 사용자 속성
+    user_id: context.userId,
+    session_id: context.sessionId,
+
+    // 페이지 정보
+    page_title: context.pageTitle,
+    page_path: context.pagePath,
+
+    // 커스텀 파라미터
+    ...customParameters,
+  });
+};
+
+// GA4 트래커 인스턴스 생성
+export const [Track, useTracker] = createTracker<GA4Context, GA4EventParams>({
+  // 초기화 함수
+  init: (initialContext, setContext) => {
+    // 세션 ID 생성
+    const sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+    // 페이지 정보 설정
+    const pageTitle = document.title;
+    const pagePath = window.location.pathname;
+
+    setContext({
+      ...initialContext,
+      sessionId,
+      pageTitle,
+      pagePath,
+    });
+  },
+
+  // 이벤트 전송 함수
+  send: (params, context) => {
+    sendGA4Event(params, context);
+  },
+
+  // DOM 이벤트 핸들러
+  DOMEvents: {
+    onClick: (params, context) => {
+      sendGA4Event(
+        {
+          eventName: "click",
+          eventCategory: "engagement",
+          eventAction: "click",
+          eventLabel: params.eventLabel || "button_click",
+          customParameters: {
+            button_id: params.buttonId,
+            button_text: params.buttonText,
+            page_location: context.pagePath,
+            ...params.customParameters,
+          },
+        },
+        context,
+      );
+    },
+  },
+
+  // 노출 이벤트 설정
+  impression: {
+    onImpression: (params, context) => {
+      sendGA4Event(
+        {
+          eventName: "impression",
+          eventCategory: "engagement",
+          eventAction: "view",
+          eventLabel: params.elementId,
+          customParameters: {
+            element_id: params.elementId,
+            element_type: params.elementType,
+            visibility_percentage: params.visibilityPercentage,
+            ...params.customParameters,
+          },
+        },
+        context,
+      );
+    },
+    options: {
+      threshold: 0.5,
+      freezeOnceVisible: true,
+    },
+  },
+
+  // 페이지 뷰 설정
+  pageView: {
+    onPageView: (params, context) => {
+      sendGA4Event(
+        {
+          eventName: "page_view",
+          eventCategory: "navigation",
+          eventAction: "page_view",
+          eventLabel: params.pagePath || context.pagePath,
+          customParameters: {
+            page_title: params.pageTitle || context.pageTitle,
+            page_path: params.pagePath || context.pagePath,
+            referrer: params.referrer,
+            ...params.customParameters,
+          },
+        },
+        context,
+      );
+    },
+  },
+});
+
+export { Track, useTracker };
+```
+
+## 실제 사용 예제
+
+### 1. 전자상거래 사이트
+
+```tsx
+// components/ProductPage.tsx
+import { Track, useTracker } from "../tracker/ga4Tracker";
+
+interface Product {
+  id: string;
+  name: string;
+  price: number;
+  category: string;
+}
+
+function ProductPage({ product }: { product: Product }) {
+  const { track } = useTracker();
+
+  const handleAddToCart = async () => {
+    // 장바구니 추가 로직
+    await addToCart(product.id);
+
+    // GA4 이벤트 전송
+    await track({
+      eventName: "add_to_cart",
+      eventCategory: "ecommerce",
+      eventAction: "add",
+      eventLabel: product.name,
+      customParameters: {
+        currency: "KRW",
+        value: product.price,
+        items: [
+          {
+            item_id: product.id,
+            item_name: product.name,
+            item_category: product.category,
+            price: product.price,
+            quantity: 1,
+          },
+        ],
+      },
+    });
+  };
+
+  const handlePurchase = async () => {
+    // 구매 로직
+    const purchaseResult = await processPurchase(product.id);
+
+    if (purchaseResult.success) {
+      await track({
+        eventName: "purchase",
+        eventCategory: "ecommerce",
+        eventAction: "purchase",
+        eventLabel: product.name,
+        eventValue: product.price,
+        customParameters: {
+          currency: "KRW",
+          transaction_id: purchaseResult.transactionId,
+          value: product.price,
+          items: [
+            {
+              item_id: product.id,
+              item_name: product.name,
+              item_category: product.category,
+              price: product.price,
+              quantity: 1,
+            },
+          ],
+        },
+      });
+    }
+  };
+
+  return (
+    <Track.Provider
+      initialContext={{
+        userId: "user-123",
+        userProperties: {
+          user_type: "premium",
+          subscription_status: "active",
+        },
+      }}
+    >
+      {/* 페이지 뷰 트래킹 */}
+      <Track.PageView
+        params={{
+          pagePath: `/products/${product.id}`,
+          pageTitle: `${product.name} - 상품 상세`,
+          customParameters: {
+            product_id: product.id,
+            product_category: product.category,
+          },
+        }}
+      />
+
+      <div className="product-detail">
+        <h1>{product.name}</h1>
+        <p>₩{product.price.toLocaleString()}</p>
+
+        {/* 상품 이미지 노출 트래킹 */}
+        <Track.Impression
+          params={{
+            elementId: `product-image-${product.id}`,
+            elementType: "product_image",
+            visibilityPercentage: 80,
+            customParameters: {
+              product_id: product.id,
+              image_position: "main",
+            },
+          }}
+        >
+          <img src={product.imageUrl} alt={product.name} className="product-image" />
+        </Track.Impression>
+
+        {/* 장바구니 버튼 클릭 트래킹 */}
+        <Track.Click
+          params={{
+            buttonId: "add-to-cart",
+            buttonText: "장바구니 담기",
+            eventLabel: "add_to_cart_button",
+            customParameters: {
+              product_id: product.id,
+              product_name: product.name,
+              product_price: product.price,
+            },
+          }}
+        >
+          <button onClick={handleAddToCart}>장바구니 담기</button>
+        </Track.Click>
+
+        {/* 구매 버튼 - useTracker 사용 */}
+        <button onClick={handlePurchase}>바로 구매</button>
+      </div>
+    </Track.Provider>
+  );
+}
+```
+
+### 2. 블로그/콘텐츠 사이트
+
+```tsx
+// components/BlogPost.tsx
+import { Track } from "../tracker/ga4Tracker";
+
+function BlogPost({ post }: { post: BlogPost }) {
+  return (
+    <Track.Provider
+      initialContext={{
+        userId: "user-123",
+        userProperties: {
+          content_preference: "tech",
+          reading_level: "intermediate",
+        },
+      }}
+    >
+      {/* 페이지 뷰 트래킹 */}
+      <Track.PageView
+        params={{
+          pagePath: `/blog/${post.slug}`,
+          pageTitle: `${post.title} - 블로그`,
+          customParameters: {
+            post_id: post.id,
+            post_category: post.category,
+            post_author: post.author,
+            reading_time: post.readingTime,
+          },
+        }}
+      />
+
+      <article className="blog-post">
+        <h1>{post.title}</h1>
+
+        {/* 콘텐츠 노출 트래킹 */}
+        <Track.Impression
+          params={{
+            elementId: `post-content-${post.id}`,
+            elementType: "blog_content",
+            visibilityPercentage: 50,
+            customParameters: {
+              post_id: post.id,
+              content_length: post.content.length,
+            },
+          }}
+        >
+          <div className="post-content">{post.content}</div>
+        </Track.Impression>
+
+        {/* 소셜 공유 버튼들 */}
+        <div className="social-share">
+          <Track.Click
+            params={{
+              buttonId: "share-twitter",
+              buttonText: "트위터 공유",
+              eventLabel: "social_share_twitter",
+              customParameters: {
+                post_id: post.id,
+                platform: "twitter",
+              },
+            }}
+          >
+            <button>트위터 공유</button>
+          </Track.Click>
+
+          <Track.Click
+            params={{
+              buttonId: "share-facebook",
+              buttonText: "페이스북 공유",
+              eventLabel: "social_share_facebook",
+              customParameters: {
+                post_id: post.id,
+                platform: "facebook",
+              },
+            }}
+          >
+            <button>페이스북 공유</button>
+          </Track.Click>
+        </div>
+
+        {/* 댓글 작성 트래킹 */}
+        <Track.Click
+          params={{
+            buttonId: "comment-submit",
+            buttonText: "댓글 작성",
+            eventLabel: "comment_submit",
+            customParameters: {
+              post_id: post.id,
+              comment_type: "user_comment",
+            },
+          }}
+        >
+          <button>댓글 작성</button>
+        </Track.Click>
+      </article>
+    </Track.Provider>
+  );
+}
+```
+
+### 3. 성능 최적화와 조건부 트래킹
+
+```tsx
+// components/OptimizedTracking.tsx
+import { Track } from "../tracker/ga4Tracker";
+
+function OptimizedTracking() {
+  return (
+    <Track.Provider
+      initialContext={{
+        userId: "user-123",
+        trackingConsent: true,
+        userType: "premium",
+      }}
+    >
+      {/* 조건부 트래킹 - 프리미엄 사용자만 */}
+      <Track.Click
+        params={{
+          buttonId: "premium-feature",
+          buttonText: "프리미엄 기능",
+          eventLabel: "premium_feature_access",
+        }}
+        enabled={(context) => context.userType === "premium"}
+      >
+        <button>프리미엄 기능</button>
+      </Track.Click>
+
+      {/* 디바운스 적용 - 검색 입력 */}
+      <Track.Click
+        params={{
+          buttonId: "search-button",
+          buttonText: "검색",
+          eventLabel: "search_submit",
+        }}
+        debounce={{ delay: 300, leading: false, trailing: true }}
+      >
+        <button>검색</button>
+      </Track.Click>
+
+      {/* 스로틀 적용 - 빠른 액션 */}
+      <Track.Click
+        params={{
+          buttonId: "rapid-action",
+          buttonText: "빠른 액션",
+          eventLabel: "rapid_action_click",
+        }}
+        throttle={{ delay: 1000, leading: true, trailing: false }}
+      >
+        <button>빠른 액션</button>
+      </Track.Click>
+    </Track.Provider>
+  );
+}
+```
+
+## GA4 이벤트 매핑
+
+### 표준 GA4 이벤트
+
+```tsx
+// GA4 표준 이벤트 매핑
+const GA4StandardEvents = {
+  // 페이지 뷰
+  page_view: {
+    eventName: "page_view",
+    eventCategory: "navigation",
+  },
+
+  // 클릭 이벤트
+  click: {
+    eventName: "click",
+    eventCategory: "engagement",
+  },
+
+  // 노출 이벤트
+  impression: {
+    eventName: "impression",
+    eventCategory: "engagement",
+  },
+
+  // 전자상거래 이벤트
+  add_to_cart: {
+    eventName: "add_to_cart",
+    eventCategory: "ecommerce",
+  },
+
+  purchase: {
+    eventName: "purchase",
+    eventCategory: "ecommerce",
+  },
+
+  // 사용자 참여 이벤트
+  login: {
+    eventName: "login",
+    eventCategory: "authentication",
+  },
+
+  sign_up: {
+    eventName: "sign_up",
+    eventCategory: "authentication",
+  },
+};
+```
+
+## 고급 설정
+
+### 배칭을 통한 성능 최적화
+
+```tsx
+// tracker/ga4BatchTracker.ts
+import { createTracker } from "@offlegacy/event-tracker";
+
+export const [Track, useTracker] = createTracker<GA4Context, GA4EventParams>({
+  // ... 기존 설정 ...
+
+  // 배칭 설정
+  batch: {
+    enable: true,
+    interval: 2000,
+    thresholdSize: 10,
+    onFlush: async (batch, isBrowserClosing) => {
+      if (isBrowserClosing) {
+        // 브라우저 종료 시 sendBeacon 사용
+        navigator.sendBeacon("/api/analytics/batch", JSON.stringify(batch));
+        return;
+      }
+
+      // 배치 이벤트를 GA4 Measurement Protocol로 전송
+      await fetch("/api/analytics/batch", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(batch),
+      });
+    },
+    onError: (error) => {
+      console.error("GA4 배치 전송 오류:", error);
+    },
+  },
+});
+```
+
+### 스키마 검증 추가
+
+```tsx
+import { z } from "zod";
+
+// GA4 이벤트 스키마 정의
+const ga4Schemas = {
+  page_view: z.object({
+    pagePath: z.string(),
+    pageTitle: z.string().optional(),
+    referrer: z.string().optional(),
+  }),
+
+  click: z.object({
+    buttonId: z.string(),
+    buttonText: z.string().optional(),
+    eventLabel: z.string().optional(),
+  }),
+
+  impression: z.object({
+    elementId: z.string(),
+    elementType: z.string(),
+    visibilityPercentage: z.number().min(0).max(100),
+  }),
+
+  purchase: z.object({
+    transactionId: z.string(),
+    value: z.number().positive(),
+    currency: z.string().length(3),
+    items: z.array(
+      z.object({
+        item_id: z.string(),
+        item_name: z.string(),
+        price: z.number().positive(),
+        quantity: z.number().positive(),
+      }),
+    ),
+  }),
+};
+
+export const [Track, useTracker] = createTracker<GA4Context, GA4EventParams, typeof ga4Schemas>({
+  // ... 기존 설정 ...
+
+  // 스키마 검증 설정
+  schemas: {
+    schemas: ga4Schemas,
+    onSchemaError: (error) => {
+      console.error("GA4 스키마 검증 오류:", error);
+    },
+    abortOnError: false, // 오류 시에도 이벤트 전송 계속
+  },
+});
+```
diff --git a/docs/src/content/ko/docs/with-selfhost-server-example.mdx b/docs/src/content/ko/docs/with-selfhost-server-example.mdx
new file mode 100644
index 0000000..349c2d8
--- /dev/null
+++ b/docs/src/content/ko/docs/with-selfhost-server-example.mdx
@@ -0,0 +1,718 @@
+# 자체 서버 연동하기
+
+자체 서버의 로깅용 API와 함께 `event-tracker`를 사용하여 이벤트 데이터를 수집하고 분석하는 방법을 알아보겠습니다. 배칭, 인증, 에러 처리 등을 포함한 완전한 솔루션을 제공합니다.
+
+## 서버 API 설계
+
+### 1. 이벤트 수집 엔드포인트
+
+```typescript
+// server/types/event.ts
+interface EventData {
+  eventName: string;
+  userId?: string;
+  sessionId?: string;
+  timestamp: number;
+  pageInfo: {
+    url: string;
+    title: string;
+    referrer?: string;
+  };
+  userAgent: string;
+  ip?: string;
+  params: Record<string, any>;
+  metadata?: {
+    source: "client" | "server";
+    version: string;
+    environment: "development" | "staging" | "production";
+  };
+}
+
+interface BatchEventData {
+  events: EventData[];
+  batchId: string;
+  timestamp: number;
+}
+```
+
+### 2. Express.js 서버 예제
+
+```typescript
+// server/app.ts
+import express from "express";
+import cors from "cors";
+import rateLimit from "express-rate-limit";
+import helmet from "helmet";
+import { EventController } from "./controllers/EventController";
+import { AuthMiddleware } from "./middleware/AuthMiddleware";
+import { ValidationMiddleware } from "./middleware/ValidationMiddleware";
+
+const app = express();
+
+// 보안 미들웨어
+app.use(helmet());
+app.use(
+  cors({
+    origin: process.env.ALLOWED_ORIGINS?.split(",") || ["http://localhost:3000"],
+    credentials: true,
+  }),
+);
+
+// Rate limiting
+const limiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15분
+  max: 100, // IP당 최대 100개 요청
+  message: "Too many requests from this IP",
+});
+app.use("/api/events", limiter);
+
+// Body parsing
+app.use(express.json({ limit: "10mb" }));
+
+// 인증 미들웨어
+app.use("/api/events", AuthMiddleware.verifyApiKey);
+
+// 이벤트 수집 엔드포인트
+app.post("/api/events/single", ValidationMiddleware.validateEvent, EventController.trackSingleEvent);
+
+app.post("/api/events/batch", ValidationMiddleware.validateBatchEvent, EventController.trackBatchEvents);
+
+// 헬스체크
+app.get("/api/health", (req, res) => {
+  res.json({ status: "ok", timestamp: Date.now() });
+});
+
+const PORT = process.env.PORT || 3001;
+app.listen(PORT, () => {
+  console.log(`Event tracking server running on port ${PORT}`);
+});
+```
+
+### 3. 이벤트 컨트롤러
+
+```typescript
+// server/controllers/EventController.ts
+import { Request, Response } from "express";
+import { EventService } from "../services/EventService";
+import { Logger } from "../utils/Logger";
+
+export class EventController {
+  static async trackSingleEvent(req: Request, res: Response) {
+    try {
+      const eventData = req.body;
+
+      // IP 주소 추가
+      eventData.ip = req.ip || req.connection.remoteAddress;
+
+      // 이벤트 처리
+      await EventService.processEvent(eventData);
+
+      Logger.info("Single event tracked", { eventName: eventData.eventName, userId: eventData.userId });
+
+      res.status(200).json({
+        success: true,
+        message: "Event tracked successfully",
+        eventId: eventData.timestamp,
+      });
+    } catch (error) {
+      Logger.error("Failed to track single event", error);
+      res.status(500).json({
+        success: false,
+        message: "Internal server error",
+      });
+    }
+  }
+
+  static async trackBatchEvents(req: Request, res: Response) {
+    try {
+      const { events, batchId } = req.body;
+
+      // 배치 이벤트 처리
+      const results = await EventService.processBatchEvents(events, batchId);
+
+      Logger.info("Batch events tracked", {
+        batchId,
+        eventCount: events.length,
+        successCount: results.successCount,
+        failureCount: results.failureCount,
+      });
+
+      res.status(200).json({
+        success: true,
+        message: "Batch events tracked successfully",
+        batchId,
+        results,
+      });
+    } catch (error) {
+      Logger.error("Failed to track batch events", error);
+      res.status(500).json({
+        success: false,
+        message: "Internal server error",
+      });
+    }
+  }
+}
+```
+
+### 4. 이벤트 서비스
+
+```typescript
+// server/services/EventService.ts
+import { EventData, BatchEventData } from "../types/event";
+import { DatabaseService } from "./DatabaseService";
+import { AnalyticsService } from "./AnalyticsService";
+import { Logger } from "../utils/Logger";
+
+export class EventService {
+  static async processEvent(eventData: EventData) {
+    try {
+      // 데이터베이스에 저장
+      await DatabaseService.saveEvent(eventData);
+
+      // 실시간 분석 처리
+      await AnalyticsService.processEvent(eventData);
+
+      // 특정 이벤트에 대한 알림
+      if (eventData.eventName === "error" || eventData.eventName === "purchase") {
+        await this.sendNotification(eventData);
+      }
+    } catch (error) {
+      Logger.error("Failed to process event", { eventData, error });
+      throw error;
+    }
+  }
+
+  static async processBatchEvents(events: EventData[], batchId: string) {
+    const results = {
+      successCount: 0,
+      failureCount: 0,
+      errors: [] as any[],
+    };
+
+    for (const event of events) {
+      try {
+        await this.processEvent(event);
+        results.successCount++;
+      } catch (error) {
+        results.failureCount++;
+        results.errors.push({
+          eventName: event.eventName,
+          error: error.message,
+        });
+      }
+    }
+
+    // 배치 처리 결과 로깅
+    Logger.info("Batch processing completed", { batchId, results });
+
+    return results;
+  }
+
+  private static async sendNotification(eventData: EventData) {
+    // Slack, 이메일 등으로 알림 전송
+    if (eventData.eventName === "error") {
+      await this.sendErrorAlert(eventData);
+    } else if (eventData.eventName === "purchase") {
+      await this.sendPurchaseNotification(eventData);
+    }
+  }
+
+  private static async sendErrorAlert(eventData: EventData) {
+    // 에러 알림 로직
+    console.log("Error alert sent:", eventData);
+  }
+
+  private static async sendPurchaseNotification(eventData: EventData) {
+    // 구매 알림 로직
+    console.log("Purchase notification sent:", eventData);
+  }
+}
+```
+
+## 클라이언트 설정
+
+### 1. 자체 서버 트래커
+
+```tsx
+// trackers/selfHostedTracker.ts
+import { createTracker } from "@offlegacy/event-tracker";
+
+interface SelfHostedContext {
+  userId?: string;
+  sessionId?: string;
+  apiKey?: string;
+  environment: 'development' | 'staging' | 'production';
+}
+
+interface SelfHostedEventParams {
+  eventName: string;
+  category?: string;
+  action?: string;
+  label?: string;
+  value?: number;
+  customData?: Record<string, any>;
+}
+
+// API 설정
+const API_CONFIG = {
+  baseUrl: process.env.NEXT_PUBLIC_EVENT_API_URL || 'http://localhost:3001',
+  apiKey: process.env.NEXT_PUBLIC_EVENT_API_KEY,
+  timeout: 5000,
+  retryAttempts: 3,
+  retryDelay: 1000,
+};
+
+// 이벤트 전송 함수
+const sendEvent = async (params: SelfHostedEventParams, context: SelfHostedContext) => {
+  const eventData = {
+    eventName: params.eventName,
+    userId: context.userId,
+    sessionId: context.sessionId,
+    timestamp: Date.now(),
+    pageInfo: {
+      url: window.location.href,
+      title: document.title,
+      referrer: document.referrer,
+    },
+    userAgent: navigator.userAgent,
+    params: {
+      category: params.category,
+      action: params.action,
+      label: params.label,
+      value: params.value,
+      ...params.customData,
+    },
+    metadata: {
+      source: 'client',
+      version: '1.0.0',
+      environment: context.environment,
+    },
+  };
+
+  try {
+    const response = await fetch(`${API_CONFIG.baseUrl}/api/events/single`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${context.apiKey || API_CONFIG.apiKey}`,
+      },
+      body: JSON.stringify(eventData),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const result = await response.json();
+    console.log('✅ 이벤트 전송 성공:', params.eventName, result);
+
+    return result;
+  } catch (error) {
+    console.error('❌ 이벤트 전송 실패:', params.eventName, error);
+    throw error;
+  }
+};
+
+// 재시도 로직
+const retryWithBackoff = async <T>(
+  fn: () => Promise<T>,
+  retries: number = API_CONFIG.retryAttempts,
+  delay: number = API_CONFIG.retryDelay
+): Promise<T> => {
+  try {
+    return await fn();
+  } catch (error) {
+    if (retries > 0) {
+      await new Promise(resolve => setTimeout(resolve, delay));
+      return retryWithBackoff(fn, retries - 1, delay * 2);
+    }
+    throw error;
+  }
+};
+
+// 자체 서버 트래커 인스턴스
+export const [SelfHostedTrack, useSelfHostedTracker] = createTracker<
+  SelfHostedContext,
+  SelfHostedEventParams
+>({
+  init: (initialContext, setContext) => {
+    const sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    const environment = process.env.NODE_ENV as 'development' | 'staging' | 'production';
+
+    setContext({
+      ...initialContext,
+      sessionId,
+      environment,
+    });
+  },
+
+  send: (params, context) => {
+    return retryWithBackoff(() => sendEvent(params, context));
+  },
+
+  DOMEvents: {
+    onClick: (params, context) => {
+      retryWithBackoff(() => sendEvent({
+        eventName: 'click',
+        category: 'engagement',
+        action: 'click',
+        label: params.eventLabel || 'button_click',
+        customData: {
+          button_id: params.buttonId,
+          button_text: params.buttonText,
+          page_location: window.location.pathname,
+          ...params.customData,
+        },
+      }, context));
+    },
+  },
+
+  impression: {
+    onImpression: (params, context) => {
+      retryWithBackoff(() => sendEvent({
+        eventName: 'impression',
+        category: 'engagement',
+        action: 'view',
+        label: params.elementId,
+        customData: {
+          element_id: params.elementId,
+          element_type: params.elementType,
+          visibility_percentage: params.visibilityPercentage,
+          ...params.customData,
+        },
+      }, context));
+    },
+    options: {
+      threshold: 0.5,
+      freezeOnceVisible: true,
+    },
+  },
+
+  pageView: {
+    onPageView: (params, context) => {
+      retryWithBackoff(() => sendEvent({
+        eventName: 'page_view',
+        category: 'navigation',
+        action: 'page_view',
+        label: params.pagePath || window.location.pathname,
+        customData: {
+          page_title: params.pageTitle || document.title,
+          page_path: params.pagePath || window.location.pathname,
+          referrer: params.referrer || document.referrer,
+          ...params.customData,
+        },
+      }, context));
+    },
+  },
+
+  // 배칭 설정
+  batch: {
+    enable: true,
+    interval: 3000, // 3초마다 배치 전송
+    thresholdSize: 10, // 최대 10개 이벤트
+    onFlush: async (batch, isBrowserClosing) => {
+      const batchData = {
+        events: batch.map(event => ({
+          eventName: event.eventName,
+          userId: event.userId,
+          sessionId: event.sessionId,
+          timestamp: event.timestamp,
+          pageInfo: {
+            url: window.location.href,
+            title: document.title,
+            referrer: document.referrer,
+          },
+          userAgent: navigator.userAgent,
+          params: event.params,
+          metadata: {
+            source: 'client',
+            version: '1.0.0',
+            environment: process.env.NODE_ENV,
+          },
+        })),
+        batchId: `batch_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+        timestamp: Date.now(),
+      };
+
+      try {
+        if (isBrowserClosing) {
+          // 브라우저 종료 시 sendBeacon 사용
+          navigator.sendBeacon(
+            `${API_CONFIG.baseUrl}/api/events/batch`,
+            JSON.stringify(batchData)
+          );
+          return;
+        }
+
+        const response = await fetch(`${API_CONFIG.baseUrl}/api/events/batch`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${API_CONFIG.apiKey}`,
+          },
+          body: JSON.stringify(batchData),
+        });
+
+        if (!response.ok) {
+          throw new Error(`Batch upload failed: ${response.status}`);
+        }
+
+        const result = await response.json();
+        console.log('✅ 배치 이벤트 전송 성공:', result);
+      } catch (error) {
+        console.error('❌ 배치 이벤트 전송 실패:', error);
+
+        // 실패한 이벤트를 로컬 스토리지에 저장하여 나중에 재전송
+        this.saveFailedEvents(batchData);
+      }
+    },
+    onError: (error) => {
+      console.error('배치 처리 오류:', error);
+    },
+  },
+});
+
+// 실패한 이벤트 저장 및 재전송
+const saveFailedEvents = (batchData: any) => {
+  try {
+    const failedEvents = JSON.parse(localStorage.getItem('failedEvents') || '[]');
+    failedEvents.push(batchData);
+    localStorage.setItem('failedEvents', JSON.stringify(failedEvents.slice(-50))); // 최대 50개 저장
+  } catch (error) {
+    console.error('실패한 이벤트 저장 실패:', error);
+  }
+};
+
+// 재전송 함수
+export const retryFailedEvents = async () => {
+  try {
+    const failedEvents = JSON.parse(localStorage.getItem('failedEvents') || '[]');
+    if (failedEvents.length === 0) return;
+
+    for (const batchData of failedEvents) {
+      try {
+        const response = await fetch(`${API_CONFIG.baseUrl}/api/events/batch`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${API_CONFIG.apiKey}`,
+          },
+          body: JSON.stringify(batchData),
+        });
+
+        if (response.ok) {
+          console.log('✅ 실패한 이벤트 재전송 성공');
+        }
+      } catch (error) {
+        console.error('❌ 실패한 이벤트 재전송 실패:', error);
+      }
+    }
+
+    // 성공한 이벤트 제거
+    localStorage.removeItem('failedEvents');
+  } catch (error) {
+    console.error('재전송 처리 실패:', error);
+  }
+};
+
+export { SelfHostedTrack, useSelfHostedTracker };
+```
+
+## 실제 사용 예제
+
+### 1. 기본 사용법
+
+```tsx
+// components/SelfHostedExample.tsx
+import { SelfHostedTrack, useSelfHostedTracker, retryFailedEvents } from "../trackers/selfHostedTracker";
+
+function SelfHostedExample() {
+  const { track } = useSelfHostedTracker();
+
+  const handlePurchase = async () => {
+    try {
+      // 구매 로직
+      const purchaseResult = await processPurchase();
+
+      // 자체 서버로 이벤트 전송
+      await track({
+        eventName: "purchase",
+        category: "ecommerce",
+        action: "purchase",
+        value: purchaseResult.amount,
+        customData: {
+          transaction_id: purchaseResult.transactionId,
+          currency: "KRW",
+          items: purchaseResult.items,
+          payment_method: purchaseResult.paymentMethod,
+        },
+      });
+
+      console.log("구매 이벤트가 서버에 전송되었습니다.");
+    } catch (error) {
+      console.error("구매 이벤트 전송 실패:", error);
+    }
+  };
+
+  const handleError = async () => {
+    try {
+      await track({
+        eventName: "error",
+        category: "system",
+        action: "error_occurred",
+        customData: {
+          error_type: "validation_error",
+          error_message: "사용자 입력 검증 실패",
+          error_code: "VAL_001",
+          stack_trace: new Error().stack,
+        },
+      });
+    } catch (error) {
+      console.error("에러 이벤트 전송 실패:", error);
+    }
+  };
+
+  return (
+    <SelfHostedTrack.Provider
+      initialContext={{
+        userId: "user-123",
+        apiKey: process.env.NEXT_PUBLIC_EVENT_API_KEY,
+      }}
+    >
+      {/* 페이지 뷰 트래킹 */}
+      <SelfHostedTrack.PageView
+        params={{
+          pagePath: "/self-hosted-example",
+          pageTitle: "자체 서버 트래킹 예제",
+          customData: {
+            page_category: "demo",
+            user_segment: "premium",
+          },
+        }}
+      />
+
+      <div>
+        <h1>자체 서버 트래킹 예제</h1>
+
+        {/* 상품 노출 트래킹 */}
+        <SelfHostedTrack.Impression
+          params={{
+            elementId: "product-banner",
+            elementType: "banner",
+            visibilityPercentage: 80,
+            customData: {
+              banner_type: "promotional",
+              campaign_id: "summer_sale_2024",
+            },
+          }}
+        >
+          <div className="product-banner">
+            <h2>여름 세일!</h2>
+            <p>모든 상품 20% 할인</p>
+          </div>
+        </SelfHostedTrack.Impression>
+
+        {/* 버튼 클릭 트래킹 */}
+        <SelfHostedTrack.Click
+          params={{
+            buttonId: "purchase-button",
+            buttonText: "구매하기",
+            customData: {
+              product_id: "prod-123",
+              product_name: "샘플 상품",
+              price: 29900,
+            },
+          }}
+        >
+          <button onClick={handlePurchase}>구매하기</button>
+        </SelfHostedTrack.Click>
+
+        <button onClick={handleError}>에러 발생 시뮬레이션</button>
+
+        <button onClick={retryFailedEvents}>실패한 이벤트 재전송</button>
+      </div>
+    </SelfHostedTrack.Provider>
+  );
+}
+```
+
+### 2. 고급 사용법 - 커스텀 이벤트
+
+```tsx
+// components/AdvancedSelfHostedExample.tsx
+import { SelfHostedTrack, useSelfHostedTracker } from "../trackers/selfHostedTracker";
+
+function AdvancedSelfHostedExample() {
+  const { track } = useSelfHostedTracker();
+
+  const handleUserAction = async (action: string, data: any) => {
+    try {
+      await track({
+        eventName: "user_action",
+        category: "user_engagement",
+        action: action,
+        customData: {
+          action_type: action,
+          action_data: data,
+          timestamp: Date.now(),
+          user_agent: navigator.userAgent,
+          screen_resolution: `${screen.width}x${screen.height}`,
+          time_on_page: performance.now(),
+        },
+      });
+    } catch (error) {
+      console.error("사용자 액션 이벤트 전송 실패:", error);
+    }
+  };
+
+  const handleFormSubmission = async (formData: any) => {
+    try {
+      await track({
+        eventName: "form_submit",
+        category: "conversion",
+        action: "form_submitted",
+        customData: {
+          form_id: formData.formId,
+          form_type: formData.formType,
+          field_count: Object.keys(formData.fields).length,
+          validation_errors: formData.validationErrors || 0,
+          submission_time: Date.now(),
+          form_data: formData.fields,
+        },
+      });
+    } catch (error) {
+      console.error("폼 제출 이벤트 전송 실패:", error);
+    }
+  };
+
+  return (
+    <SelfHostedTrack.Provider
+      initialContext={{
+        userId: "user-123",
+        apiKey: process.env.NEXT_PUBLIC_EVENT_API_KEY,
+      }}
+    >
+      <div>
+        <h1>고급 자체 서버 트래킹</h1>
+
+        <button onClick={() => handleUserAction("scroll", { depth: 50 })}>스크롤 이벤트</button>
+
+        <button onClick={() => handleUserAction("search", { query: "test" })}>검색 이벤트</button>
+
+        <button
+          onClick={() =>
+            handleFormSubmission({
+              formId: "contact-form",
+              formType: "contact",
+              fields: { name: "John", email: "john@example.com" },
+              validationErrors: 0,
+            })
+          }
+        >
+          폼 제출 이벤트
+        </button>
+      </div>
+    </SelfHostedTrack.Provider>
+  );
+}
+```
diff --git a/docs/src/content/ko/docs/with-zod-example.mdx b/docs/src/content/ko/docs/with-zod-example.mdx
new file mode 100644
index 0000000..21b1136
--- /dev/null
+++ b/docs/src/content/ko/docs/with-zod-example.mdx
@@ -0,0 +1,770 @@
+# Zod와 함께 사용하기
+
+[Zod](https://zod.dev/)와 함께 `event-tracker`를 사용하여 강력한 데이터 타입 검증을 구현하는 방법을 알아보겠습니다. Zod를 통한 스키마 기반 검증으로 런타임 이전에 오류를 방지하고 데이터 신뢰성을 보장할 수 있습니다.
+
+## 기본 설정
+
+### 1. 스키마 정의
+
+```tsx
+// schemas/eventSchemas.ts
+import { z } from "zod";
+
+// 사용자 컨텍스트 스키마
+export const userContextSchema = z.object({
+  userId: z.string().min(1, "사용자 ID는 필수입니다"),
+  userType: z.enum(["free", "premium", "enterprise"]).optional(),
+  sessionId: z.string().optional(),
+  trackingConsent: z.boolean().default(true),
+});
+
+// 페이지 뷰 이벤트 스키마
+export const pageViewSchema = z.object({
+  pagePath: z.string().min(1, "페이지 경로는 필수입니다"),
+  pageTitle: z.string().optional(),
+  referrer: z.string().optional(),
+  category: z.enum(["home", "product", "blog", "admin"]).optional(),
+  customData: z.record(z.unknown()).optional(),
+});
+
+// 클릭 이벤트 스키마
+export const clickSchema = z.object({
+  buttonId: z.string().min(1, "버튼 ID는 필수입니다"),
+  buttonText: z.string().optional(),
+  buttonType: z.enum(["primary", "secondary", "danger", "link"]).optional(),
+  elementPosition: z
+    .object({
+      x: z.number(),
+      y: z.number(),
+    })
+    .optional(),
+  customData: z.record(z.unknown()).optional(),
+});
+
+// 노출 이벤트 스키마
+export const impressionSchema = z.object({
+  elementId: z.string().min(1, "요소 ID는 필수입니다"),
+  elementType: z.enum(["banner", "product", "article", "video"]),
+  visibilityPercentage: z.number().min(0).max(100),
+  timeInView: z.number().positive().optional(),
+  customData: z.record(z.unknown()).optional(),
+});
+
+// 전자상거래 이벤트 스키마
+export const ecommerceSchema = z.object({
+  productId: z.string().min(1, "상품 ID는 필수입니다"),
+  productName: z.string().min(1, "상품명은 필수입니다"),
+  price: z.number().positive("가격은 양수여야 합니다"),
+  currency: z.string().length(3, "통화는 3자리여야 합니다"),
+  quantity: z.number().int().positive("수량은 양의 정수여야 합니다"),
+  category: z.string().optional(),
+  brand: z.string().optional(),
+});
+
+// 구매 이벤트 스키마
+export const purchaseSchema = z.object({
+  transactionId: z.string().min(1, "거래 ID는 필수입니다"),
+  value: z.number().positive("거래 금액은 양수여야 합니다"),
+  currency: z.string().length(3, "통화는 3자리여야 합니다"),
+  items: z.array(ecommerceSchema).min(1, "최소 1개의 상품이 필요합니다"),
+  shipping: z.number().nonnegative().optional(),
+  tax: z.number().nonnegative().optional(),
+});
+
+// 검색 이벤트 스키마
+export const searchSchema = z.object({
+  query: z.string().min(1, "검색어는 필수입니다"),
+  category: z.string().optional(),
+  filters: z.record(z.unknown()).optional(),
+  resultCount: z.number().int().nonnegative().optional(),
+});
+
+// 폼 제출 이벤트 스키마
+export const formSubmitSchema = z.object({
+  formId: z.string().min(1, "폼 ID는 필수입니다"),
+  formType: z.enum(["contact", "signup", "checkout", "feedback"]),
+  fieldCount: z.number().int().positive("필드 수는 양의 정수여야 합니다"),
+  validationErrors: z.number().int().nonnegative().optional(),
+  customData: z.record(z.unknown()).optional(),
+});
+
+// 스키마 모음
+export const eventSchemas = {
+  page_view: pageViewSchema,
+  click: clickSchema,
+  impression: impressionSchema,
+  add_to_cart: ecommerceSchema,
+  purchase: purchaseSchema,
+  search: searchSchema,
+  form_submit: formSubmitSchema,
+} as const;
+
+// 타입 추론
+export type UserContext = z.infer<typeof userContextSchema>;
+export type PageViewEvent = z.infer<typeof pageViewSchema>;
+export type ClickEvent = z.infer<typeof clickSchema>;
+export type ImpressionEvent = z.infer<typeof impressionSchema>;
+export type EcommerceEvent = z.infer<typeof ecommerceSchema>;
+export type PurchaseEvent = z.infer<typeof purchaseSchema>;
+export type SearchEvent = z.infer<typeof searchSchema>;
+export type FormSubmitEvent = z.infer<typeof formSubmitSchema>;
+```
+
+### 2. 트래커 설정
+
+```tsx
+// tracker/validatedTracker.ts
+import { createTracker } from "@offlegacy/event-tracker";
+import { eventSchemas, UserContext } from "../schemas/eventSchemas";
+
+// 이벤트 전송 함수
+const sendEvent = async (eventName: string, params: any, context: UserContext) => {
+  try {
+    // 실제 애널리틱스 서비스로 전송
+    await analytics.track(eventName, {
+      ...params,
+      userId: context.userId,
+      sessionId: context.sessionId,
+      timestamp: Date.now(),
+    });
+
+    console.log(`✅ 이벤트 전송 성공: ${eventName}`, params);
+  } catch (error) {
+    console.error(`❌ 이벤트 전송 실패: ${eventName}`, error);
+  }
+};
+
+// 검증된 트래커 인스턴스 생성
+export const [Track, useTracker] = createTracker<UserContext, any, typeof eventSchemas>({
+  // 초기화 함수
+  init: (initialContext, setContext) => {
+    // 세션 ID 생성
+    const sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+    // 컨텍스트 검증 및 설정
+    const validatedContext = userContextSchema.parse({
+      ...initialContext,
+      sessionId,
+    });
+
+    setContext(validatedContext);
+  },
+
+  // 이벤트 전송 함수
+  send: (params, context) => {
+    sendEvent("custom_event", params, context);
+  },
+
+  // DOM 이벤트 핸들러
+  DOMEvents: {
+    onClick: (params, context) => {
+      sendEvent("click", params, context);
+    },
+  },
+
+  // 노출 이벤트 설정
+  impression: {
+    onImpression: (params, context) => {
+      sendEvent("impression", params, context);
+    },
+    options: {
+      threshold: 0.5,
+      freezeOnceVisible: true,
+    },
+  },
+
+  // 페이지 뷰 설정
+  pageView: {
+    onPageView: (params, context) => {
+      sendEvent("page_view", params, context);
+    },
+  },
+
+  // 스키마 검증 설정
+  schemas: {
+    schemas: eventSchemas,
+    onSchemaError: (error) => {
+      console.error("🚨 스키마 검증 오류:", {
+        message: error.message,
+        issues: error.issues,
+        path: error.issues.map((issue) => issue.path.join(".")),
+      });
+
+      // 개발 환경에서는 더 자세한 정보 출력
+      if (process.env.NODE_ENV === "development") {
+        console.group("🔍 상세 오류 정보");
+        error.issues.forEach((issue, index) => {
+          console.log(`${index + 1}. 경로: ${issue.path.join(".")}`);
+          console.log(`   메시지: ${issue.message}`);
+          console.log(`   코드: ${issue.code}`);
+          console.log(`   받은 값:`, issue.received);
+        });
+        console.groupEnd();
+      }
+    },
+    abortOnError: true, // 검증 실패 시 이벤트 중단
+  },
+});
+
+export { Track, useTracker };
+```
+
+## 실제 사용 예제
+
+### 1. 전자상거래 사이트
+
+```tsx
+// components/ProductPage.tsx
+import { Track, useTracker } from "../tracker/validatedTracker";
+import { userContextSchema } from "../schemas/eventSchemas";
+
+interface Product {
+  id: string;
+  name: string;
+  price: number;
+  category: string;
+  brand: string;
+}
+
+function ProductPage({ product }: { product: Product }) {
+  const { track } = useTracker();
+
+  const handleAddToCart = async () => {
+    try {
+      // 장바구니 추가 로직
+      await addToCart(product.id);
+
+      // 검증된 이벤트 전송
+      await track({
+        eventName: "add_to_cart",
+        productId: product.id,
+        productName: product.name,
+        price: product.price,
+        currency: "KRW",
+        quantity: 1,
+        category: product.category,
+        brand: product.brand,
+      });
+    } catch (error) {
+      console.error("장바구니 추가 실패:", error);
+    }
+  };
+
+  const handlePurchase = async () => {
+    try {
+      // 구매 로직
+      const purchaseResult = await processPurchase(product.id);
+
+      if (purchaseResult.success) {
+        // 검증된 구매 이벤트 전송
+        await track({
+          eventName: "purchase",
+          transactionId: purchaseResult.transactionId,
+          value: product.price,
+          currency: "KRW",
+          items: [
+            {
+              productId: product.id,
+              productName: product.name,
+              price: product.price,
+              currency: "KRW",
+              quantity: 1,
+              category: product.category,
+              brand: product.brand,
+            },
+          ],
+          shipping: 0,
+          tax: 0,
+        });
+      }
+    } catch (error) {
+      console.error("구매 처리 실패:", error);
+    }
+  };
+
+  return (
+    <Track.Provider
+      initialContext={{
+        userId: "user-123",
+        userType: "premium",
+        trackingConsent: true,
+      }}
+    >
+      {/* 페이지 뷰 트래킹 */}
+      <Track.PageView
+        schema="page_view"
+        params={{
+          pagePath: `/products/${product.id}`,
+          pageTitle: `${product.name} - 상품 상세`,
+          category: "product",
+          customData: {
+            product_id: product.id,
+            product_category: product.category,
+          },
+        }}
+      />
+
+      <div className="product-detail">
+        <h1>{product.name}</h1>
+        <p>₩{product.price.toLocaleString()}</p>
+
+        {/* 상품 이미지 노출 트래킹 */}
+        <Track.Impression
+          schema="impression"
+          params={{
+            elementId: `product-image-${product.id}`,
+            elementType: "product",
+            visibilityPercentage: 80,
+            customData: {
+              product_id: product.id,
+              image_position: "main",
+            },
+          }}
+        >
+          <img src={product.imageUrl} alt={product.name} className="product-image" />
+        </Track.Impression>
+
+        {/* 장바구니 버튼 클릭 트래킹 */}
+        <Track.Click
+          schema="click"
+          params={{
+            buttonId: "add-to-cart",
+            buttonText: "장바구니 담기",
+            buttonType: "primary",
+            customData: {
+              product_id: product.id,
+              product_name: product.name,
+              product_price: product.price,
+            },
+          }}
+        >
+          <button onClick={handleAddToCart}>장바구니 담기</button>
+        </Track.Click>
+
+        {/* 구매 버튼 - useTracker 사용 */}
+        <button onClick={handlePurchase}>바로 구매</button>
+      </div>
+    </Track.Provider>
+  );
+}
+```
+
+### 2. 검색 기능
+
+```tsx
+// components/SearchComponent.tsx
+import { Track, useTracker } from "../tracker/validatedTracker";
+
+function SearchComponent() {
+  const { track } = useTracker();
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+
+  const handleSearch = async (searchQuery: string) => {
+    try {
+      const searchResults = await performSearch(searchQuery);
+      setResults(searchResults);
+
+      // 검증된 검색 이벤트 전송
+      await track({
+        eventName: "search",
+        query: searchQuery,
+        category: "products",
+        resultCount: searchResults.length,
+        filters: {
+          category: "all",
+          price_range: "all",
+        },
+      });
+    } catch (error) {
+      console.error("검색 실패:", error);
+    }
+  };
+
+  return (
+    <Track.Provider
+      initialContext={{
+        userId: "user-123",
+        userType: "free",
+        trackingConsent: true,
+      }}
+    >
+      <div className="search-container">
+        <Track.Click
+          schema="click"
+          params={{
+            buttonId: "search-button",
+            buttonText: "검색",
+            buttonType: "primary",
+            customData: {
+              search_context: "header",
+            },
+          }}
+        >
+          <button onClick={() => handleSearch(query)}>검색</button>
+        </Track.Click>
+
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="검색어를 입력하세요..."
+        />
+      </div>
+    </Track.Provider>
+  );
+}
+```
+
+### 3. 폼 제출
+
+```tsx
+// components/ContactForm.tsx
+import { Track, useTracker } from "../tracker/validatedTracker";
+
+function ContactForm() {
+  const { track } = useTracker();
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+  const [errors, setErrors] = useState({});
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+      // 폼 검증
+      const validationErrors = validateForm(formData);
+      setErrors(validationErrors);
+
+      if (Object.keys(validationErrors).length === 0) {
+        // 폼 제출 로직
+        await submitForm(formData);
+
+        // 검증된 폼 제출 이벤트 전송
+        await track({
+          eventName: "form_submit",
+          formId: "contact-form",
+          formType: "contact",
+          fieldCount: Object.keys(formData).length,
+          validationErrors: 0,
+          customData: {
+            form_name: "contact_form",
+            submission_method: "web",
+          },
+        });
+      } else {
+        // 검증 오류가 있는 경우
+        await track({
+          eventName: "form_submit",
+          formId: "contact-form",
+          formType: "contact",
+          fieldCount: Object.keys(formData).length,
+          validationErrors: Object.keys(validationErrors).length,
+          customData: {
+            form_name: "contact_form",
+            error_fields: Object.keys(validationErrors),
+          },
+        });
+      }
+    } catch (error) {
+      console.error("폼 제출 실패:", error);
+    }
+  };
+
+  return (
+    <Track.Provider
+      initialContext={{
+        userId: "user-123",
+        userType: "free",
+        trackingConsent: true,
+      }}
+    >
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          name="name"
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          placeholder="이름"
+        />
+        <input
+          type="email"
+          name="email"
+          value={formData.email}
+          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+          placeholder="이메일"
+        />
+        <textarea
+          name="message"
+          value={formData.message}
+          onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+          placeholder="메시지"
+        />
+
+        <Track.Click
+          schema="click"
+          params={{
+            buttonId: "submit-contact",
+            buttonText: "제출",
+            buttonType: "primary",
+            customData: {
+              form_id: "contact-form",
+            },
+          }}
+        >
+          <button type="submit">제출</button>
+        </Track.Click>
+      </form>
+    </Track.Provider>
+  );
+}
+```
+
+## 고급 기능
+
+### 1. 동적 스키마 검증
+
+```tsx
+// schemas/dynamicSchemas.ts
+import { z } from "zod";
+
+// 조건부 스키마 생성 함수
+export const createConditionalSchema = (userType: string) => {
+  const baseSchema = z.object({
+    eventName: z.string(),
+    timestamp: z.number(),
+  });
+
+  if (userType === "premium") {
+    return baseSchema.extend({
+      premiumFeature: z.string(),
+      usageCount: z.number().positive(),
+    });
+  }
+
+  return baseSchema;
+};
+
+// 동적 이벤트 스키마
+export const dynamicEventSchemas = {
+  conditional_event: z.object({
+    eventName: z.string(),
+    userType: z.enum(["free", "premium"]),
+    // 조건부 필드
+    premiumData: z
+      .object({
+        feature: z.string(),
+        usage: z.number(),
+      })
+      .optional(),
+  }),
+
+  // 배열 기반 스키마
+  batch_events: z.array(
+    z.object({
+      eventName: z.string(),
+      params: z.record(z.unknown()),
+      timestamp: z.number(),
+    }),
+  ),
+
+  // 유니온 타입 스키마
+  mixed_event: z.union([
+    z.object({
+      type: z.literal("click"),
+      buttonId: z.string(),
+      position: z.object({ x: z.number(), y: z.number() }),
+    }),
+    z.object({
+      type: z.literal("scroll"),
+      scrollDepth: z.number(),
+      direction: z.enum(["up", "down"]),
+    }),
+  ]),
+};
+```
+
+### 2. 커스텀 검증 로직
+
+```tsx
+// utils/customValidation.ts
+import { z } from "zod";
+
+// 커스텀 검증 함수
+export const customValidators = {
+  // 이메일 도메인 검증
+  emailDomain: (allowedDomains: string[]) =>
+    z
+      .string()
+      .email()
+      .refine((email) => allowedDomains.some((domain) => email.endsWith(domain)), {
+        message: `허용되지 않는 이메일 도메인입니다. 허용: ${allowedDomains.join(", ")}`,
+      }),
+
+  // 비밀번호 복잡도 검증
+  strongPassword: z
+    .string()
+    .min(8, "비밀번호는 최소 8자 이상이어야 합니다")
+    .regex(/[A-Z]/, "대문자가 포함되어야 합니다")
+    .regex(/[a-z]/, "소문자가 포함되어야 합니다")
+    .regex(/[0-9]/, "숫자가 포함되어야 합니다")
+    .regex(/[^A-Za-z0-9]/, "특수문자가 포함되어야 합니다"),
+
+  // 한국어 전화번호 검증
+  koreanPhoneNumber: z.string().regex(/^01[0-9]-\d{3,4}-\d{4}$/, "올바른 한국 전화번호 형식이 아닙니다"),
+
+  // 가격 범위 검증
+  priceRange: (min: number, max: number) =>
+    z
+      .number()
+      .positive()
+      .refine((price) => price >= min && price <= max, { message: `가격은 ${min}원에서 ${max}원 사이여야 합니다` }),
+};
+
+// 조건부 스키마
+export const conditionalSchemas = {
+  // 사용자 타입에 따른 다른 검증 규칙
+  userAction: (userType: string) => {
+    const baseSchema = z.object({
+      action: z.string(),
+      timestamp: z.number(),
+    });
+
+    if (userType === "premium") {
+      return baseSchema.extend({
+        premiumFeature: z.string(),
+        usageLimit: z.number().optional(),
+      });
+    }
+
+    return baseSchema.extend({
+      feature: z.string(),
+      upgradePrompt: z.boolean().optional(),
+    });
+  },
+};
+```
+
+### 3. 에러 처리 및 복구
+
+```tsx
+// tracker/errorHandlingTracker.ts
+import { createTracker } from "@offlegacy/event-tracker";
+import { eventSchemas } from "../schemas/eventSchemas";
+
+export const [Track, useTracker] = createTracker({
+  // ... 기존 설정 ...
+
+  schemas: {
+    schemas: eventSchemas,
+    onSchemaError: (error) => {
+      // 1. 로그 기록
+      console.error("스키마 검증 오류:", error);
+
+      // 2. 에러 추적 서비스로 전송
+      errorTracking.captureException(error);
+
+      // 3. 사용자에게 알림 (개발 환경)
+      if (process.env.NODE_ENV === "development") {
+        toast.error(`스키마 검증 실패: ${error.message}`);
+      }
+
+      // 4. 대체 데이터로 이벤트 전송
+      const fallbackData = createFallbackData(error);
+      if (fallbackData) {
+        analytics.track("schema_validation_fallback", {
+          originalEvent: error.issues[0]?.path[0],
+          errorMessage: error.message,
+          fallbackData,
+        });
+      }
+    },
+    abortOnError: false, // 오류 시에도 이벤트 전송 계속
+  },
+});
+
+// 대체 데이터 생성 함수
+function createFallbackData(error: z.ZodError) {
+  const firstIssue = error.issues[0];
+  if (!firstIssue) return null;
+
+  const eventName = firstIssue.path[0];
+  const receivedData = firstIssue.received;
+
+  // 기본 구조로 대체 데이터 생성
+  return {
+    eventName,
+    timestamp: Date.now(),
+    originalData: receivedData,
+    validationErrors: error.issues.map((issue) => ({
+      path: issue.path.join("."),
+      message: issue.message,
+    })),
+  };
+}
+```
+
+## 성능 최적화
+
+### 1. 스키마 캐싱
+
+```tsx
+// utils/schemaCache.ts
+import { z } from "zod";
+
+class SchemaCache {
+  private cache = new Map<string, z.ZodSchema>();
+
+  getSchema(schemaName: string, schemaFactory: () => z.ZodSchema): z.ZodSchema {
+    if (!this.cache.has(schemaName)) {
+      this.cache.set(schemaName, schemaFactory());
+    }
+    return this.cache.get(schemaName)!;
+  }
+
+  clear() {
+    this.cache.clear();
+  }
+}
+
+export const schemaCache = new SchemaCache();
+
+// 사용 예시
+const cachedSchema = schemaCache.getSchema("dynamic_event", () =>
+  z.object({
+    eventName: z.string(),
+    dynamicField: z.string(),
+  }),
+);
+```
+
+### 2. 배치 검증
+
+```tsx
+// utils/batchValidation.ts
+import { z } from 'zod';
+
+export const batchValidate = <T>(
+  schema: z.ZodSchema<T>,
+  dataArray: unknown[]
+): { valid: T[], invalid: { data: unknown; error: z.ZodError }[] } => {
+  const valid: T[] = [];
+  const invalid: { data: unknown; error: z.ZodError }[] = [];
+
+  dataArray.forEach(data => {
+    try {
+      const validated = schema.parse(data);
+      valid.push(validated);
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        invalid.push({ data, error });
+      }
+    }
+  });
+
+  return { valid, invalid };
+};
+```
diff --git a/docs/src/content/ko/index.mdx b/docs/src/content/ko/index.mdx
index 2bfc973..f24c6c6 100644
--- a/docs/src/content/ko/index.mdx
+++ b/docs/src/content/ko/index.mdx
@@ -7,7 +7,7 @@ import HomePage from "@/components/home-page";
 <HomePage
   description="React 애플리케이션을 위한 완전한 이벤트 트래킹 시스템"
   get_started="시작하기"
-  featureCardsTitle="Event Tracker가 제시하는 새로운 이벤트 트래킹 패러다임"
+  featureCardsTitle="‘어떻게 트래킹할지’가 아닌 ‘무엇을 트래킹할지’에 집중하세요!"
   featureCards={[
     {
       title: "선언적 API",
@@ -16,7 +16,7 @@ import HomePage from "@/components/home-page";
     {
       title: "애널리틱스 도구 독립성",
       description:
-        "Google Analytics, Amplitude, Segment 등 어떤 도구든 자유롭게 연동할 수 있어, 기존 인프라를 변경하지 않고도 도입이 가능합니다.",
+        "Google Analytics, Amplitude 등 어떤 도구든 자유롭게 연동할 수 있어, 기존 인프라를 변경하지 않고도 도입이 가능합니다.",
     },
     {
       title: "명확한 관심사 분리",

From 0d331fcbdcb5dee6271ac2221bfc4b522710a132 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Wed, 30 Jul 2025 02:43:54 +0900
Subject: [PATCH 15/24] docs: update contents

---
 docs/src/components/home-page.tsx             |   12 +-
 docs/src/content/ko/docs/_meta.ts             |   17 +-
 docs/src/content/ko/docs/basic-example.mdx    |  769 +-----------
 docs/src/content/ko/docs/batching.mdx         |    2 -
 docs/src/content/ko/docs/components/click.mdx |   21 +-
 .../content/ko/docs/components/dom-event.mdx  |   21 +-
 .../content/ko/docs/components/impression.mdx |   18 +-
 .../content/ko/docs/components/page-view.mdx  |   14 +-
 docs/src/content/ko/docs/create-tracker.mdx   |   32 +-
 .../content/ko/docs/data-type-validation.mdx  |    4 +-
 docs/src/content/ko/docs/installation.mdx     |    2 +
 docs/src/content/ko/docs/instance-example.mdx | 1031 -----------------
 docs/src/content/ko/docs/introduction.mdx     |   36 +-
 docs/src/content/ko/docs/use-tracker.mdx      |    3 +-
 .../src/content/ko/docs/why-event-tracker.mdx |   22 +-
 .../ko/docs/with-google-analytics-example.mdx |  631 +---------
 .../ko/docs/with-selfhost-server-example.mdx  |  718 ------------
 docs/src/content/ko/docs/with-zod-example.mdx |  784 +------------
 docs/src/content/ko/index.mdx                 |    8 +-
 19 files changed, 242 insertions(+), 3903 deletions(-)
 delete mode 100644 docs/src/content/ko/docs/instance-example.mdx
 delete mode 100644 docs/src/content/ko/docs/with-selfhost-server-example.mdx

diff --git a/docs/src/components/home-page.tsx b/docs/src/components/home-page.tsx
index 3f6bbad..99e59b8 100644
--- a/docs/src/components/home-page.tsx
+++ b/docs/src/components/home-page.tsx
@@ -14,12 +14,16 @@ type FeatureCardText = {
 type Props = {
   description: string;
   get_started: string;
-  featureCardsTitle: string;
-  featureCards: FeatureCardText[];
+  featureSectionTitle: string;
+  featureSectionContents: FeatureCardText[];
 };
 
-export default async function HomePage(props: Props) {
-  const { description, get_started, featureCardsTitle, featureCards } = props;
+export default async function HomePage({
+  description,
+  get_started,
+  featureSectionTitle: featureCardsTitle,
+  featureSectionContents: featureCards,
+}: Props) {
   return (
     <main className="mx-auto flex max-w-screen-xl flex-col gap-48 break-keep px-6 py-32">
       <TrackPageView params={{ title: "Home" }} />
diff --git a/docs/src/content/ko/docs/_meta.ts b/docs/src/content/ko/docs/_meta.ts
index 573061c..684393a 100644
--- a/docs/src/content/ko/docs/_meta.ts
+++ b/docs/src/content/ko/docs/_meta.ts
@@ -26,6 +26,7 @@ export default {
       layout: "default",
     },
   },
+  // TODO: Quick Start
   "api-reference-separator": {
     title: "API 레퍼런스",
     type: "separator",
@@ -57,7 +58,7 @@ export default {
     },
   },
   "data-type-validation": {
-    title: "데이터 타입 검증",
+    title: "데이터 검증",
     theme: {
       toc: true,
       layout: "default",
@@ -74,13 +75,6 @@ export default {
       layout: "default",
     },
   },
-  "instance-example": {
-    title: "트래킹 인스턴스 만들기",
-    theme: {
-      toc: true,
-      layout: "default",
-    },
-  },
   "with-google-analytics-example": {
     title: "Google Analytics 연동하기",
     theme: {
@@ -88,13 +82,6 @@ export default {
       layout: "default",
     },
   },
-  "with-selfhost-server-example": {
-    title: "자체 서버 연동하기",
-    theme: {
-      toc: true,
-      layout: "default",
-    },
-  },
   "with-zod-example": {
     title: "Zod와 함께 사용하기",
     theme: {
diff --git a/docs/src/content/ko/docs/basic-example.mdx b/docs/src/content/ko/docs/basic-example.mdx
index 5f6635a..cb40094 100644
--- a/docs/src/content/ko/docs/basic-example.mdx
+++ b/docs/src/content/ko/docs/basic-example.mdx
@@ -1,774 +1,75 @@
+import { Steps } from "nextra/components";
+
 # 기본
 
-`event-tracker`의 기본적인 사용법과 핵심 개념을 알아보겠습니다. 이 가이드를 통해 선언적 이벤트 트래킹의 강력함을 경험해보세요.
+Event Tracker 라이브러리의 전체 흐름과 사용방법을 단계별로 살펴봅니다.  
+각 단계별로 필요한 설정과 컴포넌트 사용법, 그리고 이벤트 처리 과정을 이해할 수 있도록 구성했습니다.
+
+<Steps>
 
-## 빠른 시작
+## 트래킹 이벤트 정의하기
 
-### 1. 기본 설정
+Tracker 인스턴스를 생성하고, DOM 이벤트에 대한 콜백을 정의합니다.
 
-```tsx
+```tsx {12}
 import { createTracker } from "@offlegacy/event-tracker";
 
-// 트래커 인스턴스 생성
-const [Track, useTracker] = createTracker({
-  // 초기화 함수
-  init: (initialContext, setContext) => {
-    // 세션 ID 생성
-    const sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    setContext({ ...initialContext, sessionId });
-  },
+interface Context {
+  userId: string;
+}
 
-  // 이벤트 전송 함수
-  send: (params, context) => {
-    console.log("이벤트 전송:", params, context);
-    // 실제 애널리틱스 서비스로 전송
-    analytics.track(params.eventName, {
-      ...params,
-      userId: context.userId,
-      sessionId: context.sessionId,
-      timestamp: Date.now(),
-    });
-  },
+interface Params {
+  eventName: string;
+}
 
-  // DOM 이벤트 핸들러
+// 트래커 인스턴스 생성
+export const [Track, useTracker] = createTracker<Context, Params>({
+  // 트래킹 이벤트 정의
   DOMEvents: {
-    onClick: (params, context) => {
-      console.log("클릭 이벤트:", params, context);
-    },
-  },
-
-  // 노출 이벤트 설정
-  impression: {
-    onImpression: (params, context) => {
-      console.log("노출 이벤트:", params, context);
-    },
-    options: {
-      threshold: 0.5, // 50% 이상 보일 때 트리거
-      freezeOnceVisible: true, // 한 번 보이면 더 이상 트리거하지 않음
-    },
-  },
-
-  // 페이지 뷰 설정
-  pageView: {
-    onPageView: (params, context) => {
-      console.log("페이지 뷰:", params, context);
+    onClick: (params: Params) => {
+      console.log("click:", params);
     },
   },
 });
-
-export { Track, useTracker };
 ```
 
-### 2. 기본 사용법
+## Provider 추가하기
+
+애플리케이션 최상단에 `Track.Provider`를 추가하고 전역 컨텍스트를 설정합니다.
 
-```tsx
-// App.tsx
+```tsx {5, 7}
 import { Track, useTracker } from "./tracker";
 
 function App() {
   return (
-    <Track.Provider initialContext={{ userId: "user-123" }}>
+    <Track.Provider initialContext={{ userId: "test-user" }}>
       <HomePage />
     </Track.Provider>
   );
 }
+```
 
-function HomePage() {
-  const { track } = useTracker();
+## 정의한 이벤트 사용하기
 
-  const handleCustomEvent = async () => {
-    await track({
-      eventName: "custom_action",
-      category: "engagement",
-      action: "button_click",
-      label: "homepage_cta",
-      value: 1,
-    });
-  };
+`Track.Click` 컴포넌트를 이용해 선언적으로 클릭 이벤트를 트래킹합니다.
 
+```tsx {7-11, 13}
+function HomePage() {
   return (
-    <div>
+    <main>
       <h1>홈페이지</h1>
 
-      {/* 페이지 뷰 자동 트래킹 */}
-      <Track.PageView
-        params={{
-          pagePath: "/",
-          pageTitle: "홈페이지",
-          category: "main",
-        }}
-      />
-
       {/* 버튼 클릭 트래킹 */}
       <Track.Click
         params={{
-          buttonId: "cta-button",
-          buttonText: "시작하기",
-          category: "conversion",
+          eventName: "clicked-start-button",
         }}
       >
-        <button onClick={handleCustomEvent}>시작하기</button>
+        <button>시작하기</button>
       </Track.Click>
-
-      {/* 배너 노출 트래킹 */}
-      <Track.Impression
-        params={{
-          elementId: "hero-banner",
-          elementType: "banner",
-          visibilityPercentage: 80,
-        }}
-      >
-        <div className="hero-banner">
-          <h2>환영합니다!</h2>
-          <p>새로운 경험을 시작해보세요.</p>
-        </div>
-      </Track.Impression>
-    </div>
-  );
-}
-```
-
-## 핵심 컴포넌트
-
-### 1. Track.Provider
-
-트래킹 컨텍스트를 제공하는 최상위 컴포넌트입니다.
-
-```tsx
-<Track.Provider
-  initialContext={{
-    userId: "user-123",
-    userType: "premium",
-    trackingConsent: true,
-    page: "homepage",
-  }}
->
-  {/* 자식 컴포넌트들 */}
-</Track.Provider>
-```
-
-**주요 속성:**
-
-- `initialContext`: 초기 컨텍스트 객체
-- `enabled`: 트래킹 활성화 여부 (기본값: true)
-
-### 2. Track.Click
-
-클릭 이벤트를 자동으로 트래킹하는 컴포넌트입니다.
-
-```tsx
-<Track.Click
-  params={{
-    buttonId: "submit-button",
-    buttonText: "제출",
-    category: "form",
-    action: "submit",
-  }}
-  enabled={(context) => context.trackingConsent}
-  debounce={{ delay: 300 }}
->
-  <button>제출</button>
-</Track.Click>
-```
-
-**주요 속성:**
-
-- `params`: 이벤트 파라미터 (객체 또는 함수)
-- `enabled`: 트래킹 활성화 조건
-- `debounce`: 디바운스 설정
-- `throttle`: 스로틀 설정
-
-### 3. Track.Impression
-
-요소가 화면에 노출될 때 트래킹하는 컴포넌트입니다.
-
-```tsx
-<Track.Impression
-  params={{
-    elementId: "product-card-1",
-    elementType: "product",
-    position: 1,
-    category: "product_list",
-  }}
-  options={{
-    threshold: 0.5,
-    freezeOnceVisible: true,
-    rootMargin: "0px 0px -100px 0px",
-  }}
->
-  <div className="product-card">
-    <img src="/product1.jpg" alt="상품 1" />
-    <h3>상품명</h3>
-    <p>₩29,900</p>
-  </div>
-</Track.Impression>
-```
-
-**주요 속성:**
-
-- `params`: 이벤트 파라미터
-- `options`: Intersection Observer 옵션
-- `enabled`: 트래킹 활성화 조건
-
-### 4. Track.PageView
-
-페이지 뷰를 자동으로 트래킹하는 컴포넌트입니다.
-
-```tsx
-<Track.PageView
-  params={{
-    pagePath: "/products",
-    pageTitle: "상품 목록",
-    category: "product",
-    referrer: document.referrer,
-  }}
-/>
-```
-
-## 실제 사용 시나리오
-
-### 1. 전자상거래 사이트
-
-```tsx
-// components/ProductList.tsx
-import { Track, useTracker } from "../tracker";
-
-function ProductList({ products }) {
-  const { track } = useTracker();
-
-  const handleAddToCart = async (product) => {
-    try {
-      // 장바구니 추가 로직
-      await addToCart(product.id);
-
-      // 트래킹
-      await track({
-        eventName: "add_to_cart",
-        productId: product.id,
-        productName: product.name,
-        price: product.price,
-        currency: "KRW",
-        quantity: 1,
-        category: product.category,
-      });
-    } catch (error) {
-      console.error("장바구니 추가 실패:", error);
-    }
-  };
-
-  return (
-    <Track.Provider initialContext={{ userId: "user-123", page: "product-list" }}>
-      {/* 페이지 뷰 트래킹 */}
-      <Track.PageView
-        params={{
-          pagePath: "/products",
-          category: "product_list",
-          productCount: products.length,
-        }}
-      />
-
-      <div className="product-grid">
-        {products.map((product, index) => (
-          <Track.Impression
-            key={product.id}
-            params={{
-              productId: product.id,
-              position: index + 1,
-              elementType: "product",
-              category: product.category,
-            }}
-          >
-            <div className="product-card">
-              <img src={product.image} alt={product.name} />
-              <h3>{product.name}</h3>
-              <p>₩{product.price.toLocaleString()}</p>
-
-              {/* 장바구니 버튼 */}
-              <Track.Click
-                params={{
-                  productId: product.id,
-                  action: "add_to_cart",
-                  price: product.price,
-                  position: index + 1,
-                }}
-              >
-                <button onClick={() => handleAddToCart(product)}>장바구니 담기</button>
-              </Track.Click>
-
-              {/* 상세보기 버튼 */}
-              <Track.Click
-                params={{
-                  productId: product.id,
-                  action: "view_detail",
-                  position: index + 1,
-                }}
-              >
-                <button>상세보기</button>
-              </Track.Click>
-            </div>
-          </Track.Impression>
-        ))}
-      </div>
-    </Track.Provider>
-  );
-}
-```
-
-### 2. 블로그/콘텐츠 사이트
-
-```tsx
-// components/BlogPost.tsx
-import { Track, useTracker } from "../tracker";
-
-function BlogPost({ post }) {
-  const { track } = useTracker();
-
-  const handleShare = async (platform) => {
-    await track({
-      eventName: "share_article",
-      articleId: post.id,
-      articleTitle: post.title,
-      platform: platform,
-      category: "social_sharing",
-    });
-  };
-
-  const handleComment = async () => {
-    await track({
-      eventName: "comment_article",
-      articleId: post.id,
-      category: "engagement",
-    });
-  };
-
-  return (
-    <Track.Provider initialContext={{ userId: "user-123", articleId: post.id }}>
-      {/* 페이지 뷰 트래킹 */}
-      <Track.PageView
-        params={{
-          pagePath: `/blog/${post.id}`,
-          pageTitle: post.title,
-          category: "blog",
-          author: post.author,
-          publishDate: post.publishDate,
-        }}
-      />
-
-      <article>
-        <h1>{post.title}</h1>
-        <p>작성자: {post.author}</p>
-
-        {/* 본문 노출 트래킹 */}
-        <Track.Impression
-          params={{
-            elementId: "article-content",
-            elementType: "content",
-            category: "blog_content",
-          }}
-        >
-          <div className="article-content">{post.content}</div>
-        </Track.Impression>
-
-        {/* 공유 버튼들 */}
-        <div className="share-buttons">
-          <Track.Click
-            params={{
-              action: "share",
-              platform: "facebook",
-              articleId: post.id,
-            }}
-          >
-            <button onClick={() => handleShare("facebook")}>Facebook 공유</button>
-          </Track.Click>
-
-          <Track.Click
-            params={{
-              action: "share",
-              platform: "twitter",
-              articleId: post.id,
-            }}
-          >
-            <button onClick={() => handleShare("twitter")}>Twitter 공유</button>
-          </Track.Click>
-        </div>
-
-        {/* 댓글 버튼 */}
-        <Track.Click
-          params={{
-            action: "comment",
-            articleId: post.id,
-          }}
-        >
-          <button onClick={handleComment}>댓글 작성</button>
-        </Track.Click>
-      </article>
-    </Track.Provider>
-  );
-}
-```
-
-### 3. 폼 및 사용자 입력
-
-```tsx
-// components/ContactForm.tsx
-import { Track, useTracker } from "../tracker";
-import { useState } from "react";
-
-function ContactForm() {
-  const { track } = useTracker();
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    message: "",
-  });
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-
-    try {
-      // 폼 제출 로직
-      await submitForm(formData);
-
-      // 성공 트래킹
-      await track({
-        eventName: "form_submit",
-        formId: "contact-form",
-        formType: "contact",
-        fieldCount: Object.keys(formData).length,
-        category: "conversion",
-      });
-    } catch (error) {
-      // 실패 트래킹
-      await track({
-        eventName: "form_error",
-        formId: "contact-form",
-        errorType: error.message,
-        category: "error",
-      });
-    }
-  };
-
-  return (
-    <Track.Provider initialContext={{ userId: "user-123", formId: "contact-form" }}>
-      <form onSubmit={handleSubmit}>
-        {/* 이름 입력 필드 */}
-        <Track.Click
-          params={{
-            action: "focus_field",
-            fieldName: "name",
-            formId: "contact-form",
-          }}
-        >
-          <input
-            type="text"
-            name="name"
-            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            placeholder="이름"
-          />
-        </Track.Click>
-
-        {/* 이메일 입력 필드 */}
-        <Track.Click
-          params={{
-            action: "focus_field",
-            fieldName: "email",
-            formId: "contact-form",
-          }}
-        >
-          <input
-            type="email"
-            name="email"
-            value={formData.email}
-            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-            placeholder="이메일"
-          />
-        </Track.Click>
-
-        {/* 메시지 입력 필드 */}
-        <Track.Click
-          params={{
-            action: "focus_field",
-            fieldName: "message",
-            formId: "contact-form",
-          }}
-        >
-          <textarea
-            name="message"
-            value={formData.message}
-            onChange={(e) => setFormData({ ...formData, message: e.target.value })}
-            placeholder="메시지"
-          />
-        </Track.Click>
-
-        {/* 제출 버튼 */}
-        <Track.Click
-          params={{
-            action: "submit_form",
-            formId: "contact-form",
-            fieldCount: Object.keys(formData).length,
-          }}
-        >
-          <button type="submit">제출</button>
-        </Track.Click>
-      </form>
-    </Track.Provider>
-  );
-}
-```
-
-## 성능 최적화
-
-### 1. 조건부 트래킹
-
-```tsx
-// 사용자 타입에 따른 조건부 트래킹
-<Track.Click
-  params={{ feature: "premium-download" }}
-  enabled={(context) => context.userType === "premium"}
->
-  <button>프리미엄 다운로드</button>
-</Track.Click>
-
-// 트래킹 동의에 따른 조건부 트래킹
-<Track.Click
-  params={{ action: "tracking_consent" }}
-  enabled={(context) => context.trackingConsent}
->
-  <button>동의하기</button>
-</Track.Click>
-
-// 환경에 따른 조건부 트래킹
-<Track.Click
-  params={{ action: "debug_action" }}
-  enabled={() => process.env.NODE_ENV === "development"}
->
-  <button>디버그 액션</button>
-</Track.Click>
-```
-
-### 2. 디바운스와 스로틀
-
-```tsx
-// 검색 입력 디바운스
-<Track.Click
-  params={{ action: "search" }}
-  debounce={{ delay: 300, leading: false, trailing: true }}
->
-  <button>검색</button>
-</Track.Click>
-
-// 빠른 액션 스로틀
-<Track.Click
-  params={{ action: "rapid_action" }}
-  throttle={{ delay: 1000, leading: true, trailing: false }}
->
-  <button>빠른 액션</button>
-</Track.Click>
-
-// 스크롤 이벤트 스로틀
-<Track.Click
-  params={{ action: "scroll" }}
-  throttle={{ delay: 100, leading: false, trailing: true }}
->
-  <div className="scrollable-content">
-    {/* 스크롤 가능한 콘텐츠 */}
-  </div>
-</Track.Click>
-```
-
-### 3. 동적 파라미터
-
-```tsx
-// 컨텍스트 기반 동적 파라미터
-<Track.Click
-  params={(context) => ({
-    action: "custom_action",
-    userId: context.userId,
-    timestamp: Date.now(),
-    userType: context.userType,
-    page: context.page
-  })}
->
-  <button>동적 액션</button>
-</Track.Click>
-
-// 이벤트 기반 동적 파라미터
-<Track.Click
-  params={(context, event) => ({
-    action: "button_click",
-    buttonId: event.target.id,
-    buttonText: event.target.textContent,
-    clickX: event.clientX,
-    clickY: event.clientY,
-    timestamp: Date.now()
-  })}
->
-  <button id="dynamic-button">동적 버튼</button>
-</Track.Click>
-```
-
-## useTracker 훅 활용
-
-### 1. 기본 사용법
-
-```tsx
-function AdvancedComponent() {
-  const { track, context, setContext } = useTracker();
-
-  const handleComplexAction = async () => {
-    try {
-      // 복잡한 비즈니스 로직
-      const result = await processComplexAction();
-
-      // 성공 트래킹
-      await track({
-        eventName: "complex_action_completed",
-        result: result.status,
-        duration: result.duration,
-        userId: context.userId,
-        sessionId: context.sessionId,
-      });
-
-      // 컨텍스트 업데이트
-      setContext({
-        ...context,
-        lastAction: result,
-        actionCount: (context.actionCount || 0) + 1,
-      });
-    } catch (error) {
-      // 에러 트래킹
-      await track({
-        eventName: "complex_action_failed",
-        error: error.message,
-        userId: context.userId,
-      });
-    }
-  };
-
-  return (
-    <div>
-      <button onClick={handleComplexAction}>복잡한 액션</button>
-      <p>액션 횟수: {context.actionCount || 0}</p>
-    </div>
+    </main>
   );
 }
 ```
 
-### 2. 배치 트래킹
-
-```tsx
-function BatchTrackingExample() {
-  const { track } = useTracker();
-
-  const handleBatchAction = async () => {
-    const events = [
-      { eventName: "step_1", step: 1 },
-      { eventName: "step_2", step: 2 },
-      { eventName: "step_3", step: 3 },
-    ];
-
-    // 순차적 트래킹
-    for (const event of events) {
-      await track(event);
-      await new Promise((resolve) => setTimeout(resolve, 100)); // 지연
-    }
-
-    // 또는 병렬 트래킹
-    await Promise.all(events.map((event) => track(event)));
-  };
-
-  return <button onClick={handleBatchAction}>배치 액션</button>;
-}
-```
-
-## 에러 처리 및 디버깅
-
-### 1. 에러 처리
-
-```tsx
-const [Track, useTracker] = createTracker({
-  send: async (params, context) => {
-    try {
-      await analytics.track(params.eventName, {
-        ...params,
-        userId: context.userId,
-        timestamp: Date.now(),
-      });
-    } catch (error) {
-      console.error("트래킹 에러:", error);
-
-      // 에러 추적 서비스로 전송
-      errorTracking.captureException(error);
-
-      // 로컬 스토리지에 저장하여 나중에 재전송
-      saveFailedEvent(params, context);
-    }
-  },
-});
-
-// 실패한 이벤트 저장
-const saveFailedEvent = (params, context) => {
-  try {
-    const failedEvents = JSON.parse(localStorage.getItem("failedEvents") || "[]");
-    failedEvents.push({ params, context, timestamp: Date.now() });
-    localStorage.setItem("failedEvents", JSON.stringify(failedEvents.slice(-50))); // 최대 50개
-  } catch (error) {
-    console.error("실패한 이벤트 저장 실패:", error);
-  }
-};
-```
-
-### 2. 디버깅 모드
-
-```tsx
-const [Track, useTracker] = createTracker({
-  send: (params, context) => {
-    // 개발 환경에서 상세 로깅
-    if (process.env.NODE_ENV === "development") {
-      console.group("🔍 이벤트 트래킹");
-      console.log("이벤트명:", params.eventName);
-      console.log("파라미터:", params);
-      console.log("컨텍스트:", context);
-      console.log("타임스탬프:", new Date().toISOString());
-      console.groupEnd();
-    }
-
-    // 실제 트래킹 로직
-    analytics.track(params.eventName, {
-      ...params,
-      userId: context.userId,
-      timestamp: Date.now(),
-    });
-  },
-});
-```
-
-### 3. 성능 모니터링
-
-```tsx
-const [Track, useTracker] = createTracker({
-  send: async (params, context) => {
-    const startTime = performance.now();
-
-    try {
-      await analytics.track(params.eventName, {
-        ...params,
-        userId: context.userId,
-        timestamp: Date.now(),
-      });
-
-      const duration = performance.now() - startTime;
-
-      // 성능 메트릭 기록
-      if (duration > 1000) {
-        // 1초 이상 걸린 경우
-        console.warn("느린 트래킹:", params.eventName, duration);
-      }
-    } catch (error) {
-      const duration = performance.now() - startTime;
-      console.error("트래킹 실패:", params.eventName, duration, error);
-    }
-  },
-});
-```
+</Steps>
diff --git a/docs/src/content/ko/docs/batching.mdx b/docs/src/content/ko/docs/batching.mdx
index 1016f3d..656ffcb 100644
--- a/docs/src/content/ko/docs/batching.mdx
+++ b/docs/src/content/ko/docs/batching.mdx
@@ -98,8 +98,6 @@ function App() {
 }
 ```
 
-이 예제에서:
-
 1. `<Track.Click>`이 실행될 때마다 이벤트 핸들러가 반환하는 객체가 배치 큐에 저장됩니다.
 2. 2초 후 또는 100개의 이벤트가 쌓이면 `onFlush`가 호출되어 서버로 전송됩니다.
 3. 브라우저가 닫히는 시점에서는 `sendBeacon`으로 전송됩니다.
diff --git a/docs/src/content/ko/docs/components/click.mdx b/docs/src/content/ko/docs/components/click.mdx
index e7fac3e..5256700 100644
--- a/docs/src/content/ko/docs/components/click.mdx
+++ b/docs/src/content/ko/docs/components/click.mdx
@@ -59,15 +59,15 @@ function Click<TKey extends keyof TSchemas>({
 
 스키마가 있을 경우:
 
-| Props    | 타입                                                 | 설명                 | 필수 |
-| -------- | ---------------------------------------------------- | -------------------- | ---- |
-| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 | O    |
+| Props    | 타입                                                 | 설명                 | 
+| -------- | ---------------------------------------------------- | -------------------- | 
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 | 
 
 스키마가 없을 경우:
 
-| Props    | 타입                                               | 설명            | 필수 |
-| -------- | -------------------------------------------------- | --------------- | ---- |
-| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 | O    |
+| Props    | 타입                                               | 설명            | 
+| -------- | -------------------------------------------------- | --------------- | 
+| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 | 
 
 ---
 
@@ -125,10 +125,9 @@ function App() {
 }
 ```
 
-`eventName` 속성을 사용하면 사용자 정의 클릭 이벤트 핸들러 이름을 지정할 수 있습니다.  
-이 속성을 사용하면 핸들러 이름이 변경되어도 유연하게 대처할 수 있습니다.
+`eventName` 속성을 사용하면 사용자 정의 클릭 이벤트 핸들러 이름을 지정할 수 있습니다. 이 속성을 사용하면 핸들러 이름이 변경되어도 유연하게 대처할 수 있습니다.
 
-### 조건부 추적
+### 조건부 이벤트
 
 ```tsx
 <Track.Click params={{ buttonId: "premium-feature" }} enabled={(context, params) => context.user?.isPremium}>
@@ -136,7 +135,7 @@ function App() {
 </Track.Click>
 ```
 
-### 디바운스 추적
+### 디바운스 이벤트
 
 ```tsx
 <Track.Click params={{ buttonId: "search" }} debounce={{ delay: 300, leading: false, trailing: true }}>
@@ -144,7 +143,7 @@ function App() {
 </Track.Click>
 ```
 
-### 스로틀 추적
+### 스로틀 이벤트
 
 ```tsx
 <Track.Click params={{ buttonId: "rapid-action" }} throttle={{ delay: 1000, leading: true, trailing: false }}>
diff --git a/docs/src/content/ko/docs/components/dom-event.mdx b/docs/src/content/ko/docs/components/dom-event.mdx
index acea1da..a5110a9 100644
--- a/docs/src/content/ko/docs/components/dom-event.mdx
+++ b/docs/src/content/ko/docs/components/dom-event.mdx
@@ -64,15 +64,15 @@ function DOMEvent<TKey extends keyof TSchemas>({
 
 스키마가 있을 경우:
 
-| Props    | 타입                                                 | 설명                 | 필수 |
-| -------- | ---------------------------------------------------- | -------------------- | ---- |
-| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 | O    |
+| Props    | 타입                                                 | 설명                 |
+| -------- | ---------------------------------------------------- | -------------------- |
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 |
 
 스키마가 없을 경우:
 
-| Props    | 타입                                               | 설명            | 필수 |
-| -------- | -------------------------------------------------- | --------------- | ---- |
-| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 | O    |
+| Props    | 타입                                               | 설명            |
+| -------- | -------------------------------------------------- | --------------- |
+| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 |
 
 ---
 
@@ -130,10 +130,9 @@ function App() {
 }
 ```
 
-`eventName` 속성을 사용하면 사용자 정의 이벤트 핸들러 이름을 지정할 수 있습니다.  
-이 속성을 사용하면 핸들러 이름이 변경되어도 유연하게 대처할 수 있습니다.
+`eventName` 속성을 사용하면 사용자 정의 이벤트 핸들러 이름을 지정할 수 있습니다. 이 속성을 사용하면 핸들러 이름이 변경되어도 유연하게 대처할 수 있습니다.
 
-### 조건부 추적
+### 조건부 이벤트
 
 ```tsx
 <Track.DOMEvent type="onFocus" params={{ inputId: "email" }} enabled={(context) => context.trackingEnabled}>
@@ -141,7 +140,7 @@ function App() {
 </Track.DOMEvent>
 ```
 
-### 디바운스 추적
+### 디바운스 이벤트
 
 ```tsx
 <Track.DOMEvent
@@ -153,7 +152,7 @@ function App() {
 </Track.DOMEvent>
 ```
 
-### 스로틀 추적
+### 스로틀 이벤트
 
 ```tsx
 <Track.DOMEvent
diff --git a/docs/src/content/ko/docs/components/impression.mdx b/docs/src/content/ko/docs/components/impression.mdx
index abc726c..1a1415d 100644
--- a/docs/src/content/ko/docs/components/impression.mdx
+++ b/docs/src/content/ko/docs/components/impression.mdx
@@ -2,7 +2,7 @@ import { Callout } from "nextra/components";
 
 # Impression
 
-Intersection Observer API를 사용하여 노출 이벤트를 추적합니다. `createTracker`의 리턴 배열의 첫 번째 요소인 이벤트 컴포넌트 중 하나입니다.
+[Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API)를 사용하여 노출 이벤트를 추적합니다. `createTracker`의 리턴 배열의 첫 번째 요소인 이벤트 컴포넌트 중 하나입니다.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
@@ -65,15 +65,15 @@ function Impression<TKey extends keyof TSchemas>({
 
 스키마가 있을 경우:
 
-| Props    | 타입                                                 | 설명                 | 필수 |
-| -------- | ---------------------------------------------------- | -------------------- | ---- |
-| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 | O    |
+| Props    | 타입                                                 | 설명                 |
+| -------- | ---------------------------------------------------- | -------------------- |
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 |
 
 스키마가 없을 경우:
 
-| Props    | 타입                                               | 설명            | 필수 |
-| -------- | -------------------------------------------------- | --------------- | ---- |
-| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 | O    |
+| Props    | 타입                                               | 설명            |
+| -------- | -------------------------------------------------- | --------------- |
+| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 |
 
 ---
 
@@ -119,7 +119,7 @@ function Impression<TKey extends keyof TSchemas>({
 
 ## Examples
 
-### 조건부 추적
+### 조건부 이벤트
 
 ```tsx
 <Track.Impression
@@ -131,7 +131,7 @@ function Impression<TKey extends keyof TSchemas>({
 </Track.Impression>
 ```
 
-### 스로틀 노출 추적
+### 스로틀 이벤트
 
 ```tsx
 <Track.Impression
diff --git a/docs/src/content/ko/docs/components/page-view.mdx b/docs/src/content/ko/docs/components/page-view.mdx
index 9ee02d9..0256d07 100644
--- a/docs/src/content/ko/docs/components/page-view.mdx
+++ b/docs/src/content/ko/docs/components/page-view.mdx
@@ -55,15 +55,15 @@ function PageView<TKey extends keyof TSchemas>({
 
 스키마가 있을 경우:
 
-| Props    | 타입                                                 | 설명                 | 필수 |
-| -------- | ---------------------------------------------------- | -------------------- | ---- |
-| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 | O    |
+| Props    | 타입                                                 | 설명                 | 
+| -------- | ---------------------------------------------------- | -------------------- | 
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 | 
 
 스키마가 없을 경우:
 
-| Props    | 타입                                               | 설명            | 필수 |
-| -------- | -------------------------------------------------- | --------------- | ---- |
-| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 | O    |
+| Props    | 타입                                               | 설명            | 
+| -------- | -------------------------------------------------- | --------------- | 
+| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 | 
 
 ---
 
@@ -103,7 +103,7 @@ function PageView<TKey extends keyof TSchemas>({
 
 ## Examples
 
-### 조건부 추적
+### 조건부 이벤트
 
 ```tsx
 <Track.PageView
diff --git a/docs/src/content/ko/docs/create-tracker.mdx b/docs/src/content/ko/docs/create-tracker.mdx
index 05cee3f..f7c71ae 100644
--- a/docs/src/content/ko/docs/create-tracker.mdx
+++ b/docs/src/content/ko/docs/create-tracker.mdx
@@ -34,29 +34,29 @@ function createTracker<
 
 ### Parameters
 
-`createTracker`는 하나의 설정 객체를 인자로 받습니다.
-
-| 설정         | 타입                                                                                                                     | 설명                                                        |
-| ------------ | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------- |
-| `init`       | `(initialContext: Context, setContext: SetContext) => void \| Promise<void>`                                             | 모든 이벤트 발생 전에 실행되는 초기화 함수. Promise 지원.   |
-| `send`       | `(params: EventParams \| (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType` | 이벤트 전송 함수. Promise 지원.                             |
-| `DOMEvents`  | [`DOMEvents`](https://developer.mozilla.org/docs/Web/API/Event)                                                          | React DOM 이벤트 핸들러 모음 (`onClick`, `onMouseEnter` 등) |
-| `impression` | `ImpressionOptions`                                                                                                      | 노출 이벤트 트래킹 설정                                     |
-| `pageView`   | `PageViewOptions`                                                                                                        | 페이지 뷰 트래킹 설정                                       |
-| `batch`      | `BatchConfig`                                                                                                            | 이벤트 배칭 설정                                            |
-| `schemas`    | `SchemaConfig`                                                                                                           | 이벤트 스키마 검증 설정                                     |
+`createTracker`는 하나의 객체를 인자로 받습니다.
+
+| 속성 (Property) | 타입                                                                                                                     | 설명                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------- |
+| `init`          | `(initialContext: Context, setContext: SetContext) => void \| Promise<void>`                                             | 모든 이벤트 발생 전에 실행되는 초기화 함수. (비동기 지원)   |
+| `send`          | `(params: EventParams \| (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType` | 이벤트 전송 함수. (비동기 지원)                             |
+| `DOMEvents`     | [`DOMEvents`](https://developer.mozilla.org/docs/Web/API/Event)                                                          | React DOM 이벤트 핸들러 모음 (`onClick`, `onMouseEnter` 등) |
+| `impression`    | `ImpressionOptions`                                                                                                      | 노출 이벤트 트래킹 설정                                     |
+| `pageView`      | `PageViewOptions`                                                                                                        | 페이지 뷰 트래킹 설정                                       |
+| `batch`         | `BatchConfig`                                                                                                            | 이벤트 배칭 설정                                            |
+| `schemas`       | `SchemaConfig`                                                                                                           | 이벤트 스키마 검증 설정                                     |
 
 ---
 
 #### `init`
 
 - 타입: `(initialContext: Context, setContext: SetContext) => void | Promise<void>`
-- 설명: 모든 이벤트가 발생하기 전, 초기 컨텍스트를 설정하는 함수입니다. 비동기 함수 지원.
+- 설명: 모든 이벤트가 발생하기 전, 초기 컨텍스트를 설정하는 함수입니다. (비동기를 지원합니다.)
 
 #### `send`
 
 - 타입: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
-- 설명: 이벤트를 외부로 전송하는 함수입니다. 비동기 처리 가능.
+- 설명: 이벤트를 외부로 전송하는 함수입니다. (비동기를 지원합니다.)
 
 #### `DOMEvents`
 
@@ -68,7 +68,7 @@ function createTracker<
 - `impression.onImpression`
 
   - 타입: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
-  - 설명: `<Track.Impression>` 발생 시 실행되는 콜백
+  - 설명: `<Track.Impression>` 발생 시 실행되는 콜백 함수입니다.
 
 - `impression.options`
 
@@ -84,7 +84,7 @@ function createTracker<
 - `pageView.onPageView`
 
   - 타입: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
-  - 설명: `<Track.PageView>` 마운트 시 실행됩니다.
+  - 설명: `<Track.PageView>` 컴포넌트가 마운트 시 실행됩니다.
 
 #### `batch`
 
@@ -95,7 +95,7 @@ function createTracker<
   - `batch.interval`: 전송 간격(ms, 기본값: `3000`)
   - `batch.thresholdSize`: 최대 배치 크기 (기본값: `25`)
   - `batch.onFlush`: 이벤트 전송 처리 함수
-  - `batch.onError`: 오류 발생 시 처리 함수 (옵셔널)
+  - `batch.onError`: 오류 발생 시 처리 함수 (선택)
 
 #### `schemas`
 
diff --git a/docs/src/content/ko/docs/data-type-validation.mdx b/docs/src/content/ko/docs/data-type-validation.mdx
index 5d11357..9f9a2af 100644
--- a/docs/src/content/ko/docs/data-type-validation.mdx
+++ b/docs/src/content/ko/docs/data-type-validation.mdx
@@ -1,6 +1,6 @@
 import { Callout, Steps } from "nextra/components";
 
-# 데이터 타입 검증
+# 데이터 검증
 
 Event Tracker는 이벤트 파라미터의 정확성을 보장하기 위해 [Zod](https://zod.dev/)를 활용한 스키마 기반 데이터 타입 검증 기능을 제공합니다.  
 이 기능을 사용하면 이벤트가 수집되기 전에 사전 정의된 구조와 일치하는지 검증할 수 있으며, 이는 데이터 신뢰성과 오류 방지, 정형 분석을 위한 기반으로 유용합니다.
@@ -33,7 +33,7 @@ const [Track] = createTracker<{}, {}, typeof schemas>({
 });
 ```
 
-## Options
+## Reference
 
 | 옵션            | 타입                                         | 설명                                     | 기본값  |
 | --------------- | -------------------------------------------- | ---------------------------------------- | ------- |
diff --git a/docs/src/content/ko/docs/installation.mdx b/docs/src/content/ko/docs/installation.mdx
index 7fd6c2a..85fd943 100644
--- a/docs/src/content/ko/docs/installation.mdx
+++ b/docs/src/content/ko/docs/installation.mdx
@@ -4,6 +4,8 @@ Event Tracker는 React 애플리케이션에서 이벤트 트래킹을 쉽게 
 
 최신 안정 버전을 설치하려면 아래 명령어를 실행하세요.
 
+![NPM Version](https://img.shields.io/npm/v/%40offlegacy%2Fevent-tracker)
+
 ```shell npm2yarn
 npm install @offlegacy/event-tracker
 ```
diff --git a/docs/src/content/ko/docs/instance-example.mdx b/docs/src/content/ko/docs/instance-example.mdx
deleted file mode 100644
index 965ee64..0000000
--- a/docs/src/content/ko/docs/instance-example.mdx
+++ /dev/null
@@ -1,1031 +0,0 @@
-# 트래킹 인스턴스 만들기
-
-`event-tracker`를 사용하여 여러 개의 트래커 인스턴스를 생성하고 활용하는 방법을 알아보겠습니다. 각 인스턴스는 서로 다른 목적이나 애널리틱스 서비스를 위해 사용할 수 있습니다.
-
-## 인스턴스 분리 전략
-
-### 1. 애널리틱스 서비스별 분리
-
-- Google Analytics, Amplitude, Mixpanel 등 각각의 서비스에 맞는 인스턴스
-- 서비스별 특화된 이벤트 구조와 파라미터
-
-### 2. 목적별 분리
-
-- 사용자 행동 분석, 성능 모니터링, 에러 추적 등
-- 각 목적에 맞는 데이터 구조와 전송 방식
-
-### 3. 환경별 분리
-
-- 개발, 스테이징, 프로덕션 환경
-- 환경별 다른 설정과 데이터 처리
-
-## 기본 설정
-
-### 1. Google Analytics 인스턴스
-
-```tsx
-// trackers/ga4Tracker.ts
-import { createTracker } from "@offlegacy/event-tracker";
-
-interface GA4Context {
-  userId?: string;
-  sessionId?: string;
-  pageTitle?: string;
-  pagePath?: string;
-}
-
-interface GA4EventParams {
-  eventName: string;
-  eventCategory?: string;
-  eventAction?: string;
-  eventLabel?: string;
-  eventValue?: number;
-  customParameters?: Record<string, any>;
-}
-
-// GA4 이벤트 전송 함수
-const sendGA4Event = (params: GA4EventParams, context: GA4Context) => {
-  window.gtag("event", params.eventName, {
-    event_category: params.eventCategory,
-    event_action: params.eventAction,
-    event_label: params.eventLabel,
-    value: params.eventValue,
-    user_id: context.userId,
-    session_id: context.sessionId,
-    page_title: context.pageTitle,
-    page_path: context.pagePath,
-    ...params.customParameters,
-  });
-};
-
-// GA4 트래커 인스턴스
-export const [GATrack, useGATracker] = createTracker<GA4Context, GA4EventParams>({
-  init: (initialContext, setContext) => {
-    const sessionId = `ga_session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    const pageTitle = document.title;
-    const pagePath = window.location.pathname;
-
-    setContext({
-      ...initialContext,
-      sessionId,
-      pageTitle,
-      pagePath,
-    });
-  },
-
-  send: (params, context) => {
-    sendGA4Event(params, context);
-  },
-
-  DOMEvents: {
-    onClick: (params, context) => {
-      sendGA4Event(
-        {
-          eventName: "click",
-          eventCategory: "engagement",
-          eventAction: "click",
-          eventLabel: params.eventLabel || "button_click",
-          customParameters: {
-            button_id: params.buttonId,
-            button_text: params.buttonText,
-            page_location: context.pagePath,
-            ...params.customParameters,
-          },
-        },
-        context,
-      );
-    },
-  },
-
-  impression: {
-    onImpression: (params, context) => {
-      sendGA4Event(
-        {
-          eventName: "impression",
-          eventCategory: "engagement",
-          eventAction: "view",
-          eventLabel: params.elementId,
-          customParameters: {
-            element_id: params.elementId,
-            element_type: params.elementType,
-            visibility_percentage: params.visibilityPercentage,
-            ...params.customParameters,
-          },
-        },
-        context,
-      );
-    },
-    options: {
-      threshold: 0.5,
-      freezeOnceVisible: true,
-    },
-  },
-
-  pageView: {
-    onPageView: (params, context) => {
-      sendGA4Event(
-        {
-          eventName: "page_view",
-          eventCategory: "navigation",
-          eventAction: "page_view",
-          eventLabel: params.pagePath || context.pagePath,
-          customParameters: {
-            page_title: params.pageTitle || context.pageTitle,
-            page_path: params.pagePath || context.pagePath,
-            referrer: params.referrer,
-            ...params.customParameters,
-          },
-        },
-        context,
-      );
-    },
-  },
-});
-
-export { GATrack, useGATracker };
-```
-
-### 2. Amplitude 인스턴스
-
-```tsx
-// trackers/amplitudeTracker.ts
-import { createTracker } from "@offlegacy/event-tracker";
-import * as amplitude from "@amplitude/analytics-browser";
-
-interface AmplitudeContext {
-  userId?: string;
-  deviceId?: string;
-  sessionId?: number;
-  userProperties?: Record<string, any>;
-}
-
-interface AmplitudeEventParams {
-  eventType: string;
-  eventProperties?: Record<string, any>;
-  userProperties?: Record<string, any>;
-}
-
-// Amplitude 이벤트 전송 함수
-const sendAmplitudeEvent = (params: AmplitudeEventParams, context: AmplitudeContext) => {
-  amplitude.track(params.eventType, {
-    ...params.eventProperties,
-    user_id: context.userId,
-    device_id: context.deviceId,
-    session_id: context.sessionId,
-  });
-
-  // 사용자 속성 업데이트
-  if (params.userProperties) {
-    amplitude.setUserProperties(params.userProperties);
-  }
-};
-
-// Amplitude 트래커 인스턴스
-export const [AmpTrack, useAmpTracker] = createTracker<AmplitudeContext, AmplitudeEventParams>({
-  init: (initialContext, setContext) => {
-    // Amplitude 초기화
-    if (process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY) {
-      amplitude.init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY, {
-        defaultTracking: false,
-      });
-    }
-
-    const sessionId = Date.now();
-    const deviceId = amplitude.getDeviceId() || `device_${Math.random().toString(36).substr(2, 9)}`;
-
-    setContext({
-      ...initialContext,
-      sessionId,
-      deviceId,
-    });
-  },
-
-  send: (params, context) => {
-    sendAmplitudeEvent(params, context);
-  },
-
-  DOMEvents: {
-    onClick: (params, context) => {
-      sendAmplitudeEvent(
-        {
-          eventType: "Button Clicked",
-          eventProperties: {
-            button_id: params.buttonId,
-            button_text: params.buttonText,
-            page_path: window.location.pathname,
-            timestamp: Date.now(),
-            ...params.eventProperties,
-          },
-        },
-        context,
-      );
-    },
-  },
-
-  impression: {
-    onImpression: (params, context) => {
-      sendAmplitudeEvent(
-        {
-          eventType: "Content Viewed",
-          eventProperties: {
-            element_id: params.elementId,
-            element_type: params.elementType,
-            visibility_percentage: params.visibilityPercentage,
-            timestamp: Date.now(),
-            ...params.eventProperties,
-          },
-        },
-        context,
-      );
-    },
-    options: {
-      threshold: 0.3,
-      freezeOnceVisible: true,
-    },
-  },
-
-  pageView: {
-    onPageView: (params, context) => {
-      sendAmplitudeEvent(
-        {
-          eventType: "Page Viewed",
-          eventProperties: {
-            page_path: params.pagePath || window.location.pathname,
-            page_title: params.pageTitle || document.title,
-            referrer: params.referrer || document.referrer,
-            timestamp: Date.now(),
-            ...params.eventProperties,
-          },
-        },
-        context,
-      );
-    },
-  },
-});
-
-export { AmpTrack, useAmpTracker };
-```
-
-### 3. 성능 모니터링 인스턴스
-
-```tsx
-// trackers/performanceTracker.ts
-import { createTracker } from "@offlegacy/event-tracker";
-
-interface PerformanceContext {
-  userId?: string;
-  sessionId?: string;
-  deviceInfo?: {
-    userAgent: string;
-    screenSize: string;
-    connectionType?: string;
-  };
-}
-
-interface PerformanceEventParams {
-  metricName: string;
-  value: number;
-  unit?: string;
-  category?: "navigation" | "resource" | "user" | "custom";
-  metadata?: Record<string, any>;
-}
-
-// 성능 이벤트 전송 함수
-const sendPerformanceEvent = (params: PerformanceEventParams, context: PerformanceContext) => {
-  // 성능 모니터링 서비스로 전송
-  performanceAPI.track(params.metricName, {
-    value: params.value,
-    unit: params.unit,
-    category: params.category,
-    user_id: context.userId,
-    session_id: context.sessionId,
-    device_info: context.deviceInfo,
-    timestamp: Date.now(),
-    ...params.metadata,
-  });
-};
-
-// 성능 트래커 인스턴스
-export const [PerfTrack, usePerfTracker] = createTracker<PerformanceContext, PerformanceEventParams>({
-  init: (initialContext, setContext) => {
-    const sessionId = `perf_session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-
-    // 디바이스 정보 수집
-    const deviceInfo = {
-      userAgent: navigator.userAgent,
-      screenSize: `${screen.width}x${screen.height}`,
-      connectionType: (navigator as any).connection?.effectiveType,
-    };
-
-    setContext({
-      ...initialContext,
-      sessionId,
-      deviceInfo,
-    });
-  },
-
-  send: (params, context) => {
-    sendPerformanceEvent(params, context);
-  },
-
-  DOMEvents: {
-    onClick: (params, context) => {
-      // 클릭 응답 시간 측정
-      const clickTime = performance.now();
-      sendPerformanceEvent(
-        {
-          metricName: "click_response_time",
-          value: clickTime,
-          unit: "ms",
-          category: "user",
-          metadata: {
-            button_id: params.buttonId,
-            interaction_type: "click",
-          },
-        },
-        context,
-      );
-    },
-  },
-
-  pageView: {
-    onPageView: (params, context) => {
-      // 페이지 로드 성능 측정
-      const navigationEntry = performance.getEntriesByType("navigation")[0] as PerformanceNavigationTiming;
-
-      if (navigationEntry) {
-        sendPerformanceEvent(
-          {
-            metricName: "page_load_time",
-            value: navigationEntry.loadEventEnd - navigationEntry.loadEventStart,
-            unit: "ms",
-            category: "navigation",
-            metadata: {
-              page_path: params.pagePath || window.location.pathname,
-              dom_content_loaded: navigationEntry.domContentLoadedEventEnd - navigationEntry.domContentLoadedEventStart,
-              first_paint: performance.getEntriesByName("first-paint")[0]?.startTime || 0,
-            },
-          },
-          context,
-        );
-      }
-    },
-  },
-});
-
-export { PerfTrack, usePerfTracker };
-```
-
-### 4. 에러 추적 인스턴스
-
-```tsx
-// trackers/errorTracker.ts
-import { createTracker } from "@offlegacy/event-tracker";
-
-interface ErrorContext {
-  userId?: string;
-  sessionId?: string;
-  pageInfo?: {
-    url: string;
-    title: string;
-    referrer: string;
-  };
-}
-
-interface ErrorEventParams {
-  errorType: "javascript" | "network" | "resource" | "custom";
-  errorMessage: string;
-  errorStack?: string;
-  severity?: "low" | "medium" | "high" | "critical";
-  metadata?: Record<string, any>;
-}
-
-// 에러 이벤트 전송 함수
-const sendErrorEvent = (params: ErrorEventParams, context: ErrorContext) => {
-  // 에러 추적 서비스로 전송
-  errorTracking.captureException(new Error(params.errorMessage), {
-    tags: {
-      error_type: params.errorType,
-      severity: params.severity || "medium",
-    },
-    extra: {
-      error_stack: params.errorStack,
-      user_id: context.userId,
-      session_id: context.sessionId,
-      page_info: context.pageInfo,
-      ...params.metadata,
-    },
-  });
-};
-
-// 에러 트래커 인스턴스
-export const [ErrorTrack, useErrorTracker] = createTracker<ErrorContext, ErrorEventParams>({
-  init: (initialContext, setContext) => {
-    const sessionId = `error_session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-
-    const pageInfo = {
-      url: window.location.href,
-      title: document.title,
-      referrer: document.referrer,
-    };
-
-    setContext({
-      ...initialContext,
-      sessionId,
-      pageInfo,
-    });
-
-    // 전역 에러 핸들러 설정
-    window.addEventListener("error", (event) => {
-      sendErrorEvent(
-        {
-          errorType: "javascript",
-          errorMessage: event.message,
-          errorStack: event.error?.stack,
-          severity: "high",
-          metadata: {
-            filename: event.filename,
-            lineno: event.lineno,
-            colno: event.colno,
-          },
-        },
-        { ...initialContext, sessionId, pageInfo },
-      );
-    });
-
-    // 네트워크 에러 핸들러
-    window.addEventListener("unhandledrejection", (event) => {
-      sendErrorEvent(
-        {
-          errorType: "network",
-          errorMessage: event.reason?.message || "Unhandled Promise Rejection",
-          errorStack: event.reason?.stack,
-          severity: "medium",
-          metadata: {
-            promise_reason: event.reason,
-          },
-        },
-        { ...initialContext, sessionId, pageInfo },
-      );
-    });
-  },
-
-  send: (params, context) => {
-    sendErrorEvent(params, context);
-  },
-});
-
-export { ErrorTrack, useErrorTracker };
-```
-
-## 실제 사용 예제
-
-### 1. 다중 인스턴스 조합 사용
-
-```tsx
-// components/MultiTrackerApp.tsx
-import { GATrack, useGATracker } from "../trackers/ga4Tracker";
-import { AmpTrack, useAmpTracker } from "../trackers/amplitudeTracker";
-import { PerfTrack, usePerfTracker } from "../trackers/performanceTracker";
-import { ErrorTrack, useErrorTracker } from "../trackers/errorTracker";
-
-function MultiTrackerApp() {
-  return (
-    // Google Analytics 트래커
-    <GATrack.Provider
-      initialContext={{
-        userId: "user-123",
-      }}
-    >
-      {/* Amplitude 트래커 */}
-      <AmpTrack.Provider
-        initialContext={{
-          userId: "user-123",
-          userProperties: {
-            plan: "premium",
-            signup_date: "2024-01-01",
-          },
-        }}
-      >
-        {/* 성능 모니터링 트래커 */}
-        <PerfTrack.Provider
-          initialContext={{
-            userId: "user-123",
-          }}
-        >
-          {/* 에러 추적 트래커 */}
-          <ErrorTrack.Provider
-            initialContext={{
-              userId: "user-123",
-            }}
-          >
-            <MainContent />
-          </ErrorTrack.Provider>
-        </PerfTrack.Provider>
-      </AmpTrack.Provider>
-    </GATrack.Provider>
-  );
-}
-
-function MainContent() {
-  const { track: gaTrack } = useGATracker();
-  const { track: ampTrack } = useAmpTracker();
-  const { track: perfTrack } = usePerfTracker();
-  const { track: errorTrack } = useErrorTracker();
-
-  const handlePurchase = async () => {
-    try {
-      // 구매 로직
-      const purchaseResult = await processPurchase();
-
-      // 각 서비스별로 다른 형식의 이벤트 전송
-
-      // Google Analytics - 전자상거래 이벤트
-      await gaTrack({
-        eventName: "purchase",
-        eventCategory: "ecommerce",
-        eventAction: "purchase",
-        eventValue: purchaseResult.amount,
-        customParameters: {
-          transaction_id: purchaseResult.transactionId,
-          currency: "KRW",
-          items: purchaseResult.items,
-        },
-      });
-
-      // Amplitude - 사용자 행동 이벤트
-      await ampTrack({
-        eventType: "Purchase Completed",
-        eventProperties: {
-          amount: purchaseResult.amount,
-          currency: "KRW",
-          transaction_id: purchaseResult.transactionId,
-          item_count: purchaseResult.items.length,
-          payment_method: purchaseResult.paymentMethod,
-        },
-        userProperties: {
-          last_purchase_date: new Date().toISOString(),
-          total_purchases: (purchaseResult.userTotalPurchases || 0) + 1,
-        },
-      });
-
-      // 성능 모니터링 - 구매 완료 시간
-      await perfTrack({
-        metricName: "purchase_completion_time",
-        value: Date.now() - purchaseResult.startTime,
-        unit: "ms",
-        category: "user",
-        metadata: {
-          purchase_amount: purchaseResult.amount,
-          item_count: purchaseResult.items.length,
-        },
-      });
-    } catch (error) {
-      // 에러 추적
-      await errorTrack({
-        errorType: "custom",
-        errorMessage: "Purchase failed",
-        errorStack: error.stack,
-        severity: "high",
-        metadata: {
-          purchase_amount: purchaseResult?.amount,
-          error_details: error.message,
-        },
-      });
-    }
-  };
-
-  return (
-    <div>
-      <h1>다중 트래커 예제</h1>
-
-      {/* Google Analytics 페이지 뷰 */}
-      <GATrack.PageView
-        params={{
-          pagePath: "/multi-tracker-example",
-          pageTitle: "다중 트래커 예제 페이지",
-          category: "demo",
-        }}
-      />
-
-      {/* Amplitude 페이지 뷰 */}
-      <AmpTrack.PageView
-        params={{
-          pagePath: "/multi-tracker-example",
-          pageTitle: "다중 트래커 예제 페이지",
-          eventProperties: {
-            page_category: "demo",
-            user_segment: "premium",
-          },
-        }}
-      />
-
-      {/* 성능 모니터링 페이지 뷰 */}
-      <PerfTrack.PageView
-        params={{
-          pagePath: "/multi-tracker-example",
-        }}
-      />
-
-      <button onClick={handlePurchase}>구매하기 (다중 트래킹)</button>
-    </div>
-  );
-}
-```
-
-### 2. 조건부 인스턴스 사용
-
-```tsx
-// components/ConditionalTracker.tsx
-import { GATrack, useGATracker } from "../trackers/ga4Tracker";
-import { AmpTrack, useAmpTracker } from "../trackers/amplitudeTracker";
-
-function ConditionalTracker({ userType, trackingConsent }: { userType: "free" | "premium"; trackingConsent: boolean }) {
-  if (!trackingConsent) {
-    return <div>트래킹이 비활성화되었습니다.</div>;
-  }
-
-  // 사용자 타입에 따라 다른 트래커 사용
-  if (userType === "premium") {
-    return (
-      <AmpTrack.Provider
-        initialContext={{
-          userId: "premium-user-123",
-          userProperties: {
-            plan: "premium",
-            features: ["advanced_analytics", "custom_events"],
-          },
-        }}
-      >
-        <PremiumUserContent />
-      </AmpTrack.Provider>
-    );
-  }
-
-  return (
-    <GATrack.Provider
-      initialContext={{
-        userId: "free-user-123",
-      }}
-    >
-      <FreeUserContent />
-    </GATrack.Provider>
-  );
-}
-
-function PremiumUserContent() {
-  const { track } = useAmpTracker();
-
-  const handlePremiumAction = async () => {
-    await track({
-      eventType: "Premium Feature Used",
-      eventProperties: {
-        feature_name: "advanced_analytics",
-        usage_count: 1,
-        timestamp: Date.now(),
-      },
-      userProperties: {
-        last_premium_action: new Date().toISOString(),
-      },
-    });
-  };
-
-  return (
-    <div>
-      <h2>프리미엄 사용자 콘텐츠</h2>
-      <button onClick={handlePremiumAction}>프리미엄 기능 사용</button>
-    </div>
-  );
-}
-
-function FreeUserContent() {
-  const { track } = useGATracker();
-
-  const handleUpgradeClick = async () => {
-    await track({
-      eventName: "upgrade_click",
-      eventCategory: "conversion",
-      eventAction: "click",
-      eventLabel: "upgrade_button",
-      customParameters: {
-        button_location: "header",
-        current_plan: "free",
-      },
-    });
-  };
-
-  return (
-    <div>
-      <h2>무료 사용자 콘텐츠</h2>
-      <button onClick={handleUpgradeClick}>프리미엄으로 업그레이드</button>
-    </div>
-  );
-}
-```
-
-### 3. 인스턴스 팩토리 패턴
-
-```tsx
-// utils/trackerFactory.ts
-import { createTracker } from "@offlegacy/event-tracker";
-
-interface TrackerConfig {
-  type: "ga4" | "amplitude" | "performance" | "error";
-  enabled: boolean;
-  apiKey?: string;
-  customConfig?: Record<string, any>;
-}
-
-// 트래커 팩토리 클래스
-class TrackerFactory {
-  private static instances = new Map<string, any>();
-
-  static createTracker(config: TrackerConfig) {
-    const key = `${config.type}_${config.enabled}`;
-
-    if (this.instances.has(key)) {
-      return this.instances.get(key);
-    }
-
-    let tracker;
-
-    switch (config.type) {
-      case "ga4":
-        tracker = this.createGA4Tracker(config);
-        break;
-      case "amplitude":
-        tracker = this.createAmplitudeTracker(config);
-        break;
-      case "performance":
-        tracker = this.createPerformanceTracker(config);
-        break;
-      case "error":
-        tracker = this.createErrorTracker(config);
-        break;
-      default:
-        throw new Error(`Unknown tracker type: ${config.type}`);
-    }
-
-    this.instances.set(key, tracker);
-    return tracker;
-  }
-
-  private static createGA4Tracker(config: TrackerConfig) {
-    return createTracker({
-      // GA4 설정
-      init: (initialContext, setContext) => {
-        if (!config.enabled) return;
-
-        // GA4 초기화 로직
-        if (config.apiKey) {
-          window.gtag("config", config.apiKey);
-        }
-
-        setContext({
-          ...initialContext,
-          sessionId: `ga_${Date.now()}`,
-        });
-      },
-
-      send: (params, context) => {
-        if (!config.enabled) return;
-
-        window.gtag("event", params.eventName, {
-          ...params,
-          user_id: context.userId,
-        });
-      },
-
-      DOMEvents: {
-        onClick: (params, context) => {
-          if (!config.enabled) return;
-
-          window.gtag("event", "click", {
-            button_id: params.buttonId,
-            user_id: context.userId,
-          });
-        },
-      },
-    });
-  }
-
-  private static createAmplitudeTracker(config: TrackerConfig) {
-    return createTracker({
-      // Amplitude 설정
-      init: (initialContext, setContext) => {
-        if (!config.enabled || !config.apiKey) return;
-
-        // Amplitude 초기화 로직
-        import("@amplitude/analytics-browser").then(({ default: amplitude }) => {
-          amplitude.init(config.apiKey!);
-        });
-
-        setContext({
-          ...initialContext,
-          sessionId: Date.now(),
-        });
-      },
-
-      send: (params, context) => {
-        if (!config.enabled) return;
-
-        // Amplitude 이벤트 전송
-        import("@amplitude/analytics-browser").then(({ default: amplitude }) => {
-          amplitude.track(params.eventType, {
-            ...params.eventProperties,
-            user_id: context.userId,
-          });
-        });
-      },
-    });
-  }
-
-  private static createPerformanceTracker(config: TrackerConfig) {
-    return createTracker({
-      // 성능 모니터링 설정
-      init: (initialContext, setContext) => {
-        if (!config.enabled) return;
-
-        setContext({
-          ...initialContext,
-          sessionId: `perf_${Date.now()}`,
-        });
-      },
-
-      send: (params, context) => {
-        if (!config.enabled) return;
-
-        // 성능 메트릭 전송
-        console.log("Performance metric:", params);
-      },
-    });
-  }
-
-  private static createErrorTracker(config: TrackerConfig) {
-    return createTracker({
-      // 에러 추적 설정
-      init: (initialContext, setContext) => {
-        if (!config.enabled) return;
-
-        setContext({
-          ...initialContext,
-          sessionId: `error_${Date.now()}`,
-        });
-
-        // 전역 에러 핸들러 설정
-        window.addEventListener("error", (event) => {
-          console.error("Global error:", event);
-        });
-      },
-
-      send: (params, context) => {
-        if (!config.enabled) return;
-
-        // 에러 이벤트 전송
-        console.error("Error event:", params);
-      },
-    });
-  }
-
-  static clearInstances() {
-    this.instances.clear();
-  }
-}
-
-export { TrackerFactory };
-```
-
-## 고급 패턴
-
-### 1. 인스턴스 조합 훅
-
-```tsx
-// hooks/useMultiTracker.ts
-import { useGATracker } from "../trackers/ga4Tracker";
-import { useAmpTracker } from "../trackers/amplitudeTracker";
-import { usePerfTracker } from "../trackers/performanceTracker";
-import { useErrorTracker } from "../trackers/errorTracker";
-
-export function useMultiTracker() {
-  const gaTracker = useGATracker();
-  const ampTracker = useAmpTracker();
-  const perfTracker = usePerfTracker();
-  const errorTracker = useErrorTracker();
-
-  const trackAll = async (eventName: string, params: any) => {
-    try {
-      // 모든 트래커에 이벤트 전송
-      await Promise.allSettled([
-        gaTracker.track({ eventName, ...params }),
-        ampTracker.track({ eventType: eventName, eventProperties: params }),
-        perfTracker.track({ metricName: eventName, value: 1, category: "custom" }),
-      ]);
-    } catch (error) {
-      await errorTracker.track({
-        errorType: "custom",
-        errorMessage: `Failed to track event: ${eventName}`,
-        errorStack: error.stack,
-        severity: "medium",
-        metadata: { eventName, params },
-      });
-    }
-  };
-
-  const trackConditional = async (
-    eventName: string,
-    params: any,
-    conditions: { ga?: boolean; amp?: boolean; perf?: boolean },
-  ) => {
-    const promises = [];
-
-    if (conditions.ga) {
-      promises.push(gaTracker.track({ eventName, ...params }));
-    }
-
-    if (conditions.amp) {
-      promises.push(ampTracker.track({ eventType: eventName, eventProperties: params }));
-    }
-
-    if (conditions.perf) {
-      promises.push(perfTracker.track({ metricName: eventName, value: 1, category: "custom" }));
-    }
-
-    try {
-      await Promise.allSettled(promises);
-    } catch (error) {
-      await errorTracker.track({
-        errorType: "custom",
-        errorMessage: `Failed to track conditional event: ${eventName}`,
-        errorStack: error.stack,
-        severity: "medium",
-        metadata: { eventName, params, conditions },
-      });
-    }
-  };
-
-  return {
-    gaTracker,
-    ampTracker,
-    perfTracker,
-    errorTracker,
-    trackAll,
-    trackConditional,
-  };
-}
-```
-
-### 2. 인스턴스 관리자
-
-```tsx
-// managers/TrackerManager.ts
-class TrackerManager {
-  private trackers = new Map<string, any>();
-  private configs = new Map<string, any>();
-
-  register(name: string, tracker: any, config: any) {
-    this.trackers.set(name, tracker);
-    this.configs.set(name, config);
-  }
-
-  get(name: string) {
-    return this.trackers.get(name);
-  }
-
-  enable(name: string) {
-    const config = this.configs.get(name);
-    if (config) {
-      config.enabled = true;
-    }
-  }
-
-  disable(name: string) {
-    const config = this.configs.get(name);
-    if (config) {
-      config.enabled = false;
-    }
-  }
-
-  trackAll(eventName: string, params: any) {
-    this.trackers.forEach((tracker, name) => {
-      const config = this.configs.get(name);
-      if (config?.enabled) {
-        try {
-          tracker.track({ eventName, ...params });
-        } catch (error) {
-          console.error(`Failed to track with ${name}:`, error);
-        }
-      }
-    });
-  }
-
-  getStatus() {
-    const status: Record<string, boolean> = {};
-    this.configs.forEach((config, name) => {
-      status[name] = config.enabled;
-    });
-    return status;
-  }
-}
-
-export const trackerManager = new TrackerManager();
-```
diff --git a/docs/src/content/ko/docs/introduction.mdx b/docs/src/content/ko/docs/introduction.mdx
index 7b9c0a4..454502b 100644
--- a/docs/src/content/ko/docs/introduction.mdx
+++ b/docs/src/content/ko/docs/introduction.mdx
@@ -1,5 +1,3 @@
-import { Steps } from "nextra/components";
-
 # 소개
 
 Event Tracker 문서에 오신 것을 환영합니다.
@@ -36,21 +34,19 @@ function App() {
 
 Event Tracker는 개발자 경험과 애플리케이션 성능을 모두 고려한 다양한 기능을 제공합니다.
 
-| Feature                 | Description                                                                                                                                                                     |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 선언적 API              | 트래킹을 위한 별도의 설정이나 복잡한 코드 없이, 컴포넌트 형태로 직관적으로 선언할 수 있습니다.                                                                                  |
-| 애널리틱스 도구 독립성  | [Google Analytics](https://analytics.google.com/), [Amplitude](https://amplitude.com/) 등 어떤 도구든 자유롭게 연동할 수 있어, 기존 인프라를 변경하지 않고도 도입이 가능합니다. |
-| 명확한 관심사 분리      | 트래킹 로직을 비즈니스 코드에서 완전히 분리함으로써 코드의 가독성, 테스트 용이성, 유지보수성을 모두 향상시킵니다.                                                               |
-| 최적화된 성능           | 배칭, 디바운스, 스로틀링 등 네트워크 요청을 최소화하는 다양한 전략이 내장되어 있어, 성능 저하 없이 안정적으로 트래킹할 수 있습니다.                                             |
-| 실행 순서 보장          | 비동기 상황에서도 이벤트가 의도한 순서대로 처리되도록 설계되어, 복잡한 사용자 흐름에서도 정확한 트래킹이 가능합니다.                                                            |
-| 강력한 데이터 타입 검증 | [Zod](https://zod.dev/) 기반의 정적 스키마 검증으로 런타임 이전에 오류를 방지하고, 수집되는 이벤트 데이터의 신뢰도를 보장합니다.                                                |
+| Feature                | Description                                                                                                                                                                     |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 선언적 API             | 트래킹을 위한 별도의 설정이나 복잡한 코드 없이, 컴포넌트 형태로 직관적으로 선언할 수 있습니다.                                                                                  |
+| 애널리틱스 도구 독립성 | [Google Analytics](https://analytics.google.com/), [Amplitude](https://amplitude.com/) 등 어떤 도구든 자유롭게 연동할 수 있어, 기존 인프라를 변경하지 않고도 도입이 가능합니다. |
+| 명확한 관심사 분리     | 트래킹 로직을 비즈니스 코드에서 완전히 분리함으로써 코드의 가독성, 테스트 용이성, 유지보수성을 모두 향상시킵니다.                                                               |
+| 최적화된 성능          | 배칭, 디바운스, 스로틀링 등 네트워크 요청을 최소화하는 다양한 전략이 내장되어 있어, 성능 저하 없이 안정적으로 트래킹할 수 있습니다.                                             |
+| 실행 순서 보장         | 비동기 상황에서도 이벤트가 의도한 순서대로 처리되도록 설계되어, 복잡한 사용자 흐름에서도 정확한 트래킹이 가능합니다.                                                            |
+| 데이터 검증            | [Zod](https://zod.dev/) 기반의 정적 스키마 검증으로 빌드 타임에서 오류를 방지하고, 수집되는 이벤트 데이터의 신뢰도를 보장합니다.                                                |
 
 ## 핵심 개념
 
 Event Tracker를 효과적으로 사용하기 위해 알아야 할 몇 가지 핵심 개념이 있습니다.
 
-<Steps>
-
 ### 인스턴스 (`createTracker`)
 
 라이브러리의 가장 기본적인 출발점입니다. `createTracker` 함수를 사용하여 트래커 인스턴스(`Track` 컴포넌트 컬렉션과 `useTracker` 훅)를 생성합니다. 이때, DOM 이벤트 핸들러, 노출(Impression) 이벤트 핸들러, 스키마 등을 설정하여 이벤트 트래킹을 정의합니다.
@@ -73,17 +69,15 @@ React의 Context API를 기반으로 구현되었습니다. 애플리케이션 
 
 ### 커스텀 훅 (`useTracker`)
 
-컴포넌트의 생명주기나 DOM 이벤트와 직접적으로 관련되지 않은, 보다 복잡하거나 조건부적인 이벤트 트래킹이 필요할 때 사용합니다. `useTracker` 훅을 사용하면 `Track.Provider`로부터 컨텍스트 정보를 가져오고, 정의된 트래킹 로직을 명령형으로 실행할 수 있습니다.
-
-</Steps>
+컴포넌트의 생명주기나 DOM 이벤트와 직접적으로 관련되지 않은, 보다 복잡하거나 조건부적인 이벤트 트래킹이 필요할 때 사용합니다. `useTracker` 훅을 사용하면 `Track.Provider`로부터 컨텍스트 정보를 가져오고, 정의된 트래킹 로직을 명령형으로 사용할 수 있습니다.
 
 ## 다음 단계
 
 이러한 핵심 개념들은 서로 유기적으로 작동하여 Event Tracker의 강력하고 유연한 이벤트 트래킹 환경을 구성합니다. 더 자세한 사용법과 각 기능에 대한 심층적인 내용은 아래 문서들에서 확인하실 수 있습니다.
 
-- [왜 Event Tracker인가요?](/docs/why-event-tracker): Event Tracker의 필요성과 주요 기능 소개
-- [`createTracker`](/docs/create-tracker): 트래커 인스턴스 생성 및 상세 설정 가이드
-- [Components](/docs/components): 사용 가능한 모든 트래킹 컴포넌트와 사용 예시
-- [`useTracker`](/docs/hook): 커스텀 훅을 활용한 사용자 지정 트래킹 기법
-- [Batching](/docs/batching): 이벤트 배칭을 통한 성능 최적화 전략
-- [Data Type Validation](/docs/data-type-validation): Zod 스키마를 활용한 데이터 유효성 검증 가이드
+- [왜 Event Tracker인가요?](/docs/why-event-tracker): Event Tracker의 필요성과 주요 기능 알아보기
+- [`createTracker`](/docs/create-tracker): 트래커 인스턴스 생성 및 설정 방법 알아보기
+- [Components](/docs/components): 사용 가능한 모든 트래킹 컴포넌트와 사용 예시 살펴보기
+- [`useTracker`](/docs/use-tracker): 커스텀 훅을 활용한 사용자 지정 트래킹 방법 알아보기
+- [배칭](/docs/batching): 이벤트 배칭을 통한 성능 최적화 전략 알아보기
+- [데이터 검증](/docs/data-type-validation): Zod 스키마를 활용한 데이터 유효성 검증하기
diff --git a/docs/src/content/ko/docs/use-tracker.mdx b/docs/src/content/ko/docs/use-tracker.mdx
index d0cf124..6937675 100644
--- a/docs/src/content/ko/docs/use-tracker.mdx
+++ b/docs/src/content/ko/docs/use-tracker.mdx
@@ -196,9 +196,8 @@ interface ThrottleConfig {
 ### 성능 최적화
 
 - 렌더링 중에 이벤트 트래킹 함수를 호출하지 마세요.
-- 콜백 또는 효과를 사용하세요.
 - [배칭](/docs/batching)을 사용하여 성능을 향상시키세요.
-- [데이터 타입 검증](/docs/data-type-validation)을 사용하여 데이터 타입 안전성을 확인하세요.
+- [데이터 검증](/docs/data-type-validation)을 사용하여 데이터 안전성을 확인하세요.
 
 ## Examples
 
diff --git a/docs/src/content/ko/docs/why-event-tracker.mdx b/docs/src/content/ko/docs/why-event-tracker.mdx
index 9079f1c..5a504aa 100644
--- a/docs/src/content/ko/docs/why-event-tracker.mdx
+++ b/docs/src/content/ko/docs/why-event-tracker.mdx
@@ -51,9 +51,21 @@ function Counter({ userId }: { userId: string }) {
 }
 ```
 
-- **Prop Drilling의 고통**: 이벤트 트래킹에 필요한 데이터를 하위 컴포넌트까지 전달하기 위해 수많은 계층을 거쳐 prop을 내려보내야 하는 경우가 많습니다. 이는 코드의 가독성을 해치고 유지보수를 어렵게 만듭니다.
-- **로직의 강한 결합**: 비즈니스 로직과 이벤트 트래킹 로직이 한데 섞여 코드의 복잡도를 높이고, 각 로직의 독립적인 테스트와 수정을 어렵게 만듭니다.
-- **보일러플레이트 코드 증가**: 반복적인 트래킹 코드 작성은 개발 생산성을 저해하는 요인이 됩니다.
+<Steps>
+
+### Prop Drilling의 고통
+
+이벤트 트래킹에 필요한 데이터를 하위 컴포넌트까지 전달하기 위해 수많은 계층을 거쳐 prop을 내려보내야 하는 경우가 많습니다. 이는 코드의 가독성을 해치고 유지보수를 어렵게 만듭니다.
+
+### 로직의 강한 결합
+
+비즈니스 로직과 이벤트 트래킹 로직이 한데 섞여 코드의 복잡도를 높이고, 각 로직의 독립적인 테스트와 수정을 어렵게 만듭니다.
+
+### 보일러플레이트 코드 증가
+
+반복적인 트래킹 코드 작성은 개발 생산성을 저해하는 요인이 됩니다.
+
+</Steps>
 
 ## Event Tracker가 제시하는 새로운 패러다임
 
@@ -138,7 +150,7 @@ const [Track, useTracker] = createTracker({
 
 이제 <b>'어떻게 추적할지'</b>에 대한 코드가 비즈니스 로직과 분리되었습니다. 애플리케이션 외부에 위치하므로 비즈니스 로직을 변경하지 않고도 이벤트 트래킹 로직을 수정할 수 있습니다.
 
-### 데이터 타입 검증
+### 데이터 검증
 
 ```tsx {13-20, 24-33}
 import { z } from "zod";
@@ -181,6 +193,6 @@ const [Track] = createTracker<Context, Params, typeof schemas>({
 <Track.Click schema="click_button" params={{ target: "submit-button" }} />;
 ```
 
-Event Tracker는 선택적으로 [Zod](https://zod.dev/) 라이브러리와 통합하여 스키마 기반의 강력한 데이터 타입 검증 기능을 제공합니다. 이를 통해 개발 단계에서부터 데이터 오류를 방지하고, 트래킹 데이터의 신뢰성을 높일 수 있습니다.
+Event Tracker는 [Zod](https://zod.dev/) 라이브러리와 통합하여 스키마 기반의 강력한 데이터 타입 검증 기능을 제공합니다. 이를 통해 개발 단계에서부터 데이터 오류를 방지하고, 트래킹 데이터의 신뢰성을 높일 수 있습니다.
 
 </Steps>
diff --git a/docs/src/content/ko/docs/with-google-analytics-example.mdx b/docs/src/content/ko/docs/with-google-analytics-example.mdx
index 3444078..c0e1eae 100644
--- a/docs/src/content/ko/docs/with-google-analytics-example.mdx
+++ b/docs/src/content/ko/docs/with-google-analytics-example.mdx
@@ -1,624 +1,115 @@
+import { Steps } from "nextra/components";
+
 # Google Analytics 연동하기
 
-Google Analytics 4(GA4)와 함께 `event-tracker`를 사용하는 방법을 알아보겠습니다. GA4의 이벤트 기반 모델과 완벽하게 호환되어 효과적인 사용자 행동 분석이 가능합니다.
+GA4(Google Analytics 4)와 쉽게 통합해 사용자 행동을 추적하는 방법을 단계별로 안내합니다.
 
-## GA4 설정
+<Steps>
 
-먼저 Google Analytics 4를 설정하고 `gtag` 함수를 사용할 수 있도록 준비합니다.
+## GA4 스크립트 설정
 
-### 1. GA4 스크립트 추가
+`index.html` `<head>`에 GA4 스크립트를 추가하여 `gtag`를 사용할 준비를 합니다.
 
 ```html
 <!-- index.html -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <!-- Google Analytics 4 -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-      gtag("config", "GA_MEASUREMENT_ID");
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
+<head>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+    gtag("config", "GA_MEASUREMENT_ID");
+  </script>
+</head>
 ```
 
-### 2. TypeScript 타입 정의
+## `sendGA4` 함수 정의하기
 
-```tsx
-// types/gtag.d.ts
-declare global {
-  interface Window {
-    gtag: (command: "config" | "event" | "set" | "consent", targetId: string, config?: Record<string, any>) => void;
+`gtag` 호출 전 확인 및 경고 로직을 포함한 전송 함수를 정의합니다.
+
+```ts
+export function sendGA4(eventName: string, eventParams: Record<string, unknown> = {}): void {
+  if (typeof window === "undefined") return;
+  if (typeof window.gtag !== "function") {
+    console.warn("[GA4] gtag 함수가 로드되지 않았습니다.");
+    return;
   }
+  window.gtag("event", eventName, eventParams);
 }
-
-export {};
 ```
 
-## 기본 설정
+## 트래킹 이벤트 정의하기
 
-### GA4 트래커 생성
+`createTracker`를 통해 GA4 전송 로직과 DOM/노출/페이지뷰 이벤트를 설정합니다.
 
 ```tsx
-// tracker/ga4Tracker.ts
 import { createTracker } from "@offlegacy/event-tracker";
+import { sendGA4 } from "./sendGA4";
 
 interface GA4Context {
-  userId?: string;
-  sessionId?: string;
-  pageTitle?: string;
-  pagePath?: string;
-  userProperties?: Record<string, any>;
+  userId: string;
 }
 
 interface GA4EventParams {
   eventName: string;
-  eventCategory?: string;
-  eventAction?: string;
-  eventLabel?: string;
-  eventValue?: number;
-  customParameters?: Record<string, any>;
 }
 
-// GA4 이벤트 전송 함수
-const sendGA4Event = (params: GA4EventParams, context: GA4Context) => {
-  const { eventName, customParameters = {} } = params;
-
-  // GA4 이벤트 전송
-  window.gtag("event", eventName, {
-    // 기본 파라미터
-    event_category: params.eventCategory,
-    event_action: params.eventAction,
-    event_label: params.eventLabel,
-    value: params.eventValue,
-
-    // 사용자 속성
-    user_id: context.userId,
-    session_id: context.sessionId,
-
-    // 페이지 정보
-    page_title: context.pageTitle,
-    page_path: context.pagePath,
-
-    // 커스텀 파라미터
-    ...customParameters,
-  });
-};
-
-// GA4 트래커 인스턴스 생성
 export const [Track, useTracker] = createTracker<GA4Context, GA4EventParams>({
-  // 초기화 함수
-  init: (initialContext, setContext) => {
-    // 세션 ID 생성
-    const sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-
-    // 페이지 정보 설정
-    const pageTitle = document.title;
-    const pagePath = window.location.pathname;
-
-    setContext({
-      ...initialContext,
-      sessionId,
-      pageTitle,
-      pagePath,
-    });
-  },
-
-  // 이벤트 전송 함수
-  send: (params, context) => {
-    sendGA4Event(params, context);
-  },
-
-  // DOM 이벤트 핸들러
   DOMEvents: {
-    onClick: (params, context) => {
-      sendGA4Event(
-        {
-          eventName: "click",
-          eventCategory: "engagement",
-          eventAction: "click",
-          eventLabel: params.eventLabel || "button_click",
-          customParameters: {
-            button_id: params.buttonId,
-            button_text: params.buttonText,
-            page_location: context.pagePath,
-            ...params.customParameters,
-          },
-        },
-        context,
-      );
-    },
+    onClick: (params, ctx) => sendGA4(params.eventName, { ...params, user_id: ctx.userId }),
   },
-
-  // 노출 이벤트 설정
   impression: {
-    onImpression: (params, context) => {
-      sendGA4Event(
-        {
-          eventName: "impression",
-          eventCategory: "engagement",
-          eventAction: "view",
-          eventLabel: params.elementId,
-          customParameters: {
-            element_id: params.elementId,
-            element_type: params.elementType,
-            visibility_percentage: params.visibilityPercentage,
-            ...params.customParameters,
-          },
-        },
-        context,
-      );
-    },
-    options: {
-      threshold: 0.5,
-      freezeOnceVisible: true,
-    },
-  },
-
-  // 페이지 뷰 설정
-  pageView: {
-    onPageView: (params, context) => {
-      sendGA4Event(
-        {
-          eventName: "page_view",
-          eventCategory: "navigation",
-          eventAction: "page_view",
-          eventLabel: params.pagePath || context.pagePath,
-          customParameters: {
-            page_title: params.pageTitle || context.pageTitle,
-            page_path: params.pagePath || context.pagePath,
-            referrer: params.referrer,
-            ...params.customParameters,
-          },
-        },
-        context,
-      );
-    },
+    onImpression: (params, ctx) => sendGA4("impression", { ...params, user_id: ctx.userId }),
+    options: { threshold: 0.5, freezeOnceVisible: true },
   },
 });
-
-export { Track, useTracker };
 ```
 
-## 실제 사용 예제
+## 블로그 페이지에서 사용하기
 
-### 1. 전자상거래 사이트
+`Track.Provider`로 컨텍스트를 감싸고, `<Track.PageView>`, `<Track.Impression>`, `<Track.Click>` 컴포넌트를 사용해 이벤트를 선언적으로 기록합니다.
 
 ```tsx
-// components/ProductPage.tsx
-import { Track, useTracker } from "../tracker/ga4Tracker";
-
-interface Product {
-  id: string;
-  name: string;
-  price: number;
-  category: string;
-}
-
-function ProductPage({ product }: { product: Product }) {
-  const { track } = useTracker();
-
-  const handleAddToCart = async () => {
-    // 장바구니 추가 로직
-    await addToCart(product.id);
-
-    // GA4 이벤트 전송
-    await track({
-      eventName: "add_to_cart",
-      eventCategory: "ecommerce",
-      eventAction: "add",
-      eventLabel: product.name,
-      customParameters: {
-        currency: "KRW",
-        value: product.price,
-        items: [
-          {
-            item_id: product.id,
-            item_name: product.name,
-            item_category: product.category,
-            price: product.price,
-            quantity: 1,
-          },
-        ],
-      },
-    });
-  };
-
-  const handlePurchase = async () => {
-    // 구매 로직
-    const purchaseResult = await processPurchase(product.id);
-
-    if (purchaseResult.success) {
-      await track({
-        eventName: "purchase",
-        eventCategory: "ecommerce",
-        eventAction: "purchase",
-        eventLabel: product.name,
-        eventValue: product.price,
-        customParameters: {
-          currency: "KRW",
-          transaction_id: purchaseResult.transactionId,
-          value: product.price,
-          items: [
-            {
-              item_id: product.id,
-              item_name: product.name,
-              item_category: product.category,
-              price: product.price,
-              quantity: 1,
-            },
-          ],
-        },
-      });
-    }
-  };
+import { Track } from "./event-tracker";
 
+function App() {
   return (
-    <Track.Provider
-      initialContext={{
-        userId: "user-123",
-        userProperties: {
-          user_type: "premium",
-          subscription_status: "active",
-        },
-      }}
-    >
-      {/* 페이지 뷰 트래킹 */}
-      <Track.PageView
-        params={{
-          pagePath: `/products/${product.id}`,
-          pageTitle: `${product.name} - 상품 상세`,
-          customParameters: {
-            product_id: product.id,
-            product_category: product.category,
-          },
-        }}
-      />
-
-      <div className="product-detail">
-        <h1>{product.name}</h1>
-        <p>₩{product.price.toLocaleString()}</p>
-
-        {/* 상품 이미지 노출 트래킹 */}
-        <Track.Impression
-          params={{
-            elementId: `product-image-${product.id}`,
-            elementType: "product_image",
-            visibilityPercentage: 80,
-            customParameters: {
-              product_id: product.id,
-              image_position: "main",
-            },
-          }}
-        >
-          <img src={product.imageUrl} alt={product.name} className="product-image" />
-        </Track.Impression>
-
-        {/* 장바구니 버튼 클릭 트래킹 */}
-        <Track.Click
-          params={{
-            buttonId: "add-to-cart",
-            buttonText: "장바구니 담기",
-            eventLabel: "add_to_cart_button",
-            customParameters: {
-              product_id: product.id,
-              product_name: product.name,
-              product_price: product.price,
-            },
-          }}
-        >
-          <button onClick={handleAddToCart}>장바구니 담기</button>
-        </Track.Click>
-
-        {/* 구매 버튼 - useTracker 사용 */}
-        <button onClick={handlePurchase}>바로 구매</button>
-      </div>
+    <Track.Provider initialContext={{ userId: "test-user" }}>
+      <Post post={{ id: 1, title: "Hello World", slug: "hello-world", content: "This is a test post." }} />
     </Track.Provider>
   );
 }
-```
-
-### 2. 블로그/콘텐츠 사이트
 
-```tsx
-// components/BlogPost.tsx
-import { Track } from "../tracker/ga4Tracker";
+interface PostProps {
+  id: number;
+  title: string;
+  slug: string;
+  content: string;
+}
 
-function BlogPost({ post }: { post: BlogPost }) {
+function Post({ post }: PostProps) {
   return (
-    <Track.Provider
-      initialContext={{
-        userId: "user-123",
-        userProperties: {
-          content_preference: "tech",
-          reading_level: "intermediate",
-        },
-      }}
-    >
-      {/* 페이지 뷰 트래킹 */}
-      <Track.PageView
-        params={{
-          pagePath: `/blog/${post.slug}`,
-          pageTitle: `${post.title} - 블로그`,
-          customParameters: {
-            post_id: post.id,
-            post_category: post.category,
-            post_author: post.author,
-            reading_time: post.readingTime,
-          },
-        }}
-      />
-
-      <article className="blog-post">
-        <h1>{post.title}</h1>
+    <article>
+      <h1>{post.title}</h1>
 
-        {/* 콘텐츠 노출 트래킹 */}
-        <Track.Impression
-          params={{
-            elementId: `post-content-${post.id}`,
-            elementType: "blog_content",
-            visibilityPercentage: 50,
-            customParameters: {
-              post_id: post.id,
-              content_length: post.content.length,
-            },
-          }}
-        >
-          <div className="post-content">{post.content}</div>
-        </Track.Impression>
+      <Track.Impression params={{ eventName: `content-${post.id}` }}>
+        <div>{post.content}</div>
+      </Track.Impression>
 
-        {/* 소셜 공유 버튼들 */}
-        <div className="social-share">
-          <Track.Click
-            params={{
-              buttonId: "share-twitter",
-              buttonText: "트위터 공유",
-              eventLabel: "social_share_twitter",
-              customParameters: {
-                post_id: post.id,
-                platform: "twitter",
-              },
-            }}
-          >
-            <button>트위터 공유</button>
-          </Track.Click>
-
-          <Track.Click
-            params={{
-              buttonId: "share-facebook",
-              buttonText: "페이스북 공유",
-              eventLabel: "social_share_facebook",
-              customParameters: {
-                post_id: post.id,
-                platform: "facebook",
-              },
-            }}
-          >
-            <button>페이스북 공유</button>
-          </Track.Click>
-        </div>
-
-        {/* 댓글 작성 트래킹 */}
-        <Track.Click
-          params={{
-            buttonId: "comment-submit",
-            buttonText: "댓글 작성",
-            eventLabel: "comment_submit",
-            customParameters: {
-              post_id: post.id,
-              comment_type: "user_comment",
-            },
-          }}
-        >
-          <button>댓글 작성</button>
+      <div className="actions">
+        <Track.Click params={{ eventName: "share_twitter" }}>
+          <button>트위터 공유</button>
         </Track.Click>
-      </article>
-    </Track.Provider>
-  );
-}
-```
-
-### 3. 성능 최적화와 조건부 트래킹
-
-```tsx
-// components/OptimizedTracking.tsx
-import { Track } from "../tracker/ga4Tracker";
 
-function OptimizedTracking() {
-  return (
-    <Track.Provider
-      initialContext={{
-        userId: "user-123",
-        trackingConsent: true,
-        userType: "premium",
-      }}
-    >
-      {/* 조건부 트래킹 - 프리미엄 사용자만 */}
-      <Track.Click
-        params={{
-          buttonId: "premium-feature",
-          buttonText: "프리미엄 기능",
-          eventLabel: "premium_feature_access",
-        }}
-        enabled={(context) => context.userType === "premium"}
-      >
-        <button>프리미엄 기능</button>
-      </Track.Click>
-
-      {/* 디바운스 적용 - 검색 입력 */}
-      <Track.Click
-        params={{
-          buttonId: "search-button",
-          buttonText: "검색",
-          eventLabel: "search_submit",
-        }}
-        debounce={{ delay: 300, leading: false, trailing: true }}
-      >
-        <button>검색</button>
-      </Track.Click>
-
-      {/* 스로틀 적용 - 빠른 액션 */}
-      <Track.Click
-        params={{
-          buttonId: "rapid-action",
-          buttonText: "빠른 액션",
-          eventLabel: "rapid_action_click",
-        }}
-        throttle={{ delay: 1000, leading: true, trailing: false }}
-      >
-        <button>빠른 액션</button>
-      </Track.Click>
-    </Track.Provider>
+        <Track.Click params={{ eventName: "share_facebook" }}>
+          <button>페이스북 공유</button>
+        </Track.Click>
+      </div>
+    </article>
   );
 }
 ```
 
-## GA4 이벤트 매핑
-
-### 표준 GA4 이벤트
-
-```tsx
-// GA4 표준 이벤트 매핑
-const GA4StandardEvents = {
-  // 페이지 뷰
-  page_view: {
-    eventName: "page_view",
-    eventCategory: "navigation",
-  },
-
-  // 클릭 이벤트
-  click: {
-    eventName: "click",
-    eventCategory: "engagement",
-  },
-
-  // 노출 이벤트
-  impression: {
-    eventName: "impression",
-    eventCategory: "engagement",
-  },
-
-  // 전자상거래 이벤트
-  add_to_cart: {
-    eventName: "add_to_cart",
-    eventCategory: "ecommerce",
-  },
-
-  purchase: {
-    eventName: "purchase",
-    eventCategory: "ecommerce",
-  },
-
-  // 사용자 참여 이벤트
-  login: {
-    eventName: "login",
-    eventCategory: "authentication",
-  },
-
-  sign_up: {
-    eventName: "sign_up",
-    eventCategory: "authentication",
-  },
-};
-```
-
-## 고급 설정
-
-### 배칭을 통한 성능 최적화
-
-```tsx
-// tracker/ga4BatchTracker.ts
-import { createTracker } from "@offlegacy/event-tracker";
-
-export const [Track, useTracker] = createTracker<GA4Context, GA4EventParams>({
-  // ... 기존 설정 ...
-
-  // 배칭 설정
-  batch: {
-    enable: true,
-    interval: 2000,
-    thresholdSize: 10,
-    onFlush: async (batch, isBrowserClosing) => {
-      if (isBrowserClosing) {
-        // 브라우저 종료 시 sendBeacon 사용
-        navigator.sendBeacon("/api/analytics/batch", JSON.stringify(batch));
-        return;
-      }
-
-      // 배치 이벤트를 GA4 Measurement Protocol로 전송
-      await fetch("/api/analytics/batch", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(batch),
-      });
-    },
-    onError: (error) => {
-      console.error("GA4 배치 전송 오류:", error);
-    },
-  },
-});
-```
-
-### 스키마 검증 추가
-
-```tsx
-import { z } from "zod";
-
-// GA4 이벤트 스키마 정의
-const ga4Schemas = {
-  page_view: z.object({
-    pagePath: z.string(),
-    pageTitle: z.string().optional(),
-    referrer: z.string().optional(),
-  }),
-
-  click: z.object({
-    buttonId: z.string(),
-    buttonText: z.string().optional(),
-    eventLabel: z.string().optional(),
-  }),
-
-  impression: z.object({
-    elementId: z.string(),
-    elementType: z.string(),
-    visibilityPercentage: z.number().min(0).max(100),
-  }),
-
-  purchase: z.object({
-    transactionId: z.string(),
-    value: z.number().positive(),
-    currency: z.string().length(3),
-    items: z.array(
-      z.object({
-        item_id: z.string(),
-        item_name: z.string(),
-        price: z.number().positive(),
-        quantity: z.number().positive(),
-      }),
-    ),
-  }),
-};
-
-export const [Track, useTracker] = createTracker<GA4Context, GA4EventParams, typeof ga4Schemas>({
-  // ... 기존 설정 ...
-
-  // 스키마 검증 설정
-  schemas: {
-    schemas: ga4Schemas,
-    onSchemaError: (error) => {
-      console.error("GA4 스키마 검증 오류:", error);
-    },
-    abortOnError: false, // 오류 시에도 이벤트 전송 계속
-  },
-});
-```
+</Steps>
diff --git a/docs/src/content/ko/docs/with-selfhost-server-example.mdx b/docs/src/content/ko/docs/with-selfhost-server-example.mdx
deleted file mode 100644
index 349c2d8..0000000
--- a/docs/src/content/ko/docs/with-selfhost-server-example.mdx
+++ /dev/null
@@ -1,718 +0,0 @@
-# 자체 서버 연동하기
-
-자체 서버의 로깅용 API와 함께 `event-tracker`를 사용하여 이벤트 데이터를 수집하고 분석하는 방법을 알아보겠습니다. 배칭, 인증, 에러 처리 등을 포함한 완전한 솔루션을 제공합니다.
-
-## 서버 API 설계
-
-### 1. 이벤트 수집 엔드포인트
-
-```typescript
-// server/types/event.ts
-interface EventData {
-  eventName: string;
-  userId?: string;
-  sessionId?: string;
-  timestamp: number;
-  pageInfo: {
-    url: string;
-    title: string;
-    referrer?: string;
-  };
-  userAgent: string;
-  ip?: string;
-  params: Record<string, any>;
-  metadata?: {
-    source: "client" | "server";
-    version: string;
-    environment: "development" | "staging" | "production";
-  };
-}
-
-interface BatchEventData {
-  events: EventData[];
-  batchId: string;
-  timestamp: number;
-}
-```
-
-### 2. Express.js 서버 예제
-
-```typescript
-// server/app.ts
-import express from "express";
-import cors from "cors";
-import rateLimit from "express-rate-limit";
-import helmet from "helmet";
-import { EventController } from "./controllers/EventController";
-import { AuthMiddleware } from "./middleware/AuthMiddleware";
-import { ValidationMiddleware } from "./middleware/ValidationMiddleware";
-
-const app = express();
-
-// 보안 미들웨어
-app.use(helmet());
-app.use(
-  cors({
-    origin: process.env.ALLOWED_ORIGINS?.split(",") || ["http://localhost:3000"],
-    credentials: true,
-  }),
-);
-
-// Rate limiting
-const limiter = rateLimit({
-  windowMs: 15 * 60 * 1000, // 15분
-  max: 100, // IP당 최대 100개 요청
-  message: "Too many requests from this IP",
-});
-app.use("/api/events", limiter);
-
-// Body parsing
-app.use(express.json({ limit: "10mb" }));
-
-// 인증 미들웨어
-app.use("/api/events", AuthMiddleware.verifyApiKey);
-
-// 이벤트 수집 엔드포인트
-app.post("/api/events/single", ValidationMiddleware.validateEvent, EventController.trackSingleEvent);
-
-app.post("/api/events/batch", ValidationMiddleware.validateBatchEvent, EventController.trackBatchEvents);
-
-// 헬스체크
-app.get("/api/health", (req, res) => {
-  res.json({ status: "ok", timestamp: Date.now() });
-});
-
-const PORT = process.env.PORT || 3001;
-app.listen(PORT, () => {
-  console.log(`Event tracking server running on port ${PORT}`);
-});
-```
-
-### 3. 이벤트 컨트롤러
-
-```typescript
-// server/controllers/EventController.ts
-import { Request, Response } from "express";
-import { EventService } from "../services/EventService";
-import { Logger } from "../utils/Logger";
-
-export class EventController {
-  static async trackSingleEvent(req: Request, res: Response) {
-    try {
-      const eventData = req.body;
-
-      // IP 주소 추가
-      eventData.ip = req.ip || req.connection.remoteAddress;
-
-      // 이벤트 처리
-      await EventService.processEvent(eventData);
-
-      Logger.info("Single event tracked", { eventName: eventData.eventName, userId: eventData.userId });
-
-      res.status(200).json({
-        success: true,
-        message: "Event tracked successfully",
-        eventId: eventData.timestamp,
-      });
-    } catch (error) {
-      Logger.error("Failed to track single event", error);
-      res.status(500).json({
-        success: false,
-        message: "Internal server error",
-      });
-    }
-  }
-
-  static async trackBatchEvents(req: Request, res: Response) {
-    try {
-      const { events, batchId } = req.body;
-
-      // 배치 이벤트 처리
-      const results = await EventService.processBatchEvents(events, batchId);
-
-      Logger.info("Batch events tracked", {
-        batchId,
-        eventCount: events.length,
-        successCount: results.successCount,
-        failureCount: results.failureCount,
-      });
-
-      res.status(200).json({
-        success: true,
-        message: "Batch events tracked successfully",
-        batchId,
-        results,
-      });
-    } catch (error) {
-      Logger.error("Failed to track batch events", error);
-      res.status(500).json({
-        success: false,
-        message: "Internal server error",
-      });
-    }
-  }
-}
-```
-
-### 4. 이벤트 서비스
-
-```typescript
-// server/services/EventService.ts
-import { EventData, BatchEventData } from "../types/event";
-import { DatabaseService } from "./DatabaseService";
-import { AnalyticsService } from "./AnalyticsService";
-import { Logger } from "../utils/Logger";
-
-export class EventService {
-  static async processEvent(eventData: EventData) {
-    try {
-      // 데이터베이스에 저장
-      await DatabaseService.saveEvent(eventData);
-
-      // 실시간 분석 처리
-      await AnalyticsService.processEvent(eventData);
-
-      // 특정 이벤트에 대한 알림
-      if (eventData.eventName === "error" || eventData.eventName === "purchase") {
-        await this.sendNotification(eventData);
-      }
-    } catch (error) {
-      Logger.error("Failed to process event", { eventData, error });
-      throw error;
-    }
-  }
-
-  static async processBatchEvents(events: EventData[], batchId: string) {
-    const results = {
-      successCount: 0,
-      failureCount: 0,
-      errors: [] as any[],
-    };
-
-    for (const event of events) {
-      try {
-        await this.processEvent(event);
-        results.successCount++;
-      } catch (error) {
-        results.failureCount++;
-        results.errors.push({
-          eventName: event.eventName,
-          error: error.message,
-        });
-      }
-    }
-
-    // 배치 처리 결과 로깅
-    Logger.info("Batch processing completed", { batchId, results });
-
-    return results;
-  }
-
-  private static async sendNotification(eventData: EventData) {
-    // Slack, 이메일 등으로 알림 전송
-    if (eventData.eventName === "error") {
-      await this.sendErrorAlert(eventData);
-    } else if (eventData.eventName === "purchase") {
-      await this.sendPurchaseNotification(eventData);
-    }
-  }
-
-  private static async sendErrorAlert(eventData: EventData) {
-    // 에러 알림 로직
-    console.log("Error alert sent:", eventData);
-  }
-
-  private static async sendPurchaseNotification(eventData: EventData) {
-    // 구매 알림 로직
-    console.log("Purchase notification sent:", eventData);
-  }
-}
-```
-
-## 클라이언트 설정
-
-### 1. 자체 서버 트래커
-
-```tsx
-// trackers/selfHostedTracker.ts
-import { createTracker } from "@offlegacy/event-tracker";
-
-interface SelfHostedContext {
-  userId?: string;
-  sessionId?: string;
-  apiKey?: string;
-  environment: 'development' | 'staging' | 'production';
-}
-
-interface SelfHostedEventParams {
-  eventName: string;
-  category?: string;
-  action?: string;
-  label?: string;
-  value?: number;
-  customData?: Record<string, any>;
-}
-
-// API 설정
-const API_CONFIG = {
-  baseUrl: process.env.NEXT_PUBLIC_EVENT_API_URL || 'http://localhost:3001',
-  apiKey: process.env.NEXT_PUBLIC_EVENT_API_KEY,
-  timeout: 5000,
-  retryAttempts: 3,
-  retryDelay: 1000,
-};
-
-// 이벤트 전송 함수
-const sendEvent = async (params: SelfHostedEventParams, context: SelfHostedContext) => {
-  const eventData = {
-    eventName: params.eventName,
-    userId: context.userId,
-    sessionId: context.sessionId,
-    timestamp: Date.now(),
-    pageInfo: {
-      url: window.location.href,
-      title: document.title,
-      referrer: document.referrer,
-    },
-    userAgent: navigator.userAgent,
-    params: {
-      category: params.category,
-      action: params.action,
-      label: params.label,
-      value: params.value,
-      ...params.customData,
-    },
-    metadata: {
-      source: 'client',
-      version: '1.0.0',
-      environment: context.environment,
-    },
-  };
-
-  try {
-    const response = await fetch(`${API_CONFIG.baseUrl}/api/events/single`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${context.apiKey || API_CONFIG.apiKey}`,
-      },
-      body: JSON.stringify(eventData),
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const result = await response.json();
-    console.log('✅ 이벤트 전송 성공:', params.eventName, result);
-
-    return result;
-  } catch (error) {
-    console.error('❌ 이벤트 전송 실패:', params.eventName, error);
-    throw error;
-  }
-};
-
-// 재시도 로직
-const retryWithBackoff = async <T>(
-  fn: () => Promise<T>,
-  retries: number = API_CONFIG.retryAttempts,
-  delay: number = API_CONFIG.retryDelay
-): Promise<T> => {
-  try {
-    return await fn();
-  } catch (error) {
-    if (retries > 0) {
-      await new Promise(resolve => setTimeout(resolve, delay));
-      return retryWithBackoff(fn, retries - 1, delay * 2);
-    }
-    throw error;
-  }
-};
-
-// 자체 서버 트래커 인스턴스
-export const [SelfHostedTrack, useSelfHostedTracker] = createTracker<
-  SelfHostedContext,
-  SelfHostedEventParams
->({
-  init: (initialContext, setContext) => {
-    const sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    const environment = process.env.NODE_ENV as 'development' | 'staging' | 'production';
-
-    setContext({
-      ...initialContext,
-      sessionId,
-      environment,
-    });
-  },
-
-  send: (params, context) => {
-    return retryWithBackoff(() => sendEvent(params, context));
-  },
-
-  DOMEvents: {
-    onClick: (params, context) => {
-      retryWithBackoff(() => sendEvent({
-        eventName: 'click',
-        category: 'engagement',
-        action: 'click',
-        label: params.eventLabel || 'button_click',
-        customData: {
-          button_id: params.buttonId,
-          button_text: params.buttonText,
-          page_location: window.location.pathname,
-          ...params.customData,
-        },
-      }, context));
-    },
-  },
-
-  impression: {
-    onImpression: (params, context) => {
-      retryWithBackoff(() => sendEvent({
-        eventName: 'impression',
-        category: 'engagement',
-        action: 'view',
-        label: params.elementId,
-        customData: {
-          element_id: params.elementId,
-          element_type: params.elementType,
-          visibility_percentage: params.visibilityPercentage,
-          ...params.customData,
-        },
-      }, context));
-    },
-    options: {
-      threshold: 0.5,
-      freezeOnceVisible: true,
-    },
-  },
-
-  pageView: {
-    onPageView: (params, context) => {
-      retryWithBackoff(() => sendEvent({
-        eventName: 'page_view',
-        category: 'navigation',
-        action: 'page_view',
-        label: params.pagePath || window.location.pathname,
-        customData: {
-          page_title: params.pageTitle || document.title,
-          page_path: params.pagePath || window.location.pathname,
-          referrer: params.referrer || document.referrer,
-          ...params.customData,
-        },
-      }, context));
-    },
-  },
-
-  // 배칭 설정
-  batch: {
-    enable: true,
-    interval: 3000, // 3초마다 배치 전송
-    thresholdSize: 10, // 최대 10개 이벤트
-    onFlush: async (batch, isBrowserClosing) => {
-      const batchData = {
-        events: batch.map(event => ({
-          eventName: event.eventName,
-          userId: event.userId,
-          sessionId: event.sessionId,
-          timestamp: event.timestamp,
-          pageInfo: {
-            url: window.location.href,
-            title: document.title,
-            referrer: document.referrer,
-          },
-          userAgent: navigator.userAgent,
-          params: event.params,
-          metadata: {
-            source: 'client',
-            version: '1.0.0',
-            environment: process.env.NODE_ENV,
-          },
-        })),
-        batchId: `batch_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-        timestamp: Date.now(),
-      };
-
-      try {
-        if (isBrowserClosing) {
-          // 브라우저 종료 시 sendBeacon 사용
-          navigator.sendBeacon(
-            `${API_CONFIG.baseUrl}/api/events/batch`,
-            JSON.stringify(batchData)
-          );
-          return;
-        }
-
-        const response = await fetch(`${API_CONFIG.baseUrl}/api/events/batch`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${API_CONFIG.apiKey}`,
-          },
-          body: JSON.stringify(batchData),
-        });
-
-        if (!response.ok) {
-          throw new Error(`Batch upload failed: ${response.status}`);
-        }
-
-        const result = await response.json();
-        console.log('✅ 배치 이벤트 전송 성공:', result);
-      } catch (error) {
-        console.error('❌ 배치 이벤트 전송 실패:', error);
-
-        // 실패한 이벤트를 로컬 스토리지에 저장하여 나중에 재전송
-        this.saveFailedEvents(batchData);
-      }
-    },
-    onError: (error) => {
-      console.error('배치 처리 오류:', error);
-    },
-  },
-});
-
-// 실패한 이벤트 저장 및 재전송
-const saveFailedEvents = (batchData: any) => {
-  try {
-    const failedEvents = JSON.parse(localStorage.getItem('failedEvents') || '[]');
-    failedEvents.push(batchData);
-    localStorage.setItem('failedEvents', JSON.stringify(failedEvents.slice(-50))); // 최대 50개 저장
-  } catch (error) {
-    console.error('실패한 이벤트 저장 실패:', error);
-  }
-};
-
-// 재전송 함수
-export const retryFailedEvents = async () => {
-  try {
-    const failedEvents = JSON.parse(localStorage.getItem('failedEvents') || '[]');
-    if (failedEvents.length === 0) return;
-
-    for (const batchData of failedEvents) {
-      try {
-        const response = await fetch(`${API_CONFIG.baseUrl}/api/events/batch`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${API_CONFIG.apiKey}`,
-          },
-          body: JSON.stringify(batchData),
-        });
-
-        if (response.ok) {
-          console.log('✅ 실패한 이벤트 재전송 성공');
-        }
-      } catch (error) {
-        console.error('❌ 실패한 이벤트 재전송 실패:', error);
-      }
-    }
-
-    // 성공한 이벤트 제거
-    localStorage.removeItem('failedEvents');
-  } catch (error) {
-    console.error('재전송 처리 실패:', error);
-  }
-};
-
-export { SelfHostedTrack, useSelfHostedTracker };
-```
-
-## 실제 사용 예제
-
-### 1. 기본 사용법
-
-```tsx
-// components/SelfHostedExample.tsx
-import { SelfHostedTrack, useSelfHostedTracker, retryFailedEvents } from "../trackers/selfHostedTracker";
-
-function SelfHostedExample() {
-  const { track } = useSelfHostedTracker();
-
-  const handlePurchase = async () => {
-    try {
-      // 구매 로직
-      const purchaseResult = await processPurchase();
-
-      // 자체 서버로 이벤트 전송
-      await track({
-        eventName: "purchase",
-        category: "ecommerce",
-        action: "purchase",
-        value: purchaseResult.amount,
-        customData: {
-          transaction_id: purchaseResult.transactionId,
-          currency: "KRW",
-          items: purchaseResult.items,
-          payment_method: purchaseResult.paymentMethod,
-        },
-      });
-
-      console.log("구매 이벤트가 서버에 전송되었습니다.");
-    } catch (error) {
-      console.error("구매 이벤트 전송 실패:", error);
-    }
-  };
-
-  const handleError = async () => {
-    try {
-      await track({
-        eventName: "error",
-        category: "system",
-        action: "error_occurred",
-        customData: {
-          error_type: "validation_error",
-          error_message: "사용자 입력 검증 실패",
-          error_code: "VAL_001",
-          stack_trace: new Error().stack,
-        },
-      });
-    } catch (error) {
-      console.error("에러 이벤트 전송 실패:", error);
-    }
-  };
-
-  return (
-    <SelfHostedTrack.Provider
-      initialContext={{
-        userId: "user-123",
-        apiKey: process.env.NEXT_PUBLIC_EVENT_API_KEY,
-      }}
-    >
-      {/* 페이지 뷰 트래킹 */}
-      <SelfHostedTrack.PageView
-        params={{
-          pagePath: "/self-hosted-example",
-          pageTitle: "자체 서버 트래킹 예제",
-          customData: {
-            page_category: "demo",
-            user_segment: "premium",
-          },
-        }}
-      />
-
-      <div>
-        <h1>자체 서버 트래킹 예제</h1>
-
-        {/* 상품 노출 트래킹 */}
-        <SelfHostedTrack.Impression
-          params={{
-            elementId: "product-banner",
-            elementType: "banner",
-            visibilityPercentage: 80,
-            customData: {
-              banner_type: "promotional",
-              campaign_id: "summer_sale_2024",
-            },
-          }}
-        >
-          <div className="product-banner">
-            <h2>여름 세일!</h2>
-            <p>모든 상품 20% 할인</p>
-          </div>
-        </SelfHostedTrack.Impression>
-
-        {/* 버튼 클릭 트래킹 */}
-        <SelfHostedTrack.Click
-          params={{
-            buttonId: "purchase-button",
-            buttonText: "구매하기",
-            customData: {
-              product_id: "prod-123",
-              product_name: "샘플 상품",
-              price: 29900,
-            },
-          }}
-        >
-          <button onClick={handlePurchase}>구매하기</button>
-        </SelfHostedTrack.Click>
-
-        <button onClick={handleError}>에러 발생 시뮬레이션</button>
-
-        <button onClick={retryFailedEvents}>실패한 이벤트 재전송</button>
-      </div>
-    </SelfHostedTrack.Provider>
-  );
-}
-```
-
-### 2. 고급 사용법 - 커스텀 이벤트
-
-```tsx
-// components/AdvancedSelfHostedExample.tsx
-import { SelfHostedTrack, useSelfHostedTracker } from "../trackers/selfHostedTracker";
-
-function AdvancedSelfHostedExample() {
-  const { track } = useSelfHostedTracker();
-
-  const handleUserAction = async (action: string, data: any) => {
-    try {
-      await track({
-        eventName: "user_action",
-        category: "user_engagement",
-        action: action,
-        customData: {
-          action_type: action,
-          action_data: data,
-          timestamp: Date.now(),
-          user_agent: navigator.userAgent,
-          screen_resolution: `${screen.width}x${screen.height}`,
-          time_on_page: performance.now(),
-        },
-      });
-    } catch (error) {
-      console.error("사용자 액션 이벤트 전송 실패:", error);
-    }
-  };
-
-  const handleFormSubmission = async (formData: any) => {
-    try {
-      await track({
-        eventName: "form_submit",
-        category: "conversion",
-        action: "form_submitted",
-        customData: {
-          form_id: formData.formId,
-          form_type: formData.formType,
-          field_count: Object.keys(formData.fields).length,
-          validation_errors: formData.validationErrors || 0,
-          submission_time: Date.now(),
-          form_data: formData.fields,
-        },
-      });
-    } catch (error) {
-      console.error("폼 제출 이벤트 전송 실패:", error);
-    }
-  };
-
-  return (
-    <SelfHostedTrack.Provider
-      initialContext={{
-        userId: "user-123",
-        apiKey: process.env.NEXT_PUBLIC_EVENT_API_KEY,
-      }}
-    >
-      <div>
-        <h1>고급 자체 서버 트래킹</h1>
-
-        <button onClick={() => handleUserAction("scroll", { depth: 50 })}>스크롤 이벤트</button>
-
-        <button onClick={() => handleUserAction("search", { query: "test" })}>검색 이벤트</button>
-
-        <button
-          onClick={() =>
-            handleFormSubmission({
-              formId: "contact-form",
-              formType: "contact",
-              fields: { name: "John", email: "john@example.com" },
-              validationErrors: 0,
-            })
-          }
-        >
-          폼 제출 이벤트
-        </button>
-      </div>
-    </SelfHostedTrack.Provider>
-  );
-}
-```
diff --git a/docs/src/content/ko/docs/with-zod-example.mdx b/docs/src/content/ko/docs/with-zod-example.mdx
index 21b1136..53542ee 100644
--- a/docs/src/content/ko/docs/with-zod-example.mdx
+++ b/docs/src/content/ko/docs/with-zod-example.mdx
@@ -1,770 +1,72 @@
-# Zod와 함께 사용하기
-
-[Zod](https://zod.dev/)와 함께 `event-tracker`를 사용하여 강력한 데이터 타입 검증을 구현하는 방법을 알아보겠습니다. Zod를 통한 스키마 기반 검증으로 런타임 이전에 오류를 방지하고 데이터 신뢰성을 보장할 수 있습니다.
-
-## 기본 설정
-
-### 1. 스키마 정의
-
-```tsx
-// schemas/eventSchemas.ts
-import { z } from "zod";
-
-// 사용자 컨텍스트 스키마
-export const userContextSchema = z.object({
-  userId: z.string().min(1, "사용자 ID는 필수입니다"),
-  userType: z.enum(["free", "premium", "enterprise"]).optional(),
-  sessionId: z.string().optional(),
-  trackingConsent: z.boolean().default(true),
-});
-
-// 페이지 뷰 이벤트 스키마
-export const pageViewSchema = z.object({
-  pagePath: z.string().min(1, "페이지 경로는 필수입니다"),
-  pageTitle: z.string().optional(),
-  referrer: z.string().optional(),
-  category: z.enum(["home", "product", "blog", "admin"]).optional(),
-  customData: z.record(z.unknown()).optional(),
-});
-
-// 클릭 이벤트 스키마
-export const clickSchema = z.object({
-  buttonId: z.string().min(1, "버튼 ID는 필수입니다"),
-  buttonText: z.string().optional(),
-  buttonType: z.enum(["primary", "secondary", "danger", "link"]).optional(),
-  elementPosition: z
-    .object({
-      x: z.number(),
-      y: z.number(),
-    })
-    .optional(),
-  customData: z.record(z.unknown()).optional(),
-});
-
-// 노출 이벤트 스키마
-export const impressionSchema = z.object({
-  elementId: z.string().min(1, "요소 ID는 필수입니다"),
-  elementType: z.enum(["banner", "product", "article", "video"]),
-  visibilityPercentage: z.number().min(0).max(100),
-  timeInView: z.number().positive().optional(),
-  customData: z.record(z.unknown()).optional(),
-});
-
-// 전자상거래 이벤트 스키마
-export const ecommerceSchema = z.object({
-  productId: z.string().min(1, "상품 ID는 필수입니다"),
-  productName: z.string().min(1, "상품명은 필수입니다"),
-  price: z.number().positive("가격은 양수여야 합니다"),
-  currency: z.string().length(3, "통화는 3자리여야 합니다"),
-  quantity: z.number().int().positive("수량은 양의 정수여야 합니다"),
-  category: z.string().optional(),
-  brand: z.string().optional(),
-});
-
-// 구매 이벤트 스키마
-export const purchaseSchema = z.object({
-  transactionId: z.string().min(1, "거래 ID는 필수입니다"),
-  value: z.number().positive("거래 금액은 양수여야 합니다"),
-  currency: z.string().length(3, "통화는 3자리여야 합니다"),
-  items: z.array(ecommerceSchema).min(1, "최소 1개의 상품이 필요합니다"),
-  shipping: z.number().nonnegative().optional(),
-  tax: z.number().nonnegative().optional(),
-});
-
-// 검색 이벤트 스키마
-export const searchSchema = z.object({
-  query: z.string().min(1, "검색어는 필수입니다"),
-  category: z.string().optional(),
-  filters: z.record(z.unknown()).optional(),
-  resultCount: z.number().int().nonnegative().optional(),
-});
-
-// 폼 제출 이벤트 스키마
-export const formSubmitSchema = z.object({
-  formId: z.string().min(1, "폼 ID는 필수입니다"),
-  formType: z.enum(["contact", "signup", "checkout", "feedback"]),
-  fieldCount: z.number().int().positive("필드 수는 양의 정수여야 합니다"),
-  validationErrors: z.number().int().nonnegative().optional(),
-  customData: z.record(z.unknown()).optional(),
-});
-
-// 스키마 모음
-export const eventSchemas = {
-  page_view: pageViewSchema,
-  click: clickSchema,
-  impression: impressionSchema,
-  add_to_cart: ecommerceSchema,
-  purchase: purchaseSchema,
-  search: searchSchema,
-  form_submit: formSubmitSchema,
-} as const;
-
-// 타입 추론
-export type UserContext = z.infer<typeof userContextSchema>;
-export type PageViewEvent = z.infer<typeof pageViewSchema>;
-export type ClickEvent = z.infer<typeof clickSchema>;
-export type ImpressionEvent = z.infer<typeof impressionSchema>;
-export type EcommerceEvent = z.infer<typeof ecommerceSchema>;
-export type PurchaseEvent = z.infer<typeof purchaseSchema>;
-export type SearchEvent = z.infer<typeof searchSchema>;
-export type FormSubmitEvent = z.infer<typeof formSubmitSchema>;
-```
-
-### 2. 트래커 설정
-
-```tsx
-// tracker/validatedTracker.ts
-import { createTracker } from "@offlegacy/event-tracker";
-import { eventSchemas, UserContext } from "../schemas/eventSchemas";
-
-// 이벤트 전송 함수
-const sendEvent = async (eventName: string, params: any, context: UserContext) => {
-  try {
-    // 실제 애널리틱스 서비스로 전송
-    await analytics.track(eventName, {
-      ...params,
-      userId: context.userId,
-      sessionId: context.sessionId,
-      timestamp: Date.now(),
-    });
-
-    console.log(`✅ 이벤트 전송 성공: ${eventName}`, params);
-  } catch (error) {
-    console.error(`❌ 이벤트 전송 실패: ${eventName}`, error);
-  }
-};
-
-// 검증된 트래커 인스턴스 생성
-export const [Track, useTracker] = createTracker<UserContext, any, typeof eventSchemas>({
-  // 초기화 함수
-  init: (initialContext, setContext) => {
-    // 세션 ID 생성
-    const sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-
-    // 컨텍스트 검증 및 설정
-    const validatedContext = userContextSchema.parse({
-      ...initialContext,
-      sessionId,
-    });
-
-    setContext(validatedContext);
-  },
-
-  // 이벤트 전송 함수
-  send: (params, context) => {
-    sendEvent("custom_event", params, context);
-  },
-
-  // DOM 이벤트 핸들러
-  DOMEvents: {
-    onClick: (params, context) => {
-      sendEvent("click", params, context);
-    },
-  },
-
-  // 노출 이벤트 설정
-  impression: {
-    onImpression: (params, context) => {
-      sendEvent("impression", params, context);
-    },
-    options: {
-      threshold: 0.5,
-      freezeOnceVisible: true,
-    },
-  },
-
-  // 페이지 뷰 설정
-  pageView: {
-    onPageView: (params, context) => {
-      sendEvent("page_view", params, context);
-    },
-  },
-
-  // 스키마 검증 설정
-  schemas: {
-    schemas: eventSchemas,
-    onSchemaError: (error) => {
-      console.error("🚨 스키마 검증 오류:", {
-        message: error.message,
-        issues: error.issues,
-        path: error.issues.map((issue) => issue.path.join(".")),
-      });
-
-      // 개발 환경에서는 더 자세한 정보 출력
-      if (process.env.NODE_ENV === "development") {
-        console.group("🔍 상세 오류 정보");
-        error.issues.forEach((issue, index) => {
-          console.log(`${index + 1}. 경로: ${issue.path.join(".")}`);
-          console.log(`   메시지: ${issue.message}`);
-          console.log(`   코드: ${issue.code}`);
-          console.log(`   받은 값:`, issue.received);
-        });
-        console.groupEnd();
-      }
-    },
-    abortOnError: true, // 검증 실패 시 이벤트 중단
-  },
-});
-
-export { Track, useTracker };
-```
-
-## 실제 사용 예제
-
-### 1. 전자상거래 사이트
-
-```tsx
-// components/ProductPage.tsx
-import { Track, useTracker } from "../tracker/validatedTracker";
-import { userContextSchema } from "../schemas/eventSchemas";
-
-interface Product {
-  id: string;
-  name: string;
-  price: number;
-  category: string;
-  brand: string;
-}
-
-function ProductPage({ product }: { product: Product }) {
-  const { track } = useTracker();
-
-  const handleAddToCart = async () => {
-    try {
-      // 장바구니 추가 로직
-      await addToCart(product.id);
-
-      // 검증된 이벤트 전송
-      await track({
-        eventName: "add_to_cart",
-        productId: product.id,
-        productName: product.name,
-        price: product.price,
-        currency: "KRW",
-        quantity: 1,
-        category: product.category,
-        brand: product.brand,
-      });
-    } catch (error) {
-      console.error("장바구니 추가 실패:", error);
-    }
-  };
-
-  const handlePurchase = async () => {
-    try {
-      // 구매 로직
-      const purchaseResult = await processPurchase(product.id);
-
-      if (purchaseResult.success) {
-        // 검증된 구매 이벤트 전송
-        await track({
-          eventName: "purchase",
-          transactionId: purchaseResult.transactionId,
-          value: product.price,
-          currency: "KRW",
-          items: [
-            {
-              productId: product.id,
-              productName: product.name,
-              price: product.price,
-              currency: "KRW",
-              quantity: 1,
-              category: product.category,
-              brand: product.brand,
-            },
-          ],
-          shipping: 0,
-          tax: 0,
-        });
-      }
-    } catch (error) {
-      console.error("구매 처리 실패:", error);
-    }
-  };
-
-  return (
-    <Track.Provider
-      initialContext={{
-        userId: "user-123",
-        userType: "premium",
-        trackingConsent: true,
-      }}
-    >
-      {/* 페이지 뷰 트래킹 */}
-      <Track.PageView
-        schema="page_view"
-        params={{
-          pagePath: `/products/${product.id}`,
-          pageTitle: `${product.name} - 상품 상세`,
-          category: "product",
-          customData: {
-            product_id: product.id,
-            product_category: product.category,
-          },
-        }}
-      />
-
-      <div className="product-detail">
-        <h1>{product.name}</h1>
-        <p>₩{product.price.toLocaleString()}</p>
-
-        {/* 상품 이미지 노출 트래킹 */}
-        <Track.Impression
-          schema="impression"
-          params={{
-            elementId: `product-image-${product.id}`,
-            elementType: "product",
-            visibilityPercentage: 80,
-            customData: {
-              product_id: product.id,
-              image_position: "main",
-            },
-          }}
-        >
-          <img src={product.imageUrl} alt={product.name} className="product-image" />
-        </Track.Impression>
-
-        {/* 장바구니 버튼 클릭 트래킹 */}
-        <Track.Click
-          schema="click"
-          params={{
-            buttonId: "add-to-cart",
-            buttonText: "장바구니 담기",
-            buttonType: "primary",
-            customData: {
-              product_id: product.id,
-              product_name: product.name,
-              product_price: product.price,
-            },
-          }}
-        >
-          <button onClick={handleAddToCart}>장바구니 담기</button>
-        </Track.Click>
+import { Steps } from "nextra/components";
 
-        {/* 구매 버튼 - useTracker 사용 */}
-        <button onClick={handlePurchase}>바로 구매</button>
-      </div>
-    </Track.Provider>
-  );
-}
-```
-
-### 2. 검색 기능
-
-```tsx
-// components/SearchComponent.tsx
-import { Track, useTracker } from "../tracker/validatedTracker";
-
-function SearchComponent() {
-  const { track } = useTracker();
-  const [query, setQuery] = useState("");
-  const [results, setResults] = useState([]);
-
-  const handleSearch = async (searchQuery: string) => {
-    try {
-      const searchResults = await performSearch(searchQuery);
-      setResults(searchResults);
-
-      // 검증된 검색 이벤트 전송
-      await track({
-        eventName: "search",
-        query: searchQuery,
-        category: "products",
-        resultCount: searchResults.length,
-        filters: {
-          category: "all",
-          price_range: "all",
-        },
-      });
-    } catch (error) {
-      console.error("검색 실패:", error);
-    }
-  };
-
-  return (
-    <Track.Provider
-      initialContext={{
-        userId: "user-123",
-        userType: "free",
-        trackingConsent: true,
-      }}
-    >
-      <div className="search-container">
-        <Track.Click
-          schema="click"
-          params={{
-            buttonId: "search-button",
-            buttonText: "검색",
-            buttonType: "primary",
-            customData: {
-              search_context: "header",
-            },
-          }}
-        >
-          <button onClick={() => handleSearch(query)}>검색</button>
-        </Track.Click>
-
-        <input
-          type="text"
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          placeholder="검색어를 입력하세요..."
-        />
-      </div>
-    </Track.Provider>
-  );
-}
-```
-
-### 3. 폼 제출
-
-```tsx
-// components/ContactForm.tsx
-import { Track, useTracker } from "../tracker/validatedTracker";
-
-function ContactForm() {
-  const { track } = useTracker();
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    message: "",
-  });
-  const [errors, setErrors] = useState({});
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    try {
-      // 폼 검증
-      const validationErrors = validateForm(formData);
-      setErrors(validationErrors);
-
-      if (Object.keys(validationErrors).length === 0) {
-        // 폼 제출 로직
-        await submitForm(formData);
-
-        // 검증된 폼 제출 이벤트 전송
-        await track({
-          eventName: "form_submit",
-          formId: "contact-form",
-          formType: "contact",
-          fieldCount: Object.keys(formData).length,
-          validationErrors: 0,
-          customData: {
-            form_name: "contact_form",
-            submission_method: "web",
-          },
-        });
-      } else {
-        // 검증 오류가 있는 경우
-        await track({
-          eventName: "form_submit",
-          formId: "contact-form",
-          formType: "contact",
-          fieldCount: Object.keys(formData).length,
-          validationErrors: Object.keys(validationErrors).length,
-          customData: {
-            form_name: "contact_form",
-            error_fields: Object.keys(validationErrors),
-          },
-        });
-      }
-    } catch (error) {
-      console.error("폼 제출 실패:", error);
-    }
-  };
+# Zod와 함께 사용하기
 
-  return (
-    <Track.Provider
-      initialContext={{
-        userId: "user-123",
-        userType: "free",
-        trackingConsent: true,
-      }}
-    >
-      <form onSubmit={handleSubmit}>
-        <input
-          type="text"
-          name="name"
-          value={formData.name}
-          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-          placeholder="이름"
-        />
-        <input
-          type="email"
-          name="email"
-          value={formData.email}
-          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-          placeholder="이메일"
-        />
-        <textarea
-          name="message"
-          value={formData.message}
-          onChange={(e) => setFormData({ ...formData, message: e.target.value })}
-          placeholder="메시지"
-        />
+[Zod](https://zod.dev/)와 함께 사용하여 강력한 데이터 타입 검증을 구현하는 방법을 알아보겠습니다.  
+Zod를 통한 스키마 기반 검증으로 런타임 이전에 오류를 방지하고 데이터 신뢰성을 보장할 수 있습니다.
 
-        <Track.Click
-          schema="click"
-          params={{
-            buttonId: "submit-contact",
-            buttonText: "제출",
-            buttonType: "primary",
-            customData: {
-              form_id: "contact-form",
-            },
-          }}
-        >
-          <button type="submit">제출</button>
-        </Track.Click>
-      </form>
-    </Track.Provider>
-  );
-}
-```
+<Steps>
 
-## 고급 기능
+## 스키마 정의하기
 
-### 1. 동적 스키마 검증
+이벤트별 필드와 타입을 Zod 객체로 선언합니다.
 
-```tsx
-// schemas/dynamicSchemas.ts
+```tsx {4-5}
 import { z } from "zod";
 
-// 조건부 스키마 생성 함수
-export const createConditionalSchema = (userType: string) => {
-  const baseSchema = z.object({
-    eventName: z.string(),
-    timestamp: z.number(),
-  });
-
-  if (userType === "premium") {
-    return baseSchema.extend({
-      premiumFeature: z.string(),
-      usageCount: z.number().positive(),
-    });
-  }
-
-  return baseSchema;
-};
-
-// 동적 이벤트 스키마
-export const dynamicEventSchemas = {
-  conditional_event: z.object({
-    eventName: z.string(),
-    userType: z.enum(["free", "premium"]),
-    // 조건부 필드
-    premiumData: z
-      .object({
-        feature: z.string(),
-        usage: z.number(),
-      })
-      .optional(),
-  }),
-
-  // 배열 기반 스키마
-  batch_events: z.array(
-    z.object({
-      eventName: z.string(),
-      params: z.record(z.unknown()),
-      timestamp: z.number(),
-    }),
-  ),
-
-  // 유니온 타입 스키마
-  mixed_event: z.union([
-    z.object({
-      type: z.literal("click"),
-      buttonId: z.string(),
-      position: z.object({ x: z.number(), y: z.number() }),
-    }),
-    z.object({
-      type: z.literal("scroll"),
-      scrollDepth: z.number(),
-      direction: z.enum(["up", "down"]),
-    }),
-  ]),
+export const schemas = {
+  page_view: z.object({ title: z.string() }),
+  click_button: z.object({ target: z.string() }),
 };
 ```
 
-### 2. 커스텀 검증 로직
+## 트래킹 이벤트 정의하기
 
-```tsx
-// utils/customValidation.ts
-import { z } from "zod";
-
-// 커스텀 검증 함수
-export const customValidators = {
-  // 이메일 도메인 검증
-  emailDomain: (allowedDomains: string[]) =>
-    z
-      .string()
-      .email()
-      .refine((email) => allowedDomains.some((domain) => email.endsWith(domain)), {
-        message: `허용되지 않는 이메일 도메인입니다. 허용: ${allowedDomains.join(", ")}`,
-      }),
-
-  // 비밀번호 복잡도 검증
-  strongPassword: z
-    .string()
-    .min(8, "비밀번호는 최소 8자 이상이어야 합니다")
-    .regex(/[A-Z]/, "대문자가 포함되어야 합니다")
-    .regex(/[a-z]/, "소문자가 포함되어야 합니다")
-    .regex(/[0-9]/, "숫자가 포함되어야 합니다")
-    .regex(/[^A-Za-z0-9]/, "특수문자가 포함되어야 합니다"),
-
-  // 한국어 전화번호 검증
-  koreanPhoneNumber: z.string().regex(/^01[0-9]-\d{3,4}-\d{4}$/, "올바른 한국 전화번호 형식이 아닙니다"),
-
-  // 가격 범위 검증
-  priceRange: (min: number, max: number) =>
-    z
-      .number()
-      .positive()
-      .refine((price) => price >= min && price <= max, { message: `가격은 ${min}원에서 ${max}원 사이여야 합니다` }),
-};
-
-// 조건부 스키마
-export const conditionalSchemas = {
-  // 사용자 타입에 따른 다른 검증 규칙
-  userAction: (userType: string) => {
-    const baseSchema = z.object({
-      action: z.string(),
-      timestamp: z.number(),
-    });
-
-    if (userType === "premium") {
-      return baseSchema.extend({
-        premiumFeature: z.string(),
-        usageLimit: z.number().optional(),
-      });
-    }
+스키마를 createTracker에 연결해 이벤트 파라미터를 자동 검증합니다.
 
-    return baseSchema.extend({
-      feature: z.string(),
-      upgradePrompt: z.boolean().optional(),
-    });
-  },
-};
-```
-
-### 3. 에러 처리 및 복구
-
-```tsx
-// tracker/errorHandlingTracker.ts
+```tsx {5-9}
 import { createTracker } from "@offlegacy/event-tracker";
-import { eventSchemas } from "../schemas/eventSchemas";
-
-export const [Track, useTracker] = createTracker({
-  // ... 기존 설정 ...
+import { schemas } from "./schemas";
 
+export const [Track, useTracker] = createTracker<{}, {}, typeof schemas>({
   schemas: {
-    schemas: eventSchemas,
-    onSchemaError: (error) => {
-      // 1. 로그 기록
-      console.error("스키마 검증 오류:", error);
-
-      // 2. 에러 추적 서비스로 전송
-      errorTracking.captureException(error);
-
-      // 3. 사용자에게 알림 (개발 환경)
-      if (process.env.NODE_ENV === "development") {
-        toast.error(`스키마 검증 실패: ${error.message}`);
-      }
-
-      // 4. 대체 데이터로 이벤트 전송
-      const fallbackData = createFallbackData(error);
-      if (fallbackData) {
-        analytics.track("schema_validation_fallback", {
-          originalEvent: error.issues[0]?.path[0],
-          errorMessage: error.message,
-          fallbackData,
-        });
-      }
-    },
-    abortOnError: false, // 오류 시에도 이벤트 전송 계속
+    schemas,
+    onSchemaError: (error) => console.error("스키마 검증 실패:", error),
+    abortOnError: true,
   },
 });
-
-// 대체 데이터 생성 함수
-function createFallbackData(error: z.ZodError) {
-  const firstIssue = error.issues[0];
-  if (!firstIssue) return null;
-
-  const eventName = firstIssue.path[0];
-  const receivedData = firstIssue.received;
-
-  // 기본 구조로 대체 데이터 생성
-  return {
-    eventName,
-    timestamp: Date.now(),
-    originalData: receivedData,
-    validationErrors: error.issues.map((issue) => ({
-      path: issue.path.join("."),
-      message: issue.message,
-    })),
-  };
-}
 ```
 
-## 성능 최적화
+## 검증된 이벤트 사용하기
 
-### 1. 스키마 캐싱
+선언형 컴포넌트와 track 함수로 타입이 보장된 이벤트를 전송합니다.
 
-```tsx
-// utils/schemaCache.ts
-import { z } from "zod";
+```tsx {11, 17-19}
+import { Track } from "./event-tracker";
 
-class SchemaCache {
-  private cache = new Map<string, z.ZodSchema>();
+function HomePage() {
+  return (
+    <main>
+      <h1>홈페이지</h1>
 
-  getSchema(schemaName: string, schemaFactory: () => z.ZodSchema): z.ZodSchema {
-    if (!this.cache.has(schemaName)) {
-      this.cache.set(schemaName, schemaFactory());
-    }
-    return this.cache.get(schemaName)!;
-  }
+      {/* ✅ Zod Schema로 검사하여 타입 에러가 발생하지 않습니다. */}
+      <Track.PageView params={{ title: "홈페이지" }} />
 
-  clear() {
-    this.cache.clear();
-  }
-}
+      {/* 🚨 Zod Schema로 검사하여 타입 에러가 발생합니다. */}
+      {/* <Track.PageView params={{ title: 123 }} /> *}
 
-export const schemaCache = new SchemaCache();
+      {/* ✅ Zod Schema로 검사하여 타입 에러가 발생하지 않습니다. */}
+      <Track.Click params={{ target: "start-button" }}>
+        <button>시작하기</button>
+      </Track.Click>
 
-// 사용 예시
-const cachedSchema = schemaCache.getSchema("dynamic_event", () =>
-  z.object({
-    eventName: z.string(),
-    dynamicField: z.string(),
-  }),
-);
+      {/* 🚨 Zod Schema로 검사하여 타입 에러가 발생합니다. */}
+      {/* <Track.Click params={{}}>
+          <button onClick={() => track({ target: "start-button" })}>시작하기</button>
+        </Track.Click> */}
+    </main>
+  );
+}
 ```
 
-### 2. 배치 검증
-
-```tsx
-// utils/batchValidation.ts
-import { z } from 'zod';
-
-export const batchValidate = <T>(
-  schema: z.ZodSchema<T>,
-  dataArray: unknown[]
-): { valid: T[], invalid: { data: unknown; error: z.ZodError }[] } => {
-  const valid: T[] = [];
-  const invalid: { data: unknown; error: z.ZodError }[] = [];
-
-  dataArray.forEach(data => {
-    try {
-      const validated = schema.parse(data);
-      valid.push(validated);
-    } catch (error) {
-      if (error instanceof z.ZodError) {
-        invalid.push({ data, error });
-      }
-    }
-  });
-
-  return { valid, invalid };
-};
-```
+</Steps>
diff --git a/docs/src/content/ko/index.mdx b/docs/src/content/ko/index.mdx
index f24c6c6..6ed97ae 100644
--- a/docs/src/content/ko/index.mdx
+++ b/docs/src/content/ko/index.mdx
@@ -7,8 +7,8 @@ import HomePage from "@/components/home-page";
 <HomePage
   description="React 애플리케이션을 위한 완전한 이벤트 트래킹 시스템"
   get_started="시작하기"
-  featureCardsTitle="‘어떻게 트래킹할지’가 아닌 ‘무엇을 트래킹할지’에 집중하세요!"
-  featureCards={[
+  featureSectionTitle="‘어떻게 트래킹할지’가 아닌 ‘무엇을 트래킹할지’에 집중하세요!"
+  featureSectionContents={[
     {
       title: "선언적 API",
       description: "트래킹을 위한 별도의 설정이나 복잡한 코드 없이, 컴포넌트 형태로 직관적으로 선언할 수 있습니다.",
@@ -34,9 +34,9 @@ import HomePage from "@/components/home-page";
         "비동기 상황에서도 이벤트가 의도한 순서대로 처리되도록 설계되어, 복잡한 사용자 흐름에서도 정확한 트래킹이 가능합니다.",
     },
     {
-      title: "강력한 데이터 타입 검증",
+      title: "데이터 검증",
       description:
-        "Zod 기반의 정적 스키마 검증으로 런타임 이전에 오류를 방지하고, 수집되는 이벤트 데이터의 신뢰도를 보장합니다.",
+        "Zod 기반의 정적 스키마 검증으로 빌드 타임에서 오류를 방지하고, 수집되는 이벤트 데이터의 신뢰도를 보장합니다.",
     },
   ]}
 />

From 1a1dc51546659d4920a87efba4feba9f0f13526b Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Thu, 31 Jul 2025 21:08:45 +0900
Subject: [PATCH 16/24] chore: update en contents

---
 docs/src/components/home-page.tsx             |  14 +-
 docs/src/content/en/docs/_meta.ts             |  19 +-
 docs/src/content/en/docs/basic-example.mdx    |  70 +++++--
 docs/src/content/en/docs/batching.mdx         |  98 +++++-----
 docs/src/content/en/docs/components/click.mdx | 135 ++++++++++----
 .../content/en/docs/components/dom-event.mdx  | 149 +++++++++++----
 .../content/en/docs/components/impression.mdx | 109 +++++++++--
 docs/src/content/en/docs/components/index.mdx |  51 ++++-
 .../content/en/docs/components/page-view.mdx  |  93 ++++++++--
 .../en/docs/components/set-context.mdx        |  49 ++++-
 docs/src/content/en/docs/create-tracker.mdx   |  96 +++++-----
 .../content/en/docs/data-type-validation.mdx  | 129 ++++++++-----
 docs/src/content/en/docs/installation.mdx     |   4 +-
 docs/src/content/en/docs/introduction.mdx     |  64 +++----
 docs/src/content/en/docs/use-tracker.mdx      | 174 ++++++++++--------
 .../src/content/en/docs/why-event-tracker.mdx |  94 +++++-----
 .../en/docs/with-google-analytics-example.mdx | 115 ++++++++++++
 docs/src/content/en/docs/with-zod-example.mdx |  72 ++++++++
 docs/src/content/en/index.mdx                 |   8 +-
 .../content/ko/docs/components/page-view.mdx  |  12 +-
 docs/src/content/ko/index.mdx                 |   2 +-
 21 files changed, 1115 insertions(+), 442 deletions(-)
 create mode 100644 docs/src/content/en/docs/with-google-analytics-example.mdx
 create mode 100644 docs/src/content/en/docs/with-zod-example.mdx

diff --git a/docs/src/components/home-page.tsx b/docs/src/components/home-page.tsx
index 99e59b8..4dbb6a0 100644
--- a/docs/src/components/home-page.tsx
+++ b/docs/src/components/home-page.tsx
@@ -13,16 +13,16 @@ type FeatureCardText = {
 
 type Props = {
   description: string;
-  get_started: string;
+  startedText: string;
   featureSectionTitle: string;
   featureSectionContents: FeatureCardText[];
 };
 
 export default async function HomePage({
   description,
-  get_started,
-  featureSectionTitle: featureCardsTitle,
-  featureSectionContents: featureCards,
+  startedText,
+  featureSectionTitle,
+  featureSectionContents,
 }: Props) {
   return (
     <main className="mx-auto flex max-w-screen-xl flex-col gap-48 break-keep px-6 py-32">
@@ -40,7 +40,7 @@ export default async function HomePage({
                 href="/docs/introduction"
                 className="flex items-center justify-center rounded-lg bg-blue-500 px-5 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-600"
               >
-                {get_started}
+                {startedText}
               </Link>
             </TrackClick>
             <InstallCopyButton />
@@ -51,9 +51,9 @@ export default async function HomePage({
         </div>
       </div>
       <div className="flex flex-col items-center justify-center gap-16">
-        <p className="text-center text-3xl font-bold">{featureCardsTitle}</p>
+        <p className="text-center text-3xl font-bold">{featureSectionTitle}</p>
         <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
-          {featureCards.map((card) => (
+          {featureSectionContents.map((card) => (
             <FeatureCard key={card.title} title={card.title} description={card.description} />
           ))}
         </div>
diff --git a/docs/src/content/en/docs/_meta.ts b/docs/src/content/en/docs/_meta.ts
index 52a1f1e..2624acf 100644
--- a/docs/src/content/en/docs/_meta.ts
+++ b/docs/src/content/en/docs/_meta.ts
@@ -26,6 +26,7 @@ export default {
       layout: "default",
     },
   },
+  // TODO: Quick Start
   "api-reference-separator": {
     title: "API Reference",
     type: "separator",
@@ -46,7 +47,7 @@ export default {
     },
   },
   "advanced-separator": {
-    title: "Guides",
+    title: "Guide",
     type: "separator",
   },
   batching: {
@@ -57,7 +58,7 @@ export default {
     },
   },
   "data-type-validation": {
-    title: "Data Type Validation",
+    title: "Data Validation",
     theme: {
       toc: true,
       layout: "default",
@@ -74,4 +75,18 @@ export default {
       layout: "default",
     },
   },
+  "with-google-analytics-example": {
+    title: "w/ Google Analytics",
+    theme: {
+      toc: true,
+      layout: "default",
+    },
+  },
+  "with-zod-example": {
+    title: "w/ Zod",
+    theme: {
+      toc: true,
+      layout: "default",
+    },
+  },
 } satisfies MetaRecord;
diff --git a/docs/src/content/en/docs/basic-example.mdx b/docs/src/content/en/docs/basic-example.mdx
index 6c06e3e..2db0dd9 100644
--- a/docs/src/content/en/docs/basic-example.mdx
+++ b/docs/src/content/en/docs/basic-example.mdx
@@ -1,27 +1,75 @@
-# Guide
+import { Steps } from "nextra/components";
 
-Here's a simple example demonstrating how to use `event-tracker`:
+# Getting Started
 
-```tsx
+This guide walks you through the overall flow and usage of the Event Tracker library step by step.  
+Each step explains the required configuration, component usage, and event handling process.
+
+<Steps>
+
+## Define Tracking Events
+
+Create a tracker instance and define callbacks for DOM events.
+
+```tsx {12}
 import { createTracker } from "@offlegacy/event-tracker";
 
+interface Context {
+  userId: string;
+}
+
+interface Params {
+  eventName: string;
+}
+
 // Create a tracker instance
-const [Track, useTracker] = createTracker({
+export const [Track, useTracker] = createTracker<Context, Params>({
+  // Define tracking events
   DOMEvents: {
-    onClick: (params, context) => {
-      log("Click event:", params, context);
+    onClick: (params: Params) => {
+      console.log("click:", params);
     },
   },
 });
+```
+
+## Add a Provider
+
+Wrap your application with `Track.Provider` and set the global context.
+
+```tsx {5, 7}
+import { Track, useTracker } from "./tracker";
 
-// Usage within the app
 function App() {
   return (
-    <Track.Provider initialContext={{ userId: "user-123" }}>
-      <Track.Click params={{ buttonId: "submit" }}>
-        <button>Submit</button>
-      </Track.Click>
+    <Track.Provider initialContext={{ userId: "test-user" }}>
+      <HomePage />
     </Track.Provider>
   );
 }
 ```
+
+## Use the Defined Events
+
+Use the `Track.Click` component to declaratively track click events.
+
+```tsx {7-11, 13}
+function HomePage() {
+  return (
+    <main>
+      <h1>Homepage</h1>
+
+      {/* Track button click */}
+      <Track.Click
+        params={{
+          eventName: "clicked-start-button",
+        }}
+      >
+        <button>Get Started</button>
+      </Track.Click>
+    </main>
+  );
+}
+```
+
+</Steps>
diff --git a/docs/src/content/en/docs/batching.mdx b/docs/src/content/en/docs/batching.mdx
index 9b4be09..4085051 100644
--- a/docs/src/content/en/docs/batching.mdx
+++ b/docs/src/content/en/docs/batching.mdx
@@ -1,32 +1,30 @@
-# Event Batching
+import { Callout } from "nextra/components";
 
-## Overview
+# Batching
 
-Event batching is a performance optimization technique that groups multiple events together before sending them to your analytics service. This is particularly useful when:
+Event batching allows you to group multiple events into a single network request under certain conditions. It is particularly useful in the following cases:
 
-- You're not using an analytics service with built-in batching (like Amplitude or Google Analytics)
-- You need to reduce the number of network requests
-- You want to optimize for performance at scale
+- When using analytics services like Amplitude or Google Analytics that lack built-in batching
+- When you want to reduce the number of network requests
+- When you need to prevent event loss on browser close
 
-## Configuration
+## Usage
 
-Enable batching in your tracker configuration:
+Enable the `batch` option in the `createTracker` configuration to use batching.
 
 ```tsx
 const [Track, useTracker] = createTracker({
-  // ... other config
+  // ... other configuration
   batch: {
     enable: true,
     interval: 2000,
     thresholdSize: 100,
     onFlush: (batch, isBrowserClosing) => {
       if (isBrowserClosing) {
-        // Use sendBeacon for reliable delivery when browser is closing
         navigator.sendBeacon("/analytics/collect/batch", JSON.stringify(batch));
         return;
       }
 
-      // Normal batch submission
       fetch("/analytics/collect/batch", {
         method: "POST",
         body: JSON.stringify(batch),
@@ -36,41 +34,38 @@ const [Track, useTracker] = createTracker({
 });
 ```
 
-### Options
-
-- `enable: boolean` (default: `false`)
-  - Enables/disables batching
-- `interval: number` (default: `3000`)
-  - Time in milliseconds between batch flushes
-- `thresholdSize: number` (default: `25`)
-  - Maximum number of events in a batch before forcing a flush
-- `onFlush: (batch: Batch[], isBrowserClosing: boolean) => void | Promise<void>`
-  - Required when batching is enabled
-  - Function called to process the batch
-  - `isBrowserClosing` indicates if the flush was triggered by browser closure
-- `onError: (error: Error) => void | Promise<void>`
-  - Optional error handler for batch processing failures
+## Options
+
+| Option          | Type                                                 | Description                                       | Default |
+| --------------- | ---------------------------------------------------- | ------------------------------------------------- | ------- |
+| `enable`        | `boolean`                                            | Whether to enable batching                        | `false` |
+| `interval`      | `number`                                             | Interval between batch sends (in ms)              | `3000`  |
+| `thresholdSize` | `number`                                             | Maximum number of events before flushing batch    | `25`    |
+| `onFlush`       | `(batch, isBrowserClosing) => void \| Promise<void>` | Required. Function to process batched events      | -       |
+| `onError`       | `(error: Error) => void \| Promise<void>`            | Optional. Called when an error occurs during send | -       |
+
+<Callout type="info">`onFlush` is **required** and defines how batched events are actually sent.</Callout>
 
 ## How It Works
 
-1. Events are collected in memory
-2. The batch is flushed when either:
-   - The configured interval is reached
-   - The batch size reaches the threshold
-   - The browser is about to close/hide
+1. The **return value** of each event handler is collected in memory.
+2. `onFlush` is called when one of the following occurs:
 
-### Example Flow
+   - The `interval` time has elapsed
+   - The number of collected events reaches `thresholdSize`
+   - A browser close event is detected
+
+## Examples
 
 ```tsx
 const [Track, useTracker] = createTracker({
   DOMEvents: {
-    onClick: (clickParams, context) => {
-      // Return value is what gets batched
+    onClick: (params, context) => {
       return {
-        ...clickParams,
+        ...params,
         ...context,
         event_type: "click",
-        timestamp: new Date().getTime(),
+        timestamp: Date.now(),
       };
     },
   },
@@ -79,7 +74,15 @@ const [Track, useTracker] = createTracker({
     interval: 2000,
     thresholdSize: 100,
     onFlush: (batch, isBrowserClosing) => {
-      // Process the batch
+      if (isBrowserClosing) {
+        navigator.sendBeacon("/analytics/collect/batch", JSON.stringify(batch));
+        return;
+      }
+
+      fetch("/analytics/collect/batch", {
+        method: "POST",
+        body: JSON.stringify(batch),
+      });
     },
   },
 });
@@ -95,15 +98,13 @@ function App() {
 }
 ```
 
-When the button is clicked multiple times:
-
-1. Each click runs the `onClick` handler
-2. The return value from each handler is added to the batch queue
-3. After 2 seconds (or when threshold is reached), `onFlush` is called with all collected events
+1. Each time `<Track.Click>` runs, the object returned by the event handler is added to the batch queue.
+2. After 2 seconds or once 100 events accumulate, `onFlush` is called and the batch is sent to the server.
+3. On browser close, events are sent via `sendBeacon`.
 
-## Browser Closing Behavior
+## Handling Browser Close
 
-When the browser is closing, you should use [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) to ensure reliable delivery:
+To prevent event loss when the browser closes, you can use [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon):
 
 ```tsx
 onFlush: (batch, isBrowserClosing) => {
@@ -112,7 +113,6 @@ onFlush: (batch, isBrowserClosing) => {
     return;
   }
 
-  // Normal operation
   fetch("/analytics/collect/batch", {
     method: "POST",
     body: JSON.stringify(batch),
@@ -120,9 +120,9 @@ onFlush: (batch, isBrowserClosing) => {
 };
 ```
 
-## Important Notes
+## Notes
 
-1. Only the **return values** from event handlers are batched, not the handlers themselves
-2. Each event in the batch maintains its original parameters and context
-3. Events are processed in order, maintaining the sequence of user actions
-4. Use `navigator.sendBeacon` for browser closing scenarios to ensure delivery
+1. **Only the return value of event handlers is batched.** The handlers themselves are always executed.
+2. **Batched events are stored with context information.**
+3. **Event order is preserved.** For example, click → impression events are sent in the same order.
+4. When the browser closes, the `isBrowserClosing` flag is set to `true` to allow conditional logic in `onFlush`.
diff --git a/docs/src/content/en/docs/components/click.mdx b/docs/src/content/en/docs/components/click.mdx
index 742274f..4207280 100644
--- a/docs/src/content/en/docs/components/click.mdx
+++ b/docs/src/content/en/docs/components/click.mdx
@@ -1,6 +1,9 @@
+import { Callout } from "nextra/components";
+
 # Click
 
-A specialized version of `DOMEvent` for click events (`type="onClick"`).
+A dedicated `DOMEvent` component for click events (`type="onClick"`).  
+It is one of the event components returned as the first element of the `createTracker` tuple.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
@@ -24,49 +27,89 @@ function App() {
 }
 ```
 
+## Signature
+
+```ts
+function Click<TKey extends keyof TSchemas>({
+  children,
+  enabled,
+  ...props
+}: {
+  children: ReactNode;
+  enabled?: EnabledCondition<TContext, TEventParams>;
+} & TrackingOptions<TContext, TEventParams> &
+  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
+```
+
+## Reference
+
 ### Props
 
-- With schema
-  - `params: SchemaParams | (context: Context) => SchemaParams` - Click event parameters based on schema
-  - `schema: string` - A name of schema that will be used to validate the event parameters
-- Without schema
-  - `params: EventParams | (context: Context) => EventParams` - Click event parameters
-- `enabled?: boolean | ((context: Context, params: EventParams) => boolean)` - Conditionally enable/disable event tracking (default: `true`)
-- `debounce?: DebounceConfig` - Debounce configuration to prevent rapid successive events
-- `throttle?: ThrottleConfig` - Throttle configuration to limit event frequency
+| Prop       | Type                                                              | Description                                                | Required |
+| ---------- | ----------------------------------------------------------------- | ---------------------------------------------------------- | -------- |
+| `enabled`  | `boolean \| ((context: Context, params: EventParams) => boolean)` | Conditionally enable/disable tracking (default: `true`)    | -        |
+| `debounce` | `DebounceConfig`                                                  | Debounce configuration to prevent rapid consecutive clicks | -        |
+| `throttle` | `ThrottleConfig`                                                  | Throttle configuration to limit click frequency            | -        |
+| `schema`   | `string`                                                          | Schema name for validating event parameters                | O        |
 
-**Note:** `debounce` and `throttle` are mutually exclusive and cannot be used together.
+<Callout type="info">
+  Note: `debounce` and `throttle` are mutually exclusive and cannot be used together. A type error prevents invalid
+  usage.
+</Callout>
 
-### Tracking Options Examples
+The type of the `params` prop differs depending on whether a schema is used.
 
-#### Conditional Tracking
+With schema:
 
-```tsx
-<Track.Click params={{ buttonId: "premium-feature" }} enabled={(context, params) => context.user?.isPremium}>
-  <button>Premium Feature</button>
-</Track.Click>
-```
+| Prop     | Type                                                 | Description             |
+| -------- | ---------------------------------------------------- | ----------------------- |
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | Schema-based parameters |
 
-#### Debounced Tracking
+Without schema:
 
-```tsx
-<Track.Click params={{ buttonId: "search" }} debounce={{ delay: 300, leading: false, trailing: true }}>
-  <button>Search</button>
-</Track.Click>
-```
+| Prop     | Type                                               | Description      |
+| -------- | -------------------------------------------------- | ---------------- |
+| `params` | `EventParams \| (context: Context) => EventParams` | Event parameters |
 
-#### Throttled Tracking
+---
 
-```tsx
-<Track.Click params={{ buttonId: "rapid-action" }} throttle={{ delay: 1000, leading: true, trailing: false }}>
-  <button>Quick Action</button>
-</Track.Click>
-```
+#### `params` (Required)
+
+With schema:
+
+- **Type:** `SchemaParams | (context: Context) => SchemaParams`
+- **Description:** Schema-based parameters.
+
+Without schema:
+
+- **Type:** `EventParams | (context: Context) => EventParams`
+- **Description:** Standard event parameters.
+
+#### `enabled`
+
+- **Type:** `boolean | ((context: Context, params: EventParams) => boolean)`
+- **Description:** Conditionally enable or disable event tracking (default: `true`).
+
+#### `debounce`
+
+- **Type:** `DebounceConfig`
+- **Description:** Configure debouncing to avoid multiple rapid click triggers.
 
-## Handling Renamed Click Event Prop
+#### `throttle`
 
-The `eventName` prop allows you to specify a custom click event handler name.  
-It allows you to dynamically specify the new click event handler name, ensuring flexibility even when the handler names change.
+- **Type:** `ThrottleConfig`
+- **Description:** Configure throttling to limit click frequency.
+
+#### `schema`
+
+When using schemas:
+
+- **Type:** `string`
+- **Description:** Schema name used to validate event parameters.
+
+## Examples
+
+### Custom Event Handler Name
 
 ```tsx {8, 10}
 function MyButton({ onButtonClick }: { onButtonClick?: () => void }) {
@@ -76,10 +119,36 @@ function MyButton({ onButtonClick }: { onButtonClick?: () => void }) {
 function App() {
   return (
     <Track.Provider initialContext={{}}>
-      <Track.Click type="onFocus" params={{...}} eventName="onButtonClick">
+      <Track.Click params={{ ... }} eventName="onButtonClick">
         <MyButton />
       </Track.Click>
     </Track.Provider>
   );
 }
 ```
+
+Using the `eventName` prop lets you specify a custom click handler name, providing flexibility if the handler name differs.
+
+### Conditional Event
+
+```tsx
+<Track.Click params={{ buttonId: "premium-feature" }} enabled={(context, params) => context.user?.isPremium}>
+  <button>Premium Feature</button>
+</Track.Click>
+```
+
+### Debounced Event
+
+```tsx
+<Track.Click params={{ buttonId: "search" }} debounce={{ delay: 300, leading: false, trailing: true }}>
+  <button>Search</button>
+</Track.Click>
+```
+
+### Throttled Event
+
+```tsx
+<Track.Click params={{ buttonId: "rapid-action" }} throttle={{ delay: 1000, leading: true, trailing: false }}>
+  <button>Quick Action</button>
+</Track.Click>
+```
diff --git a/docs/src/content/en/docs/components/dom-event.mdx b/docs/src/content/en/docs/components/dom-event.mdx
index 49f102f..636663f 100644
--- a/docs/src/content/en/docs/components/dom-event.mdx
+++ b/docs/src/content/en/docs/components/dom-event.mdx
@@ -1,6 +1,9 @@
+import { Callout } from "nextra/components";
+
 # DOMEvent
 
-Used for tracking DOM events. Wraps a child component and fires the specified event handler.
+Used to track DOM events. Wraps a child component and triggers the specified event handler.  
+It is one of the event components returned as the first element of the `createTracker` tuple.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
@@ -16,7 +19,7 @@ const [Track] = createTracker({
 function App() {
   return (
     <Track.Provider initialContext={{}}>
-      <Track.DOMEvent type="onFocus" params={{...}}>
+      <Track.DOMEvent type="onFocus" params={{ ... }}>
         <input />
       </Track.DOMEvent>
     </Track.Provider>
@@ -24,23 +27,114 @@ function App() {
 }
 ```
 
+## Signature
+
+```ts
+function DOMEvent<TKey extends keyof TSchemas>({
+  children,
+  type,
+  eventName,
+  enabled,
+  ...props
+}: {
+  children: React.ReactNode;
+  type: DOMEventNames;
+  eventName?: string;
+  enabled?: EnabledCondition<TContext, TEventParams>;
+} & TrackingOptions<TContext, TEventParams> &
+  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
+```
+
+## Reference
+
 ### Props
 
-- `type: DOMEventNames` - Event name (e.g., onClick, onFocus)
-- With schema
-  - `params: SchemaParams | (context: Context) => SchemaParams` - Parameters based on schema
-  - `schema: string` - A name of schema that will be used to validate the event parameters
-- Without schema
-  - `params: EventParams | (context: Context) => EventParams` - Event parameters
-- `enabled?: boolean | ((context: Context, params: EventParams) => boolean)` - Conditionally enable/disable event tracking (default: `true`)
-- `debounce?: DebounceConfig` - Debounce configuration to prevent rapid successive events
-- `throttle?: ThrottleConfig` - Throttle configuration to limit event frequency
+| Prop       | Type                                                              | Description                                                | Required |
+| ---------- | ----------------------------------------------------------------- | ---------------------------------------------------------- | -------- |
+| `type`     | `DOMEventNames`                                                   | Event name (e.g., `"onClick"`, `"onFocus"`)                | Yes      |
+| `enabled`  | `boolean \| ((context: Context, params: EventParams) => boolean)` | Conditionally enable/disable tracking (default: `true`)    | -        |
+| `debounce` | `DebounceConfig`                                                  | Debounce configuration to prevent rapid consecutive events | -        |
+| `throttle` | `ThrottleConfig`                                                  | Throttle configuration to limit event frequency            | -        |
+| `schema`   | `string`                                                          | Schema name for validating event parameters                | -        |
+
+<Callout type="info">
+  Note: `debounce` and `throttle` are mutually exclusive and cannot be used together. A type error prevents invalid
+  usage.
+</Callout>
+
+The type of the `params` prop differs depending on whether a schema is used.
+
+With schema:
+
+| Prop     | Type                                                 | Description             |
+| -------- | ---------------------------------------------------- | ----------------------- |
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | Schema-based parameters |
+
+Without schema:
+
+| Prop     | Type                                               | Description      |
+| -------- | -------------------------------------------------- | ---------------- |
+| `params` | `EventParams \| (context: Context) => EventParams` | Event parameters |
+
+---
+
+#### `params` (Required)
+
+With schema:
+
+- **Type:** `SchemaParams | (context: Context) => SchemaParams`
+- **Description:** Schema-based parameters.
+
+Without schema:
+
+- **Type:** `EventParams | (context: Context) => EventParams`
+- **Description:** Standard event parameters.
+
+#### `enabled`
+
+- **Type:** `boolean | ((context: Context, params: EventParams) => boolean)`
+- **Description:** Conditionally enable or disable event tracking (default: `true`).
+
+#### `debounce`
+
+- **Type:** `DebounceConfig`
+- **Description:** Configure debouncing to avoid multiple rapid event triggers.
+
+#### `throttle`
+
+- **Type:** `ThrottleConfig`
+- **Description:** Configure throttling to limit event frequency.
+
+#### `schema`
+
+When using schemas:
+
+- **Type:** `string`
+- **Description:** Schema name used to validate event parameters.
+
+## Examples
+
+### Custom Event Handler Name
+
+```tsx {8, 10}
+function MyInput({ onInputFocus }: { onInputFocus?: () => void }) {
+  return <input onFocus={onInputFocus} />;
+}
 
-**Note:** `debounce` and `throttle` are mutually exclusive and cannot be used together.
+function App() {
+  return (
+    <Track.Provider initialContext={{}}>
+      <Track.DOMEvent type="onFocus" params={{ ... }} eventName="onInputFocus">
+        <MyInput />
+      </Track.DOMEvent>
+    </Track.Provider>
+  );
+}
+```
 
-### Tracking Options Examples
+Using the `eventName` prop lets you specify a custom handler name, providing flexibility if the handler name differs from the DOM event name.
 
-#### Conditional Tracking
+### Conditional Event
 
 ```tsx
 <Track.DOMEvent type="onFocus" params={{ inputId: "email" }} enabled={(context) => context.trackingEnabled}>
@@ -48,7 +142,7 @@ function App() {
 </Track.DOMEvent>
 ```
 
-#### Debounced Tracking
+### Debounced Event
 
 ```tsx
 <Track.DOMEvent
@@ -60,7 +154,7 @@ function App() {
 </Track.DOMEvent>
 ```
 
-#### Throttled Tracking
+### Throttled Event
 
 ```tsx
 <Track.DOMEvent
@@ -68,27 +162,6 @@ function App() {
   params={{ elementId: "main-content" }}
   throttle={{ delay: 100, leading: true, trailing: false }}
 >
-  <div>Scrollable content</div>
+  <div>Scrollable Content</div>
 </Track.DOMEvent>
 ```
-
-## Handling Renamed Event Props
-
-The `eventName` prop allows you to specify a custom event handler name.  
-It allows you to dynamically specify the new event handler name, ensuring flexibility even when the handler names change.
-
-```tsx {8, 10}
-function MyInput({ onInputFocus }: { onInputFocus?: () => void }) {
-  return <input onFocus={onInputFocus} />;
-}
-
-function App() {
-  return (
-    <Track.Provider initialContext={{}}>
-      <Track.DOMEvent type="onFocus" params={{...}} eventName="onInputFocus">
-        <MyInput />
-      </Track.DOMEvent>
-    </Track.Provider>
-  );
-}
-```
diff --git a/docs/src/content/en/docs/components/impression.mdx b/docs/src/content/en/docs/components/impression.mdx
index f56658e..793809b 100644
--- a/docs/src/content/en/docs/components/impression.mdx
+++ b/docs/src/content/en/docs/components/impression.mdx
@@ -1,6 +1,9 @@
+import { Callout } from "nextra/components";
+
 # Impression
 
-Tracks impression events using the Intersection Observer API.
+Tracks impression events using the [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API).  
+It is one of the event components returned as the first element of the `createTracker` tuple.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
@@ -20,30 +23,104 @@ function App() {
   return (
     <Track.Provider initialContext={{}}>
       <Track.Impression params={{ elementId: "hero" }} options={{ threshold: 0.8 }}>
-        <div>Tracked content</div>
+        <div>Tracked Content</div>
       </Track.Impression>
     </Track.Provider>
   );
 }
 ```
 
+## Signature
+
+```ts
+function Impression<TKey extends keyof TSchemas>({
+  children,
+  options,
+  enabled,
+  ...props
+}: {
+  children: ReactNode;
+  options?: ImpressionOptions;
+  enabled?: EnabledCondition<TContext, TEventParams>;
+} & TrackingOptions<TContext, TEventParams> &
+  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
+```
+
+## Reference
+
 ### Props
 
-- `options?: ImpressionOptions` - Optional configuration (overrides global options)
-- With schema
-  - `params: SchemaParams | (context: Context) => SchemaParams` - Impression event parameters based on schema
-  - `schema: string` - A name of schema that will be used to validate the event parameters
-- Without schema
-  - `params: EventParams | (context: Context) => EventParams` - Impression event parameters
-- `enabled?: boolean | ((context: Context, params: EventParams) => boolean)` - Conditionally enable/disable event tracking (default: `true`)
-- `debounce?: DebounceConfig` - Debounce configuration to prevent rapid successive events
-- `throttle?: ThrottleConfig` - Throttle configuration to limit event frequency
+| Prop       | Type                                                              | Description                                                   | Required |
+| ---------- | ----------------------------------------------------------------- | ------------------------------------------------------------- | -------- |
+| `enabled`  | `boolean \| ((context: Context, params: EventParams) => boolean)` | Conditionally enable/disable event tracking (default: `true`) | -        |
+| `debounce` | `DebounceConfig`                                                  | Configure debouncing to prevent rapid consecutive events      | -        |
+| `throttle` | `ThrottleConfig`                                                  | Configure throttling to limit event frequency                 | -        |
+| `options`  | `ImpressionOptions`                                               | Overrides global `IntersectionObserver` options               | -        |
+| `schema`   | `string`                                                          | Schema name for validating event parameters                   | O        |
+
+<Callout type="info">
+  Note: `debounce` and `throttle` are mutually exclusive and cannot be used together. A type error will prevent invalid
+  usage.
+</Callout>
+
+The `params` prop type changes depending on whether schemas are used.
+
+With schema:
+
+| Prop     | Type                                                 | Description             |
+| -------- | ---------------------------------------------------- | ----------------------- |
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | Schema-based parameters |
+
+Without schema:
+
+| Prop     | Type                                               | Description         |
+| -------- | -------------------------------------------------- | ------------------- |
+| `params` | `EventParams \| (context: Context) => EventParams` | Standard parameters |
+
+---
+
+#### `params` (Required)
+
+With schema:
+
+- **Type:** `SchemaParams | (context: Context) => SchemaParams`
+- **Description:** Schema-based parameters
+
+Without schema:
+
+- **Type:** `EventParams | (context: Context) => EventParams`
+- **Description:** Event parameters
+
+#### `enabled`
+
+- **Type:** `boolean | ((context: Context, params: EventParams) => boolean)`
+- **Description:** Conditionally enable or disable event tracking (default: `true`)
+
+#### `debounce`
+
+- **Type:** `DebounceConfig`
+- **Description:** Configure debouncing to avoid multiple rapid event triggers.
+
+#### `throttle`
+
+- **Type:** `ThrottleConfig`
+- **Description:** Configure throttling to limit event frequency.
+
+#### `options`
+
+- **Type:** `ImpressionOptions`
+- **Description:** Controls [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) behavior such as `threshold` and `rootMargin`. Overrides global options for fine-grained control per impression.
+
+#### `schema`
+
+When using schemas:
 
-**Note:** `debounce` and `throttle` are mutually exclusive and cannot be used together.
+- **Type:** `string`
+- **Description:** Schema name used to validate event parameters.
 
-### Tracking Options Examples
+## Examples
 
-#### Conditional Tracking
+### Conditional Event
 
 ```tsx
 <Track.Impression
@@ -55,7 +132,7 @@ function App() {
 </Track.Impression>
 ```
 
-#### Throttled Impressions
+### Throttled Event
 
 ```tsx
 <Track.Impression
@@ -63,6 +140,6 @@ function App() {
   throttle={{ delay: 2000, leading: true, trailing: false }}
   options={{ threshold: 0.8 }}
 >
-  <div>Advertisement Banner</div>
+  <div>Ad Banner</div>
 </Track.Impression>
 ```
diff --git a/docs/src/content/en/docs/components/index.mdx b/docs/src/content/en/docs/components/index.mdx
index 13da1ae..a53172d 100644
--- a/docs/src/content/en/docs/components/index.mdx
+++ b/docs/src/content/en/docs/components/index.mdx
@@ -1,6 +1,6 @@
 # Provider
 
-The `Provider` component attaches and provides the initial context to your application. It is one of the event components included as the first element of the tuple returned by `createTracker`.
+The `Provider` component initializes and supplies context to the application. It is one of the event components returned as the first element of the `createTracker` tuple.
 
 ```tsx
 import { createTracker } from '@offlegacy/event-tracker'
@@ -16,17 +16,54 @@ function App() {
 }
 ```
 
+## Signature
+
+```ts
+function Provider({ children, initialContext }: { children: ReactNode; initialContext?: TContext }): JSX.Element;
+```
+
 ## Reference
 
 ### Props
 
-| Props            | Type      | Description           | Example             |
-| ---------------- | --------- | --------------------- | ------------------- |
-| `initialContext` | `Context` | Initial context value | `{ userId: '123' }` |
+| Prop             | Type      | Description           | Required |
+| ---------------- | --------- | --------------------- | -------- |
+| `initialContext` | `Context` | Initial context value | Yes      |
 
 ---
 
-#### `initialContext` (required)
+#### `initialContext` (Required)
+
+- **Type:** `Context`
+- **Description:** Defines the initial context value.
+
+## Examples
+
+### With Initial Context
+
+```tsx
+import { createTracker } from "@offlegacy/event-tracker";
+
+type Context = {
+  userId: string;
+  trackingEnabled: boolean;
+};
+
+const [Track] = createTracker<Context>({});
+
+function App() {
+  return (
+    <Track.Provider
+      initialContext={{
+        userId: "user-123",
+        trackingEnabled: true,
+      }}
+    >
+      <MainPage />
+    </Track.Provider>
+  );
+}
+```
 
-- Type: `Context`
-- Description: The initial context value provided to the application.
+`initialContext` defines the initial state accessible to all nested tracking components.
+This context can be used within `enabled`, `params`, and `SetContext`.
diff --git a/docs/src/content/en/docs/components/page-view.mdx b/docs/src/content/en/docs/components/page-view.mdx
index e2f9f83..ec40680 100644
--- a/docs/src/content/en/docs/components/page-view.mdx
+++ b/docs/src/content/en/docs/components/page-view.mdx
@@ -1,6 +1,8 @@
+import { Callout } from "nextra/components";
+
 # PageView
 
-Tracks page view events on component mount.
+Tracks a page view event when the component mounts. It is one of the event components returned as the first element of the `createTracker` tuple.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
@@ -22,22 +24,87 @@ function App() {
 }
 ```
 
+## Signature
+
+```ts
+function PageView<TKey extends keyof TSchemas>({
+  enabled,
+  ...props
+}: {
+  enabled?: EnabledCondition<TContext, TEventParams>;
+} & TrackingOptions<TContext, TEventParams> &
+  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
+```
+
+## Reference
+
 ### Props
 
-- With schema
-  - `params: SchemaParams | (context: Context) => SchemaParams` - Page view event parameters based on schema
-  - `schema: string` - A name of schema that will be used to validate the event parameters
-- Without schema
-  - `params: EventParams | (context: Context) => EventParams` - Page view event parameters
-- `enabled?: boolean | ((context: Context, params: EventParams) => boolean)` - Conditionally enable/disable event tracking (default: `true`)
-- `debounce?: DebounceConfig` - Debounce configuration to prevent rapid successive events
-- `throttle?: ThrottleConfig` - Throttle configuration to limit event frequency
+| Prop       | Type                                                              | Description                                                   | Required |
+| ---------- | ----------------------------------------------------------------- | ------------------------------------------------------------- | -------- |
+| `enabled`  | `boolean \| ((context: Context, params: EventParams) => boolean)` | Conditionally enable/disable event tracking (default: `true`) | -        |
+| `debounce` | `DebounceConfig`                                                  | Debounce configuration to prevent rapid consecutive events    | -        |
+| `throttle` | `ThrottleConfig`                                                  | Throttle configuration to limit event frequency               | -        |
+| `schema`   | `string`                                                          | Schema name for validating event parameters                   | O        |
+
+<Callout type="info">
+  Note: `debounce` and `throttle` are mutually exclusive and cannot be used together. A type error will prevent invalid
+  usage.
+</Callout>
+
+When using with schemas vs. without schemas, the `params` prop type differs.
+
+With schema:
+
+| Prop     | Type                                                 | Description             |
+| -------- | ---------------------------------------------------- | ----------------------- |
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | Schema-based parameters |
+
+Without schema:
+
+| Prop     | Type                                               | Description         |
+| -------- | -------------------------------------------------- | ------------------- |
+| `params` | `EventParams \| (context: Context) => EventParams` | Standard parameters |
+
+---
+
+#### `params` (Required)
+
+With schema:
+
+- **Type:** `SchemaParams | (context: Context) => SchemaParams`
+- **Description:** Schema-based parameters
+
+Without schema:
+
+- **Type:** `EventParams | (context: Context) => EventParams`
+- **Description:** Event parameters
+
+#### `enabled`
+
+- **Type:** `boolean | ((context: Context, params: EventParams) => boolean)`
+- **Description:** Conditionally enable or disable event tracking (default: `true`)
+
+#### `debounce`
+
+- **Type:** `DebounceConfig`
+- **Description:** Configure debouncing to avoid multiple rapid event triggers.
+
+#### `throttle`
+
+- **Type:** `ThrottleConfig`
+- **Description:** Configure throttling to limit event frequency.
+
+#### `schema`
+
+When using schemas:
 
-**Note:** `debounce` and `throttle` are mutually exclusive and cannot be used together.
+- **Type:** `string`
+- **Description:** Schema name used to validate event parameters.
 
-### Tracking Options Examples
+## Examples
 
-#### Conditional Tracking
+### Conditional Event
 
 ```tsx
 <Track.PageView
@@ -46,7 +113,7 @@ function App() {
 />
 ```
 
-#### Debounced Page Views
+### Debounced Page View
 
 ```tsx
 <Track.PageView params={{ page: "/search-results" }} debounce={{ delay: 1000, leading: true, trailing: false }} />
diff --git a/docs/src/content/en/docs/components/set-context.mdx b/docs/src/content/en/docs/components/set-context.mdx
index 18db859..434b8ca 100644
--- a/docs/src/content/en/docs/components/set-context.mdx
+++ b/docs/src/content/en/docs/components/set-context.mdx
@@ -1,23 +1,54 @@
+import { Callout } from "nextra/components";
+
 # SetContext
 
-Sets or updates the tracking context.
+Sets or updates the tracking context. It is one of the utility components returned as the first element of the `createTracker` tuple.
 
 ```tsx
-import { createTracker } from '@offlegacy/event-tracker'
+import { createTracker } from "@offlegacy/event-tracker";
 
-const [Track] = createTracker({...})
+const [Track] = createTracker({ ... });
 
 function App() {
   return (
-    <Track.Provider initialContext={{ userId: 'user-1' }}>
-      <Track.SetContext
-        context={{ lastActive: new Date() }}
-      />
+    <Track.Provider initialContext={{ userId: "user-1" }}>
+      <Track.SetContext context={{ lastActive: new Date() }} />
     </Track.Provider>
-  )
+  );
 }
 ```
 
+## Signature
+
+```ts
+function SetContext({ context }: { context: TContext | ((prevContext: TContext) => TContext) }): null;
+```
+
+## Reference
+
 ### Props
 
-- `context: Context | ((prevContext: Context) => Context)` - New context value or update function
+| Prop      | Type                                             | Description                                                             | Required |
+| --------- | ------------------------------------------------ | ----------------------------------------------------------------------- | -------- |
+| `context` | `Context \| ((prevContext: Context) => Context)` | New context value or a function to update based on the previous context | Yes      |
+
+---
+
+#### `context` (Required)
+
+- **Type:** `Context | ((prevContext: Context) => Context)`
+- **Description:** You can either specify a new context directly or update it based on the previous context. Once rendered, this component updates the tracking context with the specified value.
+
+## Examples
+
+### Set Static Context
+
+```tsx
+<Track.SetContext context={{ userId: "user-123" }} />
+```
+
+### Update Based on Previous Context
+
+```tsx
+<Track.SetContext context={(prev) => ({ ...prev, lastSeen: new Date() })} />
+```
diff --git a/docs/src/content/en/docs/create-tracker.mdx b/docs/src/content/en/docs/create-tracker.mdx
index 6d143a0..a03d8c5 100644
--- a/docs/src/content/en/docs/create-tracker.mdx
+++ b/docs/src/content/en/docs/create-tracker.mdx
@@ -1,6 +1,7 @@
 # createTracker
 
-`createTracker` is a function used to create tracker instances with custom configurations. It allows you to define event tracking behaviors through parameters, returning a tuple containing the tracker instance and a custom hook for usage.
+`createTracker` is a function that generates a tracker instance with custom configurations.  
+Through its parameters, you define event tracking behavior, and the returned tuple provides access to the tracker instance.
 
 ```tsx
 const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTracker] = createTracker({
@@ -19,85 +20,96 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTrack
 });
 ```
 
+## Signature
+
+```ts
+function createTracker<
+  TContext extends Context = Context,
+  TEventParams extends EventParams = EventParams,
+  TSchemas extends Schemas = Schemas,
+  TTaskResult extends TaskResult = TaskResult,
+>(config: TrackerConfig<TContext, TEventParams, TSchemas, TTaskResult>): [EventComponents, UseTracker];
+```
+
 ## Reference
 
 ### Parameters
 
-`createTracker` accepts a single configuration object as its parameter.
+`createTracker` accepts a single configuration object.
 
-| Option       | Type                                                                                                                     | Description                                                                          |
-| ------------ | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
-| `init`       | `(initialContext: Context, setContext: SetContext) => void \| Promise<void>`                                             | Initialization function executed before any event occurs. Supports async operations. |
-| `send`       | `(params: EventParams \| (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType` | Function for sending events externally. Supports async operations.                   |
-| `DOMEvents`  | [`DOMEvents`](https://developer.mozilla.org/docs/Web/API/Event)                                                          | Collection of React DOM event handlers (`onClick`, `onMouseEnter`, etc.).            |
-| `impression` | `ImpressionOptions`                                                                                                      | Configuration for impression event tracking.                                         |
-| `pageView`   | `PageViewOptions`                                                                                                        | Configuration for page view tracking.                                                |
-| `batch`      | `BatchConfig`                                                                                                            | Configuration for event batching.                                                    |
-| `schemas`    | `SchemaConfig`                                                                                                           | Configuration for event schema validation.                                           |
+| Property     | Type                                                                                                                     | Description                                                                |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
+| `init`       | `(initialContext: Context, setContext: SetContext) => void \| Promise<void>`                                             | Initialization function executed before any event occurs. Async supported. |
+| `send`       | `(params: EventParams \| (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType` | Event dispatch function. Async supported.                                  |
+| `DOMEvents`  | [`DOMEvents`](https://developer.mozilla.org/docs/Web/API/Event)                                                          | Collection of React DOM event handlers (`onClick`, `onMouseEnter`, etc.)   |
+| `impression` | `ImpressionOptions`                                                                                                      | Impression event tracking configuration                                    |
+| `pageView`   | `PageViewOptions`                                                                                                        | Page view tracking configuration                                           |
+| `batch`      | `BatchConfig`                                                                                                            | Event batching configuration                                               |
+| `schemas`    | `SchemaConfig`                                                                                                           | Event schema validation configuration                                      |
 
 ---
 
 #### `init`
 
-- Type: `(initialContext: Context, setContext: SetContext) => void | Promise<void>`
-- Description: Function to set the initial context before any event occurs. Supports asynchronous functions.
+- **Type:** `(initialContext: Context, setContext: SetContext) => void | Promise<void>`
+- **Description:** Function to initialize context before any event fires. Supports async.
 
 #### `send`
 
-- Type: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
-- Description: Function for sending events externally. Supports asynchronous operations.
+- **Type:** `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
+- **Description:** Sends events to an external service. Supports async.
 
 #### `DOMEvents`
 
-- Type: `DOMEvents`
-- Description: Standard React DOM event handlers. Used by `<Track.DOMEvent>` components.
+- **Type:** `DOMEvents`
+- **Description:** Standard React DOM event handler object. Used in `<Track.DOMEvent>` components.
 
 #### `impression`
 
-- `impression.onImpression`
+- **`impression.onImpression`**
 
-  - Type: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
-  - Description: Callback executed when `<Track.Impression>` event occurs.
+  - **Type:** `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
+  - **Description:** Callback executed when `<Track.Impression>` fires.
 
-- `impression.options`
+- **`impression.options`**
 
-  - Type: `ImpressionOptions`
-  - Properties:
+  - **Type:** `ImpressionOptions`
+  - **Properties:**
 
-    - `threshold`: Visibility threshold ratio (default: `0.2`)
-    - `freezeOnceVisible`: Fix visibility state after impression (default: `true`)
+    - `threshold`: Intersection ratio threshold (default: `0.2`)
+    - `freezeOnceVisible`: Whether to lock state after first impression (default: `true`)
     - `initialIsIntersecting`: Initial intersection state (default: `false`)
 
 #### `pageView`
 
-- `pageView.onPageView`
+- **`pageView.onPageView`**
 
-  - Type: `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
-  - Description: Executed when `<Track.PageView>` component mounts.
+  - **Type:** `(params: EventParams | (context: Context) => EventParams, context: Context, setContext: SetContext) => TaskReturnType`
+  - **Description:** Callback executed when `<Track.PageView>` mounts.
 
 #### `batch`
 
-- Type: `BatchConfig`
-- Properties:
+- **Type:** `BatchConfig`
+- **Properties:**
 
   - `batch.enable`: Enable batching (default: `false`)
-  - `batch.interval`: Sending interval in milliseconds (default: `3000`)
-  - `batch.thresholdSize`: Maximum batch size (default: `25`)
-  - `batch.onFlush`: Function to handle batched event sending
-  - `batch.onError`: Optional error handling function
+  - `batch.interval`: Dispatch interval in ms (default: `3000`)
+  - `batch.thresholdSize`: Max batch size (default: `25`)
+  - `batch.onFlush`: Function to process batched events
+  - `batch.onError`: Optional error handler for batch failures
 
 #### `schemas`
 
-- Type: `SchemaConfig`
-- Properties:
+- **Type:** `SchemaConfig`
+- **Properties:**
 
-  - `schemas.schema`: Schema definitions based on [Zod](https://zod.dev/)
-  - `schemas.onSchemaError`: Function executed when schema validation errors occur
-  - `schemas.abortOnError`: Abort events on validation error (default: `false`)
+  - `schemas.schema`: [Zod](https://zod.dev/)-based schema definitions
+  - `schemas.onSchemaError`: Handler for schema validation errors
+  - `schemas.abortOnError`: Whether to abort events on validation error (default: `false`)
 
 ### Returns
 
-`createTracker` returns a tuple containing the following two elements:
+`createTracker` returns a tuple with two elements:
 
 ```tsx
 const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTracker] = createTracker({...})
@@ -105,7 +117,7 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTrack
 
 #### [Components](./components)
 
-The first element of the returned tuple contains various event components:
+The first element is an object containing event components:
 
 ```tsx
 const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }] = createTracker(config);
@@ -124,4 +136,4 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }] = create
 const [, useTracker] = createTracker(config);
 ```
 
-The second element of the returned tuple is a custom React hook. It provides access to event tracking functionalities and context management within components.
+The second element is a custom React hook giving access to event tracking functions and context management inside components.
diff --git a/docs/src/content/en/docs/data-type-validation.mdx b/docs/src/content/en/docs/data-type-validation.mdx
index 8a237b4..7af3e43 100644
--- a/docs/src/content/en/docs/data-type-validation.mdx
+++ b/docs/src/content/en/docs/data-type-validation.mdx
@@ -1,69 +1,98 @@
-# Data Type Validation
+import { Callout, Steps } from "nextra/components";
 
-## Overview
+# Data Validation
 
-Ensuring accurate data types in event tracking is crucial for data reliability and meaningful analysis.  
-`event-tracker` provides built-in data type validation using [Zod](https://zod.dev/), a TypeScript-first schema validation library.
-This feature allows you to define schemas for your event parameters, ensuring that the data conforms to the expected structure before processing.
-This is particularly useful for maintaining consistency and preventing errors in event tracking.
+Event Tracker provides schema-based data type validation using [Zod](https://zod.dev/) to ensure the accuracy of event parameters.  
+With this feature, events are validated against predefined structures before being collected, helping to ensure data reliability, prevent errors, and provide a foundation for structured analytics.
 
-## Configuration
+## Usage
 
-To configure data type validation in `event-tracker`, you need to define your schemas using Zod and pass them to the tracker configuration.
+Define Zod schemas and pass them to the `schemas` option in the `createTracker` configuration.
 
-### Options
+```tsx
+import { createTracker } from "@offlegacy/event-tracker";
+import { z } from "zod";
 
-- **schemas**: A record of Zod schemas that define the structure of your event parameters.
-- **onSchemaError**: A callback function that is invoked when schema validation fails.
-- **abortOnError**: A boolean indicating whether to abort the event processing on validation error. `false` by default.
+const schemas = {
+  page_view: z.object({
+    title: z.string(),
+  }),
+  click_button: z.object({
+    target: z.string(),
+  }),
+};
 
-## Example Flow
+const [Track] = createTracker<{}, {}, typeof schemas>({
+  schemas: {
+    schemas,
+    onSchemaError: (error) => {
+      console.error("Schema validation failed:", error);
+    },
+    abortOnError: true,
+  },
+});
+```
 
-1. **Define Schemas**: Use Zod to define the expected structure of your event parameters.
+## Reference
 
-   ```typescript
-   import { z } from "zod";
+| Option          | Type                                         | Description                                           | Default  |
+| --------------- | -------------------------------------------- | ----------------------------------------------------- | -------- |
+| `schemas`       | `Record<string, ZodSchema>`                  | Mapping of event names to Zod schemas                 | Required |
+| `onSchemaError` | `(error: ZodError) => void \| Promise<void>` | Function called when schema validation fails          | Optional |
+| `abortOnError`  | `boolean`                                    | Whether to abort event processing on validation error | `false`  |
 
-   const page_view = z.object({
-     title: z.string(),
-   });
+<Callout type="info">
+  When `abortOnError` is set to `true`, events that fail schema validation will not be tracked.
+</Callout>
 
-   const click_button = z.object({
-     target: z.string(),
-   });
-   ```
+## Examples
 
-2. **Configure Tracker**: Pass the schemas to the `createTracker` function.
+<Steps>
 
-   ```tsx
-   import { createTracker } from "@offlegacy/event-tracker";
+### Define Zod Schemas
 
-   type schemas = {
-     page_view;
-     clic_button;
-   };
+```ts
+import { z } from "zod";
 
-   const [Track] = createTracker<{}, {}, typeof schemas>({
-     schema: {
-       schemas,
-       onSchemaError: (error) => {
-         console.error("Schema validation error:", error);
-       },
-       abortOnError: true,
-     },
-     // other configurations...
-   });
-   ```
+const schemas = {
+  page_view: z.object({
+    title: z.string(),
+  }),
+  click_button: z.object({
+    target: z.string(),
+  }),
+};
+```
 
-3. **Validate Events**: When events are tracked, they are validated against the defined schemas. It will also be validated in advance using TypeScript.
-   ```tsx
-   <Track.PageView schema='page_view' params={{ title: "Home Page" }} />
-   <Track.Click schema='click_button' params={{ target: "submit-button" }} />
-   ```
+### Register with `createTracker`
 
-## Important Notes
+```tsx
+const [Track] = createTracker<{}, {}, typeof schemas>({
+  schemas: {
+    schemas,
+    abortOnError: true,
+    onSchemaError: (error) => {
+      console.error("Schema error occurred", error);
+    },
+  },
+});
+```
 
-- Zod schemas are by default validated with [`.parse()`](https://zod.dev/?id=parse).
-- We recommend defining schemas outside of `createTracker` function, then assigning `typeof schemas` in the third generic type argument of `createTracker` for smooth type inference.
+### Schema-Based Event Tracking
 
-_We plan to support other schema validation libraries in the future._
+```tsx
+<Track.PageView schema="page_view" params={{ title: "Home" }} />
+<Track.Click schema="click_button" params={{ target: "submit-button" }} />
+```
+
+If schema validation passes, the event is sent to `send` or the respective handler.
+If it fails, `onSchemaError` is triggered, and if `abortOnError` is `true`, the event is discarded.
+
+</Steps>
+
+## Notes
+
+- Zod schemas use [parse](https://zod.dev/?id=parse) for validation by default.
+- For better type inference, define schemas outside of the `createTracker` function and pass `typeof schemas` as the third type argument to `createTracker`.
+
+_Support for additional schema validation libraries is planned for the future._
diff --git a/docs/src/content/en/docs/installation.mdx b/docs/src/content/en/docs/installation.mdx
index 2cba716..d88a53e 100644
--- a/docs/src/content/en/docs/installation.mdx
+++ b/docs/src/content/en/docs/installation.mdx
@@ -1,9 +1,11 @@
 # Installation
 
-Event Tracker is a library designed to simplify event tracking in React applications. It supports versions `React 18.0.0` and higher.
+Event Tracker is a library designed to make implementing event tracking in React applications simple and efficient. It supports `React@^16.8.0` and above.
 
 To install the latest stable version, run the following command:
 
+![NPM Version](https://img.shields.io/npm/v/%40offlegacy%2Fevent-tracker)
+
 ```shell npm2yarn
 npm install @offlegacy/event-tracker
 ```
diff --git a/docs/src/content/en/docs/introduction.mdx b/docs/src/content/en/docs/introduction.mdx
index c2585a0..4a6f75c 100644
--- a/docs/src/content/en/docs/introduction.mdx
+++ b/docs/src/content/en/docs/introduction.mdx
@@ -1,17 +1,15 @@
-import { Steps } from "nextra/components";
-
 # Introduction
 
 Welcome to the Event Tracker documentation.
 
 ## What is Event Tracker?
 
-Event Tracker is a declarative React library designed to simplify the implementation of complex event tracking, allowing developers to focus more on their business logic. It is designed to efficiently manage event tracking in applications of any scale.
+Event Tracker is a declarative React library that simplifies the process of implementing complex event tracking, allowing developers to focus more on business logic. It is designed to make event tracking easy and efficient for applications of any scale.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
 
-// Creating a tracker instance
+// Create a tracker instance
 const [Track, useTracker] = createTracker({
   DOMEvents: {
     onClick: (params, context) => {
@@ -20,7 +18,7 @@ const [Track, useTracker] = createTracker({
   },
 });
 
-// Usage within an app
+// Usage in the app
 function App() {
   return (
     <Track.Provider initialContext={{ userId: "userId-123" }}>
@@ -34,56 +32,52 @@ function App() {
 
 ### Key Features
 
-Event Tracker provides various features prioritizing both developer experience and application performance.
+Event Tracker provides a wide range of features focused on both developer experience and application performance.
 
-| Feature                          | Description                                                                                                                                                                               |
-| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Declarative API with Type Safety | Fully supports [TypeScript](https://www.typescriptlang.org/), reducing errors during development and increasing productivity through auto-completion.                                     |
-| Powerful Data Type Validation    | Ensures data reliability through schema-based validation using [Zod](https://zod.dev/).                                                                                                   |
-| Optimized Performance            | Minimizes network requests through batching, debouncing, or throttling, reducing the impact on application performance.                                                                   |
-| Guaranteed Execution Order       | Ensures asynchronous events are processed in the intended sequence.                                                                                                                       |
-| Analytics Tool Independence      | Flexible integration with any analytics tool (e.g., [Google Analytics](https://analytics.google.com/), [Amplitude](https://amplitude.com/)), without being tied to any specific provider. |
-| Clear Separation of Concerns     | Effectively separates tracking logic from business logic, maximizing code maintainability and scalability.                                                                                |
+| Feature                      | Description                                                                                                                                                         |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Declarative API              | Easily declare tracking as components without additional setup or complex code.                                                                                     |
+| Analytics Tool Agnostic      | Integrate with any tool such as [Google Analytics](https://analytics.google.com/) or [Amplitude](https://amplitude.com/) without modifying existing infrastructure. |
+| Clear Separation of Concerns | Keep tracking logic completely separate from business code, improving readability, testability, and maintainability.                                                |
+| Optimized Performance        | Built-in strategies like batching, debouncing, and throttling minimize network requests, enabling stable tracking without performance degradation.                  |
+| Guaranteed Execution Order   | Ensures events are processed in the intended order even in asynchronous scenarios, enabling accurate tracking in complex user flows.                                |
+| Data Validation              | Built-in static schema validation with [Zod](https://zod.dev/) prevents build-time errors and ensures the reliability of collected event data.                      |
 
 ## Core Concepts
 
-There are several key concepts you need to understand to use Event Tracker effectively.
-
-<Steps>
+To use Event Tracker effectively, there are several key concepts to understand.
 
 ### Instance (`createTracker`)
 
-The foundational starting point of the library. Use the `createTracker` function to generate a tracker instance (a collection of `Track` components and the `useTracker` hook). Define event tracking by configuring DOM event handlers, impression event handlers, schemas, and more.
+This is the fundamental starting point of the library. Using the `createTracker` function, you create a tracker instance (a collection of `Track` components and the `useTracker` hook). Here, you define event tracking by configuring DOM event handlers, impression handlers, and schemas.
 
-Multiple tracker instances can be created according to specific purposes (e.g., separate instances for sending events to Google Analytics and Amplitude).
+You can create multiple tracker instances for different purposes (for example, one for Google Analytics and another for Amplitude).
 
 ### Provider (`Track.Provider`)
 
-Implemented using React's Context API. Wrap your application or component tree at the top with `Track.Provider` to provide common tracking data (context) to child components. For example, providing information such as `userId` and `pageName` through context allows utilizing this information during each event tracking.
+Implemented based on React’s Context API. Wrap the top level of your application or a specific component tree with `Track.Provider` to supply common data (context) needed for tracking to child components. For example, passing `userId` or `pageName` as context allows these values to be used during event tracking.
 
 ### Event Components (`Track.Click`, `Track.PageView`, etc.)
 
-Special components provided to track events declaratively. These are available from the first element of the array returned by `createTracker`.
+These are special components that enable declarative event tracking. They are provided as the first element in the array returned by `createTracker`.
 
-- `Track.Click`: Tracks click events occurring on child elements.
-- `Track.Impression`: Tracks when child elements become visible on the screen.
-- `Track.PageView`: Tracks page view events upon component mount.
+- `Track.Click`: Tracks when a click event occurs on child elements.
+- `Track.Impression`: Tracks when child elements are displayed on screen.
+- `Track.PageView`: Tracks a page view event when the component mounts.
 
-In addition, you can customize or utilize various provided components that respond to different user interactions and lifecycle events. Each component can receive and utilize specific event-related data through the `context` and `params` props.
+You can use the provided components or create custom ones to handle various user interactions and lifecycle events. Each component accepts `context` and `params` props to pass specific data relevant to the event.
 
 ### Custom Hook (`useTracker`)
 
-Used for more complex or conditional event tracking unrelated directly to component lifecycles or DOM events. The `useTracker` hook lets you access context information from `Track.Provider` and execute defined tracking logic imperatively.
-
-</Steps>
+Use when you need more complex or conditional event tracking that is not directly tied to component lifecycle or DOM events. The `useTracker` hook allows you to access context from `Track.Provider` and execute defined tracking logic imperatively.
 
 ## Next Steps
 
-These core concepts work synergistically to provide Event Tracker's powerful and flexible event-tracking environment. For detailed usage and in-depth information about each feature, refer to the documents below:
+These core concepts work together to create a powerful and flexible event tracking environment with Event Tracker. For more detailed usage and in-depth information on each feature, see the following documentation:
 
-- [Why Event Tracker?](/docs/why-event-tracker): Introduction to the necessity and core features of Event Tracker.
-- [`createTracker`](/docs/create-tracker): Guide to creating tracker instances and detailed configurations.
-- [Components](/docs/components): Examples and details of all available tracking components.
-- [`useTracker`](/docs/hook): Custom tracking techniques using the custom hook.
-- [Batching](/docs/batching): Strategies for optimizing performance through event batching.
-- [Data Type Validation](/docs/data-type-validation): Guide to data validation using Zod schemas.
+- [Why Event Tracker?](/docs/why-event-tracker): Learn the necessity and main features of Event Tracker.
+- [`createTracker`](/docs/create-tracker): Learn how to create and configure a tracker instance.
+- [Components](/docs/components): Explore all available tracking components with usage examples.
+- [`useTracker`](/docs/use-tracker): Learn how to implement custom tracking with the hook.
+- [Batching](/docs/batching): Optimize performance through event batching strategies.
+- [Data Validation](/docs/data-type-validation): Ensure data integrity with Zod schema validation.
diff --git a/docs/src/content/en/docs/use-tracker.mdx b/docs/src/content/en/docs/use-tracker.mdx
index 81385cb..97b4834 100644
--- a/docs/src/content/en/docs/use-tracker.mdx
+++ b/docs/src/content/en/docs/use-tracker.mdx
@@ -1,51 +1,67 @@
+import { Callout } from "nextra/components";
+
 # useTracker
 
-[`createTracker`](/docs/create-tracker)에서 두 번째 배열 항목으로 반환되는 커스텀 React hook입니다. 이 훅은 컴포넌트 내에서 이벤트 트래킹 기능과 컨텍스트 관리에 접근할 수 있게 합니다.
+Inside a React component, you can configure the tracking context or imperatively trigger events. `useTracker` is the second item returned from [`createTracker`](/docs/create-tracker).
 
-예를 들어, 특정 비동기 작업이 완료된 후 또는 사용자의 특정 입력 값에 따라 이벤트를 발생시켜야 할 때 유용합니다.
+It is primarily used to manually trigger events after a component mounts, upon user input, or after asynchronous tasks complete.
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
 
-const [Track, useTracker] = createTracker({...})
+const [Track, useTracker] = createTracker({...});
 
 function MyComponent() {
   const { setContext, getContext, track, trackWithSchema } = useTracker();
 
-  return (
-    // 컴포넌트 내용
-  );
+  // Imperative event tracking
 }
 ```
 
-### 반환 값
+## Signature
+
+```ts
+function useTracker(): {
+  send: (params: EventParamsWithContext<TContext, TEventParams>) => TaskReturnType<TTaskResult> | undefined;
+  setContext: (context: TContext | ((prevContext: TContext) => TContext)) => void;
+  getContext: () => TContext;
+  trackWithSchema: TUseTrackerTrackWithSchema;
+  track: TUseTrackerTrack;
+};
+```
+
+## Reference
 
-이 hook은 다음 속성을 포함하는 객체를 반환합니다:
+### Returns
 
-#### setContext
+| Property          | Type                                                            | Description                                         |
+| ----------------- | --------------------------------------------------------------- | --------------------------------------------------- |
+| `setContext`      | `(context: Context \| (prev: Context) => Context) => void`      | Sets or updates the tracking context                |
+| `getContext`      | `() => Context`                                                 | Returns the current tracking context                |
+| `track`           | `Record<keyof EventNames, (params, options?) => void>`          | Collection of standard event tracking functions     |
+| `trackWithSchema` | `Record<keyof Schemas, ({ schema, params }, options?) => void>` | Collection of schema-validated event tracking funcs |
 
-- Type: `(context: Context) => void`
-- 현재 트래킹 컨텍스트를 설정하거나 업데이트합니다.
-- 사용자 정보, 세션 데이터 등을 업데이트하는 데 사용할 수 있습니다.
+---
+
+#### `setContext`
 
 ```tsx
 const { setContext } = useTracker();
 
-// 새로운 컨텍스트 설정
+// Set a new context
 setContext({ userId: "user-123" });
 
-// 이전 값에 기반한 컨텍스트 업데이트
+// Update context based on previous value
 setContext((prev) => ({
   ...prev,
   lastActive: new Date(),
 }));
 ```
 
-#### getContext
+- Sets or updates the current tracking context.
+- Useful for updating user information, session data, etc.
 
-- Type: `() => Context`
-- 현재 트래킹 컨텍스트를 반환합니다.
-- 현재 트래킹 상태에 접근하는 데 유용합니다.
+#### `getContext`
 
 ```tsx
 const { getContext } = useTracker();
@@ -54,20 +70,18 @@ const currentContext = getContext();
 console.log("Current user:", currentContext.userId);
 ```
 
-#### track
+- Returns the current tracking context.
+- Useful for accessing the current tracking state.
 
-- Type: `Record<keyof EventNames, (params: EventParams, options?: TrackingOptions) => void>`
-- 모든 구성된 이벤트 트래킹 함수를 포함하는 객체
-- key는 트래커 구성에 정의된 이벤트 이름과 일치합니다.
-- 고급 제어를 위한 선택적 `TrackingOptions`를 허용합니다.
+#### `track`
 
 ```tsx
 const { track } = useTracker();
 
-// 간단한 클릭 이벤트 추적
+// Simple click event tracking
 track.onClick({ buttonId: "submit" });
 
-// 조건부 로직과 함께 추적
+// Conditional tracking
 track.onClick(
   { buttonId: "premium" },
   {
@@ -75,7 +89,7 @@ track.onClick(
   },
 );
 
-// 디바운싱과 함께 추적
+// Tracking with debouncing
 track.onClick(
   { buttonId: "search" },
   {
@@ -83,7 +97,7 @@ track.onClick(
   },
 );
 
-// 스로틀링과 함께 추적
+// Tracking with throttling
 track.onClick(
   { buttonId: "rapid-action" },
   {
@@ -91,24 +105,23 @@ track.onClick(
   },
 );
 
-// 노출 이벤트 추적
+// Impression event tracking
 track.onImpression({ elementId: "hero" });
 ```
 
-#### trackWithSchema
+- An object containing all configured event tracking functions.
+- Keys match event names defined in the tracker configuration.
+- Supports optional `TrackingOptions` for advanced control.
 
-- Type: `Record<keyof Schemas, (params: SchemaParams, options?: TrackingOptions) => void>`
-- 스키마 검증이 포함된 모든 구성된 이벤트 트래킹 함수를 포함하는 객체
-- key는 트래커 구성에 정의된 이벤트 이름과 일치합니다.
-- 고급 제어를 위한 선택적 `TrackingOptions`를 허용합니다.
+#### `trackWithSchema`
 
 ```tsx
 const { trackWithSchema } = useTracker();
 
-// 스키마와 함께 클릭 이벤트 추적
+// Track a click event with schema validation
 trackWithSchema.onClick({ schema: "click", params: { buttonId: "submit" } });
 
-// 조건부 로직과 스키마와 함께 추적
+// Conditional tracking with schema
 trackWithSchema.onClick(
   {
     schema: "premium_click",
@@ -119,7 +132,7 @@ trackWithSchema.onClick(
   },
 );
 
-// 스로틀링과 스키마와 함께 추적
+// Tracking with schema and throttling
 trackWithSchema.onImpression(
   {
     schema: "impression",
@@ -131,51 +144,76 @@ trackWithSchema.onImpression(
 );
 ```
 
-### TrackingOptions
+- An object containing all schema-validated event tracking functions.
+- Keys match event names defined in the tracker configuration.
+- Supports optional `TrackingOptions` for advanced control.
 
-`track`과 `trackWithSchema` 메서드 모두 다음 옵션을 포함하는 선택적 두 번째 매개변수를 허용합니다:
+## TrackingOptions
 
-- `enabled?: boolean | ((context: Context, params: EventParams) => boolean)` - 이벤트 추적을 조건부로 활성화/비활성화
-- `debounce?: DebounceConfig` - 연속적인 이벤트 발생을 방지하는 디바운스 설정
-- `throttle?: ThrottleConfig` - 이벤트 발생 빈도를 제한하는 스로틀 설정
+Both `track` and `trackWithSchema` accept the following optional configuration:
 
-**참고:** `debounce`와 `throttle`은 상호 배타적이며 함께 사용할 수 없습니다.
+| Option     | Type                                        | Description                                         |
+| ---------- | ------------------------------------------- | --------------------------------------------------- |
+| `enabled`  | `boolean \| ((context, params) => boolean)` | Enables/disables event tracking conditionally       |
+| `debounce` | `DebounceConfig`                            | Limits consecutive events (triggers last call only) |
+| `throttle` | `ThrottleConfig`                            | Prevents repeated calls in a short time window      |
 
-#### DebounceConfig
+<Callout type="info">
+  Note: `debounce` and `throttle` are mutually exclusive and cannot be used together. A type error will prevent invalid
+  usage.
+</Callout>
 
-```tsx
+#### `DebounceConfig`
+
+```ts
 interface DebounceConfig {
-  delay: number; // 밀리초 단위의 지연 시간
-  leading?: boolean; // 선행 에지에서 실행 (기본값: false)
-  trailing?: boolean; // 후행 에지에서 실행 (기본값: true)
+  delay: number;
+  leading?: boolean; // Default: false
+  trailing?: boolean; // Default: true
 }
 ```
 
-#### ThrottleConfig
+#### `ThrottleConfig`
 
-```tsx
+```ts
 interface ThrottleConfig {
-  delay: number; // 밀리초 단위의 지연 시간
-  leading?: boolean; // 선행 에지에서 실행 (기본값: true)
-  trailing?: boolean; // 후행 에지에서 실행 (기본값: false)
+  delay: number;
+  leading?: boolean; // Default: true
+  trailing?: boolean; // Default: false
 }
 ```
 
-### 사용 예제
+## Best Practices
+
+### Context Management
+
+- Use `setContext` to update global state that affects multiple events.
+- Consider the functional form of `setContext` for updates based on previous state.
 
-다음은 이 hook을 사용하는 예제입니다:
+### Event Tracking
+
+- Use the event functions from `track` or `trackWithSchema` wherever possible.
+
+### Performance Optimization
+
+- Avoid calling event tracking functions during rendering.
+- Use [Batching](/docs/batching) to improve performance.
+- Use [Data Validation](/docs/data-type-validation) to ensure data safety.
+
+## Examples
+
+### Basic
 
 ```tsx
 import { createTracker } from "@offlegacy/event-tracker";
 
 const [Track, useTracker] = createTracker({
   onClick: (params) => {
-    // 이벤트를 애널리틱스 서비스로 전송
+    // Send event to analytics service
     analytics.track(params);
   },
   pageView: {
     onPageView: (params) => {
-      // Send event to analytics service
       analytics.pageView(params);
     },
   },
@@ -185,15 +223,15 @@ function UserProfile({ userId }) {
   const { setContext, track, trackWithSchema } = useTracker();
 
   useEffect(() => {
-    // 사용자 ID가 변경될 때 컨텍스트 업데이트
+    // Update context when userId changes
     setContext({ userId });
 
-    // 페이지 뷰 이벤트 트래킹
+    // Track page view event
     track.onPageView({ page: "profile" });
   }, [userId]);
 
   const handleSettingsClick = () => {
-    // 사용자 설정 이벤트 트래킹
+    // Track user settings event
     trackWithSchema.onClick({ schema: "settings", params: { userId } });
   };
 
@@ -205,21 +243,3 @@ function UserProfile({ userId }) {
   );
 }
 ```
-
-### Best Practices
-
-1. **컨텍스트 업데이트**
-
-   - 여러 이벤트에 영향을 주는 전역 상태를 업데이트하기 위해 `setContext`를 사용하세요.
-   - 이전 상태에 기반한 업데이트를 위해 `setContext`의 함수 형태를 고려하세요.
-
-2. **이벤트 트래킹**
-
-   - 가능한 경우 `track` 또는 `trackWithSchema`에서 이벤트 함수를 사용하세요.
-
-3. **성능**
-
-   - 렌더링 중에 이벤트 트래킹 함수를 호출하지 마세요.
-   - 콜백 또는 효과를 사용하세요.
-   - [배칭](/docs/batching)을 사용하여 성능을 향상시키세요.
-   - [데이터 타입 검증](/docs/data-type-validation)을 사용하여 데이터 타입 안전성을 확인하세요.
diff --git a/docs/src/content/en/docs/why-event-tracker.mdx b/docs/src/content/en/docs/why-event-tracker.mdx
index 96f9050..101790f 100644
--- a/docs/src/content/en/docs/why-event-tracker.mdx
+++ b/docs/src/content/en/docs/why-event-tracker.mdx
@@ -2,31 +2,27 @@ import { Steps } from "nextra/components";
 
 # Why Event Tracker?
 
-Modern web applications need to continuously analyze user behavior to improve service quality. However, traditional event tracking approaches have various issues.
+Modern web applications must continuously analyze user behavior to improve service quality. However, traditional event tracking approaches come with several challenges.
 
-## Why is Event Tracker Necessary?
+## Why You Need Event Tracker
 
-The following example illustrates common problems with traditional event tracking methods:
+The following example highlights common issues with conventional event tracking.
 
-- **Pain of Prop Drilling**: Often, tracking data must be passed through multiple layers of components, negatively impacting readability and maintainability.
-- **Strong Coupling of Logic**: Mixing business logic and tracking logic increases complexity and makes it harder to independently test and modify each.
-- **Increased Boilerplate Code**: Repetitive tracking code significantly hampers developer productivity.
-
-```tsx {8,15,24-31}
+```tsx {8,15, 24-31}
 function Page() {
-  const { user, userId } = useUser(); // Retrieves user information and ID.
+  const { user, userId } = useUser(); // Fetch user info and ID.
 
   return (
     <div>
       <p>User: {user.name}</p>
-      {/* Passes userId to Counter component solely for event tracking purposes */}
+      {/* Passing userId to Counter solely for event tracking */}
       <Counter userId={userId} />
     </div>
   );
 }
 
-// Receives 'userId' as prop exclusively for event tracking.
-// Prop drilling intensifies if Counter is placed even deeper in the tree.
+// Counter receives 'userId' only for tracking purposes.
+// If nested deeper, this causes severe prop drilling.
 function Counter({ userId }: { userId: string }) {
   const [count, setCount] = useState(0);
   const { track } = useTrackEvent(); // Hypothetical tracking hook
@@ -35,13 +31,13 @@ function Counter({ userId }: { userId: string }) {
     const newCount = count + 1;
     setCount(newCount);
 
-    // Mixing business logic (incrementing count) with tracking logic.
+    // Business logic (count increment) mixed with tracking logic.
     track({
       event: "click_increment",
       params: {
         type: "count",
         value: newCount,
-        userId, // userId received from the parent component
+        userId, // userId passed down from parent
       },
     });
   };
@@ -55,25 +51,41 @@ function Counter({ userId }: { userId: string }) {
 }
 ```
 
-## New Paradigm Offered by Event Tracker
+<Steps>
+
+### The Pain of Prop Drilling
+
+To pass tracking-related data down to nested components, you often end up drilling props through multiple layers. This reduces code readability and complicates maintenance.
+
+### Tight Coupling of Logic
+
+Mixing business logic with tracking logic increases code complexity and makes independent testing and modification harder.
 
-Event Tracker introduces a new paradigm for event tracking. Its declarative approach simplifies traditional complexities, making event tracking accessible for all developers.
+### Increased Boilerplate
+
+Repetitive tracking code reduces developer productivity.
+
+</Steps>
+
+## A New Paradigm with Event Tracker
+
+Event Tracker introduces a new paradigm for event tracking. Its declarative approach simplifies the inherent complexity of traditional tracking and makes it accessible to all developers.
 
 <Steps>
 
 ### Declarative Event Tracking
 
-```tsx {7,10,12,32,34}
+```tsx {7, 10, 12, 32, 34}
 function Page() {
   const { user, userId } = useUser();
 
-  // Provides tracking context (userId) to child components via Track.Provider.
-  // Eliminates the need for prop drilling.
+  // Provide tracking context (userId) to child components via Track.Provider.
+  // No more prop drilling required.
   return (
     <Track.Provider initialContext={{ userId }}>
       <div>
         <p>User: {user.name}</p>
-        <Counter /> {/* No need to pass userId as prop */}
+        <Counter /> {/* No need to pass userId as a prop */}
       </div>
     </Track.Provider>
   );
@@ -83,7 +95,7 @@ function Counter() {
   const [count, setCount] = useState(0);
 
   const handleIncrement = () => {
-    // handleIncrement now focuses solely on increment logic.
+    // handleIncrement is now purely responsible for incrementing count.
     setCount(count + 1);
   };
 
@@ -91,8 +103,9 @@ function Counter() {
     <div>
       <p>Count: {count}</p>
       {/*
-        Track.Click component wraps the click event and automatically tracks the event
-        with the provided parameters. The userId provided in the context is automatically included.
+        Track.Click wraps the button and tracks the click event
+        with the defined parameters. userId from context is automatically
+        included in the tracking data.
       */}
       <Track.Click params={{ value: count + 1, type: "count" }}>
         <button onClick={handleIncrement}>Increment</button>
@@ -102,28 +115,27 @@ function Counter() {
 }
 ```
 
-With Event Tracker, declarative event tracking significantly improves code readability and reduces complexity, helping developers more easily understand and implement tracking.
-
-Now the `handleIncrement` function is only responsible for increasing the count, while the `<Track.Click />` component handles tracking.
-**This declarative approach lets developers focus on 'what to track' rather than 'how to track.'**
-The actual tracking logic is defined externally from the React app.
+With Event Tracker, declarative event tracking improves code readability and reduces complexity. This helps developers focus on _what_ to track rather than _how_ to track.
+The `handleIncrement` function now handles only count logic, while `<Track.Click />` manages tracking.
+**This declarative approach shifts the developer’s focus from implementation details to defining the intent of tracking.**
+How tracking is handled is defined outside the React app.
 
-### Improved Cohesion in Event Tracking
+### Improved Tracking Cohesion
 
-```tsx {4-10,14-20}
+```tsx {4-10, 14-20}
 const [Track, useTracker] = createTracker({
-  // Callback executed on DOM events
+  // Callback for DOM events
   DOMEvents: {
     onClick: (params, context) => {
-      // Call the actual tracking library (e.g., Google Analytics, Amplitude)
+      // Call actual tracking tools (Google Analytics, Amplitude, etc.)
       logEvent("click_event", {
         ...params, // { value: ..., type: "count" }
-        userId: context.userId, // userId from Track.Provider
+        userId: context.userId, // Provided by the Provider
       });
     },
-    // Define additional DOM event handlers (onMouseOver, onFocus, etc.) as needed
+    // You can also define onMouseOver, onFocus, etc.
   },
-  // Callback executed on Impression events
+  // Callback for Impression events
   onImpression: (params, context) => {
     logEvent("impression_event", {
       ...params,
@@ -134,11 +146,11 @@ const [Track, useTracker] = createTracker({
 });
 ```
 
-Now the code for **'how to track'** is separated from business logic. Located externally, it can be modified without impacting business logic.
+Now, the code defining _how to track_ is separated from business logic. Since it's located outside the application, you can modify tracking logic without touching business code.
 
-### Data Type Validation
+### Data Validation
 
-```tsx {13-20,24-33}
+```tsx {13-20, 24-33}
 import { z } from "zod";
 import { createTracker } from "@offlegacy/event-tracker";
 
@@ -150,7 +162,7 @@ interface Params {
   /* ... */
 }
 
-// Schema definition
+// Define schemas
 const schemas = {
   page_view: z.object({
     title: z.string(),
@@ -160,7 +172,7 @@ const schemas = {
   }),
 };
 
-// Tracker setup
+// Configure tracker
 const [Track] = createTracker<Context, Params, typeof schemas>({
   schema: {
     schemas: {
@@ -179,6 +191,6 @@ const [Track] = createTracker<Context, Params, typeof schemas>({
 <Track.Click schema="click_button" params={{ target: "submit-button" }} />;
 ```
 
-Event Tracker optionally integrates with [Zod](https://zod.dev/) to offer robust schema-based data validation. This ensures data correctness from the development stage, enhancing tracking data reliability.
+Event Tracker integrates with [Zod](https://zod.dev/) to provide robust schema-based data type validation. This prevents data errors during development and enhances the reliability of tracking data.
 
 </Steps>
diff --git a/docs/src/content/en/docs/with-google-analytics-example.mdx b/docs/src/content/en/docs/with-google-analytics-example.mdx
new file mode 100644
index 0000000..4b449a6
--- /dev/null
+++ b/docs/src/content/en/docs/with-google-analytics-example.mdx
@@ -0,0 +1,115 @@
+import { Steps } from "nextra/components";
+
+# Integrating with Google Analytics
+
+This guide walks you through integrating GA4 (Google Analytics 4) to track user behavior step by step.
+
+<Steps>
+
+## Set Up GA4 Script
+
+Add the GA4 script to the `<head>` of your `index.html` to enable `gtag`.
+
+```html
+<!-- index.html -->
+<head>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+    gtag("config", "GA_MEASUREMENT_ID");
+  </script>
+</head>
+```
+
+## Define `sendGA4` Function
+
+Create a wrapper function to safely call `gtag` with validation and warnings.
+
+```ts
+export function sendGA4(eventName: string, eventParams: Record<string, unknown> = {}): void {
+  if (typeof window === "undefined") return;
+  if (typeof window.gtag !== "function") {
+    console.warn("[GA4] gtag function is not loaded.");
+    return;
+  }
+  window.gtag("event", eventName, eventParams);
+}
+```
+
+## Define Tracking Events
+
+Configure `createTracker` with GA4 event sending logic and set up DOM, impression, and page view events.
+
+```tsx
+import { createTracker } from "@offlegacy/event-tracker";
+import { sendGA4 } from "./sendGA4";
+
+interface GA4Context {
+  userId: string;
+}
+
+interface GA4EventParams {
+  eventName: string;
+}
+
+export const [Track, useTracker] = createTracker<GA4Context, GA4EventParams>({
+  DOMEvents: {
+    onClick: (params, ctx) => sendGA4(params.eventName, { ...params, user_id: ctx.userId }),
+  },
+  impression: {
+    onImpression: (params, ctx) => sendGA4("impression", { ...params, user_id: ctx.userId }),
+    options: { threshold: 0.5, freezeOnceVisible: true },
+  },
+});
+```
+
+## Use in a Blog Page
+
+Wrap your app in `Track.Provider` and use `<Track.PageView>`, `<Track.Impression>`, and `<Track.Click>` components to declaratively record events.
+
+```tsx
+import { Track } from "./event-tracker";
+
+function App() {
+  return (
+    <Track.Provider initialContext={{ userId: "test-user" }}>
+      <Post post={{ id: 1, title: "Hello World", slug: "hello-world", content: "This is a test post." }} />
+    </Track.Provider>
+  );
+}
+
+interface PostProps {
+  id: number;
+  title: string;
+  slug: string;
+  content: string;
+}
+
+function Post({ post }: PostProps) {
+  return (
+    <article>
+      <h1>{post.title}</h1>
+
+      <Track.Impression params={{ eventName: `content-${post.id}` }}>
+        <div>{post.content}</div>
+      </Track.Impression>
+
+      <div className="actions">
+        <Track.Click params={{ eventName: "share_twitter" }}>
+          <button>Share on Twitter</button>
+        </Track.Click>
+
+        <Track.Click params={{ eventName: "share_facebook" }}>
+          <button>Share on Facebook</button>
+        </Track.Click>
+      </div>
+    </article>
+  );
+}
+```
+
+</Steps>
diff --git a/docs/src/content/en/docs/with-zod-example.mdx b/docs/src/content/en/docs/with-zod-example.mdx
new file mode 100644
index 0000000..c1aec6e
--- /dev/null
+++ b/docs/src/content/en/docs/with-zod-example.mdx
@@ -0,0 +1,72 @@
+import { Steps } from "nextra/components";
+
+# Using with Zod
+
+Learn how to implement powerful data type validation by integrating [Zod](https://zod.dev/).  
+Schema-based validation with Zod helps prevent errors before runtime and ensures data reliability.
+
+<Steps>
+
+## Define Schemas
+
+Declare event-specific fields and types using Zod objects.
+
+```tsx {4-5}
+import { z } from "zod";
+
+export const schemas = {
+  page_view: z.object({ title: z.string() }),
+  click_button: z.object({ target: z.string() }),
+};
+```
+
+## Define Tracking Events
+
+Connect the schemas to `createTracker` to automatically validate event parameters.
+
+```tsx {5-9}
+import { createTracker } from "@offlegacy/event-tracker";
+import { schemas } from "./schemas";
+
+export const [Track, useTracker] = createTracker<{}, {}, typeof schemas>({
+  schemas: {
+    schemas,
+    onSchemaError: (error) => console.error("Schema validation failed:", error),
+    abortOnError: true,
+  },
+});
+```
+
+## Use Validated Events
+
+Send type-safe events via declarative components and the `track` function.
+
+```tsx {11, 17-19}
+import { Track } from "./event-tracker";
+
+function HomePage() {
+  return (
+    <main>
+      <h1>Homepage</h1>
+
+      {/* ✅ Valid with Zod schema, no type error */}
+      <Track.PageView params={{ title: "Homepage" }} />
+
+      {/* 🚨 Invalid with Zod schema, type error */}
+      {/* <Track.PageView params={{ title: 123 }} /> */}
+
+      {/* ✅ Valid with Zod schema, no type error */}
+      <Track.Click params={{ target: "start-button" }}>
+        <button>Get Started</button>
+      </Track.Click>
+
+      {/* 🚨 Invalid with Zod schema, type error */}
+      {/* <Track.Click params={{}}>
+          <button onClick={() => track({ target: "start-button" })}>Get Started</button>
+        </Track.Click> */}
+    </main>
+  );
+}
+```
+
+</Steps>
diff --git a/docs/src/content/en/index.mdx b/docs/src/content/en/index.mdx
index cdc1b7c..ee84f82 100644
--- a/docs/src/content/en/index.mdx
+++ b/docs/src/content/en/index.mdx
@@ -6,9 +6,9 @@ import HomePage from "@/components/home-page";
 
 <HomePage
   description="Comprehensive solution for event tracking in React applications"
-  get_started="Get Started"
-  featureCardsTitle="Event tracking paradigm presented by Event Tracker"
-  featureCards={[
+  startedText="Get Started"
+  featureSectionTitle="Event tracking paradigm presented by Event Tracker"
+  featureSectionContents={[
     {
       title: "Declarative API",
       description: "Track events intuitively through component-based declarations, without boilerplate.",
@@ -34,7 +34,7 @@ import HomePage from "@/components/home-page";
         "Ensures that events are processed in the intended order, even under asynchronous conditions—crucial for accurate tracking in complex flows.",
     },
     {
-      title: "Powerful Data Type Validation",
+      title: "Powerful Data Validation",
       description:
         "Schema-based validation with Zod catches issues before runtime and guarantees the integrity of your event data.",
     },
diff --git a/docs/src/content/ko/docs/components/page-view.mdx b/docs/src/content/ko/docs/components/page-view.mdx
index 0256d07..28e37f2 100644
--- a/docs/src/content/ko/docs/components/page-view.mdx
+++ b/docs/src/content/ko/docs/components/page-view.mdx
@@ -55,15 +55,15 @@ function PageView<TKey extends keyof TSchemas>({
 
 스키마가 있을 경우:
 
-| Props    | 타입                                                 | 설명                 | 
-| -------- | ---------------------------------------------------- | -------------------- | 
-| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 | 
+| Props    | 타입                                                 | 설명                 |
+| -------- | ---------------------------------------------------- | -------------------- |
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 |
 
 스키마가 없을 경우:
 
-| Props    | 타입                                               | 설명            | 
-| -------- | -------------------------------------------------- | --------------- | 
-| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 | 
+| Props    | 타입                                               | 설명            |
+| -------- | -------------------------------------------------- | --------------- |
+| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 |
 
 ---
 
diff --git a/docs/src/content/ko/index.mdx b/docs/src/content/ko/index.mdx
index 6ed97ae..ef62205 100644
--- a/docs/src/content/ko/index.mdx
+++ b/docs/src/content/ko/index.mdx
@@ -6,7 +6,7 @@ import HomePage from "@/components/home-page";
 
 <HomePage
   description="React 애플리케이션을 위한 완전한 이벤트 트래킹 시스템"
-  get_started="시작하기"
+  startedText="시작하기"
   featureSectionTitle="‘어떻게 트래킹할지’가 아닌 ‘무엇을 트래킹할지’에 집중하세요!"
   featureSectionContents={[
     {

From c1c341306595911e02c2fd9062421711fd0be818 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Thu, 31 Jul 2025 21:12:51 +0900
Subject: [PATCH 17/24] docs: remove function signatures

---
 .../content/en/docs/components/dom-event.mdx  | 18 -------------
 .../content/en/docs/components/impression.mdx | 16 ------------
 docs/src/content/en/docs/components/index.mdx |  6 -----
 .../content/en/docs/components/page-view.mdx  | 12 ---------
 .../en/docs/components/set-context.mdx        |  6 -----
 docs/src/content/en/docs/create-tracker.mdx   | 11 --------
 docs/src/content/en/docs/use-tracker.mdx      | 12 ---------
 docs/src/content/ko/docs/components/click.mdx | 26 +++++--------------
 .../content/ko/docs/components/dom-event.mdx  | 18 -------------
 .../content/ko/docs/components/impression.mdx | 16 ------------
 docs/src/content/ko/docs/components/index.mdx |  6 -----
 .../content/ko/docs/components/page-view.mdx  | 12 ---------
 .../ko/docs/components/set-context.mdx        |  6 -----
 docs/src/content/ko/docs/create-tracker.mdx   | 11 --------
 docs/src/content/ko/docs/use-tracker.mdx      | 12 ---------
 15 files changed, 6 insertions(+), 182 deletions(-)

diff --git a/docs/src/content/en/docs/components/dom-event.mdx b/docs/src/content/en/docs/components/dom-event.mdx
index 636663f..b3fdf48 100644
--- a/docs/src/content/en/docs/components/dom-event.mdx
+++ b/docs/src/content/en/docs/components/dom-event.mdx
@@ -27,24 +27,6 @@ function App() {
 }
 ```
 
-## Signature
-
-```ts
-function DOMEvent<TKey extends keyof TSchemas>({
-  children,
-  type,
-  eventName,
-  enabled,
-  ...props
-}: {
-  children: React.ReactNode;
-  type: DOMEventNames;
-  eventName?: string;
-  enabled?: EnabledCondition<TContext, TEventParams>;
-} & TrackingOptions<TContext, TEventParams> &
-  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
-```
-
 ## Reference
 
 ### Props
diff --git a/docs/src/content/en/docs/components/impression.mdx b/docs/src/content/en/docs/components/impression.mdx
index 793809b..cb993e6 100644
--- a/docs/src/content/en/docs/components/impression.mdx
+++ b/docs/src/content/en/docs/components/impression.mdx
@@ -30,22 +30,6 @@ function App() {
 }
 ```
 
-## Signature
-
-```ts
-function Impression<TKey extends keyof TSchemas>({
-  children,
-  options,
-  enabled,
-  ...props
-}: {
-  children: ReactNode;
-  options?: ImpressionOptions;
-  enabled?: EnabledCondition<TContext, TEventParams>;
-} & TrackingOptions<TContext, TEventParams> &
-  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
-```
-
 ## Reference
 
 ### Props
diff --git a/docs/src/content/en/docs/components/index.mdx b/docs/src/content/en/docs/components/index.mdx
index a53172d..d96617b 100644
--- a/docs/src/content/en/docs/components/index.mdx
+++ b/docs/src/content/en/docs/components/index.mdx
@@ -16,12 +16,6 @@ function App() {
 }
 ```
 
-## Signature
-
-```ts
-function Provider({ children, initialContext }: { children: ReactNode; initialContext?: TContext }): JSX.Element;
-```
-
 ## Reference
 
 ### Props
diff --git a/docs/src/content/en/docs/components/page-view.mdx b/docs/src/content/en/docs/components/page-view.mdx
index ec40680..d78fd8a 100644
--- a/docs/src/content/en/docs/components/page-view.mdx
+++ b/docs/src/content/en/docs/components/page-view.mdx
@@ -24,18 +24,6 @@ function App() {
 }
 ```
 
-## Signature
-
-```ts
-function PageView<TKey extends keyof TSchemas>({
-  enabled,
-  ...props
-}: {
-  enabled?: EnabledCondition<TContext, TEventParams>;
-} & TrackingOptions<TContext, TEventParams> &
-  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
-```
-
 ## Reference
 
 ### Props
diff --git a/docs/src/content/en/docs/components/set-context.mdx b/docs/src/content/en/docs/components/set-context.mdx
index 434b8ca..fc4cbf8 100644
--- a/docs/src/content/en/docs/components/set-context.mdx
+++ b/docs/src/content/en/docs/components/set-context.mdx
@@ -18,12 +18,6 @@ function App() {
 }
 ```
 
-## Signature
-
-```ts
-function SetContext({ context }: { context: TContext | ((prevContext: TContext) => TContext) }): null;
-```
-
 ## Reference
 
 ### Props
diff --git a/docs/src/content/en/docs/create-tracker.mdx b/docs/src/content/en/docs/create-tracker.mdx
index a03d8c5..6cbc7aa 100644
--- a/docs/src/content/en/docs/create-tracker.mdx
+++ b/docs/src/content/en/docs/create-tracker.mdx
@@ -20,17 +20,6 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTrack
 });
 ```
 
-## Signature
-
-```ts
-function createTracker<
-  TContext extends Context = Context,
-  TEventParams extends EventParams = EventParams,
-  TSchemas extends Schemas = Schemas,
-  TTaskResult extends TaskResult = TaskResult,
->(config: TrackerConfig<TContext, TEventParams, TSchemas, TTaskResult>): [EventComponents, UseTracker];
-```
-
 ## Reference
 
 ### Parameters
diff --git a/docs/src/content/en/docs/use-tracker.mdx b/docs/src/content/en/docs/use-tracker.mdx
index 97b4834..81163d3 100644
--- a/docs/src/content/en/docs/use-tracker.mdx
+++ b/docs/src/content/en/docs/use-tracker.mdx
@@ -18,18 +18,6 @@ function MyComponent() {
 }
 ```
 
-## Signature
-
-```ts
-function useTracker(): {
-  send: (params: EventParamsWithContext<TContext, TEventParams>) => TaskReturnType<TTaskResult> | undefined;
-  setContext: (context: TContext | ((prevContext: TContext) => TContext)) => void;
-  getContext: () => TContext;
-  trackWithSchema: TUseTrackerTrackWithSchema;
-  track: TUseTrackerTrack;
-};
-```
-
 ## Reference
 
 ### Returns
diff --git a/docs/src/content/ko/docs/components/click.mdx b/docs/src/content/ko/docs/components/click.mdx
index 5256700..d4c1784 100644
--- a/docs/src/content/ko/docs/components/click.mdx
+++ b/docs/src/content/ko/docs/components/click.mdx
@@ -26,20 +26,6 @@ function App() {
 }
 ```
 
-## Signature
-
-```ts
-function Click<TKey extends keyof TSchemas>({
-  children,
-  enabled,
-  ...props
-}: {
-  children: ReactNode;
-  enabled?: EnabledCondition<TContext, TEventParams>;
-} & TrackingOptions<TContext, TEventParams> &
-  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
-```
-
 ## Reference
 
 ### Props
@@ -59,15 +45,15 @@ function Click<TKey extends keyof TSchemas>({
 
 스키마가 있을 경우:
 
-| Props    | 타입                                                 | 설명                 | 
-| -------- | ---------------------------------------------------- | -------------------- | 
-| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 | 
+| Props    | 타입                                                 | 설명                 |
+| -------- | ---------------------------------------------------- | -------------------- |
+| `params` | `SchemaParams \| (context: Context) => SchemaParams` | 스키마 기반 매개변수 |
 
 스키마가 없을 경우:
 
-| Props    | 타입                                               | 설명            | 
-| -------- | -------------------------------------------------- | --------------- | 
-| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 | 
+| Props    | 타입                                               | 설명            |
+| -------- | -------------------------------------------------- | --------------- |
+| `params` | `EventParams \| (context: Context) => EventParams` | 이벤트 매개변수 |
 
 ---
 
diff --git a/docs/src/content/ko/docs/components/dom-event.mdx b/docs/src/content/ko/docs/components/dom-event.mdx
index a5110a9..cdf6ddd 100644
--- a/docs/src/content/ko/docs/components/dom-event.mdx
+++ b/docs/src/content/ko/docs/components/dom-event.mdx
@@ -26,24 +26,6 @@ function App() {
 }
 ```
 
-## Signature
-
-```ts
-function DOMEvent<TKey extends keyof TSchemas>({
-  children,
-  type,
-  eventName,
-  enabled,
-  ...props
-}: {
-  children: React.ReactNode;
-  type: DOMEventNames;
-  eventName?: string;
-  enabled?: EnabledCondition<TContext, TEventParams>;
-} & TrackingOptions<TContext, TEventParams> &
-  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
-```
-
 ## Reference
 
 ### Props
diff --git a/docs/src/content/ko/docs/components/impression.mdx b/docs/src/content/ko/docs/components/impression.mdx
index 1a1415d..6f5f89f 100644
--- a/docs/src/content/ko/docs/components/impression.mdx
+++ b/docs/src/content/ko/docs/components/impression.mdx
@@ -29,22 +29,6 @@ function App() {
 }
 ```
 
-## Signature
-
-```ts
-function Impression<TKey extends keyof TSchemas>({
-  children,
-  options,
-  enabled,
-  ...props
-}: {
-  children: ReactNode;
-  options?: ImpressionOptions;
-  enabled?: EnabledCondition<TContext, TEventParams>;
-} & TrackingOptions<TContext, TEventParams> &
-  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
-```
-
 ## Reference
 
 ### Props
diff --git a/docs/src/content/ko/docs/components/index.mdx b/docs/src/content/ko/docs/components/index.mdx
index f5c123e..137c84b 100644
--- a/docs/src/content/ko/docs/components/index.mdx
+++ b/docs/src/content/ko/docs/components/index.mdx
@@ -16,12 +16,6 @@ function App() {
 }
 ```
 
-## Signature
-
-```ts
-function Provider({ children, initialContext }: { children: ReactNode; initialContext?: TContext }): JSX.Element;
-```
-
 ## Reference
 
 ### Props
diff --git a/docs/src/content/ko/docs/components/page-view.mdx b/docs/src/content/ko/docs/components/page-view.mdx
index 28e37f2..9b1c6c1 100644
--- a/docs/src/content/ko/docs/components/page-view.mdx
+++ b/docs/src/content/ko/docs/components/page-view.mdx
@@ -24,18 +24,6 @@ function App() {
 }
 ```
 
-## Signature
-
-```ts
-function PageView<TKey extends keyof TSchemas>({
-  enabled,
-  ...props
-}: {
-  enabled?: EnabledCondition<TContext, TEventParams>;
-} & TrackingOptions<TContext, TEventParams> &
-  UnionPropsWithAndWithoutSchema<TContext, TEventParams, TSchemas, TKey>): JSX.Element;
-```
-
 ## Reference
 
 ### Props
diff --git a/docs/src/content/ko/docs/components/set-context.mdx b/docs/src/content/ko/docs/components/set-context.mdx
index d34eafa..2e89ee7 100644
--- a/docs/src/content/ko/docs/components/set-context.mdx
+++ b/docs/src/content/ko/docs/components/set-context.mdx
@@ -18,12 +18,6 @@ function App() {
 }
 ```
 
-## Signature
-
-```ts
-function SetContext({ context }: { context: TContext | ((prevContext: TContext) => TContext) }): null;
-```
-
 ## Reference
 
 ### Props
diff --git a/docs/src/content/ko/docs/create-tracker.mdx b/docs/src/content/ko/docs/create-tracker.mdx
index f7c71ae..3ec1987 100644
--- a/docs/src/content/ko/docs/create-tracker.mdx
+++ b/docs/src/content/ko/docs/create-tracker.mdx
@@ -19,17 +19,6 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }, useTrack
 });
 ```
 
-## Signature
-
-```ts
-function createTracker<
-  TContext extends Context = Context,
-  TEventParams extends EventParams = EventParams,
-  TSchemas extends Schemas = Schemas,
-  TTaskResult extends TaskResult = TaskResult,
->(config: TrackerConfig<TContext, TEventParams, TSchemas, TTaskResult>): [EventComponents, UseTracker];
-```
-
 ## Reference
 
 ### Parameters
diff --git a/docs/src/content/ko/docs/use-tracker.mdx b/docs/src/content/ko/docs/use-tracker.mdx
index 6937675..3fd84a9 100644
--- a/docs/src/content/ko/docs/use-tracker.mdx
+++ b/docs/src/content/ko/docs/use-tracker.mdx
@@ -18,18 +18,6 @@ function MyComponent() {
 }
 ```
 
-## Signature
-
-```ts
-function useTracker(): {
-  send: (params: EventParamsWithContext<TContext, TEventParams>) => TaskReturnType<TTaskResult> | undefined;
-  setContext: (context: TContext | ((prevContext: TContext) => TContext)) => void;
-  getContext: () => TContext;
-  trackWithSchema: TUseTrackerTrackWithSchema;
-  track: TUseTrackerTrack;
-};
-```
-
 ## Reference
 
 ### Returns

From 39427ba12b6baaf33c2a9f1047b239e5c8d5db5d Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Thu, 31 Jul 2025 21:24:35 +0900
Subject: [PATCH 18/24] chore: update

---
 docs/src/components/demo-playground.tsx                | 5 +++--
 docs/src/content/en/docs/_meta.ts                      | 4 ++--
 docs/src/content/en/docs/{use-tracker.mdx => hook.mdx} | 4 ++--
 docs/src/content/ko/docs/_meta.ts                      | 4 ++--
 docs/src/content/ko/docs/{use-tracker.mdx => hook.mdx} | 4 ++--
 5 files changed, 11 insertions(+), 10 deletions(-)
 rename docs/src/content/en/docs/{use-tracker.mdx => hook.mdx} (97%)
 rename docs/src/content/ko/docs/{use-tracker.mdx => hook.mdx} (98%)

diff --git a/docs/src/components/demo-playground.tsx b/docs/src/components/demo-playground.tsx
index 49a224b..221998f 100644
--- a/docs/src/components/demo-playground.tsx
+++ b/docs/src/components/demo-playground.tsx
@@ -4,7 +4,7 @@ import { highlight, Pre, type HighlightedCode } from "codehike/code";
 import { DemoButton } from "./demo-button";
 import { useTheme } from "nextra-theme-docs";
 import { useSystemDarkMode } from "../logo/useSystemDarkMode";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { motion } from "motion/react";
 
 const code = `import { createTracker } from "@offlegacy/event-tracker";
@@ -69,7 +69,8 @@ export function DemoCode() {
           </div>
         </div>
         <div className="relative overflow-x-auto p-6">
-          <Pre className="relative z-0 !m-0 !bg-transparent !p-0 text-sm leading-relaxed" code={highlighted} />
+          {/* @ts-expect-error - Pre is not a valid JSX element */}
+          <Pre code={highlighted} className="relative z-0 !m-0 !bg-transparent !p-0 text-sm leading-relaxed" />
         </div>
       </div>
       <div className="absolute bottom-6 right-6 z-10">
diff --git a/docs/src/content/en/docs/_meta.ts b/docs/src/content/en/docs/_meta.ts
index 2624acf..d75c6c5 100644
--- a/docs/src/content/en/docs/_meta.ts
+++ b/docs/src/content/en/docs/_meta.ts
@@ -39,8 +39,8 @@ export default {
     },
   },
   components: { title: "Components" },
-  "use-tracker": {
-    title: "useTracker",
+  hook: {
+    title: "Hook",
     theme: {
       toc: true,
       layout: "default",
diff --git a/docs/src/content/en/docs/use-tracker.mdx b/docs/src/content/en/docs/hook.mdx
similarity index 97%
rename from docs/src/content/en/docs/use-tracker.mdx
rename to docs/src/content/en/docs/hook.mdx
index 81163d3..1d8b65b 100644
--- a/docs/src/content/en/docs/use-tracker.mdx
+++ b/docs/src/content/en/docs/hook.mdx
@@ -1,8 +1,8 @@
 import { Callout } from "nextra/components";
 
-# useTracker
+# Hook
 
-Inside a React component, you can configure the tracking context or imperatively trigger events. `useTracker` is the second item returned from [`createTracker`](/docs/create-tracker).
+Inside a React component, you can configure the tracking context or imperatively trigger events. This hook is the second item returned from [`createTracker`](/docs/create-tracker).
 
 It is primarily used to manually trigger events after a component mounts, upon user input, or after asynchronous tasks complete.
 
diff --git a/docs/src/content/ko/docs/_meta.ts b/docs/src/content/ko/docs/_meta.ts
index 684393a..bb305a6 100644
--- a/docs/src/content/ko/docs/_meta.ts
+++ b/docs/src/content/ko/docs/_meta.ts
@@ -39,8 +39,8 @@ export default {
     },
   },
   components: { title: "Components" },
-  "use-tracker": {
-    title: "useTracker",
+  hook: {
+    title: "Hook",
     theme: {
       toc: true,
       layout: "default",
diff --git a/docs/src/content/ko/docs/use-tracker.mdx b/docs/src/content/ko/docs/hook.mdx
similarity index 98%
rename from docs/src/content/ko/docs/use-tracker.mdx
rename to docs/src/content/ko/docs/hook.mdx
index 3fd84a9..09d6258 100644
--- a/docs/src/content/ko/docs/use-tracker.mdx
+++ b/docs/src/content/ko/docs/hook.mdx
@@ -1,8 +1,8 @@
 import { Callout } from "nextra/components";
 
-# useTracker
+# Hook
 
-React 컴포넌트 내부에서 트래킹 컨텍스트를 설정하거나, 명령형 방식으로 이벤트를 추적할 수 있습니다. `useTracker`는 [`createTracker`](/docs/create-tracker)에서 반환되는 두 번째 항목입니다.
+React 컴포넌트 내부에서 트래킹 컨텍스트를 설정하거나, 명령형 방식으로 이벤트를 추적할 수 있습니다. 해당 Hook은 [`createTracker`](/docs/create-tracker)에서 반환되는 두 번째 항목입니다.
 
 주로 컴포넌트 마운트 이후, 사용자 입력이나 비동기 작업이 완료된 시점에서 수동으로 이벤트를 트리거할 때 사용됩니다.
 

From 3966a403704e7832893e9cd40cecd503dc51d6e8 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Thu, 31 Jul 2025 21:32:20 +0900
Subject: [PATCH 19/24] chore: update

---
 docs/package.json   |   4 +-
 docs/pnpm-lock.yaml | 234 ++++++++++++++++++++++----------------------
 2 files changed, 119 insertions(+), 119 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 963f1e0..514ce10 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,8 +20,8 @@
     "next": "15.3.5",
     "nextra": "^4.2.17",
     "nextra-theme-docs": "^4.2.17",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "sonner": "^2.0.6"
   },
   "devDependencies": {
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index 3e7d84b..1924c41 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -13,37 +13,37 @@ importers:
         version: 2.11.11
       '@offlegacy/event-tracker':
         specifier: latest
-        version: 1.3.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(zod@3.24.1)
+        version: 1.3.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(zod@3.24.1)
       '@uidotdev/usehooks':
         specifier: ^2.4.1
-        version: 2.4.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 2.4.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       codehike:
         specifier: ^1.0.7
         version: 1.0.7
       lucide-react:
         specifier: ^0.525.0
-        version: 0.525.0(react@19.1.0)
+        version: 0.525.0(react@19.1.1)
       motion:
         specifier: ^12.23.0
-        version: 12.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 12.23.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       next:
         specifier: 15.3.5
-        version: 15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       nextra:
         specifier: ^4.2.17
-        version: 4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3)
+        version: 4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(typescript@5.7.3)
       nextra-theme-docs:
         specifier: ^4.2.17
-        version: 4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(typescript@5.7.3))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react:
-        specifier: ^19.1.0
-        version: 19.1.0
+        specifier: ^19.1.1
+        version: 19.1.1
       react-dom:
-        specifier: ^19.1.0
-        version: 19.1.0(react@19.1.0)
+        specifier: ^19.1.1
+        version: 19.1.1(react@19.1.1)
       sonner:
         specifier: ^2.0.6
-        version: 2.0.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 2.0.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
     devDependencies:
       '@eslint/eslintrc':
         specifier: ^3.3.1
@@ -2705,10 +2705,10 @@ packages:
     peerDependencies:
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  react-dom@19.1.0:
-    resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
+  react-dom@19.1.1:
+    resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
     peerDependencies:
-      react: ^19.1.0
+      react: ^19.1.1
 
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@@ -2719,8 +2719,8 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  react@19.1.0:
-    resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
+  react@19.1.1:
+    resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
     engines: {node: '>=0.10.0'}
 
   read-cache@1.0.0:
@@ -3468,18 +3468,18 @@ snapshots:
       '@floating-ui/core': 1.6.9
       '@floating-ui/utils': 0.2.9
 
-  '@floating-ui/react-dom@2.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@floating-ui/react-dom@2.1.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@floating-ui/dom': 1.6.13
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
 
-  '@floating-ui/react@0.26.28(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@floating-ui/react@0.26.28(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@floating-ui/react-dom': 2.1.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@floating-ui/utils': 0.2.9
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
       tabbable: 6.2.0
 
   '@floating-ui/utils@0.2.9': {}
@@ -3488,14 +3488,14 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@headlessui/react@2.2.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@headlessui/react@2.2.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
-      '@floating-ui/react': 0.26.28(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@react-aria/focus': 3.19.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@react-aria/interactions': 3.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@tanstack/react-virtual': 3.11.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      '@floating-ui/react': 0.26.28(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/focus': 3.19.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/interactions': 3.23.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@tanstack/react-virtual': 3.11.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
 
   '@humanfs/core@0.19.1': {}
 
@@ -3769,10 +3769,10 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
-  '@offlegacy/event-tracker@1.3.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(zod@3.24.1)':
+  '@offlegacy/event-tracker@1.3.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(zod@3.24.1)':
     dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
       zod: 3.24.1
 
   '@pagefind/darwin-arm64@1.3.0':
@@ -3793,48 +3793,48 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@react-aria/focus@3.19.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@react-aria/focus@3.19.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
-      '@react-aria/interactions': 3.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@react-aria/utils': 3.27.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@react-types/shared': 3.27.0(react@19.1.0)
+      '@react-aria/interactions': 3.23.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/utils': 3.27.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-types/shared': 3.27.0(react@19.1.1)
       '@swc/helpers': 0.5.15
       clsx: 2.1.1
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
 
-  '@react-aria/interactions@3.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@react-aria/interactions@3.23.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
-      '@react-aria/ssr': 3.9.7(react@19.1.0)
-      '@react-aria/utils': 3.27.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@react-types/shared': 3.27.0(react@19.1.0)
+      '@react-aria/ssr': 3.9.7(react@19.1.1)
+      '@react-aria/utils': 3.27.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-types/shared': 3.27.0(react@19.1.1)
       '@swc/helpers': 0.5.15
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
 
-  '@react-aria/ssr@3.9.7(react@19.1.0)':
+  '@react-aria/ssr@3.9.7(react@19.1.1)':
     dependencies:
       '@swc/helpers': 0.5.15
-      react: 19.1.0
+      react: 19.1.1
 
-  '@react-aria/utils@3.27.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@react-aria/utils@3.27.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
-      '@react-aria/ssr': 3.9.7(react@19.1.0)
-      '@react-stately/utils': 3.10.5(react@19.1.0)
-      '@react-types/shared': 3.27.0(react@19.1.0)
+      '@react-aria/ssr': 3.9.7(react@19.1.1)
+      '@react-stately/utils': 3.10.5(react@19.1.1)
+      '@react-types/shared': 3.27.0(react@19.1.1)
       '@swc/helpers': 0.5.15
       clsx: 2.1.1
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
 
-  '@react-stately/utils@3.10.5(react@19.1.0)':
+  '@react-stately/utils@3.10.5(react@19.1.1)':
     dependencies:
       '@swc/helpers': 0.5.15
-      react: 19.1.0
+      react: 19.1.1
 
-  '@react-types/shared@3.27.0(react@19.1.0)':
+  '@react-types/shared@3.27.0(react@19.1.1)':
     dependencies:
-      react: 19.1.0
+      react: 19.1.1
 
   '@rtsao/scc@1.1.0': {}
 
@@ -3890,18 +3890,18 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@tanstack/react-virtual@3.11.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@tanstack/react-virtual@3.11.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@tanstack/virtual-core': 3.11.2
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
 
   '@tanstack/virtual-core@3.11.2': {}
 
-  '@theguild/remark-mermaid@0.2.0(react@19.1.0)':
+  '@theguild/remark-mermaid@0.2.0(react@19.1.1)':
     dependencies:
       mermaid: 11.4.1
-      react: 19.1.0
+      react: 19.1.1
       unist-util-visit: 5.0.0
     transitivePeerDependencies:
       - supports-color
@@ -4169,10 +4169,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@uidotdev/usehooks@2.4.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@uidotdev/usehooks@2.4.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
 
   '@ungap/structured-clone@1.3.0': {}
 
@@ -4298,10 +4298,10 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
-  better-react-mathjax@2.0.3(react@19.1.0):
+  better-react-mathjax@2.0.3(react@19.1.1):
     dependencies:
       mathjax-full: 3.2.2
-      react: 19.1.0
+      react: 19.1.1
 
   binary-extensions@2.3.0: {}
 
@@ -5175,14 +5175,14 @@ snapshots:
 
   format@0.2.2: {}
 
-  framer-motion@12.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  framer-motion@12.23.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
       motion-dom: 12.22.0
       motion-utils: 12.19.0
       tslib: 2.8.1
     optionalDependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
 
   fsevents@2.3.3:
     optional: true
@@ -5717,9 +5717,9 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
-  lucide-react@0.525.0(react@19.1.0):
+  lucide-react@0.525.0(react@19.1.1):
     dependencies:
-      react: 19.1.0
+      react: 19.1.1
 
   markdown-extensions@2.0.0: {}
 
@@ -6270,13 +6270,13 @@ snapshots:
 
   motion-utils@12.19.0: {}
 
-  motion@12.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  motion@12.23.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
-      framer-motion: 12.23.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      framer-motion: 12.23.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       tslib: 2.8.1
     optionalDependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
 
   ms@2.1.3: {}
 
@@ -6292,12 +6292,12 @@ snapshots:
 
   negotiator@1.0.0: {}
 
-  next-themes@0.4.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  next-themes@0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
 
-  next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
       '@next/env': 15.3.5
       '@swc/counter': 0.1.3
@@ -6305,9 +6305,9 @@ snapshots:
       busboy: 1.6.0
       caniuse-lite: 1.0.30001695
       postcss: 8.4.31
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      styled-jsx: 5.1.6(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      styled-jsx: 5.1.6(react@19.1.1)
     optionalDependencies:
       '@next/swc-darwin-arm64': 15.3.5
       '@next/swc-darwin-x64': 15.3.5
@@ -6322,35 +6322,35 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  nextra-theme-docs@4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  nextra-theme-docs@4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(typescript@5.7.3))(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
-      '@headlessui/react': 2.2.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@headlessui/react': 2.2.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       clsx: 2.1.1
-      next: 15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      next-themes: 0.4.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      nextra: 4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3)
-      react: 19.1.0
-      react-compiler-runtime: 0.0.0-experimental-22c6e49-20241219(react@19.1.0)
-      react-dom: 19.1.0(react@19.1.0)
+      next: 15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      next-themes: 0.4.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      nextra: 4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(typescript@5.7.3)
+      react: 19.1.1
+      react-compiler-runtime: 0.0.0-experimental-22c6e49-20241219(react@19.1.1)
+      react-dom: 19.1.1(react@19.1.1)
       scroll-into-view-if-needed: 3.1.0
       zod: 3.24.1
       zod-validation-error: 3.4.0(zod@3.24.1)
-      zustand: 5.0.3(@types/react@19.1.8)(react@19.1.0)
+      zustand: 5.0.3(@types/react@19.1.8)(react@19.1.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
       - use-sync-external-store
 
-  nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3):
+  nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(typescript@5.7.3):
     dependencies:
       '@formatjs/intl-localematcher': 0.6.1
-      '@headlessui/react': 2.2.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@headlessui/react': 2.2.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@mdx-js/mdx': 3.1.0(acorn@8.14.0)
       '@napi-rs/simple-git': 0.1.19
       '@shikijs/twoslash': 2.5.0(typescript@5.7.3)
-      '@theguild/remark-mermaid': 0.2.0(react@19.1.0)
+      '@theguild/remark-mermaid': 0.2.0(react@19.1.1)
       '@theguild/remark-npm2yarn': 0.3.3
-      better-react-mathjax: 2.0.3(react@19.1.0)
+      better-react-mathjax: 2.0.3(react@19.1.1)
       clsx: 2.1.1
       estree-util-to-js: 2.0.0
       estree-util-value-to-estree: 3.2.1
@@ -6362,11 +6362,11 @@ snapshots:
       mdast-util-gfm: 3.0.0
       mdast-util-to-hast: 13.2.0
       negotiator: 1.0.0
-      next: 15.3.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-compiler-runtime: 0.0.0-experimental-22c6e49-20241219(react@19.1.0)
-      react-dom: 19.1.0(react@19.1.0)
-      react-medium-image-zoom: 5.2.13(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      next: 15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-compiler-runtime: 0.0.0-experimental-22c6e49-20241219(react@19.1.1)
+      react-dom: 19.1.1(react@19.1.1)
+      react-medium-image-zoom: 5.2.13(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       rehype-katex: 7.0.1
       rehype-pretty-code: 0.14.1(shiki@2.5.0)
       rehype-raw: 7.0.0
@@ -6621,23 +6621,23 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  react-compiler-runtime@0.0.0-experimental-22c6e49-20241219(react@19.1.0):
+  react-compiler-runtime@0.0.0-experimental-22c6e49-20241219(react@19.1.1):
     dependencies:
-      react: 19.1.0
+      react: 19.1.1
 
-  react-dom@19.1.0(react@19.1.0):
+  react-dom@19.1.1(react@19.1.1):
     dependencies:
-      react: 19.1.0
+      react: 19.1.1
       scheduler: 0.26.0
 
   react-is@16.13.1: {}
 
-  react-medium-image-zoom@5.2.13(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  react-medium-image-zoom@5.2.13(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
 
-  react@19.1.0: {}
+  react@19.1.1: {}
 
   read-cache@1.0.0:
     dependencies:
@@ -7023,10 +7023,10 @@ snapshots:
 
   slash@5.1.0: {}
 
-  sonner@2.0.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  sonner@2.0.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
 
   source-map-js@1.2.1: {}
 
@@ -7129,10 +7129,10 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.4
 
-  styled-jsx@5.1.6(react@19.1.0):
+  styled-jsx@5.1.6(react@19.1.1):
     dependencies:
       client-only: 0.0.1
-      react: 19.1.0
+      react: 19.1.1
 
   stylis@4.3.5: {}
 
@@ -7477,9 +7477,9 @@ snapshots:
 
   zod@3.24.1: {}
 
-  zustand@5.0.3(@types/react@19.1.8)(react@19.1.0):
+  zustand@5.0.3(@types/react@19.1.8)(react@19.1.1):
     optionalDependencies:
       '@types/react': 19.1.8
-      react: 19.1.0
+      react: 19.1.1
 
   zwitch@2.0.4: {}

From e82d96bb254efcf1cf84a5ca11a763a4dc043607 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Thu, 31 Jul 2025 21:35:45 +0900
Subject: [PATCH 20/24] chore: update

---
 docs/package.json                       | 6 +++---
 docs/src/components/demo-playground.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 514ce10..06eb281 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,14 +20,14 @@
     "next": "15.3.5",
     "nextra": "^4.2.17",
     "nextra-theme-docs": "^4.2.17",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19",
+    "react-dom": "^19",
     "sonner": "^2.0.6"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
     "@types/node": "^20",
-    "@types/react-dom": "^19.1.6",
+    "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.3.5",
     "pagefind": "^1.3.0",
diff --git a/docs/src/components/demo-playground.tsx b/docs/src/components/demo-playground.tsx
index 221998f..235797a 100644
--- a/docs/src/components/demo-playground.tsx
+++ b/docs/src/components/demo-playground.tsx
@@ -4,7 +4,7 @@ import { highlight, Pre, type HighlightedCode } from "codehike/code";
 import { DemoButton } from "./demo-button";
 import { useTheme } from "nextra-theme-docs";
 import { useSystemDarkMode } from "../logo/useSystemDarkMode";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { motion } from "motion/react";
 
 const code = `import { createTracker } from "@offlegacy/event-tracker";

From 75250702b6a5c66c8026b2ffe17398575cdc7f35 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Thu, 31 Jul 2025 21:40:03 +0900
Subject: [PATCH 21/24] chore: update

---
 docs/pnpm-lock.yaml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index 1924c41..b3cbfc9 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -36,10 +36,10 @@ importers:
         specifier: ^4.2.17
         version: 4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(typescript@5.7.3))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react:
-        specifier: ^19.1.1
+        specifier: ^19
         version: 19.1.1
       react-dom:
-        specifier: ^19.1.1
+        specifier: ^19
         version: 19.1.1(react@19.1.1)
       sonner:
         specifier: ^2.0.6
@@ -52,7 +52,7 @@ importers:
         specifier: ^20
         version: 20.17.16
       '@types/react-dom':
-        specifier: ^19.1.6
+        specifier: ^19
         version: 19.1.6(@types/react@19.1.8)
       eslint:
         specifier: ^9

From 3bdcbd7c6a9f0049fedaf03abac47e59be3bd7e9 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Thu, 31 Jul 2025 21:48:14 +0900
Subject: [PATCH 22/24] chore: update

---
 docs/package.json   |  7 ++++---
 docs/pnpm-lock.yaml | 51 ++++++++++++++++++++++++---------------------
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 06eb281..b169772 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,14 +20,15 @@
     "next": "15.3.5",
     "nextra": "^4.2.17",
     "nextra-theme-docs": "^4.2.17",
-    "react": "^19",
-    "react-dom": "^19",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "sonner": "^2.0.6"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
     "@types/node": "^20",
-    "@types/react-dom": "^19",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "eslint": "^9",
     "eslint-config-next": "15.3.5",
     "pagefind": "^1.3.0",
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index b3cbfc9..6324f42 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -34,12 +34,12 @@ importers:
         version: 4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(typescript@5.7.3)
       nextra-theme-docs:
         specifier: ^4.2.17
-        version: 4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(typescript@5.7.3))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        version: 4.2.17(@types/react@19.1.9)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(typescript@5.7.3))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react:
-        specifier: ^19
+        specifier: ^19.1.1
         version: 19.1.1
       react-dom:
-        specifier: ^19
+        specifier: ^19.1.1
         version: 19.1.1(react@19.1.1)
       sonner:
         specifier: ^2.0.6
@@ -50,10 +50,13 @@ importers:
         version: 3.3.1
       '@types/node':
         specifier: ^20
-        version: 20.17.16
+        version: 20.19.9
+      '@types/react':
+        specifier: ^19.1.9
+        version: 19.1.9
       '@types/react-dom':
-        specifier: ^19
-        version: 19.1.6(@types/react@19.1.8)
+        specifier: ^19.1.7
+        version: 19.1.7(@types/react@19.1.9)
       eslint:
         specifier: ^9
         version: 9.18.0(jiti@1.21.7)
@@ -787,16 +790,16 @@ packages:
   '@types/nlcst@2.0.3':
     resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==}
 
-  '@types/node@20.17.16':
-    resolution: {integrity: sha512-vOTpLduLkZXePLxHiHsBLp98mHGnl8RptV4YAO3HfKO5UHjDvySGbxKtpYfy8Sx5+WKcgc45qNreJJRVM3L6mw==}
+  '@types/node@20.19.9':
+    resolution: {integrity: sha512-cuVNgarYWZqxRJDQHEB58GEONhOK79QVR/qYx4S7kcUObQvUwvFnYxJuuHUKm2aieN9X3yZB4LZsuYNU1Qphsw==}
 
-  '@types/react-dom@19.1.6':
-    resolution: {integrity: sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==}
+  '@types/react-dom@19.1.7':
+    resolution: {integrity: sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==}
     peerDependencies:
       '@types/react': ^19.0.0
 
-  '@types/react@19.1.8':
-    resolution: {integrity: sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==}
+  '@types/react@19.1.9':
+    resolution: {integrity: sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==}
 
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
@@ -3157,8 +3160,8 @@ packages:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
     engines: {node: '>= 0.4'}
 
-  undici-types@6.19.8:
-    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
@@ -4066,15 +4069,15 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
-  '@types/node@20.17.16':
+  '@types/node@20.19.9':
     dependencies:
-      undici-types: 6.19.8
+      undici-types: 6.21.0
 
-  '@types/react-dom@19.1.6(@types/react@19.1.8)':
+  '@types/react-dom@19.1.7(@types/react@19.1.9)':
     dependencies:
-      '@types/react': 19.1.8
+      '@types/react': 19.1.9
 
-  '@types/react@19.1.8':
+  '@types/react@19.1.9':
     dependencies:
       csstype: 3.1.3
 
@@ -6322,7 +6325,7 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  nextra-theme-docs@4.2.17(@types/react@19.1.8)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(typescript@5.7.3))(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+  nextra-theme-docs@4.2.17(@types/react@19.1.9)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(nextra@4.2.17(acorn@8.14.0)(next@15.3.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(typescript@5.7.3))(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
       '@headlessui/react': 2.2.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       clsx: 2.1.1
@@ -6335,7 +6338,7 @@ snapshots:
       scroll-into-view-if-needed: 3.1.0
       zod: 3.24.1
       zod-validation-error: 3.4.0(zod@3.24.1)
-      zustand: 5.0.3(@types/react@19.1.8)(react@19.1.1)
+      zustand: 5.0.3(@types/react@19.1.9)(react@19.1.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
@@ -7284,7 +7287,7 @@ snapshots:
       has-symbols: 1.1.0
       which-boxed-primitive: 1.1.1
 
-  undici-types@6.19.8: {}
+  undici-types@6.21.0: {}
 
   unified@11.0.5:
     dependencies:
@@ -7477,9 +7480,9 @@ snapshots:
 
   zod@3.24.1: {}
 
-  zustand@5.0.3(@types/react@19.1.8)(react@19.1.1):
+  zustand@5.0.3(@types/react@19.1.9)(react@19.1.1):
     optionalDependencies:
-      '@types/react': 19.1.8
+      '@types/react': 19.1.9
       react: 19.1.1
 
   zwitch@2.0.4: {}

From 08ae854c4c6b6d8e73bc5d05f5c1e8bb7db95f49 Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Fri, 1 Aug 2025 01:21:07 +0900
Subject: [PATCH 23/24] chore: update

---
 docs/src/components/demo-playground.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/src/components/demo-playground.tsx b/docs/src/components/demo-playground.tsx
index 235797a..1d3e86e 100644
--- a/docs/src/components/demo-playground.tsx
+++ b/docs/src/components/demo-playground.tsx
@@ -69,7 +69,6 @@ export function DemoCode() {
           </div>
         </div>
         <div className="relative overflow-x-auto p-6">
-          {/* @ts-expect-error - Pre is not a valid JSX element */}
           <Pre code={highlighted} className="relative z-0 !m-0 !bg-transparent !p-0 text-sm leading-relaxed" />
         </div>
       </div>

From 1018ae61eb3728e4e289436bbf841b3da678feee Mon Sep 17 00:00:00 2001
From: gwansikk <gwansik.kim@gwansik.dev>
Date: Fri, 1 Aug 2025 01:30:59 +0900
Subject: [PATCH 24/24] docs: rename `useTracker` to `Hook` in English and
 Korean documentation

---
 docs/src/content/en/docs/create-tracker.mdx | 2 +-
 docs/src/content/en/docs/introduction.mdx   | 6 +++---
 docs/src/content/ko/docs/create-tracker.mdx | 2 +-
 docs/src/content/ko/docs/introduction.mdx   | 6 +++---
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/src/content/en/docs/create-tracker.mdx b/docs/src/content/en/docs/create-tracker.mdx
index 6cbc7aa..abb506c 100644
--- a/docs/src/content/en/docs/create-tracker.mdx
+++ b/docs/src/content/en/docs/create-tracker.mdx
@@ -119,7 +119,7 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }] = create
 - `PageView`
 - `SetContext`
 
-#### [useTracker](./use-tracker)
+#### [Hook](./hook)
 
 ```tsx
 const [, useTracker] = createTracker(config);
diff --git a/docs/src/content/en/docs/introduction.mdx b/docs/src/content/en/docs/introduction.mdx
index 4a6f75c..a1af609 100644
--- a/docs/src/content/en/docs/introduction.mdx
+++ b/docs/src/content/en/docs/introduction.mdx
@@ -67,9 +67,9 @@ These are special components that enable declarative event tracking. They are pr
 
 You can use the provided components or create custom ones to handle various user interactions and lifecycle events. Each component accepts `context` and `params` props to pass specific data relevant to the event.
 
-### Custom Hook (`useTracker`)
+### Custom Hook
 
-Use when you need more complex or conditional event tracking that is not directly tied to component lifecycle or DOM events. The `useTracker` hook allows you to access context from `Track.Provider` and execute defined tracking logic imperatively.
+Use when you need more complex or conditional event tracking that is not directly tied to component lifecycle or DOM events. The hook allows you to access context from `Track.Provider` and execute defined tracking logic imperatively.
 
 ## Next Steps
 
@@ -78,6 +78,6 @@ These core concepts work together to create a powerful and flexible event tracki
 - [Why Event Tracker?](/docs/why-event-tracker): Learn the necessity and main features of Event Tracker.
 - [`createTracker`](/docs/create-tracker): Learn how to create and configure a tracker instance.
 - [Components](/docs/components): Explore all available tracking components with usage examples.
-- [`useTracker`](/docs/use-tracker): Learn how to implement custom tracking with the hook.
+- [Hook](/docs/hook): Learn how to implement custom tracking with the hook.
 - [Batching](/docs/batching): Optimize performance through event batching strategies.
 - [Data Validation](/docs/data-type-validation): Ensure data integrity with Zod schema validation.
diff --git a/docs/src/content/ko/docs/create-tracker.mdx b/docs/src/content/ko/docs/create-tracker.mdx
index 3ec1987..6a540b8 100644
--- a/docs/src/content/ko/docs/create-tracker.mdx
+++ b/docs/src/content/ko/docs/create-tracker.mdx
@@ -118,7 +118,7 @@ const [{ Provider, DOMEvent, Click, Impression, PageView, SetContext }] = create
 - `PageView`
 - `SetContext`
 
-#### [useTracker](./use-tracker)
+#### [Hook](./hook)
 
 ```tsx
 const [, useTracker] = createTracker(config);
diff --git a/docs/src/content/ko/docs/introduction.mdx b/docs/src/content/ko/docs/introduction.mdx
index 454502b..7517a5b 100644
--- a/docs/src/content/ko/docs/introduction.mdx
+++ b/docs/src/content/ko/docs/introduction.mdx
@@ -67,9 +67,9 @@ React의 Context API를 기반으로 구현되었습니다. 애플리케이션 
 
 이 외에도 다양한 사용자 인터랙션 및 생명주기 이벤트에 대응하는 컴포넌트를 제공하거나 커스텀하여 사용할 수 있습니다. 각 컴포넌트는 `context`, `params` prop을 통해 해당 이벤트와 관련된 특정 데이터를 전달받고 활용할 수 있습니다.
 
-### 커스텀 훅 (`useTracker`)
+### 커스텀 훅
 
-컴포넌트의 생명주기나 DOM 이벤트와 직접적으로 관련되지 않은, 보다 복잡하거나 조건부적인 이벤트 트래킹이 필요할 때 사용합니다. `useTracker` 훅을 사용하면 `Track.Provider`로부터 컨텍스트 정보를 가져오고, 정의된 트래킹 로직을 명령형으로 사용할 수 있습니다.
+컴포넌트의 생명주기나 DOM 이벤트와 직접적으로 관련되지 않은, 보다 복잡하거나 조건부적인 이벤트 트래킹이 필요할 때 사용합니다. 훅을 사용하면 `Track.Provider`로부터 컨텍스트 정보를 가져오고, 정의된 트래킹 로직을 명령형으로 사용할 수 있습니다.
 
 ## 다음 단계
 
@@ -78,6 +78,6 @@ React의 Context API를 기반으로 구현되었습니다. 애플리케이션 
 - [왜 Event Tracker인가요?](/docs/why-event-tracker): Event Tracker의 필요성과 주요 기능 알아보기
 - [`createTracker`](/docs/create-tracker): 트래커 인스턴스 생성 및 설정 방법 알아보기
 - [Components](/docs/components): 사용 가능한 모든 트래킹 컴포넌트와 사용 예시 살펴보기
-- [`useTracker`](/docs/use-tracker): 커스텀 훅을 활용한 사용자 지정 트래킹 방법 알아보기
+- [Hook](/docs/hook): 커스텀 훅을 활용한 사용자 지정 트래킹 방법 알아보기
 - [배칭](/docs/batching): 이벤트 배칭을 통한 성능 최적화 전략 알아보기
 - [데이터 검증](/docs/data-type-validation): Zod 스키마를 활용한 데이터 유효성 검증하기