1. Select

Select 컴포넌트는 사용자가 여러 옵션 중 하나를 선택할 수 있도록 설계된 드롭다운 메뉴입니다. 색상과 기본 선택 옵션을 조정하여 다양한 스타일을 적용할 수 있습니다.

1.1. Import

import { Select } from '@components/Select';

1.2. Usage

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

Select an option

import Select from '@components/Select';

function Example() {
  return (
    <Select
      option={["Option 1", "Option 2", "Option 3"]}
      placeholder="Select an option"
      color="gray"
      onChange={handleSelect}
      onClick={handleOptionClick}
    />
  );
}

export default Example;

1.3. Changing the Color of the Select

Select 컴포넌트는 다양한 색상으로 제공됩니다. 기본 색상은 gray입니다:

red: 빨간색 테두리
blue: 파란색 테두리
green: 초록색 테두리
gray: 회색 테두리 (기본값)

Select an option

import Select from '@components/Select';

function Example() {
  return (
    <>
      <Select
        option={["Option 1", "Option 2", "Option 3"]}
        placeholder="Select an option"
        color="red"
        onChange={handleSelect}
        onClick={handleOptionClick}
      />
      <Select
        option={["Option 1", "Option 2", "Option 3"]}
        placeholder="Select an option"
        color="blue"
        onChange={handleSelect}
        onClick={handleOptionClick}
      />
      <Select
        option={["Option 1", "Option 2", "Option 3"]}
        placeholder="Select an option"
        color="green"
        onChange={handleSelect}
        onClick={handleOptionClick}
      />
      <Select
        option={["Option 1", "Option 2", "Option 3"]}
        placeholder="Select an option"
        color="gray"
        onChange={handleSelect}
        onClick={handleOptionClick}
      />
    </>
  );
}

export default Example;

1.4. Props

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

Prop	Description	Type	Default
`option`	드롭다운에서 선택할 수 있는 옵션 목록을 설정합니다.	`string[]`	`[]`
`color`	드롭다운의 테두리 색상을 설정합니다.	`"red" \| "blue" \| "green" \| "gray"`	`"gray"`
`placeholder`	선택되지 않았을 때 표시되는 텍스트를 설정합니다.	`string`	`"Select an option"`
`onChange`	선택된 값이 변경될 때 호출되는 콜백 함수입니다.	`(value: string) => void`	`undefined`
`onClick`	옵션이 클릭될 때 호출되는 콜백 함수입니다.	`(value: string) => void`	`undefined`

1.5. Full Example

import Select from '@components/Select';

function Example() {
  return (
    <div>
      <Select
        option={["Option 1", "Option 2", "Option 3"]}
        placeholder="Select an option"
        color="blue"
        onChange={handleSelect}
        onClick={handleOptionClick}
      />
    </div>
  );
}

export default Example;

2. SelectList

SelectList 컴포넌트는 여러 옵션 중 하나를 선택할 수 있는 리스트 형태의 선택 컴포넌트입니다. 사용자는 화면에 펼쳐진 리스트에서 옵션을 선택할 수 있습니다.

2.1. Import

import { SelectList } from '@components/Select/SelectList';

2.2. Usage

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

Item 1
Item 2
Item 3
Item 4

import SelectList from '@components/Select/SelectList';

function Example() {
  return (
    <SelectList
      option={["Item 1", "Item 2", "Item 3", "Item 4"]}
    />
  );
}

export default Example;

2.3. Props

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

Prop	Description	Type	Default
`option`	리스트에서 선택할 수 있는 항목 목록을 설정합니다.	`string[]`	`[]`
`onChange`	선택된 값이 변경될 때 호출되는 콜백 함수입니다.	`(value: string) => void`	`undefined`
`className`	컴포넌트에 추가적인 스타일을 적용할 때 사용할 수 있는 클래스 이름입니다.	`string`	`""`

2.4. Full Example

import SelectList from '@components/Select/SelectList';

function Example() {
  return (
    <div>
      <SelectList
        option={["Item 1", "Item 2", "Item 3", "Item 4"]}
      />
    </div>
  );
}

export default Example;

3. SelectValueAdd

SelectValueAdd 컴포넌트는 사용자가 여러 옵션 중 여러 개를 선택하고, 선택한 항목을 제거할 수 있는 UI 요소입니다. 이 컴포넌트는 `placeholder`를 제공하여 초기 상태에서 표시할 기본 텍스트를 설정할 수 있습니다.

3.1. Import

import { SelectValueAdd } from '@components/SelectValueAdd';

3.2. Usage

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

Select an option

import SelectValueAdd from '@components/SelectValueAdd';

function Example() {
  return (
    <SelectValueAdd
      option={["Option 1", "Option 2", "Option 3", "Option 4"]}
      placeholder="Select an option"
      onChange={(selectedValues) => console.log(selectedValues)}
    />
  );
}

export default Example;

3.3. Props

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

Prop	Description	Type	Default
`option`	선택 가능한 옵션 목록을 설정합니다.	`string[]`	`[]`
`placeholder`	선택되지 않았을 때 표시되는 텍스트를 설정합니다.	`string`	`"Option 1"`
`onChange`	선택된 값이 변경될 때 호출되는 콜백 함수입니다.	`(value: string[]) => void`	`undefined`
`className`	컴포넌트에 추가적인 스타일을 적용할 때 사용할 수 있는 클래스 이름입니다.	`string`	`""`

3.4. Full Example

import SelectValueAdd from '@components/SelectValueAdd';

function Example() {
  return (
    <div>
      <SelectValueAdd
        option={["Option 1", "Option 2", "Option 3", "Option 4"]}
        placeholder="Select an option"
        onChange={(selectedValues) => console.log(selectedValues)}
      />
    </div>
  );
}

export default Example;