shadcn command 사용 방법

전체 코드

  <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandList>
            <CommandInput placeholder="Search store..." />
            <CommandEmpty>No store found</CommandEmpty>
            <CommandGroup heading="Stores">
              {formattedItems.map((store) => (
                <CommandItem
                  key={store.value}
                  onSelect={() => onStoreSelect(store)}
                  className="text-sm"
                >
                  <StoreIcon className="mr-2 h-4 w-4" />
                  {store.label}
                  <Check
                    className={cn(
                      "ml-auto h-4 w-4",
                      currentStore?.value === store.value
                        ? "opacity-100"
                        : "opacity-0"
                    )}
                  />
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
          <CommandSeparator />
          <CommandList>
            <CommandGroup>
              <CommandItem
                onSelect={() => {
                  setOpen(false);
                  storeModal.onOpen();
                }}
              >
                <PlusCircle className="mr-2 h-5 w-5" />
                Create Store
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
</PopoverContent>

전체 Command 컴포넌트를 감싸는 컨테이너

<Command>

명령 항목들의 리스트를 포함

<CommandList>

검색 입력 필드

<CommandInput>

검색 결과가 없을 때 표시될 내용

<CommandEmpty>

관련 명령 항목들을 그룹화

<CommandGroup>

개별 명령 항목

<CommandItem>

명령 그룹 사이의 구분선

<CommandSeparator>

기본 사용법

<Command>
  <CommandList>
    <CommandInput placeholder="Search store..." />
    <CommandEmpty>No store found</CommandEmpty>
    <CommandGroup heading="Stores">
      {/* CommandItem들 */}
    </CommandGroup>
  </CommandList>
  <CommandSeparator />
  <CommandList>
    <CommandGroup>
      {/* 추가 CommandItem */}
    </CommandGroup>
  </CommandList>
</Command>

CommandItem 사용법

• key : 각 항목의 고유 식별자
• onSelect : 항목 선택 시 실행될 함수
• className : 스타일링을 위한 클래스

<CommandItem
  key={store.value}
  onSelect={() => onStoreSelect(store)}
  className="text-sm"
>
  <StoreIcon className="mr-2 h-4 w-4" />
  {store.label}
  <Check
    className={cn(
      "ml-auto h-4 w-4",
      currentStore?.value === store.value
        ? "opacity-100"
        : "opacity-0"
    )}
  />
</CommandItem>