blob: 341bbe80f2db1d824668e2847c10e9c99373e92e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
# MaterialGroupSelector
자재그룹코드를 검색하고 선택할 수 있는 드롭다운 컴포넌트
## 주요 기능
- 자재그룹코드 및 자재그룹코드명(=자재명) 으로 검색 및 선택
- 단일/다중 선택 모드
- 페이지네이션 10페이지로 구현
- 초기 데이터 로드 여부 설정 가능 (기본값은 초기 데이터 로드 활성화, 벤더 회원가입시 공급품목에서는 비활성화)
## 사용 예시
`selectedMaterials` 상태에 선택된 자재 정보가 저장되며, 이를 통해 선택된 자재를 활용할 수 있습니다.
### 기본 사용법
```tsx
import { MaterialGroupSelector } from "@/components/common/material/material-group-selector";
function MyComponent() {
const [selectedMaterials, setSelectedMaterials] = useState<MaterialSearchItem[]>([]);
return (
<MaterialGroupSelector
selectedMaterials={selectedMaterials}
onMaterialsChange={setSelectedMaterials}
/>
);
}
```
### 단일 선택 모드
```tsx
<MaterialGroupSelector
selectedMaterials={selectedMaterials}
onMaterialsChange={setSelectedMaterials}
singleSelect={true}
placeholder="자재를 선택하세요..."
/>
```
### 초기 데이터 로드 비활성화
```tsx
<MaterialGroupSelector
selectedMaterials={selectedMaterials}
onMaterialsChange={setSelectedMaterials}
showInitialData={false}
/>
```
### 최대 선택 개수 제한
```tsx
<MaterialGroupSelector
selectedMaterials={selectedMaterials}
onMaterialsChange={setSelectedMaterials}
maxSelections={5}
/>
```
### 특정 자재코드 제외
```tsx
const excludeCodes = new Set(['MAT001', 'MAT002']);
<MaterialGroupSelector
selectedMaterials={selectedMaterials}
onMaterialsChange={setSelectedMaterials}
excludeMaterialCodes={excludeCodes}
/>
```
## Props
- `selectedMaterials` (`MaterialSearchItem[]`, 기본값: `[]`) - 선택된 자재 목록
- `onMaterialsChange` (`(materials: MaterialSearchItem[]) => void`) - 자재 선택 변경 콜백
- `singleSelect` (`boolean`, 기본값: `false`) - 단일 선택 모드 여부
- `showInitialData` (`boolean`, 기본값: `true`) - 초기 클릭시 자재 목록 로드 여부
- `maxSelections` (`number`) - 최대 선택 가능 개수
- `excludeMaterialCodes` (`Set<string>`) - 제외할 자재그룹코드 목록
- `disabled` (`boolean`, 기본값: `false`) - 비활성화 여부
- `placeholder` (`string`, 기본값: `"자재를 검색하세요..."`) - 검색 입력 플레이스홀더
- `noValuePlaceHolder` (`string`, 기본값: `"자재를 검색해주세요"`) - 선택된 값이 없을 때 표시 텍스트
- `closeOnSelect` (`boolean`, 기본값: `true`) - 선택 후 드롭다운 닫기 여부
|
