CommandPaletteTrigger
shellCommandPalette + Cmd+K 키보드 단축키 자동 바인딩.
컴포넌트 의존 관계
깊이
100%
사용법
이 컴포넌트는 전역 키보드 단축키(Cmd+K / Ctrl+K)를 자동으로 등록합니다. 앱 루트 레이아웃에 한 번만 배치하면 됩니다. 현재 페이지에서 Cmd+K를 눌러 직접 확인할 수 있습니다.
tsx
import { CommandPaletteTrigger } from "@reopt-ai/opt-ui";
const commands = [
{ id: "nav-home", label: "홈으로 이동", group: "네비게이션", shortcut: "G H" },
{ id: "nav-dashboard", label: "대시보드 열기", group: "네비게이션" },
{ id: "theme-dark", label: "다크 모드", group: "테마" },
];
// 앱 루트에 배치 — Cmd+K로 자동 열림
<CommandPaletteTrigger
commands={commands}
onSelect={(cmd) => console.log("선택:", cmd.label)}
/>테스트 커버리지
2026년 2월 4일4/4 통과
4성공
0실패
4전체
- 기본 상태에서 dialog가 닫혀있다
- Cmd+K로 palette를 연다
- Ctrl+K로 palette를 연다
- onSelect 콜백을 전달한다
CommandPaletteTrigger Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
commands* | Omit<Command, "action">[] | — | 커맨드 목록 |
onSelect | (command: Omit<Command, 'action'>) => void | — | 커맨드 선택 핸들러 |
Import
tsx
import { CommandPaletteTrigger } from "@reopt-ai/opt-ui";