검색·이동·실행을 키보드만으로 끝내는 명령 팔레트
한 줄 요약
K로 열어 퍼지 검색 + 키보드 네비로 명령을 실행하는 팔레트.
이럴 때 필요해요
메뉴가 깊어질수록 마우스 탐색이 느려지죠. 파워 유저가 키보드만으로 어느 페이지든 가고 액션을 실행하게 해줍니다.
어떻게 동작하나
전역 keydown으로 K 토글
검색어로 평면 필터 후 그룹 렌더
로 평면 인덱스 순환, 실행, 활성 항목 scrollIntoView.
놓치기 쉬운 것
K 기본 동작 preventDefault 필수 / 키보드 선택과 마우스 hover 상태 동기화 / aria-activedescendant로 포커스는 입력에 둔 채 활성 항목만 가리키기 / 검색어 바뀌면 활성 인덱스 리셋.
import type { Metadata } from "next";
import { CommandPaletteDemo } from "./-components/CommandPaletteDemo";
export const metadata: Metadata = {
title: "Command 팔레트 ⌘K (데모)",
description:
"⌘K로 여는 검색 명령 팔레트. 키보드 네비(↑↓↵)·퍼지 필터·그룹·ARIA combobox/listbox. 오버레이가 필요해 임베드 높이 고정.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
// 오버레이(fixed)가 표시될 세로 공간이 필요해 임베드 높이 고정
<main
data-demo-embed-fixed="560"
className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-violet-50 via-white to-fuchsia-50/60"
>
<CommandPaletteDemo />
</main>
);
}