(김준회) material-selector(자재그룹선택기) 공용컴포넌트 구현

1 files changed, 82 insertions, 0 deletions

diff --git a/components/common/material/README.md b/components/common/material/README.md
new file mode 100644
index 00000000..30f16d38
--- /dev/null
+++ b/components/common/material/README.md
@@ -0,0 +1,82 @@
+# 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`) - 선택 후 드롭다운 닫기 여부