Command Palette 검색 (Cmd+K) VS Code나 Raycast처럼 Cmd+K로 빠르게 검색할 수 있는 Command Palette를 구현했습니다. 사용한 라이브러리 cmdk - Command Palette 핵심 라이브러리 shadcn/ui의 CommandDialog, CommandInput, CommandList 컴포넌트 검색 로직 searchPosts() 함수에서 제목, 설명, 태그, 본문을 대소문자 무시로 검색합니다. 빌드 타임에 이미 메모리에 로드된 데이터를 사용하므로 비동기 처리나 디바운스가 필요 없습니다. 삽질: cmdk의 내장 필터 처음에는 검색어를 입력해도 결과가 표시되지 않는 문제가 있었습니다. 원인은 cmdk의 내장 필터가 CommandItem의 value 속성(slug)으로 매칭하기 때문이었습니다. 자체 검색 로직을 사용할 때는 반드시 shouldFilter={false}를 설정해야 합니다. 또한 shadcn의 CommandDialog 컴포넌트에 shouldFilter prop을 전달하도록 내부 수정이 필요했습니다. 키보드 단축키 useEffect로 Cmd+K / Ctrl+K 이벤트를 감지합니다. View Transitions API 페이지 전환 시 자연스러운 애니메이션을 위해 View Transitions API를 적용했습니다. 데이터 라우터 마이그레이션 React Router의 <Link viewTransition> prop은 데이터 라우터에서만 동작합니다. 기존 <BrowserRouter>에서 createBrowserRouter로 마이그레이션이 필요했습니다. Before: After: 겹침 현상 해결 기본 View Transition은 old 페이지와 new 페이지가 크로스페이드됩니다. 이때 아주 잠깐 두 페이지가 겹쳐 보이는 현상이 있었습니다. old 페이지는 즉시 사라지고, new 페이지만 페이드인하도록 수정했습니다. 100ms로 설정하니 빠르면서도 전환이 느껴지는 적절한 시간이었습니다. 다음 글에서는 컬러 테마 프리셋과 포스트 시리즈 기능을 다룹니다.