# MaterialSelector

자재그룹코드를 검색하고 선택할 수 있는 드롭다운 컴포넌트

## 주요 기능

- 자재그룹코드 및 자재그룹코드명(=자재명) 으로 검색 및 선택
- 단일/다중 선택 모드
- 페이지네이션 10페이지로 구현
- 초기 데이터 로드 여부 설정 가능 (기본값은 초기 데이터 로드 활성화, 벤더 회원가입시 공급품목에서는 비활성화)

## 사용 예시

`selectedMaterials` 상태에 선택된 자재 정보가 저장되며, 이를 통해 선택된 자재를 활용할 수 있습니다.

### 기본 사용법
```tsx
import { MaterialSelector } from "@/components/common/material/material-selector";

function MyComponent() {
  const [selectedMaterials, setSelectedMaterials] = useState<MaterialSearchItem[]>([]);

  return (
    <MaterialSelector
      selectedMaterials={selectedMaterials}
      onMaterialsChange={setSelectedMaterials}
    />
  );
}
```

### 단일 선택 모드
```tsx
<MaterialSelector
  selectedMaterials={selectedMaterials}
  onMaterialsChange={setSelectedMaterials}
  singleSelect={true}
  placeholder="자재를 선택하세요..."
/>
```

### 초기 데이터 로드 비활성화
```tsx
<MaterialSelector
  selectedMaterials={selectedMaterials}
  onMaterialsChange={setSelectedMaterials}
  showInitialData={false}
/>
```

### 최대 선택 개수 제한
```tsx
<MaterialSelector
  selectedMaterials={selectedMaterials}
  onMaterialsChange={setSelectedMaterials}
  maxSelections={5}
/>
```

### 특정 자재코드 제외
```tsx
const excludeCodes = new Set(['MAT001', 'MAT002']);

<MaterialSelector
  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`) - 선택 후 드롭다운 닫기 여부