feat: chosungIncludes 메서드를 문서에서 바로 사용해볼 수 있는 데모를 만듭니다. (#102)

* chosungIncludes페이지 데모 만들기 * remove unnecessary file * Update docs/src/components/demo/chosung-includes-demo.tsx Co-authored-by: Jonghyeon Ko <[email protected]> * Update docs/src/pages/docs/api/chosungIncludes.ko.mdx Co-authored-by: Jonghyeon Ko <[email protected]> * Update docs/src/pages/docs/api/chosungIncludes.en.mdx Co-authored-by: Jonghyeon Ko <[email protected]> * linting * remove useEffect in import statement * chore: remove unnecessary mdx title * light모드 대응하기: * change ^ => * --------- Co-authored-by: Jonghyeon Ko <[email protected]> Co-authored-by: Jonghyeon Ko <[email protected]>
toss · May 25, 2024 · 56fa610 · 56fa610
1 parent 48ce65f
commit 56fa610
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 7 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -10,6 +10,7 @@
  "start": "next start"
  },
  "dependencies": {
+ "es-hangul": "workspace:*",
  "next": "14.1.4",
  "nextra": "^2.13.4",
  "nextra-theme-docs": "^2.13.4",

diff --git a/docs/src/components/demo/chosung-includes-demo.tsx b/docs/src/components/demo/chosung-includes-demo.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { chosungIncludes } from 'es-hangul';
+
+export function ChosungIncludesDemo() {
+ const [searchWord, setSearchWord] = useState<string>('홍길동');
+ const [userInput, setUserInput] = useState<string>('ㅎㄱㄷ');
+
+ const result = chosungIncludes(searchWord, userInput);
+
+ return (
+ <div className="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-md mx-auto my-8">
+ <div className="mb-4">
+ <label htmlFor="searchWord" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+ Search Word
+ </label>
+ <input
+ id="searchWord"
+ type="text"
+ placeholder="Enter search word"
+ value={searchWord}
+ onChange={e => setSearchWord(e.target.value)}
+ className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300"
+ />
+ </div>
+ <div className="mb-4">
+ <label htmlFor="userInput" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+ User Input
+ </label>
+ <input
+ id="userInput"
+ type="text"
+ placeholder="Enter user input"
+ value={userInput}
+ onChange={e => setUserInput(e.target.value)}
+ className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300"
+ />
+ </div>
+ {result !== null && (
+ <p
+ className={`mt-4 text-lg ${result ? 'text-green-500 dark:text-green-400' : 'text-red-500 dark:text-red-400'}`}
+ >
+ Result: {result ? 'Match found' : 'No match'}
+ </p>
+ )}
+ </div>
+ );
+}
diff --git a/.../src/pages/docs/api/chosungIncludes.en.md → ...src/pages/docs/api/chosungIncludes.en.mdx b/.../src/pages/docs/api/chosungIncludes.en.md → ...src/pages/docs/api/chosungIncludes.en.mdx
@@ -1,6 +1,4 @@
----
-title: chosungIncludes
----
+import { ChosungIncludesDemo } from '@/components/demo/chosung-includes-demo';
 
 # chosungIncludes
 
@@ -21,3 +19,9 @@ chosungIncludes('00프론트엔드', 'ㅍㄹㅌ'); // true
 chosungIncludes('프론트엔드', 'ㅍㅌ'); // false
 chosungIncludes('프론트엔드', '푸롴트'); // false
 ```
+
+## Demo
+
+<br />
+
+<ChosungIncludesDemo />
diff --git a/.../src/pages/docs/api/chosungIncludes.ko.md → ...src/pages/docs/api/chosungIncludes.ko.mdx b/.../src/pages/docs/api/chosungIncludes.ko.md → ...src/pages/docs/api/chosungIncludes.ko.mdx
@@ -1,6 +1,4 @@
----
-title: chosungIncludes
----
+import { ChosungIncludesDemo } from '@/components/demo/chosung-includes-demo';
 
 # chosungIncludes
 
@@ -21,3 +19,9 @@ chosungIncludes('00프론트엔드', 'ㅍㄹㅌ'); // true
 chosungIncludes('프론트엔드', 'ㅍㅌ'); // false
 chosungIncludes('프론트엔드', '푸롴트'); // false
 ```
+
+## 사용해보기
+
+<br />
+
+<ChosungIncludesDemo />
diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
+ darkMode: 'class',
  content: [
  './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
  './src/components/**/*.{js,ts,jsx,tsx,mdx}',

diff --git a/yarn.lock b/yarn.lock
@@ -3787,6 +3787,7 @@ __metadata:
  "@types/react": "npm:^18"
  "@types/react-dom": "npm:^18"
  autoprefixer: "npm:^10.0.1"
+ es-hangul: "workspace:*"
  eslint: "npm:^8"
  eslint-config-next: "npm:14.1.4"
  next: "npm:14.1.4"
@@ -4003,7 +4004,7 @@ __metadata:
  languageName: node
  linkType: hard
 
-"es-hangul@workspace:.":
+"es-hangul@workspace:*, es-hangul@workspace:.":
  version: 0.0.0-use.local
  resolution: "es-hangul@workspace:."
  dependencies: