kjs
e9268b3f00
- 데이터 구조 변경: ItemData.details → ItemData.fieldGroups (그룹별 관리) - 각 필드 그룹마다 독립적으로 여러 항목 추가/수정/삭제 가능 - renderFieldsByGroup: 그룹별 입력 항목 목록 + 편집 + 추가 버튼 구현 - renderGridLayout/renderCardLayout: 품목별 그룹 카드 표시로 단순화 - handleFieldChange: groupId 파라미터 추가 (itemId, groupId, entryId, fieldName, value) - handleAddGroupEntry, handleRemoveGroupEntry, handleEditGroupEntry 핸들러 추가 - buttonActions handleBatchSave: fieldGroups 구조 처리하도록 수정 - 원본 데이터 표시 버그 수정: modalData의 중첩 구조 처리 사용 예: - 품목 1 - 그룹 1 (거래처 정보): 3개 항목 입력 가능 - 그룹 2 (단가 정보): 5개 항목 입력 가능 - 각 항목 클릭 → 수정 가능 - 저장 시 모든 입력 항목이 개별 레코드로 저장됨 |
||
|---|---|---|
| .. | ||
| AutocompleteSearchInputComponent.tsx | ||
| AutocompleteSearchInputConfigPanel.tsx | ||
| AutocompleteSearchInputRenderer.tsx | ||
| README.md | ||
| index.ts | ||
| types.ts | ||
README.md
AutocompleteSearchInput 컴포넌트
자동완성 드롭다운 방식의 엔티티 검색 입력 컴포넌트입니다.
특징
- 타이핑하면 즉시 드롭다운 표시
- 빈 값일 때 전체 목록 조회
- 추가 정보 표시 가능
- X 버튼으로 선택 초기화
- 외부 클릭 시 자동 닫힘
사용 예시
<AutocompleteSearchInputComponent
tableName="customer_mng"
displayField="customer_name"
valueField="customer_code"
searchFields={["customer_name", "customer_code"]}
placeholder="거래처명 입력"
showAdditionalInfo
additionalFields={["customer_code", "address"]}
value={selectedCode}
onChange={(code, fullData) => {
console.log("선택됨:", code, fullData);
}}
/>
설정 옵션
tableName: 검색할 테이블명displayField: 표시할 필드valueField: 값으로 사용할 필드searchFields: 검색 대상 필드들placeholder: 플레이스홀더showAdditionalInfo: 추가 정보 표시 여부additionalFields: 추가로 표시할 필드들