docs: 타입적으로 es-hangul의 강점을 보여줄 수 있는 타입 지원 페이지를 만듭니다. (#288)

* type support table * video 추가 * 상수를 컴포넌트 내부 변수로 스코프 이동 * introduction에 타입 지원 링크 추가 * en docs에도 타입 지원 문서 링크를 추가합니다 * 표에 적힌 '기능'을 '라이브러리'로 변경합니다 * video controller 제거 * table만 스크롤되게 변경
toss · Nov 21, 2024 · a1ac323 · a1ac323
1 parent 06a6e1c
commit a1ac323
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 15 deletions.
diff --git a/docs/public/videos/type_support.mp4 b/docs/public/videos/type_support.mp4
diff --git a/...es/docs/technical/benchmark-bar-chart.tsx → ...s/docs/advantages/benchmark-bar-chart.tsx b/...es/docs/technical/benchmark-bar-chart.tsx → ...s/docs/advantages/benchmark-bar-chart.tsx
diff --git a/...src/pages/docs/technical/benchmark.en.mdx → ...rc/pages/docs/advantages/benchmark.en.mdx b/...src/pages/docs/technical/benchmark.en.mdx → ...rc/pages/docs/advantages/benchmark.en.mdx
diff --git a/...src/pages/docs/technical/benchmark.ko.mdx → ...rc/pages/docs/advantages/benchmark.ko.mdx b/...src/pages/docs/technical/benchmark.ko.mdx → ...rc/pages/docs/advantages/benchmark.ko.mdx
@@ -6,8 +6,8 @@ import BenchmarkBarChart from './benchmark-bar-chart.tsx';
 
 # ⚡ 빠른 한글 처리 라이브러리
 
-`es-hangul`은 **한글 조합** 및 **분해** 같은 복잡한 작업을 놀라운 속도로 수행하는 **최고의 성능**을 자랑합니다.<br/>
-다른 라이브러리와의 벤치마크 테스트 결과, `es-hangul`이 **압도적으로 빠른 성능**을 보여주었습니다
+`es-hangul`은 **한글 조합** 및 **분해** 같은 복잡한 작업을 놀라운 속도로 수행하는 **최고의 성능**을 자랑합니다.<br />
+다른 라이브러리와의 벤치마크 테스트 결과, `es-hangul`이 **압도적으로 빠른 성능**을 보여주었습니다.
 
 <br />
 <br />

diff --git a/docs/src/pages/docs/advantages/type-support-table.tsx b/docs/src/pages/docs/advantages/type-support-table.tsx
@@ -0,0 +1,114 @@
+type Locale = 'ko' | 'en';
+
+interface TypeSupportTableProps {
+  locale: Locale;
+}
+
+export default function TypeSupportTable({ locale }: TypeSupportTableProps) {
+  const isKorean = locale === 'ko';
+  const fully = isKorean ? '100% 지원' : '100% Supported';
+  const partial = isKorean ? '일부 지원' : 'Partially Supported';
+  const unsupported = isKorean ? '미지원' : 'Unsupported';
+
+  return (
+    <div>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+          <caption className="caption-top text-sm">
+            {isKorean
+              ? 'es-hangul, josa, hangul-js의 타입 시스템 비교'
+              : 'Comparison of the type systems of es-hangul, josa, and hangul-js'}
+          </caption>
+
+          <thead className="text-xs text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+              <th scope="col" className="px-6 py-3">
+                {isKorean ? '라이브러리' : 'Library'}
+              </th>
+              <th scope="col" className="px-6 py-3">
+                es-hangul
+              </th>
+              <th scope="col" className="px-6 py-3">
+                josa
+              </th>
+              <th scope="col" className="px-6 py-3">
+                hangul-js
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+              <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                {isKorean ? '개발 언어' : 'Language'}
+              </th>
+              <td className="px-6 py-4">TypeScript</td>
+              <td className="px-6 py-4">JavaScript</td>
+              <td className="px-6 py-4">JavaScript</td>
+            </tr>
+            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+              <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                {isKorean ? 'TypeScript 지원 여부' : 'TypeScript support status'}
+              </th>
+              <td className="px-6 py-4">✅ ({fully})</td>
+              <td className="px-6 py-4">
+                ⚠️ (
+                <a className="text-gray-400" href="https://www.npmjs.com/package/@types/josa" target="_blank">
+                  {isKorean ? '서드파티 제공' : 'Supported by third-party'}
+                </a>
+                )
+              </td>
+              <td className="px-6 py-4">⚠️ ({partial})</td>
+            </tr>
+
+            <tr className="bg-white dark:bg-gray-800">
+              <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                {isKorean ? '강력한 타입 시스템 제공' : 'Provide a strong type system'}
+              </th>
+              <td className="px-6 py-4">✅ ({fully})</td>
+              <td className="px-6 py-4">⚠️ ({partial})</td>
+              <td className="px-6 py-4">⚠️ ({partial})</td>
+            </tr>
+
+            <tr className="bg-white dark:bg-gray-800">
+              <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                {isKorean ? '명확한 입력/출력 타입 제공' : 'Offer clear input/output types'}
+              </th>
+              <td className="px-6 py-4">✅ ({fully})</td>
+              <td className="px-6 py-4">⚠️ ({partial})</td>
+              <td className="px-6 py-4">❌ ({unsupported})</td>
+            </tr>
+
+            <tr className="bg-white dark:bg-gray-800">
+              <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                {isKorean ? '주기적인 타입 업데이트' : 'Regular type updates'}
+              </th>
+              <td className="px-6 py-4">✅ ({fully})</td>
+              <td className="px-6 py-4">❌ ({unsupported})</td>
+              <td className="px-6 py-4">❌ ({unsupported})</td>
+            </tr>
+
+            <tr className="bg-white dark:bg-gray-800">
+              <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                {isKorean ? 'IDE 자동 완성 지원' : 'Support IDE auto-completion'}
+              </th>
+              <td className="px-6 py-4">✅ ({fully})</td>
+              <td className="px-6 py-4">⚠️ ({partial})</td>
+              <td className="px-6 py-4">❌ ({unsupported})</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <figure className="mt-12">
+        <figcaption className="mt-2 text-sm text-center text-gray-500">
+          {isKorean ? 'es-hangul의 강력한 타입 시스템' : 'The powerful type system of es-hangul'}
+        </figcaption>
+
+        <video className="rounded-lg" width="100%" autoPlay muted preload="metadata" loop>
+          <source src="/videos/type_support.mp4" type="video/mp4"></source>
+        </video>
+      </figure>
+    </div>
+  );
+}
diff --git a/docs/src/pages/docs/advantages/type-support.en.mdx b/docs/src/pages/docs/advantages/type-support.en.mdx
@@ -0,0 +1,16 @@
+---
+title: type support
+---
+
+import TypeSupportTable from './type-support-table.tsx';
+
+# 💪 Powerful Type Support
+
+Existing libraries that handled Hangul lacked type support, preventing you from fully enjoying the benefits of type safety. `es-hangul` is written in TypeScript, providing a powerful type system.<br />
+This enhances code safety and maintainability while preventing errors that may occur during the development process. Additionally, using `es-hangul` clearly defines function input and output types, improving code readability and boosting development efficiency through IDE auto-completion features.<br />
+Choose `es-hangul` for stable and efficient Hangul processing!
+
+<br />
+<br />
+
+<TypeSupportTable locale="en" />
diff --git a/docs/src/pages/docs/advantages/type-support.ko.mdx b/docs/src/pages/docs/advantages/type-support.ko.mdx
@@ -0,0 +1,16 @@
+---
+title: type support
+---
+
+import TypeSupportTable from './type-support-table.tsx';
+
+# 💪 강력한 타입 지원
+
+기존에 한글을 다루던 라이브러리들은 타입 지원이 부족하여 타입 안전성에서 오는 이점을 완벽히 누릴 수 없었습니다. `es-hangul`은 **TypeScript**로 작성되어 강력한 타입 시스템을 제공합니다.<br />
+이는 코드의 안전성과 유지보수성을 향상시키며, 개발 과정에서 발생할 수 있는 오류를 사전에 방지합니다. 또한 `es-hangul`을 사용하면 함수의 입력과 출력 타입이 명확하게 정의되어 코드의 가독성이 높아지고, IDE의 자동 완성 기능을 통해 개발 효율이 향상됩니다.<br />
+안정적이고 효율적인 한글 처리를 위해 `es-hangul`을 선택하세요!
+
+<br />
+<br />
+
+<TypeSupportTable locale="ko" />
diff --git a/docs/src/pages/docs/introduction.en.mdx b/docs/src/pages/docs/introduction.en.mdx
@@ -8,6 +8,7 @@ import { Adopters } from '@/components/introduction/Adopters';
 When developing products that handle Hangul, tasks such as initial consonant search and accurate particle attachment often need to be performed. In addition, there are cases where you need to separate or combine Hangul elements like initial consonants, vowels, and final consonants. es-hangul helps to easily and quickly implement these frequently occurring Hangul-related functions in business.
 
 es-hangul provides an interface for complex Hangul string processing, including extraction and conversion of initial, medial, and final consonants. By combining the functions of es-hangul with basic JavaScript methods, you can handle all cases of Hangul string processing.
+
 <br />
 
 ## Key features
@@ -28,7 +29,7 @@ We strive to test all features with the goal of achieving 100% coverage.
 
 ### TypeScript Support
 
-Our library provides strong typing, allowing for easy detection of type errors during the development phase.
+Our library [provides strong typing](./advantages/type-support), allowing for easy detection of type errors during the development phase.
 
 ### Full Support for Hangul-related Features
 
@@ -48,11 +49,10 @@ const result = getChoseong(searchWord); // ㄹㅁ
 
 // Check if the 'choseong' of the search word match the user input
 if (result === userInput) {
-  something()
+  something();
 }
 ```
 
-
 #### Disassembling Hangul Characters ([disassemble](./api/disassemble))
 
 You can decompose a given Hangul string into initial consonants, vowels, and final consonants, and return it in array form to allow for more detailed analysis or modification of the string.
@@ -81,12 +81,10 @@ const sentence2 = josa(word2, '이/가') + ' 맛있습니다.';
 console.log(sentence2); // '바나나가 맛있습니다.'
 ```
 
-### Fast 
-
+### Fast
 
 es-hangul boasts **top-notch performance**, efficiently handling complex tasks such as Korean character composition and decomposition with incredible speed.
-[Benchmark tests]('./technical/benchmark') against other libraries have shown that es-hangul delivers **overwhelmingly superior performance**.
-
+[Benchmark tests]('./advantages/benchmark') against other libraries have shown that es-hangul delivers **overwhelmingly superior performance**.
 
 <Callout type="info">
 

diff --git a/docs/src/pages/docs/introduction.ko.mdx b/docs/src/pages/docs/introduction.ko.mdx
@@ -9,6 +9,7 @@ import { Adopters } from '@/components/introduction/Adopters';
 한글을 다루는 제품을 개발할 때, 초성 검색, 정확한 조사 붙이기와 같은 작업을 수행해야 할 경우가 많습니다. 그 외로 초성, 중성, 종성 등의 한글을 분리하거나 결합해야 하는 경우도 있죠. `es-hangul`은 이렇게 비즈니스에서 반복적으로 발생하는 한글 관련한 기능을 쉽고 빠르게 구현할 수 있도록 돕습니다.
 
 `es-hangul`은 초, 중, 종성 추출과 변환 등 복잡한 한글 문자열 처리를 위한 인터페이스를 제공합니다. `es-hangul`의 기능과 JavaScript 기본 메소드를 조합하면 모든 케이스의 한글 문자열 처리를 기대할 수 있습니다.
+
 <br />
 
 ## 어떤 이유로 사용하나요?
@@ -28,7 +29,7 @@ ECMAScript Modules를 이용하여 사용하는 함수만 애플리케이션에
 
 ### TypeScript를 지원합니다
 
-강력한 타입을 제공해 개발 단계에서 타입 오류를 쉽게 감지할 수 있습니다.
+[강력한 타입을 제공](./advantages/type-support)해 개발 단계에서 타입 오류를 쉽게 감지할 수 있습니다.
 
 ### 한글을 위한 모든 인터페이스를 제공하는 것을 목표합니다
 
@@ -48,7 +49,7 @@ const result = getChoseong(searchWord); // ㄹㅁ
 
 // 검색어의 초성과 사용자 입력 초성이 일치하는지 확인
 if (result === userInput) {
-  something()
+  something();
 }
 ```
 
@@ -80,13 +81,10 @@ const sentence2 = josa(word2, '이/가') + ' 맛있습니다.';
 console.log(sentence2); // '바나나가 맛있습니다.'
 ```
 
-
 ### 매우 빠릅니다
 
 `es-hangul`은 **한글 조합** 및 **분해** 같은 복잡한 작업을 놀라운 속도로 수행하는 **최고의 성능**을 자랑합니다.<br/>
-다른 라이브러리와의 [벤치마크](./technical/benchmark) 테스트 결과, `es-hangul`이 **압도적으로 빠른 성능**을 보여주었습니다
-
-
+다른 라이브러리와의 [벤치마크](./advantages/benchmark) 테스트 결과, `es-hangul`이 **압도적으로 빠른 성능**을 보여주었습니다
 
 <Callout type="info">