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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user