OS별 차이(⌘ ↔ Ctrl)를 자동 매칭하는 단축키 훅으로 만든 커맨드 팔레트 데모
LinearRaycast 류의 +K 커맨드 팔레트가 표준 UX가 됐습니다. 직접 구현하면 modifier 검사OS별 분기input 포커스 중 발화 정책 등 잔손이 많이 갑니다. 이 훅은 useKeyPress("k", handler, { mod: true }) 한 줄로 OS별 차이를 자동 매칭합니다(mod는 macOS에선 metaKey, 그 외에선 ctrlKey). meta/ctrl/shift/alt도 명시 가능하고, fireInsideInput 옵션으로 input/textarea/contenteditable 안에서의 발화 여부를 제어합니다. handler는 ref로 wrap해서 매 렌더의 stale closure 문제도 차단했습니다.
데모는 /Ctrl+K로 명령 팔레트를 열고, /로 빠른 검색, ESC로 닫기까지 한 페이지에 묶어 실제 제품에서 단축키 묶음이 어떤 모습인지 보여줍니다.
import type { Metadata } from "next";
import { UseKeyPressDemo } from "./-components/UseKeyPressDemo";
export const metadata: Metadata = {
title: "useKeyPress — 키보드 단축키 훅 (데모)",
description: "modifier 조합·OS별 차이(⌘↔Ctrl) 자동 처리되는 useKeyPress 훅의 라이브 시연 (커맨드 팔레트).",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="min-h-[100dvh] bg-white flex items-center justify-center">
<UseKeyPressDemo />
</main>
);
}