docs: Update docs

docs/src/pages/docs/_meta.json

@@ -1,5 +1,6 @@
 {
-  "story": "es-hangul 이야기",
+  "introduction": "es-hangul 이야기",
   "installation": "설치하기",
-  "engineer-features": "기술적 특징"
+  "features": "기술적 특징",
+  "api": "API"
 }

docs/src/pages/docs/api/disassembleHangul.md

@@ -0,0 +1,26 @@
+---
+title: disassembleHangul
+---
+
+
+# disassembleHangul
+
+한글 문자열을 글자별로 초성/중성/종성 단위로 완전히 분리하여, 하나의 문자열로 만듭니다.
+
+자세한 예시는 아래 Example을 참고하세요.
+
+```typescript
+function disassembleHangul(
+  // 분리할 한글 문자열
+  str: string
+): string;
+```
+
+## Examples
+
+```tsx
+disassembleHangul('값'); // 'ㄱㅏㅂㅅ'
+disassembleHangul('값이 비싸다'); // 'ㄱㅏㅂㅅㅇㅣ ㅂㅣㅆㅏㄷㅏ'
+disassembleHangul('ㅘ'); // 'ㅗㅏ'
+disassembleHangul('ㄵ'); // 'ㄴㅈ'
+```

docs/src/pages/docs/api/disassemble.md → docs/src/pages/docs/api/disassembleHangulToGroups.md

@@ -1,5 +1,5 @@
 ---
-title: disassemble
+title: disassembleHangulToGroups
 ---
 
 # disassembleHangulToGroups
@@ -24,25 +24,3 @@ disassembleHangulToGroups('값'); // [['ㄱ', 'ㅏ', 'ㅂ', 'ㅅ']]
 disassembleHangulToGroups('ㅘ'); // [['ㅗ', 'ㅏ']]
 disassembleHangulToGroups('ㄵ'); // [['ㄴ', 'ㅈ']]
 ```
-
-# disassembleHangul
-
-한글 문자열을 글자별로 초성/중성/종성 단위로 완전히 분리하여, 하나의 문자열로 만듭니다.
-
-자세한 예시는 아래 Example을 참고하세요.
-
-```typescript
-function disassembleHangul(
-  // 분리할 한글 문자열
-  str: string
-): string;
-```
-
-## Examples
-
-```tsx
-disassembleHangul('값'); // 'ㄱㅏㅂㅅ'
-disassembleHangul('값이 비싸다'); // 'ㄱㅏㅂㅅㅇㅣ ㅂㅣㅆㅏㄷㅏ'
-disassembleHangul('ㅘ'); // 'ㅗㅏ'
-disassembleHangul('ㄵ'); // 'ㄴㅈ'
-```

docs/src/pages/docs/features.mdx

@@ -0,0 +1,17 @@
+# 기술적 특징
+
+## Tree-shakable
+
+ECMAScript Modules를 이용하여 사용하는 함수만 애플리케이션에 포함할 수 있습니다. 예를 들어, `josa` 함수를 사용하는 경우, 해당 함수와 연관된 로직만 애플리케이션에 포함됩니다.
+
+## TypeScript 지원
+
+편리하게 사용할 수 있는 정확한 TypeScript 타입을 제공함으로써, 개발자는 개발 단계에서 타입 오류를 쉽게 감지할 수 있습니다.
+
+## Zero-dependency
+
+외부 라이브러리에 의존하지 않고, 모든 기능을 컴팩트하게 라이브러리 1개로 제공합니다.
+
+## 현대적이고 선언적인 API
+
+현대적인 JavaScript에 어울리는, 사용하기 편리한 API를 제공합니다.

docs/src/pages/docs/introduction.mdx

@@ -0,0 +1,57 @@
+# 소개
+
+한글을 다루는 제품을 개발할 때, 초성 검색, 정확한 조사 붙이기와 같은 작업을 수행해야 할 경우가 많습니다. 그 외로 초성, 중성, 종성 등의 한글을 분리하거나 결합해야 하는 경우도 있죠. `es-hangul` 은 이렇게 비즈니스에서 반복적으로 발생하는 한글 관련한 기능을 쉽고 빠르게 구현할 수 있도록 돕습니다. 
+
+<br />
+
+## 특징
+
+1. **크기**: 한글을 다루는 데에 필요한 최소한의 코드를 제공함으로써, 사용자가 내려받는 JavaScript의 크기를 줄일 수 있습니다. (전체 라이브러리가 Gzip 압축 기준 1KB 정도입니다.)
+2. **정확성**: 모든 함수는 테스트 코드로 검증되어 버전에 관계없이 정확한 기능을 제공합니다.
+3. **API**: 다양한 애플리케이션에서 편리하게 사용할 수 있는 현대적인 API를 제공합니다.
+
+<br />
+
+## 사용 예시
+
+### 초성 검색
+
+사용자의 입력으로 받은 문자열의 초성이 특정 단어에 포함되어 있는지 검사할 수 있습니다. 예를 들어, '라면'이라는 단어에 'ㄹㅁ'으로 시작하는 초성이 포함되어 있는지 확인할 수 있습니다.
+
+```tsx
+import { chosungIncludes } from 'es-hangul';
+
+const searchWord = '라면';
+const userInput = 'ㄹㅁ';
+
+const result = chosungIncludes(searchWord, userInput);
+console.log(result); // true
+```
+
+### 한글 문자열 분해
+주어진 한글 문자열을 초성, 중성, 종성으로 분해하여 배열 형태로 반환하는 기능입니다. 이를 통해 문자열을 더 세밀하게 분석하거나 수정할 수 있습니다.
+
+```tsx
+import { disassembleHangul } from 'es-hangul';
+
+const word = '안녕하세요';
+const disassembled = disassembleHangul(word);
+console.log(disassembled); // 'ㅇㅏㄴㄴㅕㅇㅎㅏㅅㅔㅇㅛ'
+```
+
+### 자연스러운 조사 처리
+
+한글에서 동일한 단어라도 앞에 오는 단어에 따라 조사가 달라지는 경우가 많습니다. 단어의 마지막 글자가 받침이 있는지 여부에 따라 적절한 조사를 자동으로 선택할 수 있습니다.
+
+```tsx
+import { josa } from 'es-hangul';
+
+const word1 = '사과';
+const sentence1 = josa(word1, '을/를') + ' 먹었습니다.';
+console.log(sentence1); // '사과를 먹었습니다.'
+
+const word2 = '바나나';
+const sentence2 = josa(word2, '이/가') + ' 맛있습니다.';
+console.log(sentence2); // '바나나가 맛있습니다.'
+```
+

docs/src/pages/index.mdx

@@ -12,21 +12,22 @@ import { Callout, useTheme, Steps } from 'nextra-theme-docs';
       0 0,
       20px 20px;
     background-size: 40px 40px;
+    word-break: keep-all;
   }
   .dark body {
     background-image: radial-gradient(#333 1px, transparent 0), radial-gradient(#333 1px, transparent 0);
   }
 `}</style>
 
-<div className="flex flex-col items-center justify-center gap-8 pt-11 text-center">
-  <h1 className="text-center font-extrabold md:text-5xl mt-8">이에스-한글</h1>
+<img src="/og.png" style={{ width: '100%', maxWidth: 400, margin: '32px auto' }} />
+
+<div className="flex flex-col items-center justify-center gap-8 pt-6 text-center">
   <div className="flex flex-col items-center gap-4">
     <div className="relative text-3xl">
-      <h3 className="">한글을 다루는 모던한 방법</h3>
+      <h3 className="">현대적인 JavaScript 한글 라이브러리</h3>
     </div>
     <Callout className="w-full">
-      한글을 쉽고, 선언적으로 다룰 수 있는 도구들을 제공합니다. 반복적이고 복잡한 부분은 es-hangul에 위임한 뒤,
-      비즈니스에 집중할 수 있습니다.
+      es-hangul은 편리하게 한글을 다룰 수 있도록 돕는 작은 JavaScript 라이브러리입니다. 초성을 검색하고, 조사를 붙이는 등의 동작을 편리하고 깔끔한 API로 제공합니다.
     </Callout>
   </div>
 </div>

docs/theme.config.tsx

@@ -76,19 +76,19 @@ const config: DocsThemeConfig = {
               className="flex items-center gap-1 text-current"
               target="_blank"
               rel="noopener noreferrer"
-              title="vercel.com homepage"
-              href="https://vercel.com?utm_source=nextra.site"
+              title="toss homepage"
+              href="https://toss.im"
             >
               <span>Powered by</span>
               <Image
                 src={isDarkMode ? '/toss-logo-white.png' : '/toss-logo-gray.png'}
-                alt="Vercel.com"
+                alt="Toss"
                 width="64"
                 height="32"
               />
             </a>
           </div>
-          <p className="mt-6 text-xs">© {new Date().getFullYear()} The Opensource Project.</p>
+          <p className="mt-6 text-xs">© {new Date().getFullYear()} Viva Republica, Inc.</p>
         </div>
       );
     },

package.json

@@ -15,9 +15,9 @@
   },
   "exports": {
     ".": {
-      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },