Files
ai-code-app/docs/components/select.md

1.2 KiB

Select Input

목적

code/value 데이터를 받아 실제 값은 code로 유지하고, 드롭다운 표시와 검색은 value 기준으로 처리하는 select combo 입력 컴포넌트입니다.

공통 설계 원칙

  • 샘플(samples)을 제외한 컴포넌트에는 API 호출이나 화면 전용 로직을 직접 넣지 않습니다.
  • 컴포넌트는 최대한 멍청하게 설계하고, 직관적인 props를 받아 직관적인 UI 동작만 수행합니다.
  • 기능 처리와 비즈니스 로직은 src/features 또는 해당 화면 전용 패키지 레벨에서 담당합니다.
  • 공통 컴포넌트는 여러 곳에서 재사용되므로, 수정 시에는 기존 동작을 바꾸지 않는 범위에서만 보완합니다.

폴더 구조

src/components/inputs/select
├─ SelectUI.tsx
├─ index.ts
├─ plugins/
├─ samples/
└─ types/

주요 props

  • data: { code, value }[]
  • value, defaultValue
  • onChange(code, item)
  • showSearch
  • allowClear
  • placeholder

plugins

  • createSelectPlaceholderPlugin
  • createSelectSortPlugin

샘플

  • 대표 샘플: src/components/inputs/select/samples/Sample.tsx