Dropdown

선택 가능한 옵션 목록을 표시하는 드롭다운 컴포넌트입니다. 사용자가 여러 옵션 중 하나를 선택할 수 있습니다.

Preview

Option 1

Selected: option1

Usage

설치

Terminal

$ pnpm add @b1nd/dodam-design-system/components

@b1nd/dodam-design-system/components 패키지는 @dds-web의 iconography, typography, colors, shapes, themes 패키지에 의존합니다. 프로젝트에 해당 패키지들이 설치되어 있지 않다면, 함께 설치해주세요.

기본 사용법

tsx

"use client";

import { useState } from "react";
import { Dropdown } from "@b1nd/dodam-design-system/components";

const Example = () => {
  const [selected, setSelected] = useState<string>("option1");
  const items = [
    { name: "Option 1", value: "option1" },
    { name: "Option 2", value: "option2" },
    { name: "Option 3", value: "option3" },
  ];

  return (
    <Dropdown
      items={items}
      value={selected}
      onSelectedItemChange={(item) => setSelected(item.value)}
    />
  );
};

export default Example;

커스텀 스타일

customStyle prop을 사용하여 추가 스타일을 적용할 수 있습니다.

tsx

<Dropdown
  items={items}
  value={selected}
  onSelectedItemChange={setSelected}
  customStyle={{
    width: "200px",
    backgroundColor: "#f5f5f5",
  }}
/>

Props

Prop	Type	Default	Description
`items`	`{ name: string; value: string }[]`	`-`	드롭다운에 표시할 옵션 목록 (name/value 쌍)
`value`	`string`	`-`	현재 선택된 값 (item.value)
`onSelectedItemChange`	`(item: { name: string; value: string }) => void`	`-`	옵션 선택 시 실행될 콜백 함수 (선택된 item 객체 전달)
`customStyle`	`CSSObject`	`-`	추가 커스텀 스타일

Best Practices

옵션이 너무 많으면 검색 기능이 있는 다른 컴포넌트를 고려하세요.
현재 선택된 값을 명확하게 표시하세요.
드롭다운 외부 클릭 시 자동으로 닫히도록 구현되어 있습니다.
옵션 텍스트는 간결하고 명확하게 작성하세요.

Accessibility

키보드 네비게이션을 지원합니다.
클릭 가능한 영역이 충분히 크게 설정되어 있습니다.
호버 시 시각적 피드백을 제공합니다.
화살표 아이콘으로 드롭다운 상태를 명확히 표시합니다.