feat(universal-form-modal): 조건부 테이블, 동적 Select 옵션, 서브 테이블 수정 로드 기능 구현

조건부 테이블: 체크박스/탭으로 조건 선택 시 다른 테이블 데이터 관리
동적 Select 옵션: 소스 테이블에서 드롭다운 옵션 동적 로드
행 선택 모드: Select 값 변경 시 같은 소스 행의 연관 컬럼 자동 채움
수정 모드 서브 테이블 로드: loadOnEdit 옵션으로 반복 섹션 데이터 자동 로드
SplitPanelLayout2 메인 테이블 병합: 서브 테이블 수정 시 메인 데이터 함께 조회
연결 필드 그룹 표시 형식: subDisplayColumn 추가로 메인/서브 컬럼 분리 설정
UX 개선: 컬럼 선택 UI를 검색 가능한 Combobox로 전환
saveMainAsFirst 로직 개선: items 없어도 메인 데이터 저장 가능
This commit is contained in:
SeongHyun Kim
2025-12-28 19:32:13 +09:00
parent 486e5ee29b
commit 47b23d1aa3
13 changed files with 3461 additions and 241 deletions

View File

@@ -1343,6 +1343,65 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
</p>
</div>
)}
{/* 수정 시 메인 테이블 조회 설정 */}
{config.rightPanel?.showEditButton && (
<div className="mt-3 border-t pt-3">
<div className="flex items-center justify-between mb-2">
<Label className="text-xs font-medium"> </Label>
<Switch
checked={!!config.rightPanel?.mainTableForEdit?.tableName}
onCheckedChange={(checked) => {
if (checked) {
updateConfig("rightPanel.mainTableForEdit", {
tableName: "",
linkColumn: { mainColumn: "", subColumn: "" },
});
} else {
updateConfig("rightPanel.mainTableForEdit", undefined);
}
}}
/>
</div>
<p className="text-muted-foreground mb-2 text-[10px]">
,
</p>
{config.rightPanel?.mainTableForEdit && (
<div className="space-y-2 rounded-lg border p-2 bg-muted/30">
<div>
<Label className="text-[10px]"> </Label>
<Input
value={config.rightPanel.mainTableForEdit.tableName || ""}
onChange={(e) => updateConfig("rightPanel.mainTableForEdit.tableName", e.target.value)}
placeholder="예: user_info"
className="h-7 text-xs mt-1"
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div>
<Label className="text-[10px]"> </Label>
<Input
value={config.rightPanel.mainTableForEdit.linkColumn?.mainColumn || ""}
onChange={(e) => updateConfig("rightPanel.mainTableForEdit.linkColumn.mainColumn", e.target.value)}
placeholder="예: user_id"
className="h-7 text-xs mt-1"
/>
</div>
<div>
<Label className="text-[10px]"> </Label>
<Input
value={config.rightPanel.mainTableForEdit.linkColumn?.subColumn || ""}
onChange={(e) => updateConfig("rightPanel.mainTableForEdit.linkColumn.subColumn", e.target.value)}
placeholder="예: user_id"
className="h-7 text-xs mt-1"
/>
</div>
</div>
</div>
)}
</div>
)}
</div>
</div>