- 데이터 구조 변경: 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개 항목 입력 가능 - 각 항목 클릭 → 수정 가능 - 저장 시 모든 입력 항목이 개별 레코드로 저장됨
34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
|
|
import { AutocompleteSearchInputDefinition } from "./index";
|
|
import { AutocompleteSearchInputComponent } from "./AutocompleteSearchInputComponent";
|
|
|
|
/**
|
|
* AutocompleteSearchInput 렌더러
|
|
* 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
|
|
*/
|
|
export class AutocompleteSearchInputRenderer extends AutoRegisteringComponentRenderer {
|
|
static componentDefinition = AutocompleteSearchInputDefinition;
|
|
|
|
render(): React.ReactElement {
|
|
return <AutocompleteSearchInputComponent {...this.props} renderer={this} />;
|
|
}
|
|
|
|
/**
|
|
* 값 변경 처리
|
|
*/
|
|
protected handleValueChange = (value: any) => {
|
|
this.updateComponent({ value });
|
|
};
|
|
}
|
|
|
|
// 자동 등록 실행
|
|
AutocompleteSearchInputRenderer.registerSelf();
|
|
|
|
// Hot Reload 지원 (개발 모드)
|
|
if (process.env.NODE_ENV === "development") {
|
|
AutocompleteSearchInputRenderer.enableHotReload();
|
|
}
|