shadcn Popover 컴포넌트 사용법

전체 코드

    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          size="sm"
          role="combobox"
          aria-expanded={open}
          aria-label="Select a store"
          className={cn("w-[200px justify-between", className)}
        >
          <StoreIcon className="mr-2 h-4 w-4" />
          {currentStore?.label}
          <ChevronsUpDown className="ml-auto h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <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>
    </Popover>

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

<Popover>

Popover를 열고 닫는 트리거 요소

<PopoverTrigger>

Popover가 열렸을 때 표시되는 내용

<PopoverContent>

// 예시
<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
    {/* 트리거 요소 */}
  </PopoverTrigger>
  <PopoverContent>
    {/* Popover 내용 */}
  </PopoverContent>
</Popover>

속성

• open
  Popover의 열림/닫힘 상태를 제어
• onOpenChange
  Popover 상태가 변경될 때 호출되는 함수
• asChild
  PopoverTrigger에 사용되며, 자식 요소를 트리거로 사용할 수 있게 한다.

트리거 요소 커스터마이징

• PopoverTrigger의 자식으로 원하는 요소(Button)를 배치하여 커스텀 트리거를 만들 수 있다.

<PopoverTrigger asChild>
  <Button
    variant="outline"
    size="sm"
    role="combobox"
    aria-expanded={open}
    aria-label="Select a store"
    className={cn("w-[200px justify-between", className)}
  >
    {/* 버튼 내용 */}
  </Button>
</PopoverTrigger>