feat(autocomplete-search-input): 필드 자동 매핑 및 저장 위치 선택 기능 추가
- 필드 자동 매핑 기능 구현 * FieldMapping 타입 추가 (sourceField → targetField) * applyFieldMappings() 함수로 선택 시 자동 입력 * 여러 필드를 한 번에 자동으로 채움 (거래처 선택 → 주소/전화 자동 입력) - 값 필드 저장 위치 선택 기능 추가 * ValueFieldStorage 타입 추가 (targetTable, targetColumn) * 기본값(화면 연결 테이블) 또는 명시적 테이블/컬럼 지정 가능 * 중간 테이블, 이력 테이블 등 다중 테이블 저장 지원 - UI/UX 개선 * 모든 선택 필드를 Combobox 스타일로 통일 * 각 필드 아래 간략한 사용 설명 추가 * 저장 위치 동작 미리보기 박스 추가 - 문서 작성 * 사용_가이드.md 신규 작성 (실전 예제 3개 포함) * 빠른 시작 가이드, FAQ, 체크리스트 제공
This commit is contained in:
@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
|
||||
import { useEntitySearch } from "../entity-search-input/useEntitySearch";
|
||||
import { EntitySearchResult } from "../entity-search-input/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AutocompleteSearchInputConfig } from "./types";
|
||||
import { AutocompleteSearchInputConfig, FieldMapping } from "./types";
|
||||
|
||||
interface AutocompleteSearchInputProps extends Partial<AutocompleteSearchInputConfig> {
|
||||
config?: AutocompleteSearchInputConfig;
|
||||
@@ -81,10 +81,46 @@ export function AutocompleteSearchInputComponent({
|
||||
setIsOpen(true);
|
||||
};
|
||||
|
||||
// 필드 자동 매핑 처리
|
||||
const applyFieldMappings = (item: EntitySearchResult) => {
|
||||
if (!config?.enableFieldMapping || !config?.fieldMappings) {
|
||||
return;
|
||||
}
|
||||
|
||||
config.fieldMappings.forEach((mapping: FieldMapping) => {
|
||||
if (!mapping.sourceField || !mapping.targetField) {
|
||||
return;
|
||||
}
|
||||
|
||||
const value = item[mapping.sourceField];
|
||||
|
||||
// DOM에서 타겟 필드 찾기 (id로 검색)
|
||||
const targetElement = document.getElementById(mapping.targetField);
|
||||
|
||||
if (targetElement) {
|
||||
// input, textarea 등의 값 설정
|
||||
if (
|
||||
targetElement instanceof HTMLInputElement ||
|
||||
targetElement instanceof HTMLTextAreaElement
|
||||
) {
|
||||
targetElement.value = value?.toString() || "";
|
||||
|
||||
// React의 change 이벤트 트리거
|
||||
const event = new Event("input", { bubbles: true });
|
||||
targetElement.dispatchEvent(event);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelect = (item: EntitySearchResult) => {
|
||||
setSelectedData(item);
|
||||
setInputValue(item[displayField] || "");
|
||||
onChange?.(item[valueField], item);
|
||||
|
||||
// 필드 자동 매핑 실행
|
||||
applyFieldMappings(item);
|
||||
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user