문서 메인페이지 디자인을 변경하고, 내용을 개선합니다

toss · Apr 4, 2024 · 39ae0bf · 39ae0bf
1 parent 32664b1
commit 39ae0bf
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 54 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "jest.outputConfig": {
+    "revealOn": "run",
+    "revealWithFocus": "test-results",
+    "clearOnRun": "none"
+  }
+}
diff --git a/docs/src/pages/docs/story.mdx b/docs/src/pages/docs/story.mdx
@@ -2,6 +2,21 @@
 
 es-hangul은 한글의 복잡한 특성을 이해하고 처리하는 작업을 간소화하도록 설계된 JavaScript 라이브러리입니다. 한글의 구성 요소인 초성, 중성, 종성을 분리하거나 결합하는 과정이 개발자에게는 번거로운 작업이 될 수 있습니다. es-hangul은 이러한 과정을 단순화하여, 개발자가 한글 관련 기능을 쉽고 빠르게 구현할 수 있게 해줍니다. 예를 들어, 사용자의 입력을 초성 검색에 활용하거나, 정확한 조사를 붙여 자연스러운 문장을 생성하는 기능을 제공합니다. 이는 검색 엔진, 텍스트 에디터, 교육 플랫폼 등 다양한 분야에서 한글 처리의 정확도와 효율성을 높여줍니다. es-hangul을 사용함으로써, 복잡한 한글 처리 로직을 라이브러리에 위임하고, 개발자는 비즈니스 로직 개발에 더 집중할 수 있습니다.
 
+<br />
+
+# 특성
+
+1. 한국어 특성의 깊은 이해<br/>
+   한국어의 독특한 특성인 초성, 중성, 종성을 기반으로 한 문자열 처리 기능은 한국어 처리에 있어 높은 수준의 정확성과 효율성을 제공해줍니다.
+
+2. 문장을 자연스럽게 만드는 도구<br/>
+   유동적으로 조사 등을 선택할 수 있게 함에 따라 자연스러운 문장 형성을 도와줍니다.
+
+3. 다양한 애플리케이션<br/>
+   검색 엔진, 텍스트 에디터, 교육 플랫폼 등 다양한 종류의 애플리케이션에서 한글 처리를 위한 강력한 기능을 제공합니다.
+
+<br />
+
 # 사용 예시
 
 es-hangul 라이브러리를 활용하면 한글 처리를 위한 다양한 기능을 손쉽게 구현할 수 있습니다.<br/>

diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx
@@ -2,65 +2,57 @@
 title: es-hangul
 ---
 
-import { useIsDarkMode } from '@/hooks/use-is-dark-mode';
-import Image from 'next/image';
-import { useTheme } from 'nextra-theme-docs';
 import Link from 'next/link';
+import { Callout, useTheme, Steps } from 'nextra-theme-docs';
+
+<style jsx global>{`
+  body {
+    background-image: radial-gradient(#ddd 1px, transparent 0), radial-gradient(#ddd 1px, transparent 0);
+    background-position:
+      0 0,
+      20px 20px;
+    background-size: 40px 40px;
+  }
+  .dark body {
+    background-image: radial-gradient(#333 1px, transparent 0), radial-gradient(#333 1px, transparent 0);
+  }
+`}</style>
 
-export default function HomePage() {
-  const isDarkMode = useIsDarkMode();
-
-return (
-
-<div className="pb-20">
 <div className="flex flex-col items-center justify-center gap-8 pt-11 text-center">
-<Image src={isDarkMode ? '/logo-white.png' : '/logo.png'} alt="logo" width={400} height={241} />
-<span>{isDarkMode}</span>
-<div className="flex flex-col items-center gap-4">
-<div className="relative text-5xl font-bold">
-<br />
-<strong>한글을 다루는 모던한 방법</strong>
-</div>
-<br />
-<p className="text-3xl">
-한글을 쉽고, 선언적으로 다룰 수 있는 도구들을 제공합니다.
-<br />
-반복적이고 복잡한 부분은 es-hangul에 위임한 뒤, 비즈니스에 집중할 수 있습니다.
-</p>
-</div>
-<div className="flex gap-4"></div>
+  <h1 className="text-center font-extrabold md:text-5xl mt-8">이에스-한글</h1>
+  <div className="flex flex-col items-center gap-4">
+    <div className="relative text-3xl">
+      <h3 className="">한글을 다루는 모던한 방법</h3>
+    </div>
+    <Callout className="w-full">
+      한글을 쉽고, 선언적으로 다룰 수 있는 도구들을 제공합니다. 반복적이고 복잡한 부분은 es-hangul에 위임한 뒤,
+      비즈니스에 집중할 수 있습니다.
+    </Callout>
+  </div>
 </div>
 
-      <div className="h-14"></div>
-      <div className="flex flex-col items-start justify-between gap-8 md:flex-row">
-        {FEATURE_ITEMS.map(({ title, description }) => (
-          <div key={title} className="flex flex-1 flex-col items-center justify-center gap-3 text-center">
-            <div className="text-xl font-bold">{title}</div>
-            <p className="text-lg">{description}</p>
-          </div>
-        ))}
-      </div>
+```tsx
+import { chosungIncludes } from 'es-hangul';
 
-            <div className="h-14"></div>
-      <Link href="/docs/story" className='flex justify-end no-underline'> <button className="rounded-xl bg-gray-800 px-16 py-5 text-xl font-bold dark:text-gray-100">API 바로가기</button></Link>
-    </div>
+const searchWord = '라면';
+const userInput = 'ㄹㅁ';
+
+const result = chosungIncludes(searchWord, userInput);
+console.log(result); // true
+```
+
+```tsx
+import { josa } from 'es-hangul';
 
-);
-}
+const word1 = '사과';
+const sentence1 = josa(word1, '을/를') + ' 먹었습니다.';
+console.log(sentence1); // '사과를 먹었습니다.'
 
-export const FEATURE_ITEMS = [
-  {
-    title: '한국어 특성의 깊은 이해',
-    description:
-      '한국어의 독특한 특성인 초성, 중성, 종성을 기반으로 한 문자열 처리 기능은 한국어 처리에 있어 높은 수준의 정확성과 효율성을 제공해줍니다.',
-  },
-  {
-    title: '문장을 자연스럽게 만드는 도구',
-    description: '유동적으로 조사 등을 선택할 수 있게 함에 따라 자연스러운 문장 형성을 도와줍니다.',
-  },
-  {
-    title: '다양한 애플리케이션',
-    description:
-      '검색 엔진, 텍스트 에디터, 교육 플랫폼 등 다양한 종류의 애플리케이션에서 한글 처리를 위한 강력한 기능을 제공합니다.',
-  },
-];
+const word2 = '바나나';
+const sentence2 = josa(word2, '이/가') + ' 맛있습니다.';
+console.log(sentence2); // '바나나가 맛있습니다.'
+```
+
+<div className="mt-16 mb-20 text-center">
+  [Get Started](/docs/story) · [API](/docs/api/josa) · [GitHub Repository](https://github.com/toss/es-hangul)
+</div>