From 3f76d16afe26db7fd86dd88735fc87f98bb4e933 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Wed, 1 Oct 2025 17:45:29 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=20=EC=95=A1=EC=85=98?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=AA=A8=EB=8B=AC=20=EC=A0=9C=EB=AA=A9/?=
 =?UTF-8?q?=EC=84=A4=EB=AA=85=20=EC=A0=84=EB=8B=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

변경 사항:
1. InteractiveScreenViewer - handleEditAction 수정 ✅
   - config에서 editModalTitle, editModalDescription 읽기
   - openEditModal 이벤트로 제목/설명 전달

2. ButtonTypeConfig 타입 추가 ✅
   - editModalTitle 필드 추가
   - editModalDescription 필드 추가

3. ButtonConfigPanel 수정 ✅
   - webTypeConfig에도 제목/설명 저장
   - 이중 저장 (action + webTypeConfig)

결과:
- ✅ 버튼의 수정 액션 실행 시 설정한 제목이 모달에 표시됨
- ✅ 버튼의 수정 액션 실행 시 설정한 설명이 모달에 표시됨
- ✅ EditModal이 openEditModal 이벤트에서 제목/설명 받음
- ✅ 전체 데이터 흐름 완성
---
 .../screen/InteractiveScreenViewer.tsx        | 26 ++++++++++++++++---
 .../config-panels/ButtonConfigPanel.tsx       | 22 ++++++++++------
 frontend/types/screen-legacy-backup.ts        |  4 +++
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/frontend/components/screen/InteractiveScreenViewer.tsx b/frontend/components/screen/InteractiveScreenViewer.tsx
index aeadcc1f..957f3365 100644
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@@ -1382,9 +1382,29 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
         // 편집 액션
         const handleEditAction = () => {
-          console.log("✏️ 편집 모드 활성화");
-          // 읽기 전용 모드를 편집 모드로 전환
-          alert("편집 모드로 전환되었습니다.");
+          console.log("✏️ 수정 액션 실행");
+          
+          // 버튼 컴포넌트의 수정 모달 설정 가져오기
+          const editModalTitle = config?.editModalTitle || "";
+          const editModalDescription = config?.editModalDescription || "";
+          
+          console.log("📝 버튼 수정 모달 설정:", { editModalTitle, editModalDescription });
+          
+          // EditModal 열기 이벤트 발생
+          const event = new CustomEvent("openEditModal", {
+            detail: {
+              screenId: screenInfo?.id,
+              modalSize: "lg",
+              editData: formData,
+              modalTitle: editModalTitle,
+              modalDescription: editModalDescription,
+              onSave: () => {
+                console.log("✅ 수정 완료");
+                // 필요시 폼 새로고침 또는 콜백 실행
+              },
+            },
+          });
+          window.dispatchEvent(event);
         };
 
         // 추가 액션
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index 5216469a..9f90e0da 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -402,12 +402,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                   id="edit-modal-title"
                   placeholder="모달 제목을 입력하세요 (예: 데이터 수정)"
                   value={config.action?.editModalTitle || ""}
-                  onChange={(e) =>
+                  onChange={(e) => {
+                    const newValue = e.target.value;
                     onUpdateProperty("componentConfig.action", {
                       ...config.action,
-                      editModalTitle: e.target.value,
-                    })
-                  }
+                      editModalTitle: newValue,
+                    });
+                    // webTypeConfig에도 저장
+                    onUpdateProperty("webTypeConfig.editModalTitle", newValue);
+                  }}
                 />
                 <p className="mt-1 text-xs text-gray-500">비워두면 기본 제목이 표시됩니다</p>
               </div>
@@ -418,12 +421,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                   id="edit-modal-description"
                   placeholder="모달 설명을 입력하세요 (예: 선택한 데이터를 수정합니다)"
                   value={config.action?.editModalDescription || ""}
-                  onChange={(e) =>
+                  onChange={(e) => {
+                    const newValue = e.target.value;
                     onUpdateProperty("componentConfig.action", {
                       ...config.action,
-                      editModalDescription: e.target.value,
-                    })
-                  }
+                      editModalDescription: newValue,
+                    });
+                    // webTypeConfig에도 저장
+                    onUpdateProperty("webTypeConfig.editModalDescription", newValue);
+                  }}
                 />
                 <p className="mt-1 text-xs text-gray-500">비워두면 설명이 표시되지 않습니다</p>
               </div>
diff --git a/frontend/types/screen-legacy-backup.ts b/frontend/types/screen-legacy-backup.ts
index e952afaf..762d4a8a 100644
--- a/frontend/types/screen-legacy-backup.ts
+++ b/frontend/types/screen-legacy-backup.ts
@@ -882,6 +882,10 @@ export interface ButtonTypeConfig {
   navigateScreenId?: number; // 이동할 화면 ID
   navigateTarget?: "_self" | "_blank";
 
+  // 수정 모달 설정
+  editModalTitle?: string; // 수정 모달 제목
+  editModalDescription?: string; // 수정 모달 설명
+
   // 커스텀 액션 설정
   customAction?: string; // JavaScript 코드 또는 함수명