feat: Enhance CardDisplay and SplitPanelLayout components with improved table name handling and custom selection data

- Updated CardDisplayComponent to streamline table name retrieval from props or component configuration.
- Introduced custom selection data management in SplitPanelLayoutComponent, allowing for better handling of selected items in custom mode.
- Enhanced form data handling in SplitPanelLayoutComponent to utilize selected data from the left panel, improving data flow and user experience.
This commit is contained in:
kjs 2026-02-10 14:01:43 +09:00
parent 8253be0048
commit e97fd05e75
2 changed files with 16 additions and 3 deletions

View File

@ -233,8 +233,8 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
return; return;
} }
// tableName 확인 (props에서 전달받은 tableName 사용) // tableName 확인 (props에서 전달받은 tableName 또는 componentConfig에서 추출)
const tableNameToUse = tableName || component.componentConfig?.tableName || 'user_info'; // 기본 테이블명 설정 const tableNameToUse = tableName || component.componentConfig?.tableName;
if (!tableNameToUse) { if (!tableNameToUse) {
setLoading(false); setLoading(false);

View File

@ -193,6 +193,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
const [rightData, setRightData] = useState<any[] | any>(null); // 조인 모드는 배열, 상세 모드는 객체 const [rightData, setRightData] = useState<any[] | any>(null); // 조인 모드는 배열, 상세 모드는 객체
const [selectedLeftItem, setSelectedLeftItem] = useState<any>(null); const [selectedLeftItem, setSelectedLeftItem] = useState<any>(null);
const [expandedRightItems, setExpandedRightItems] = useState<Set<string | number>>(new Set()); // 확장된 우측 아이템 const [expandedRightItems, setExpandedRightItems] = useState<Set<string | number>>(new Set()); // 확장된 우측 아이템
const [customLeftSelectedData, setCustomLeftSelectedData] = useState<Record<string, any>>({}); // 커스텀 모드: 좌측 선택 데이터
const [leftSearchQuery, setLeftSearchQuery] = useState(""); const [leftSearchQuery, setLeftSearchQuery] = useState("");
const [rightSearchQuery, setRightSearchQuery] = useState(""); const [rightSearchQuery, setRightSearchQuery] = useState("");
const [isLoadingLeft, setIsLoadingLeft] = useState(false); const [isLoadingLeft, setIsLoadingLeft] = useState(false);
@ -2747,6 +2748,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
component={componentData as any} component={componentData as any}
isDesignMode={false} isDesignMode={false}
formData={{}} formData={{}}
tableName={componentConfig.leftPanel?.tableName}
onFormDataChange={(data: any) => {
// 커스텀 모드: 좌측 카드/테이블 선택 시 데이터 캡처
if (data?.selectedRowsData && data.selectedRowsData.length > 0) {
setCustomLeftSelectedData(data.selectedRowsData[0]);
setSelectedLeftItem(data.selectedRowsData[0]);
} else if (data?.selectedRowsData && data.selectedRowsData.length === 0) {
setCustomLeftSelectedData({});
setSelectedLeftItem(null);
}
}}
/> />
</div> </div>
); );
@ -3617,7 +3629,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
<DynamicComponentRenderer <DynamicComponentRenderer
component={componentData as any} component={componentData as any}
isDesignMode={false} isDesignMode={false}
formData={{}} formData={customLeftSelectedData}
tableName={componentConfig.rightPanel?.tableName || componentConfig.leftPanel?.tableName}
/> />
</div> </div>
); );