From 65e2c7cbf17b5e5e94680ae13ff6ab13a6a5efd5 Mon Sep 17 00:00:00 2001
From: Juhyeok Kang <kangju2000@naver.com>
Date: Wed, 7 Aug 2024 11:29:27 +0900
Subject: [PATCH] =?UTF-8?q?docs:=20=EB=AC=B8=EC=84=9C=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=B4=EB=B3=BC=20=EC=88=98=20=EC=9E=88?=
 =?UTF-8?q?=EB=8A=94=20=EB=8D=B0=EB=AA=A8=20=EC=B6=94=EA=B0=80=20(#210)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: disassembleHangul 및 disassembleHangulToGroups 문서에 데모 추가

* docs: acronymizeHangul 문서에 데모 추가

* docs: extractHangul 문서에 데모 추가

* docs: hangulIncludes 문서에 데모 추가

* chore: changeset 추가

* docs: 누락된 API title 명시

* chore: main sync

* feat: Update disassemble API in documentation

* fix: md -> mdx

* feat: amountToHangul 데모 추가

* feat: getChoseong 데모 추가

* chore: changeset 수정

* feat: romanize, standardizePronunciation, susa 데모 추가

* chore: changeset 수정

* feat: hasBatchim 데모 추가

* feat: canBe 문서에 데모 추가
---
 .changeset/fluffy-mirrors-kiss.md             |  6 ++
 ...ntToHangul.en.md => amountToHangul.en.mdx} | 16 +++++
 ...ntToHangul.ko.md => amountToHangul.ko.mdx} | 16 +++++
 .../docs/api/{canBe.en.md => canBe.en.mdx}    | 58 ++++++++++++++++++-
 .../docs/api/{canBe.ko.md => canBe.ko.mdx}    | 58 ++++++++++++++++++-
 .../{disassemble.en.md => disassemble.en.mdx} | 16 +++++
 .../{disassemble.ko.md => disassemble.ko.mdx} | 16 +++++
 ...roups.en.md => disassembleToGroups.en.mdx} | 16 +++++
 ...roups.ko.md => disassembleToGroups.ko.mdx} | 16 +++++
 docs/src/pages/docs/api/getChoseong.en.mdx    | 16 +++++
 docs/src/pages/docs/api/getChoseong.ko.mdx    | 16 +++++
 docs/src/pages/docs/api/hasBatchim.en.mdx     | 35 ++++++++---
 docs/src/pages/docs/api/hasBatchim.ko.mdx     | 35 ++++++++---
 .../api/{romanize.en.md => romanize.en.mdx}   | 16 +++++
 .../api/{romanize.ko.md => romanize.ko.mdx}   | 16 +++++
 ....en.md => standardizePronunciation.en.mdx} | 17 ++++++
 ....ko.md => standardizePronunciation.ko.mdx} | 17 ++++++
 .../docs/api/{susa.en.md => susa.en.mdx}      | 17 ++++++
 .../docs/api/{susa.ko.md => susa.ko.mdx}      | 17 ++++++
 19 files changed, 398 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/fluffy-mirrors-kiss.md
 rename docs/src/pages/docs/api/{amountToHangul.en.md => amountToHangul.en.mdx} (74%)
 rename docs/src/pages/docs/api/{amountToHangul.ko.md => amountToHangul.ko.mdx} (74%)
 rename docs/src/pages/docs/api/{canBe.en.md => canBe.en.mdx} (63%)
 rename docs/src/pages/docs/api/{canBe.ko.md => canBe.ko.mdx} (64%)
 rename docs/src/pages/docs/api/{disassemble.en.md => disassemble.en.mdx} (74%)
 rename docs/src/pages/docs/api/{disassemble.ko.md => disassemble.ko.mdx} (72%)
 rename docs/src/pages/docs/api/{disassembleToGroups.en.md => disassembleToGroups.en.mdx} (77%)
 rename docs/src/pages/docs/api/{disassembleToGroups.ko.md => disassembleToGroups.ko.mdx} (74%)
 rename docs/src/pages/docs/api/{romanize.en.md => romanize.en.mdx} (74%)
 rename docs/src/pages/docs/api/{romanize.ko.md => romanize.ko.mdx} (75%)
 rename docs/src/pages/docs/api/{standardizePronunciation.en.md => standardizePronunciation.en.mdx} (82%)
 rename docs/src/pages/docs/api/{standardizePronunciation.ko.md => standardizePronunciation.ko.mdx} (82%)
 rename docs/src/pages/docs/api/{susa.en.md => susa.en.mdx} (76%)
 rename docs/src/pages/docs/api/{susa.ko.md => susa.ko.mdx} (79%)

diff --git a/.changeset/fluffy-mirrors-kiss.md b/.changeset/fluffy-mirrors-kiss.md
new file mode 100644
index 00000000..e014d1cb
--- /dev/null
+++ b/.changeset/fluffy-mirrors-kiss.md
@@ -0,0 +1,6 @@
+---
+'docs': patch
+---
+
+docs: 문서에서 사용해볼 수 있는 데모를 추가합니다.
+(amountToHangul, disassemble, disassembleToGroups, getChoseong, hasBatchim, romanize, standardizePronunciation, susa)
diff --git a/docs/src/pages/docs/api/amountToHangul.en.md b/docs/src/pages/docs/api/amountToHangul.en.mdx
similarity index 74%
rename from docs/src/pages/docs/api/amountToHangul.en.md
rename to docs/src/pages/docs/api/amountToHangul.en.mdx
index 19e3abcc..0502044d 100644
--- a/docs/src/pages/docs/api/amountToHangul.en.md
+++ b/docs/src/pages/docs/api/amountToHangul.en.mdx
@@ -2,6 +2,8 @@
 title: amountToHangul
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # amountToHangul
 
 Converts numeric amounts to the Korean reading of the [National Institute of Korean Language](https://ko.dict.naver.com/#/correct/korean/info?seq=602) rules.
@@ -20,3 +22,17 @@ amountToHangul('120,030원'); // '일십이만삼십'
 amountToHangul('12345.6789'); // '일만이천삼백사십오점육칠팔구'
 amountToHangul(15_201_100); // '일천오백이십만천백''
 ```
+
+## Demo
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { amountToHangul } from 'es-hangul';
+
+console.log(amountToHangul('15,201,100'));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/amountToHangul.ko.md b/docs/src/pages/docs/api/amountToHangul.ko.mdx
similarity index 74%
rename from docs/src/pages/docs/api/amountToHangul.ko.md
rename to docs/src/pages/docs/api/amountToHangul.ko.mdx
index dbafc07e..9d8264c8 100644
--- a/docs/src/pages/docs/api/amountToHangul.ko.md
+++ b/docs/src/pages/docs/api/amountToHangul.ko.mdx
@@ -2,6 +2,8 @@
 title: amountToHangul
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # amountToHangul
 
 숫자나 문자를 [국립국어원](https://ko.dict.naver.com/#/correct/korean/info?seq=602) 규칙의 한글 읽기 문자열로 변환합니다.
@@ -20,3 +22,17 @@ amountToHangul('120,030원'); // '일십이만삼십'
 amountToHangul('12345.6789'); // '일만이천삼백사십오점육칠팔구'
 amountToHangul(15_201_100); // '일천오백이십만천백''
 ```
+
+## 사용해보기
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { amountToHangul } from 'es-hangul';
+
+console.log(amountToHangul('15,201,100'));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/canBe.en.md b/docs/src/pages/docs/api/canBe.en.mdx
similarity index 63%
rename from docs/src/pages/docs/api/canBe.en.md
rename to docs/src/pages/docs/api/canBe.en.mdx
index 1338188f..40a35746 100644
--- a/docs/src/pages/docs/api/canBe.en.md
+++ b/docs/src/pages/docs/api/canBe.en.mdx
@@ -2,7 +2,11 @@
 title: canBe
 ---
 
-# canBeChoseong
+import { Sandpack } from '@/components/Sandpack';
+
+# canBe
+
+## canBeChoseong
 
 Check if a given character can be a choseong in Korean.
 
@@ -10,6 +14,8 @@ Check if a given character can be a choseong in Korean.
 function canBeChoseong(character: string): boolean;
 ```
 
+### Examples
+
 ```typescript
 canBeChoseong('ㄱ'); // true
 canBeChoseong('ㅃ'); // true
@@ -18,7 +24,21 @@ canBeChoseong('ㅏ'); // false
 canBeChoseong('가'); // false
 ```
 
-# canBeJungseong
+### Demo
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { canBeChoseong } from 'es-hangul';
+
+console.log(canBeChoseong('ㄱ'));
+```
+
+</Sandpack>
+
+## canBeJungseong
 
 Check if a given character can be a jungseong in Korean.
 
@@ -26,6 +46,8 @@ Check if a given character can be a jungseong in Korean.
 function canBeJungseong(character: string): boolean;
 ```
 
+### Examples
+
 ```typescript
 canBeJungseong('ㅏ'); // true
 canBeJungseong('ㅗㅏ'); // true
@@ -35,7 +57,21 @@ canBeJungseong('ㄱㅅ'); // false
 canBeJungseong('가'); // false
 ```
 
-# canBeJongseong
+### Demo
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { canBeJungseong } from 'es-hangul';
+
+console.log(canBeJungseong('ㅏ'));
+```
+
+</Sandpack>
+
+## canBeJongseong
 
 Check if a given character can be a jongseong in Korean.
 
@@ -43,6 +79,8 @@ Check if a given character can be a jongseong in Korean.
 function canBeJongseong(character: string): boolean;
 ```
 
+### Examples
+
 ```typescript
 canBeJongseong('ㄱ'); // true
 canBeJongseong('ㄱㅅ'); // true
@@ -51,3 +89,17 @@ canBeJongseong('가'); // false
 canBeJongseong('ㅏ'); // false
 canBeJongseong('ㅗㅏ'); // false
 ```
+
+### Demo
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { canBeJongseong } from 'es-hangul';
+
+console.log(canBeJongseong('ㄱ'));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/canBe.ko.md b/docs/src/pages/docs/api/canBe.ko.mdx
similarity index 64%
rename from docs/src/pages/docs/api/canBe.ko.md
rename to docs/src/pages/docs/api/canBe.ko.mdx
index ede91e95..710d2d12 100644
--- a/docs/src/pages/docs/api/canBe.ko.md
+++ b/docs/src/pages/docs/api/canBe.ko.mdx
@@ -2,7 +2,11 @@
 title: canBe
 ---
 
-# canBeChoseong
+import { Sandpack } from '@/components/Sandpack';
+
+# canBe
+
+## canBeChoseong
 
 인자로 받은 문자가 초성으로 위치할 수 있는 문자인지 검사합니다.
 
@@ -10,6 +14,8 @@ title: canBe
 function canBeChoseong(character: string): boolean;
 ```
 
+### Examples
+
 ```typescript
 canBeChoseong('ㄱ'); // true
 canBeChoseong('ㅃ'); // true
@@ -18,7 +24,21 @@ canBeChoseong('ㅏ'); // false
 canBeChoseong('가'); // false
 ```
 
-# canBeJungseong
+### 사용해보기
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { canBeJungseong } from 'es-hangul';
+
+console.log(canBeJungseong('ㅏ'));
+```
+
+</Sandpack>
+
+## canBeJungseong
 
 인자로 받은 문자가 중성으로 위치할 수 있는 문자인지 검사합니다.
 
@@ -26,6 +46,8 @@ canBeChoseong('가'); // false
 function canBeJungseong(character: string): boolean;
 ```
 
+### Examples
+
 ```typescript
 canBeJungseong('ㅏ'); // true
 canBeJungseong('ㅗㅏ'); // true
@@ -35,7 +57,21 @@ canBeJungseong('ㄱㅅ'); // false
 canBeJungseong('가'); // false
 ```
 
-# canBeJongseong
+### 사용해보기
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { canBeJungseong } from 'es-hangul';
+
+console.log(canBeJungseong('ㅏ'));
+```
+
+</Sandpack>
+
+## canBeJongseong
 
 인자로 받은 문자가 종성으로 위치할 수 있는 문자인지 검사합니다.
 
@@ -43,6 +79,8 @@ canBeJungseong('가'); // false
 function canBeJongseong(character: string): boolean;
 ```
 
+### Examples
+
 ```typescript
 canBeJongseong('ㄱ'); // true
 canBeJongseong('ㄱㅅ'); // true
@@ -51,3 +89,17 @@ canBeJongseong('가'); // false
 canBeJongseong('ㅏ'); // false
 canBeJongseong('ㅗㅏ'); // false
 ```
+
+### 사용해보기
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { canBeJongseong } from 'es-hangul';
+
+console.log(canBeJongseong('ㄱ'));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/disassemble.en.md b/docs/src/pages/docs/api/disassemble.en.mdx
similarity index 74%
rename from docs/src/pages/docs/api/disassemble.en.md
rename to docs/src/pages/docs/api/disassemble.en.mdx
index 66d499ce..674d85e5 100644
--- a/docs/src/pages/docs/api/disassemble.en.md
+++ b/docs/src/pages/docs/api/disassemble.en.mdx
@@ -2,6 +2,8 @@
 title: disassemble
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # disassemble
 
 Completely separates a Hangul string into its individual characters by initial consonants, medial vowels, and final consonants, creating a single string.
@@ -23,3 +25,17 @@ disassemble('값이 비싸다'); // 'ㄱㅏㅂㅅㅇㅣ ㅂㅣㅆㅏㄷㅏ'
 disassemble('ㅘ'); // 'ㅗㅏ'
 disassemble('ㄵ'); // 'ㄴㅈ'
 ```
+
+## Demo
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { disassemble } from 'es-hangul';
+
+console.log(disassemble('값'));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/disassemble.ko.md b/docs/src/pages/docs/api/disassemble.ko.mdx
similarity index 72%
rename from docs/src/pages/docs/api/disassemble.ko.md
rename to docs/src/pages/docs/api/disassemble.ko.mdx
index acc0d849..8a72835f 100644
--- a/docs/src/pages/docs/api/disassemble.ko.md
+++ b/docs/src/pages/docs/api/disassemble.ko.mdx
@@ -2,6 +2,8 @@
 title: disassemble
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # disassemble
 
 한글 문자열을 글자별로 초성/중성/종성 단위로 완전히 분리하여, 하나의 문자열로 만듭니다.
@@ -23,3 +25,17 @@ disassemble('값이 비싸다'); // 'ㄱㅏㅂㅅㅇㅣ ㅂㅣㅆㅏㄷㅏ'
 disassemble('ㅘ'); // 'ㅗㅏ'
 disassemble('ㄵ'); // 'ㄴㅈ'
 ```
+
+## 사용해보기
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { disassemble } from 'es-hangul';
+
+console.log(disassemble('값'));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/disassembleToGroups.en.md b/docs/src/pages/docs/api/disassembleToGroups.en.mdx
similarity index 77%
rename from docs/src/pages/docs/api/disassembleToGroups.en.md
rename to docs/src/pages/docs/api/disassembleToGroups.en.mdx
index a52352e1..c6e1e284 100644
--- a/docs/src/pages/docs/api/disassembleToGroups.en.md
+++ b/docs/src/pages/docs/api/disassembleToGroups.en.mdx
@@ -2,6 +2,8 @@
 title: disassembleToGroups
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # disassembleToGroups
 
 Completely separate a Hangul string into individual characters based on the initial consonant, medial vowel, and final consonant.
@@ -24,3 +26,17 @@ disassembleToGroups('사과'); // [['ㅅ', 'ㅏ'], ['ㄱ', 'ㅗ', 'ㅏ']]
 disassembleToGroups('ㅘ'); // [['ㅗ', 'ㅏ']]
 disassembleToGroups('ㄵ'); // [['ㄴ', 'ㅈ']]
 ```
+
+## Demo
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { disassembleToGroups } from 'es-hangul';
+
+console.log(disassembleToGroups('사과'));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/disassembleToGroups.ko.md b/docs/src/pages/docs/api/disassembleToGroups.ko.mdx
similarity index 74%
rename from docs/src/pages/docs/api/disassembleToGroups.ko.md
rename to docs/src/pages/docs/api/disassembleToGroups.ko.mdx
index 3106879f..f848c46e 100644
--- a/docs/src/pages/docs/api/disassembleToGroups.ko.md
+++ b/docs/src/pages/docs/api/disassembleToGroups.ko.mdx
@@ -2,6 +2,8 @@
 title: disassembleToGroups
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # disassembleToGroups
 
 한글 문자열을 글자별로 초성/중성/종성 단위로 완전히 분리합니다.
@@ -24,3 +26,17 @@ disassembleToGroups('사과'); // [['ㅅ', 'ㅏ'], ['ㄱ', 'ㅗ', 'ㅏ']]
 disassembleToGroups('ㅘ'); // [['ㅗ', 'ㅏ']]
 disassembleToGroups('ㄵ'); // [['ㄴ', 'ㅈ']]
 ```
+
+## 사용해보기
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { disassembleToGroups } from 'es-hangul';
+
+console.log(disassembleToGroups('사과'));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/getChoseong.en.mdx b/docs/src/pages/docs/api/getChoseong.en.mdx
index 3839acca..7bd20e19 100644
--- a/docs/src/pages/docs/api/getChoseong.en.mdx
+++ b/docs/src/pages/docs/api/getChoseong.en.mdx
@@ -2,6 +2,8 @@
 title: getChoseong
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # getChoseong
 
 Extracts the Choseong from a Korean word. (Example: 사과 -> 'ㅅㄱ')
@@ -19,3 +21,17 @@ function getChoseong(
 getChoseong('사과'); // 'ㅅㄱ'
 getChoseong('띄어 쓰기'); // 'ㄸㅇ ㅆㄱ'
 ```
+
+## Demo
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { getChoseong } from 'es-hangul';
+
+console.log(getChoseong('사과'));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/getChoseong.ko.mdx b/docs/src/pages/docs/api/getChoseong.ko.mdx
index 8f10d84d..99db56f9 100644
--- a/docs/src/pages/docs/api/getChoseong.ko.mdx
+++ b/docs/src/pages/docs/api/getChoseong.ko.mdx
@@ -2,6 +2,8 @@
 title: getChoseong
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # getChoseong
 
 단어에서 초성을 추출합니다. (예: `사과` -> `'ㅅㄱ'`)
@@ -21,3 +23,17 @@ function getChoseong(
 getChoseong('사과'); // 'ㅅㄱ'
 getChoseong('띄어 쓰기'); // 'ㄸㅇ ㅆㄱ'
 ```
+
+## 사용해보기
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { getChoseong } from 'es-hangul';
+
+console.log(getChoseong('사과'));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/hasBatchim.en.mdx b/docs/src/pages/docs/api/hasBatchim.en.mdx
index c546d623..12795cb3 100644
--- a/docs/src/pages/docs/api/hasBatchim.en.mdx
+++ b/docs/src/pages/docs/api/hasBatchim.en.mdx
@@ -2,22 +2,41 @@
 title: hasBatchim
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # hasBatchim
 
 Checks if the last character of a Korean string has a batchim (jongseong).
 
-````typescript
+```typescript
 hasBatchim(
   str: string,
   options?: { only?: "single" | "double" }
 ): boolean
+```
 
+## Examples
 
- ```typescript
- hasBatchim('값') // true
- hasBatchim('토') // false
- hasBatchim('갑', { only : "single" }) // true
- hasBatchim('값', { only : "single" }) // false
- hasBatchim('토', { only : "double" }) // false
-````
+```typescript
+hasBatchim('값'); // true
+hasBatchim('토'); // false
+hasBatchim('갑', { only: 'single' }); // true
+hasBatchim('값', { only: 'single' }); // false
+hasBatchim('토', { only: 'double' }); // false
+```
+
+## Demo
+
+<br />
 
+<Sandpack>
+
+```ts index.ts
+import { hasBatchim } from 'es-hangul';
+
+console.log(hasBatchim('값'));
+console.log(hasBatchim('값', { only: 'single' }));
+```
+
+</Sandpack>
+````
diff --git a/docs/src/pages/docs/api/hasBatchim.ko.mdx b/docs/src/pages/docs/api/hasBatchim.ko.mdx
index b5e6c20a..8d3a6bf7 100644
--- a/docs/src/pages/docs/api/hasBatchim.ko.mdx
+++ b/docs/src/pages/docs/api/hasBatchim.ko.mdx
@@ -2,21 +2,40 @@
 title: hasBatchim
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # hasBatchim
 
 한글 문자열의 마지막 글자가 받침이 있는지 확인합니다.
 
-````typescript
+```typescript
 hasBatchim(
   str: string,
   options?: { only?: "single" | "double" }
 ): boolean
+```
+
+## Examples
+
+```typescript
+hasBatchim('값'); // true
+hasBatchim('토'); // false
+hasBatchim('갑', { only: 'single' }); // true
+hasBatchim('값', { only: 'single' }); // false
+hasBatchim('토', { only: 'double' }); // false
+```
+
+## 사용해보기
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { hasBatchim } from 'es-hangul';
 
+console.log(hasBatchim('값'));
+console.log(hasBatchim('값', { only: 'single' }));
+```
 
- ```typescript
- hasBatchim('값') // true
- hasBatchim('토') // false
- hasBatchim('갑', { only : "single" }) // true
- hasBatchim('값', { only : "single" }) // false
- hasBatchim('토', { only : "double" }) // false
-````
+</Sandpack>
diff --git a/docs/src/pages/docs/api/romanize.en.md b/docs/src/pages/docs/api/romanize.en.mdx
similarity index 74%
rename from docs/src/pages/docs/api/romanize.en.md
rename to docs/src/pages/docs/api/romanize.en.mdx
index e05a00ac..886cd17e 100644
--- a/docs/src/pages/docs/api/romanize.en.md
+++ b/docs/src/pages/docs/api/romanize.en.mdx
@@ -2,6 +2,8 @@
 title: romanize
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # romanize
 
 Change the Hangul string to Roman.
@@ -26,3 +28,17 @@ romanize('ㄱ'); // 'g'
 romanize('한국어!'); // 'hangugeo!'
 romanize('안녕하세요'); // 'annyeonghaseyo'
 ```
+
+## Demo
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { romanize } from 'es-hangul';
+
+console.log(romanize('백마'));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/romanize.ko.md b/docs/src/pages/docs/api/romanize.ko.mdx
similarity index 75%
rename from docs/src/pages/docs/api/romanize.ko.md
rename to docs/src/pages/docs/api/romanize.ko.mdx
index 4e0630bd..71f6e3a8 100644
--- a/docs/src/pages/docs/api/romanize.ko.md
+++ b/docs/src/pages/docs/api/romanize.ko.mdx
@@ -2,6 +2,8 @@
 title: romanize
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # romanize
 
 한글 문자열을 로마자로 변경합니다.
@@ -26,3 +28,17 @@ romanize('ㄱ'); // 'g'
 romanize('한국어!'); // 'hangugeo!'
 romanize('안녕하세요'); // 'annyeonghaseyo'
 ```
+
+## 사용해보기
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { romanize } from 'es-hangul';
+
+console.log(romanize('백마'));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/standardizePronunciation.en.md b/docs/src/pages/docs/api/standardizePronunciation.en.mdx
similarity index 82%
rename from docs/src/pages/docs/api/standardizePronunciation.en.md
rename to docs/src/pages/docs/api/standardizePronunciation.en.mdx
index a8eb87c9..b9fecb80 100644
--- a/docs/src/pages/docs/api/standardizePronunciation.en.md
+++ b/docs/src/pages/docs/api/standardizePronunciation.en.mdx
@@ -2,6 +2,8 @@
 title: standardizePronunciation
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # standardizePronunciation
 
 Change the Hangul string to standard pronunciation.
@@ -40,3 +42,18 @@ standardizePronunciation('핥다', { hardConversion: false }); // '할다'
 standardizePronunciation('젊다'); // '점따'
 standardizePronunciation('젊다', { hardConversion: false }); // '점다'
 ```
+
+## Demo
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { standardizePronunciation } from 'es-hangul';
+
+console.log(standardizePronunciation('곧이듣다'));
+console.log(standardizePronunciation('곧이듣다', { hardConversion: false }));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/standardizePronunciation.ko.md b/docs/src/pages/docs/api/standardizePronunciation.ko.mdx
similarity index 82%
rename from docs/src/pages/docs/api/standardizePronunciation.ko.md
rename to docs/src/pages/docs/api/standardizePronunciation.ko.mdx
index b70e7b90..5a346109 100644
--- a/docs/src/pages/docs/api/standardizePronunciation.ko.md
+++ b/docs/src/pages/docs/api/standardizePronunciation.ko.mdx
@@ -2,6 +2,8 @@
 title: standardizePronunciation
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # standardizePronunciation
 
 한글 문자열을 표준 발음법으로 변경합니다.
@@ -40,3 +42,18 @@ standardizePronunciation('핥다', { hardConversion: false }); // '할다'
 standardizePronunciation('젊다'); // '점따'
 standardizePronunciation('젊다', { hardConversion: false }); // '점다'
 ```
+
+## 사용해보기
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { standardizePronunciation } from 'es-hangul';
+
+console.log(standardizePronunciation('곧이듣다'));
+console.log(standardizePronunciation('곧이듣다', { hardConversion: false }));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/susa.en.md b/docs/src/pages/docs/api/susa.en.mdx
similarity index 76%
rename from docs/src/pages/docs/api/susa.en.md
rename to docs/src/pages/docs/api/susa.en.mdx
index fc191be1..d1da63e3 100644
--- a/docs/src/pages/docs/api/susa.en.md
+++ b/docs/src/pages/docs/api/susa.en.mdx
@@ -2,6 +2,8 @@
 title: susa
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # susa
 
 Convert numbers to native Korean numeral words or numeral determiners. The given number is valid when it is greater than 0 and less than or equal to 100.
@@ -31,3 +33,18 @@ susa(11, true); // '열한'
 susa(20, true); // '스무'
 susa(21, true); // '스물한'
 ```
+
+## Demo
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { susa } from 'es-hangul';
+
+console.log(susa(1));
+console.log(susa(1, true));
+```
+
+</Sandpack>
diff --git a/docs/src/pages/docs/api/susa.ko.md b/docs/src/pages/docs/api/susa.ko.mdx
similarity index 79%
rename from docs/src/pages/docs/api/susa.ko.md
rename to docs/src/pages/docs/api/susa.ko.mdx
index f3a5c9da..bd26d0e5 100644
--- a/docs/src/pages/docs/api/susa.ko.md
+++ b/docs/src/pages/docs/api/susa.ko.mdx
@@ -2,6 +2,8 @@
 title: susa
 ---
 
+import { Sandpack } from '@/components/Sandpack';
+
 # susa
 
 숫자를 순 우리말 [수사](https://ko.dict.naver.com/#/entry/koko/d0ce2b674cae4b44b9028f648dd458b0)로 변환하거나 [수 관형사](https://ko.dict.naver.com/#/entry/koko/c513782b82554ff499c80ec616c5b611)로 변환합니다. 주어진 숫자가 0보다 크고 100 이하일 때 유효합니다.
@@ -31,3 +33,18 @@ susa(11, true); // '열한'
 susa(20, true); // '스무'
 susa(21, true); // '스물한'
 ```
+
+## 사용해보기
+
+<br />
+
+<Sandpack>
+
+```ts index.ts
+import { susa } from 'es-hangul';
+
+console.log(susa(1));
+console.log(susa(1, true));
+```
+
+</Sandpack>