docs: nextra의 기능을 사용하고 문서를 간단명료하게 수정합니다 (#48)

* docs: nextra의 필요한 기능을 사용하고 문서를 간단명료하게 수정합니다 * chore: update * Update docs/src/pages/docs/introduction.mdx Co-authored-by: 김석진(maru) <[email protected]> * Update docs/src/pages/docs/introduction.mdx Co-authored-by: 김석진(maru) <[email protected]> * Update docs/src/pages/docs/introduction.mdx Co-authored-by: 김석진(maru) <[email protected]> * Create rotten-queens-wash.md --------- Co-authored-by: 김석진(maru) <[email protected]> Co-authored-by: Evan Moon <[email protected]>
toss · Apr 16, 2024 · 73f221a · 73f221a
1 parent 07c7ff2
commit 73f221a
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 41 deletions.
diff --git a/.changeset/rotten-queens-wash.md b/.changeset/rotten-queens-wash.md
@@ -0,0 +1,5 @@
+---
+"es-hangul": patch
+---
+
+docs: nextra의 필요한 기능을 사용하고 문서를 간단명료하게 수정합니다
diff --git a/docs/src/pages/_meta.json b/docs/src/pages/_meta.json
@@ -8,6 +8,6 @@
   },
   "docs": {
     "type": "page",
-    "title": "Docs"
+    "title": "문서보기"
   }
 }
diff --git a/docs/src/pages/docs/_meta.json b/docs/src/pages/docs/_meta.json
@@ -1,6 +1,10 @@
 {
-  "introduction": "es-hangul 이야기",
+  "introduction": "소개",
   "installation": "설치하기",
-  "features": "기술적 특징",
-  "api": "API"
+  "api": {
+    "title": "API",
+    "theme": {
+      "collapsed": false
+    }
+  }
 }
diff --git a/docs/src/pages/docs/features.mdx b/docs/src/pages/docs/features.mdx
diff --git a/docs/src/pages/docs/introduction.mdx b/docs/src/pages/docs/introduction.mdx
@@ -1,24 +1,42 @@
-# 소개
+import { Steps, Callout } from 'nextra/components';
 
-한글을 다루는 제품을 개발할 때, 초성 검색, 정확한 조사 붙이기와 같은 작업을 수행해야 할 경우가 많습니다. 그 외로 초성, 중성, 종성 등의 한글을 분리하거나 결합해야 하는 경우도 있죠. `es-hangul` 은 이렇게 비즈니스에서 반복적으로 발생하는 한글 관련한 기능을 쉽고 빠르게 구현할 수 있도록 돕습니다.
+# es-hangul 소개
+
+[![npm version](https://img.shields.io/npm/v/es-hangul?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/es-hangul)
+[![npm](https://img.shields.io/npm/dm/es-hangul?color=000&labelColor=000)](https://www.npmjs.com/package/es-hangul)
+
+한글을 다루는 제품을 개발할 때, 초성 검색, 정확한 조사 붙이기와 같은 작업을 수행해야 할 경우가 많습니다. 그 외로 초성, 중성, 종성 등의 한글을 분리하거나 결합해야 하는 경우도 있죠. `es-hangul`은 이렇게 비즈니스에서 반복적으로 발생하는 한글 관련한 기능을 쉽고 빠르게 구현할 수 있도록 돕습니다.
 
 <br />
 
-## 특징
+## 어떤 이유로 사용하나요?
 
-1. **크기**: 한글을 다루는 데에 필요한 최소한의 코드를 제공함으로써, 사용자가 내려받는 JavaScript의 크기를 줄일 수 있습니다. (전체 라이브러리가 Gzip 압축 기준 1KB 정도입니다.)
-2. **정확성**: 모든 함수는 테스트 코드로 검증되어 버전에 관계없이 정확한 기능을 제공합니다.
-3. **API**: 다양한 애플리케이션에서 편리하게 사용할 수 있는 현대적인 API를 제공합니다.
+<Steps>
 
-<br />
+### 가볍습니다 (Tree-shakable)
+
+ECMAScript Modules를 이용하여 사용하는 함수만 애플리케이션에 포함할 수 있습니다. 예를 들어, [`josa`](./api/josa) 함수를 사용하는 경우, 해당 함수와 연관된 로직만 애플리케이션에 포함됩니다.
+또한 한글을 다루는 데에 필요한 최소한의 코드를 제공함으로써, 사용자가 내려받는 JavaScript의 크기를 줄일 수 있습니다. (전체 라이브러리가 Gzip 압축 기준 1KB 정도입니다.)
+[![es-hangul's badge](https://deno.bundlejs.com/?q=es-hangul&badge=detailed)](https://bundlejs.com/?q=es-hangul)
+
+### 신뢰할 수 있습니다
+
+우리는 커버리지 100%를 목표로 모든 기능을 테스트하기 위해 노력하고 있습니다.
+[![codecov](https://codecov.io/gh/toss/es-hangul/branch/main/graph/badge.svg?token=토큰추가가필요합니다)](https://codecov.io/gh/toss/es-hangul)
+
+### TypeScript를 지원합니다
 
-## 사용 예시
+강력한 타입을 제공해 개발 단계에서 타입 오류를 쉽게 감지할 수 있습니다.
 
-### 초성 검색
+### 한글을 위한 모든 인터페이스를 제공하는 것을 목표합니다
 
-사용자의 입력으로 받은 문자열의 초성이 특정 단어에 포함되어 있는지 검사할 수 있습니다. 예를 들어, '라면'이라는 단어에 'ㄹㅁ'으로 시작하는 초성이 포함되어 있는지 확인할 수 있습니다.
+다양한 애플리케이션에서 편리하게 사용할 수 있는 [현대적인 API](./api/chosungIncludes)를 제공합니다.
 
-```tsx
+#### 초성 검색 ([chosungIncludes](./api/chosungIncludes))
+
+초성이 특정 단어에 포함되어 있는지 검사합니다. 예를 들어, '라면'이라는 단어가 'ㄹㅁ'으로 시작하는 초성을 포함하는지 쉽게 알 수 있습니다.
+
+```tsx /chosungIncludes/
 import { chosungIncludes } from 'es-hangul';
 
 const searchWord = '라면';
@@ -28,23 +46,23 @@ const result = chosungIncludes(searchWord, userInput);
 console.log(result); // true
 ```
 
-### 한글 문자열 분해
+#### 초/중/종성 분해 ([disassembleHangul](./api/disassembleHangul))
 
-주어진 한글 문자열을 초성, 중성, 종성으로 분해하여 배열 형태로 반환하는 기능입니다. 이를 통해 문자열을 더 세밀하게 분석하거나 수정할 수 있습니다.
+주어진 한글 문자열을 초성, 중성, 종성으로 분해하여 배열 형태로 반환해 문자열을 더 세밀하게 분석하거나 수정할 수 있습니다.
 
-```tsx
+```tsx /disassembleHangul/
 import { disassembleHangul } from 'es-hangul';
 
 const word = '안녕하세요';
 const disassembled = disassembleHangul(word);
 console.log(disassembled); // 'ㅇㅏㄴㄴㅕㅇㅎㅏㅅㅔㅇㅛ'
 ```
 
-### 자연스러운 조사 처리
+#### 조사 처리 ([josa](./api/josa))
 
-한글에서 동일한 단어라도 앞에 오는 단어에 따라 조사가 달라지는 경우가 많습니다. 단어의 마지막 글자가 받침이 있는지 여부에 따라 적절한 조사를 자동으로 선택할 수 있습니다.
+단어의 마지막 글자가 받침이 있는지 여부에 따라 적절한 조사를 자동으로 선택합니다.
 
-```tsx
+```tsx /josa/
 import { josa } from 'es-hangul';
 
 const word1 = '사과';
@@ -55,3 +73,11 @@ const word2 = '바나나';
 const sentence2 = josa(word2, '이/가') + ' 맛있습니다.';
 console.log(sentence2); // '바나나가 맛있습니다.'
 ```
+
+<Callout type="info">
+
+한글을 잘 다루기 위한 좋은 아이디어가 있다면 알려주세요 [GitHub Issue로 기능 제안하기](https://github.com/toss/es-hangul/issues/new?assignees=&labels=feature&projects=&template=feature_request.yml&title=%5BFeature%5D%3A)
+
+</Callout>
+
+</Steps>
diff --git a/docs/theme.config.tsx b/docs/theme.config.tsx
@@ -49,11 +49,13 @@ const config: DocsThemeConfig = {
     );
   },
   editLink: {
-    text: 'Edit this page on GitHub →',
+    text: '이 페이지를 수정하기 →',
   },
   feedback: {
-    content: 'Question? Give us feedback →',
-    labels: 'feedback',
+    content: '이 페이지를 피드백하기 →',
+  },
+  search: {
+    placeholder: '검색어를 입력하세요...',
   },
   sidebar: {
     titleComponent({ title, type }) {