react-cji-keyboard

> React용 천지인 + 영문 + 숫자 + 기호 커스텀 키보드 컴포넌트

스마트폰 천지인 키보드를 웹에서도 사용할 수 있는 커스텀 키보드입니다.

src="https://github.com/user-attachments/assets/0231541c-2411-4300-b808-7713dbdd089c" />

src="https://github.com/user-attachments/assets/42c1af70-4277-4243-ae80-aee095e590ee" />

src="https://github.com/user-attachments/assets/403f90e3-4f7d-47c5-adf4-8b7bc227d64a" />

---

설치

``bash
npm install react-cji-keyboard


또는

`tsx
import { useState } from "react";
import CheonjiinKeyboard from "cheonjiin-keyboard";
import "cheonjiin-keyboard/style.css"; // ★ 기본 CSS

function App() {
const [value, setValue] = useState("");

return (


export default App;
`

> CheonjiinKeyboard 내부에서 입력 상태를 관리하고,
> onChange(text: string) 로 최종 문자열을 계속 전달합니다.

---

컴포넌트 API

$3

`ts
type CheonjiinKeyboardProps = {
/**
* 키보드 입력이 변경될 때마다 호출됩니다.
* 한글/영문/숫자/기호를 모두 포함한 전체 문자열이 넘어옵니다.
*/
onChange?: (text: string) => void;
};
`

#### onChange

- 키 하나 입력할 때마다 호출됩니다.
- 천지인 조합(예: ㄷ + ㅣ + · + · → "댜") 이 완료되면
조합된 문자열 전체("댜")가 포함된 텍스트가 인자로 넘어옵니다.
- 일반적으로 상위 컴포넌트에서 useState로 관리하면서 textarea, input 등에 바인딩해서 사용합니다.


---

스타일 커스터마이징

기본 스타일은 style.css 에 정의된 CSS 클래스 기반입니다.
프로젝트에서 같은 클래스 이름을 다시 정의하면 손쉽게 테마를 변경할 수 있습니다.

$3

- .cheon-keyboard – 키보드 전체 래퍼
- .cheon-grid – 5열(또는 4열) 그리드 레이아웃
- .cheon-grid--english – 영문 모드에서 4열 그리드
- .cheon-key – 기본 키 스타일
- .cheon-key--func – 기능 키 (한/영, 123, 기호, 백스페이스 등)
- .cheon-key--space – 스페이스 키
- .cheon-key--enter – 엔터 키
- .cheon-key--empty – 비워두는 자리용 키

$3

`css
/ global.css 또는 App 전체에 적용되는 CSS에서 /
.cheon-keyboard {
background: #020617;
padding: 12px;
border-radius: 16px 16px 0 0;
}

/ 모든 키 공통 스타일 /
.cheon-key {
background: #111827;
color: #e5e7eb;
border-radius: 10px;
border: 1px solid #1f2937;
font-size: 16px;
}

/ 기능 키(한/영, 123, 기호, 백스페이스 등) 강조 /
.cheon-key--func {
background: #1f2937;
color: #f9fafb;
}

/ 스페이스바 크게/연하게 /
.cheon-key--space {
background: #0f172a;
color: #e5e7eb;
font-size: 14px;
}
`

이렇게 하면 라이브러리 기본 스타일 위에 덮어씌워져,
레이아웃 구조는 그대로 유지하면서 색감/테마만 바꿀 수 있습니다.

$3

Tailwind 같은 걸 쓴다고 가정했을 때:

`tsx
import CheonjiinKeyboard from "cheonjiin-keyboard";
import "cheonjiin-keyboard/style.css";

function BottomSheetKeyboard({ open, value, onChange }) {
return (
className={fixed inset-x-0 bottom-0 transition-transform duration-200
${open ? "translate-y-0" : "translate-y-full"}}
>