feat(autocomplete-search-input): 필드 자동 매핑 및 저장 위치 선택 기능 추가

- 필드 자동 매핑 기능 구현
  * FieldMapping 타입 추가 (sourceField → targetField)
  * applyFieldMappings() 함수로 선택 시 자동 입력
  * 여러 필드를 한 번에 자동으로 채움 (거래처 선택 → 주소/전화 자동 입력)

- 값 필드 저장 위치 선택 기능 추가
  * ValueFieldStorage 타입 추가 (targetTable, targetColumn)
  * 기본값(화면 연결 테이블) 또는 명시적 테이블/컬럼 지정 가능
  * 중간 테이블, 이력 테이블 등 다중 테이블 저장 지원

- UI/UX 개선
  * 모든 선택 필드를 Combobox 스타일로 통일
  * 각 필드 아래 간략한 사용 설명 추가
  * 저장 위치 동작 미리보기 박스 추가

- 문서 작성
  * 사용_가이드.md 신규 작성 (실전 예제 3개 포함)
  * 빠른 시작 가이드, FAQ, 체크리스트 제공
This commit is contained in:
SeongHyun Kim
2025-11-20 13:47:21 +09:00
parent 6d0acdd1ec
commit 68f79db6ed
6 changed files with 993 additions and 2 deletions

View File

@@ -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);
};