Sidebar 개발

1. 구글에서 shadcn-ui 로 사이드바 개발하는 방법을 검색

2. 검색 결과에 있는 유튜브 튜토리얼 영상 시청

3. 유튜버가 command 컴포넌트를 사용하는 것을 발견

   1. https://www.youtube.com/watch?v=mju7e6Cf6Nk

4. npx shadcn-ui add command 명령어 실행

5. pakcage.json 에 cmdk 라는 라이브러리가 설치되는 것을 확인

   import { Command as CommandPrimitive } from "cmdk"

6. cmdk 라이브러리에 대해서 조사

1. https://github.com/pacocoursey/cmdk

2. 맥에서 Command + k 키 누르면 모달로 뜨는 검색창 라이브러리

3. 사용방법은 위 깃허브 링크에서 확인

4. Command + K 키를 눌렀을때 검색창이 뜨게 하는 기능을 구현하려면 keydown 이벤트 감지가 필요하다는 것을 알게됨

5. 위 링크에는 자바스크립트 코드라서 타입 정의에 대한 안내가 없음

6. 처음에는 e 타입이 React.KeyboardEvent 인줄 알았음

7. 하지만 그렇게 하면 타입 에러가 발생

8. 그냥 KeyboardEvent 타입을 사용해야함

     React.useEffect(() => {
       const down = (e: KeyboardEvent) => {
         if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
           e.preventDefault();
           setOpen((open) => !open);
         }
       };
   
       document.addEventListener("keydown", down);
       return () => document.removeEventListener("keydown", down);
     }, []);
   

9. React.KeyboardEvent 와 KeyboardEvent 는 다른 타입

   1. React.KeyboardEvent 가 내부적으로 NativeKeyboardEvent KeyboardEvent 타입을 상속하고 있지만 제네릭으로 사용하고 있어서 순수 KeyboardEvent 타입과 같지는 않음

10. CommandDialog 컴포넌트가 모달 역할 수행

    <CommandDialog open={open} onOpenChange={setOpen}>

    1. Dialog 컴포넌트는 현재 사용중이지 않으므로

    2. components/ui/dialog.tsx 파일 제거하고 components/ui/command.tsx 파일에서 Dialog 관련 코드는 모두 제거

11. 사이드바 UI 구축