chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SplitPanelLayout2): 좌우 패널 수정/삭제 기능 및 모달 자동 닫기 구현

Browse Source 
- 좌측 패널에 수정/삭제 버튼 기능 추가
- 좌측 패널 설정에 개별 수정/삭제 UI 추가
- 삭제 API 호출을 백엔드 라우트에 맞게 수정 (DELETE /tables/{tableName}/delete)
- UniversalFormModal 저장 완료 후 closeEditModal 이벤트 발생하여 모달 자동 닫기
- ModalConfig에 showSaveButton 타입 추가
This commit is contained in:
SeongHyun Kim
2025-12-24 14:01:38 +09:00
parent 171ed6e938
commit 486e5ee29b
5 changed files with 341 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx
View File

@@ -992,6 +992,42 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
</div>
</div>
{/* 개별 수정/삭제 버튼 (좌측) */}
<div className="border-t pt-3">
<Label className="text-xs font-medium">개별 수정/삭제</Label>
<p className="text-muted-foreground mb-2 text-[10px]">각 행에 표시되는 수정/삭제 버튼</p>
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label className="text-xs">수정 버튼</Label>
<Switch
checked={config.leftPanel?.showEditButton || false}
onCheckedChange={(checked) => updateConfig("leftPanel.showEditButton", checked)}
/>
</div>
<div className="flex items-center justify-between">
<Label className="text-xs">삭제 버튼</Label>
<Switch
checked={config.leftPanel?.showDeleteButton || false}
onCheckedChange={(checked) => updateConfig("leftPanel.showDeleteButton", checked)}
/>
</div>
{(config.leftPanel?.showEditButton || config.leftPanel?.showDeleteButton) && (
<div className="mt-2">
<Label className="text-xs">기본키 컬럼</Label>
<ColumnSelect
columns={leftColumns}
value={config.leftPanel?.primaryKeyColumn || ""}
onValueChange={(value) => updateConfig("leftPanel.primaryKeyColumn", value)}
placeholder="기본키 컬럼 선택 (기본: id)"
/>
<p className="text-muted-foreground mt-1 text-[10px]">
수정/삭제 시 레코드 식별에 사용
</p>
</div>
)}
</div>
</div>
{/* 탭 설정 (좌측) */}
<div className="border-t pt-3">
<div className="flex items-center justify-between">
@@ -1274,6 +1310,42 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
</div>
</div>
{/* 개별 수정/삭제 버튼 */}
<div className="border-t pt-3">
<Label className="text-xs font-medium">개별 수정/삭제</Label>
<p className="text-muted-foreground mb-2 text-[10px]">각 행에 표시되는 수정/삭제 버튼</p>
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label className="text-xs">수정 버튼</Label>
<Switch
checked={config.rightPanel?.showEditButton || false}
onCheckedChange={(checked) => updateConfig("rightPanel.showEditButton", checked)}
/>
</div>
<div className="flex items-center justify-between">
<Label className="text-xs">삭제 버튼</Label>
<Switch
checked={config.rightPanel?.showDeleteButton || false}
onCheckedChange={(checked) => updateConfig("rightPanel.showDeleteButton", checked)}
/>
</div>
{(config.rightPanel?.showEditButton || config.rightPanel?.showDeleteButton) && (
<div className="mt-2">
<Label className="text-xs">기본키 컬럼</Label>
<ColumnSelect
columns={rightColumns}
value={config.rightPanel?.primaryKeyColumn || ""}
onValueChange={(value) => updateConfig("rightPanel.primaryKeyColumn", value)}
placeholder="기본키 컬럼 선택 (기본: id)"
/>
<p className="text-muted-foreground mt-1 text-[10px]">
수정/삭제 시 레코드 식별에 사용
</p>
</div>
)}
</div>
</div>
{/* 탭 설정 (우측) */}
<div className="border-t pt-3">
<div className="flex items-center justify-between">
@@ -1348,39 +1420,6 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
onCheckedChange={(checked) => updateConfig("rightPanel.showCheckbox", checked)}
/>
</div>
{/* 수정/삭제 버튼 */}
<div className="space-y-2">
<Label className="text-xs font-medium">개별 수정/삭제</Label>
<div className="flex items-center justify-between">
<Label className="text-xs">수정 버튼 표시</Label>
<Switch
checked={config.rightPanel?.showEditButton || false}
onCheckedChange={(checked) => updateConfig("rightPanel.showEditButton", checked)}
/>
</div>
<div className="flex items-center justify-between">
<Label className="text-xs">삭제 버튼 표시</Label>
<Switch
checked={config.rightPanel?.showDeleteButton || false}
onCheckedChange={(checked) => updateConfig("rightPanel.showDeleteButton", checked)}
/>
</div>
</div>
{/* 기본키 컬럼 */}
<div>
<Label className="text-xs">기본키 컬럼</Label>
<ColumnSelect
columns={rightColumns}
value={config.rightPanel?.primaryKeyColumn || ""}
onValueChange={(value) => updateConfig("rightPanel.primaryKeyColumn", value)}
placeholder="기본키 컬럼 선택 (기본: id)"
/>
<p className="text-muted-foreground mt-1 text-[10px]">
수정/삭제 시 사용할 기본키 컬럼 (미선택 시 id 사용)
</p>
</div>
</div>
</details>
</div>