feat: 부모 데이터 매핑 기능 구현 (선택항목 상세입력 컴포넌트)

- 여러 테이블(거래처, 품목 등)에서 데이터를 가져와 자동 매핑 가능
- 각 매핑마다 소스 테이블, 원본 필드, 저장 필드를 독립적으로 설정
- 검색 가능한 Combobox로 테이블 및 컬럼 선택 UX 개선
- 소스 테이블 선택 시 해당 테이블의 컬럼 자동 로드
- 라벨, 컬럼명, 데이터 타입으로 검색 가능
- 세로 레이아웃으로 가독성 향상

기술적 변경사항:
- ParentDataMapping 인터페이스 추가 (sourceTable, sourceField, targetField)
- buttonActions.ts의 handleBatchSave에서 소스 테이블 기반 데이터 소스 자동 판단
- tableManagementApi.getColumnList() 사용하여 테이블 컬럼 동적 로드
- Command + Popover 조합으로 검색 가능한 Select 구현
- 각 매핑별 독립적인 컬럼 상태 관리 (mappingSourceColumns)
This commit is contained in:
kjs
2025-11-19 13:22:49 +09:00
parent b74cb94191
commit f4e4ee13e2
7 changed files with 689 additions and 56 deletions

View File

@@ -257,7 +257,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
// 🆕 저장 요청 시에만 데이터 전달 (이벤트 리스너 방식)
useEffect(() => {
const handleSaveRequest = () => {
const handleSaveRequest = (event: Event) => {
// component.id를 문자열로 안전하게 변환
const componentKey = String(component.id || "selected_items");
@@ -269,17 +269,26 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
componentKey,
});
if (items.length > 0 && onFormDataChange) {
const dataToSave = { [componentKey]: items };
console.log("📝 [SelectedItemsDetailInput] 저장 요청 시 데이터 전달:", {
if (items.length > 0) {
console.log("📝 [SelectedItemsDetailInput] 저장 데이터 준비:", {
key: componentKey,
itemsCount: items.length,
fullData: dataToSave,
firstItem: items[0],
});
onFormDataChange(dataToSave);
// ✅ CustomEvent의 detail에 데이터 첨부
if (event instanceof CustomEvent && event.detail) {
// context.formData에 직접 추가
event.detail.formData[componentKey] = items;
console.log("✅ [SelectedItemsDetailInput] context.formData에 데이터 직접 추가 완료");
}
// 기존 onFormDataChange도 호출 (호환성)
if (onFormDataChange) {
onFormDataChange(componentKey, items);
}
} else {
console.warn("⚠️ [SelectedItemsDetailInput] 저장 데이터 전달 실패:", {
console.warn("⚠️ [SelectedItemsDetailInput] 저장 데이터 없음:", {
hasItems: items.length > 0,
hasCallback: !!onFormDataChange,
itemsLength: items.length,