42 lines
1.2 KiB
Markdown
42 lines
1.2 KiB
Markdown
# Select Input
|
|
|
|
## 목적
|
|
|
|
`code/value` 데이터를 받아 실제 값은 `code`로 유지하고, 드롭다운 표시와 검색은 `value` 기준으로 처리하는 select combo 입력 컴포넌트입니다.
|
|
|
|
## 공통 설계 원칙
|
|
|
|
- 샘플(`samples`)을 제외한 컴포넌트에는 API 호출이나 화면 전용 로직을 직접 넣지 않습니다.
|
|
- 컴포넌트는 최대한 멍청하게 설계하고, 직관적인 props를 받아 직관적인 UI 동작만 수행합니다.
|
|
- 기능 처리와 비즈니스 로직은 `src/features` 또는 해당 화면 전용 패키지 레벨에서 담당합니다.
|
|
- 공통 컴포넌트는 여러 곳에서 재사용되므로, 수정 시에는 기존 동작을 바꾸지 않는 범위에서만 보완합니다.
|
|
|
|
## 폴더 구조
|
|
|
|
```text
|
|
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`
|