컴포넌트
Kbd
키보드 단축키를 물리 키캡 모양으로 표시하는 컴포넌트. 조합키 배열을 받아 각 키를 키캡으로 렌더하고 '+' 구분자를 넣으며, Mac/Windows 플랫폼별 심볼(⌘⌥⇧⌃ 등)을 자동 매핑한다. 눌림 애니메이션 옵션으로 실제 물리 키보드 입력 감지, 마우스/터치/키보드 활성화, 자동 순환 재생 시 키캡이 눌리는 효과를 CSS transform으로 표현한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Kbd-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| keys | string[] | ["Ctrl", "Shift", "P"] | 표시할 키 배열 (예: ["Ctrl", "Shift", "P"]) |
| separator | string | "+" | 키 사이에 표시할 구분자 문자열 |
| size | "sm" | "md" | "lg" | "md" | 키캡 크기 프리셋 |
| platform | "auto" | "mac" | "win" | "auto" | 심볼 매핑 플랫폼. auto는 UA로 Mac 여부를 추정, mac은 ⌘⌥⇧⌃, win은 Ctrl/Alt/Win 텍스트 |
| pressAnimation | boolean | true | 눌림 애니메이션 및 키캡 인터랙션 활성화 여부 |
| listenPhysical | boolean | false | 실제 물리 키보드 입력을 감지하여 해당 키캡을 눌린 것처럼 표시 (pressAnimation true일 때만 동작) |
| autoPlay | boolean | false | 데모용 자동 순환 눌림 재생 |
| ariaLabel | string | 키 조합으로 자동 생성 | 접근성 라벨 (미지정 시 키 조합으로 자동 생성) |