summaryrefslogtreecommitdiff
path: root/components/common/material/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'components/common/material/README.md')
-rw-r--r--components/common/material/README.md82
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`) - 선택 후 드롭다운 닫기 여부