1. DropDownBasic

DropDownBasic 컴포넌트는 사용자가 옵션을 선택할 수 있는 간단한 드롭다운 메뉴를 제공합니다. 다양한 스타일의 드롭다운을 지원하며, 선택된 값은 부모 컴포넌트로 전달될 수 있습니다.

1.1. Import

import DropDownBasic from '@components/DropDown/DropDownBasic';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

Select Option

less-rounded

import DropDownBasic from '@components/DropDown/DropDownBasic';

function Example() {
  return (
    <DropDownBasic
      option={["Option 1", "Option 2", "Option 3"]}
      placeholder="Select an Option"
      type="basic"
      onSelect={(value) => console.log("Selected:", value)}
    />
  );
}

export default Example;

1.3. Props

DropDownBasic 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`option`	드롭다운에서 선택 가능한 옵션들의 배열입니다.	`string[]`	`[]`
`placeholder`	선택되지 않은 경우 표시되는 플레이스홀더 텍스트입니다.	`string`	`"Select Option"`
`onSelect`	옵션이 선택되었을 때 호출되는 콜백 함수입니다.	`(value: string) => void`	`undefined`
`type`	드롭다운의 스타일을 결정합니다. ("basic", "rounded", "borderless-rounded", "less-rounded")	`"basic" \| "rounded" \| "borderless-rounded" \| "less-rounded"`	`"basic"`

1.4. Full Example

import DropDownBasic from '@components/DropDown/DropDownBasic';

function FullExample() {
  return (
    <div>
      <DropDownBasic
        option={["Option 1", "Option 2", "Option 3"]}
        placeholder="Select Option"
        type="basic"
        onSelect={(value) => console.log("Selected:", value)}
      />
      <DropDownBasic
        option={["Option A", "Option B", "Option C"]}
        placeholder="Choose an Option"
        type="rounded"
        onSelect={(value) => console.log("Selected:", value)}
      />
      <DropDownBasic
        option={["Option X", "Option Y", "Option Z"]}
        placeholder="Pick an Option"
        type="borderless-rounded"
        onSelect={(value) => console.log("Selected:", value)}
      />
      <DropDownBasic
        option={["Option 10", "Option 20", "Option 30"]}
        placeholder="Select one"
        type="less-rounded"
        onSelect={(value) => console.log("Selected:", value)}
      />
    </div>
  );
}

export default FullExample;

2. DropDownBasicMultiSelect

DropDownBasicMultiSelect 컴포넌트는 사용자가 여러 옵션을 선택할 수 있는 멀티 셀렉트 드롭다운 메뉴를 제공합니다. 선택된 값들은 컴포넌트의 부모 컴포넌트로 전달됩니다. 다양한 스타일을 지원합니다.

2.1. Import

import DropDownBasicMultiSelect from '@components/DropDown/DropDownBasicMultiSelect';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

Select Options

import DropDownBasicMultiSelect from '@components/DropDown/DropDownBasicMultiSelect';

function Example() {
  return (
    <DropDownBasicMultiSelect
      option={["Option 1", "Option 2", "Option 3"]}
      placeholder="Select Options"
      type="basic"
      onSelect={(value: string[]) => console.log("Selected:", value)}
    />
  );
}

export default Example;

2.3. Props

DropDownBasicMultiSelect 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`option`	드롭다운에서 선택 가능한 옵션들의 배열입니다.	`string[]`	`[]`
`placeholder`	선택되지 않은 경우 표시되는 플레이스홀더 텍스트입니다.	`string`	`"Select Options"`
`onSelect`	옵션이 선택되었을 때 호출되는 콜백 함수입니다.	`(value: string[]) => void`	`undefined`
`type`	드롭다운의 스타일을 결정합니다. ("basic", "rounded", "borderless-rounded", "less-rounded")	`"basic" \| "rounded" \| "borderless-rounded" \| "less-rounded"`	`"basic"`

2.4. Full Example

import DropDownBasicMultiSelect from '@components/DropDown/DropDownBasicMultiSelect';

function FullExample() {
  return (
    <div>
      <DropDownBasicMultiSelect
        option={["Option 1", "Option 2", "Option 3"]}
        placeholder="Select Options"
        type="basic"
        onSelect={(value: string[]) => console.log("Selected:", value)}
      />
      <DropDownBasicMultiSelect
        option={["Option A", "Option B", "Option C"]}
        placeholder="Choose Options"
        type="rounded"
        onSelect={(value: string[]) => console.log("Selected:", value)}
      />
      <DropDownBasicMultiSelect
        option={["Option X", "Option Y", "Option Z"]}
        placeholder="Pick Options"
        type="borderless-rounded"
        onSelect={(value: string[]) => console.log("Selected:", value)}
      />
      <DropDownBasicMultiSelect
        option={["Option 10", "Option 20", "Option 30"]}
        placeholder="Select Multiple"
        type="less-rounded"
        onSelect={(value: string[]) => console.log("Selected:", value)}
      />
    </div>
  );
}

export default FullExample;

3. DropDownGrouped

DropDownGrouped 컴포넌트는 그룹화된 옵션을 선택할 수 있는 드롭다운 메뉴를 제공합니다. 사용자는 각 그룹에서 옵션을 선택할 수 있으며, 선택된 값은 부모 컴포넌트로 전달될 수 있습니다. 다양한 스타일을 지원합니다.

3.1. Import

import DropDownGrouped from '@components/DropDown/DropDownGrouped';

3.2. Usage

기본 사용 예제는 아래와 같습니다:

Select Option

import DropDownGrouped from '@components/DropDown/DropDownGrouped';

function Example() {
  return (
    <DropDownGrouped
      options={[
        { groupName: "Group 1", items: ["Option 1", "Option 2"] },
        { groupName: "Group 2", items: ["Option 3", "Option 4"] },
      ]}
      defaultOption="Select an Option"
      type="basic"
      onSelect={(value) => console.log("Selected:", value)}
    />
  );
}

export default Example;

3.3. Props

DropDownGrouped 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`options`	각 그룹의 이름과 아이템을 포함한 배열입니다.	`{ groupName: string; items: string[] }[]`	`[]`
`defaultOption`	선택되지 않은 경우 표시되는 플레이스홀더 텍스트입니다.	`string`	`"Select Option"`
`onSelect`	옵션이 선택되었을 때 호출되는 콜백 함수입니다.	`(value: string) => void`	`undefined`
`type`	드롭다운의 스타일을 결정합니다. ("basic", "rounded", "borderless-rounded", "less-rounded")	`"basic" \| "rounded" \| "borderless-rounded" \| "less-rounded"`	`"basic"`

3.4. Full Example

import DropDownGrouped from '@components/DropDown/DropDownGrouped';

function FullExample() {
  return (
    <div>
      <DropDownGrouped
        options={[
          { groupName: "Group 1", items: ["Option 1", "Option 2"] },
          { groupName: "Group 2", items: ["Option 3", "Option 4"] },
        ]}
        defaultOption="Select Option"
        type="basic"
        onSelect={(value) => console.log("Selected:", value)}
      />
      <DropDownGrouped
        options={[
          { groupName: "Group A", items: ["Option A", "Option B"] },
          { groupName: "Group B", items: ["Option C", "Option D"] },
        ]}
        defaultOption="Choose an Option"
        type="rounded"
        onSelect={(value) => console.log("Selected:", value)}
      />
      <DropDownGrouped
        options={[
          { groupName: "Group X", items: ["Option X1", "Option X2"] },
          { groupName: "Group Y", items: ["Option Y1", "Option Y2"] },
        ]}
        defaultOption="Pick an Option"
        type="borderless-rounded"
        onSelect={(value) => console.log("Selected:", value)}
      />
      <DropDownGrouped
        options={[
          { groupName: "Group 10", items: ["Option 10A", "Option 10B"] },
          { groupName: "Group 20", items: ["Option 20A", "Option 20B"] },
        ]}
        defaultOption="Select from List"
        type="less-rounded"
        onSelect={(value) => console.log("Selected:", value)}
      />
    </div>
  );
}

export default FullExample;