feat: 수정 버튼 액션에 제목과 설명 설정 기능 추가

추가된 기능:
1. ButtonConfigPanel - 수정 모달 제목/설명 입력 필드 추가 
2. EditModal - 제목/설명 props 추가 및 조건부 헤더 렌더링 
3. DataTableConfigPanel - 수정 모달 설정 섹션 추가 
4. InteractiveDataTable - editModalConfig에서 제목/설명 읽기 
5. screen/[screenId]/page - 제목/설명 전달 추가 
6. 타입 정의 - editModalConfig 추가 

변경된 파일:
- frontend/components/screen/config-panels/ButtonConfigPanel.tsx
- frontend/components/screen/EditModal.tsx
- frontend/components/screen/InteractiveDataTable.tsx
- frontend/components/screen/panels/DataTableConfigPanel.tsx
- frontend/app/(main)/screens/[screenId]/page.tsx
- frontend/types/screen-legacy-backup.ts

결과:
-  수정 버튼에서 모달 제목과 설명을 설정할 수 있음
-  데이터테이블에서도 수정 모달 설정 가능
-  제목과 설명이 모달 헤더에 표시됨
-  설정하지 않으면 기본 동작 유지
This commit is contained in:
kjs
2025-10-01 17:41:30 +09:00
parent b452f148a9
commit 114928ca4f
6 changed files with 147 additions and 29 deletions

View File

@@ -52,7 +52,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
addButtonText: component.addButtonText || "추가",
editButtonText: component.editButtonText || "수정",
deleteButtonText: component.deleteButtonText || "삭제",
// 모달 설정
// 추가 모달 설정
modalTitle: component.addModalConfig?.title || "새 데이터 추가",
// 테이블명도 로컬 상태로 관리
tableName: component.tableName || "",
@@ -62,6 +62,9 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
modalGridColumns: component.addModalConfig?.gridColumns || 2,
modalSubmitButtonText: component.addModalConfig?.submitButtonText || "추가",
modalCancelButtonText: component.addModalConfig?.cancelButtonText || "취소",
// 수정 모달 설정
editModalTitle: component.editModalConfig?.title || "",
editModalDescription: component.editModalConfig?.description || "",
paginationEnabled: component.pagination?.enabled ?? true,
showPageSizeSelector: component.pagination?.showPageSizeSelector ?? true,
showPageInfo: component.pagination?.showPageInfo ?? true,
@@ -161,7 +164,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
addButtonText: component.addButtonText || "추가",
editButtonText: component.editButtonText || "수정",
deleteButtonText: component.deleteButtonText || "삭제",
// 모달 설정
// 추가 모달 설정
modalTitle: component.addModalConfig?.title || "새 데이터 추가",
modalDescription: component.addModalConfig?.description || "",
modalWidth: component.addModalConfig?.width || "lg",
@@ -169,6 +172,9 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
modalGridColumns: component.addModalConfig?.gridColumns || 2,
modalSubmitButtonText: component.addModalConfig?.submitButtonText || "추가",
modalCancelButtonText: component.addModalConfig?.cancelButtonText || "취소",
// 수정 모달 설정
editModalTitle: component.editModalConfig?.title || "",
editModalDescription: component.editModalConfig?.description || "",
paginationEnabled: component.pagination?.enabled ?? true,
showPageSizeSelector: component.pagination?.showPageSizeSelector ?? true,
showPageInfo: component.pagination?.showPageInfo ?? true,
@@ -1379,6 +1385,55 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
</div>
)}
{/* 수정 모달 설정 */}
{localValues.enableEdit && (
<div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
<h4 className="mb-3 text-sm font-medium text-gray-900"> </h4>
<div className="space-y-3">
<div className="space-y-2">
<Label htmlFor="edit-modal-title" className="text-sm">
</Label>
<Input
id="edit-modal-title"
value={localValues.editModalTitle}
onChange={(e) => {
const newValue = e.target.value;
setLocalValues((prev) => ({ ...prev, editModalTitle: newValue }));
onUpdateComponent({
editModalConfig: { ...component.editModalConfig, title: newValue },
});
}}
placeholder="데이터 수정"
className="h-8 text-sm"
/>
<p className="text-xs text-gray-500"> </p>
</div>
<div className="space-y-2">
<Label htmlFor="edit-modal-description" className="text-sm">
</Label>
<Input
id="edit-modal-description"
value={localValues.editModalDescription}
onChange={(e) => {
const newValue = e.target.value;
setLocalValues((prev) => ({ ...prev, editModalDescription: newValue }));
onUpdateComponent({
editModalConfig: { ...component.editModalConfig, description: newValue },
});
}}
placeholder="선택한 데이터를 수정합니다"
className="h-8 text-sm"
/>
<p className="text-xs text-gray-500"> </p>
</div>
</div>
</div>
)}
<div className="space-y-2">
<Label htmlFor="grid-columns"> </Label>
<select