68f79db6ed
- 필드 자동 매핑 기능 구현 * FieldMapping 타입 추가 (sourceField → targetField) * applyFieldMappings() 함수로 선택 시 자동 입력 * 여러 필드를 한 번에 자동으로 채움 (거래처 선택 → 주소/전화 자동 입력) - 값 필드 저장 위치 선택 기능 추가 * ValueFieldStorage 타입 추가 (targetTable, targetColumn) * 기본값(화면 연결 테이블) 또는 명시적 테이블/컬럼 지정 가능 * 중간 테이블, 이력 테이블 등 다중 테이블 저장 지원 - UI/UX 개선 * 모든 선택 필드를 Combobox 스타일로 통일 * 각 필드 아래 간략한 사용 설명 추가 * 저장 위치 동작 미리보기 박스 추가 - 문서 작성 * 사용_가이드.md 신규 작성 (실전 예제 3개 포함) * 빠른 시작 가이드, FAQ, 체크리스트 제공
115 lines
3.5 KiB
Markdown
115 lines
3.5 KiB
Markdown
# AutocompleteSearchInput 컴포넌트
|
|
|
|
자동완성 드롭다운 방식의 엔티티 검색 입력 컴포넌트입니다.
|
|
|
|
## 특징
|
|
|
|
- 타이핑하면 즉시 드롭다운 표시
|
|
- 빈 값일 때 전체 목록 조회
|
|
- 추가 정보 표시 가능
|
|
- X 버튼으로 선택 초기화
|
|
- 외부 클릭 시 자동 닫힘
|
|
- **필드 자동 매핑**: 선택한 항목의 값을 화면의 다른 입력 필드에 자동으로 채움
|
|
|
|
## 사용 예시
|
|
|
|
### 기본 사용
|
|
|
|
```tsx
|
|
<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);
|
|
}}
|
|
/>
|
|
```
|
|
|
|
### 필드 자동 매핑 사용
|
|
|
|
```tsx
|
|
<AutocompleteSearchInputComponent
|
|
config={{
|
|
tableName: "customer_mng",
|
|
displayField: "customer_name",
|
|
valueField: "customer_code",
|
|
searchFields: ["customer_name", "customer_code"],
|
|
placeholder: "거래처 검색",
|
|
enableFieldMapping: true,
|
|
fieldMappings: [
|
|
{
|
|
sourceField: "customer_name", // 테이블의 컬럼명
|
|
targetField: "customer_name_input", // 화면 input의 id
|
|
label: "거래처명"
|
|
},
|
|
{
|
|
sourceField: "address",
|
|
targetField: "address_input",
|
|
label: "주소"
|
|
},
|
|
{
|
|
sourceField: "phone",
|
|
targetField: "phone_input",
|
|
label: "전화번호"
|
|
}
|
|
]
|
|
}}
|
|
onChange={(code, fullData) => {
|
|
console.log("선택됨:", code, fullData);
|
|
// 필드 매핑은 자동으로 실행됩니다
|
|
}}
|
|
/>
|
|
|
|
<!-- 화면의 다른 곳에 있는 입력 필드들 -->
|
|
<input id="customer_name_input" placeholder="거래처명" />
|
|
<input id="address_input" placeholder="주소" />
|
|
<input id="phone_input" placeholder="전화번호" />
|
|
```
|
|
|
|
## 설정 옵션
|
|
|
|
### 기본 설정
|
|
|
|
- `tableName`: 검색할 테이블명
|
|
- `displayField`: 표시할 필드
|
|
- `valueField`: 값으로 사용할 필드
|
|
- `searchFields`: 검색 대상 필드들
|
|
- `placeholder`: 플레이스홀더
|
|
- `showAdditionalInfo`: 추가 정보 표시 여부
|
|
- `additionalFields`: 추가로 표시할 필드들
|
|
|
|
### 값 필드 저장 위치 설정 (고급)
|
|
|
|
- `valueFieldStorage`: 값 필드 저장 위치 지정
|
|
- `targetTable`: 저장할 테이블명 (미설정 시 화면 연결 테이블)
|
|
- `targetColumn`: 저장할 컬럼명 (미설정 시 바인딩 필드)
|
|
|
|
### 필드 자동 매핑 설정
|
|
|
|
- `enableFieldMapping`: 필드 자동 매핑 활성화 여부
|
|
- `fieldMappings`: 매핑할 필드 목록
|
|
- `sourceField`: 소스 테이블의 컬럼명 (예: customer_name)
|
|
- `targetField`: 타겟 필드 ID (예: 화면의 input id 속성)
|
|
- `label`: 표시명 (선택사항)
|
|
|
|
## 필드 자동 매핑 동작 방식
|
|
|
|
1. 사용자가 검색 컴포넌트에서 항목을 선택합니다
|
|
2. 선택된 항목의 데이터에서 `sourceField`에 해당하는 값을 가져옵니다
|
|
3. 화면에서 `targetField` ID를 가진 컴포넌트를 찾습니다
|
|
4. 해당 컴포넌트에 값을 자동으로 채워넣습니다
|
|
5. React의 change 이벤트를 트리거하여 상태 업데이트를 유발합니다
|
|
|
|
## 주의사항
|
|
|
|
- 타겟 필드 ID는 화면 디자이너에서 설정한 컴포넌트 ID와 정확히 일치해야 합니다
|
|
- 필드 매핑은 input, textarea 타입의 요소에만 동작합니다
|
|
- 여러 필드를 한 번에 매핑할 수 있습니다
|
|
|