From e5723741163d55b6058d7e53dcac029429d671e4 Mon Sep 17 00:00:00 2001
From: hyeonsu <hyeonsu@wace.me>
Date: Tue, 16 Sep 2025 18:15:54 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=EC=97=B0=EA=B2=B0=20=EC=84=A4=EB=AA=85=20?=
 =?UTF-8?q?=ED=95=84=EB=93=9C=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=99=B8?=
 =?UTF-8?q?=EB=B6=80=20=ED=98=B8=EC=B6=9C=20=EC=84=A4=EC=A0=95=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataflow/ConnectionSetupModal.tsx         |  2 +-
 .../components/dataflow/DataFlowDesigner.tsx  |  6 +-
 .../dataflow/RelationshipListModal.tsx        |  1 +
 .../connection/ExternalCallSettings.tsx       | 61 ++++++++++++++++++-
 frontend/lib/api/dataflow.ts                  |  2 +-
 frontend/types/connectionTypes.ts             |  7 ++-
 frontend/types/dataflowTypes.ts               |  1 +
 7 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/frontend/components/dataflow/ConnectionSetupModal.tsx b/frontend/components/dataflow/ConnectionSetupModal.tsx
index 056381af..0c2f6b91 100644
--- a/frontend/components/dataflow/ConnectionSetupModal.tsx
+++ b/frontend/components/dataflow/ConnectionSetupModal.tsx
@@ -186,7 +186,7 @@ export const ConnectionSetupModal: React.FC<ConnectionSetupModalProps> = ({
       } else {
         // 기본값 설정
         setSimpleKeySettings({
-          notes: `${fromDisplayName}과 ${toDisplayName} 간의 키값 연결`,
+          notes: existingRel?.note || `${fromDisplayName}과 ${toDisplayName} 간의 키값 연결`,
         });
         setDataSaveSettings({ actions: [] });
       }
diff --git a/frontend/components/dataflow/DataFlowDesigner.tsx b/frontend/components/dataflow/DataFlowDesigner.tsx
index 608f00b7..7ebe19ab 100644
--- a/frontend/components/dataflow/DataFlowDesigner.tsx
+++ b/frontend/components/dataflow/DataFlowDesigner.tsx
@@ -114,6 +114,7 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
                 toColumns: Array.isArray(rel.toColumns) ? rel.toColumns : [],
                 connectionType: rel.connectionType || "simple-key",
                 relationshipName: rel.relationshipName || "",
+                note: rel.note || "", // 🔥 연결 설명 로드
               }));
 
               setTempRelationships(loadedRelationships);
@@ -493,6 +494,7 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
           toColumns: relationshipData.to_column_name ? relationshipData.to_column_name.split(",") : [],
           connectionType: relationshipData.connection_type as "simple-key" | "data-save" | "external-call",
           relationshipName: relationshipData.relationship_name,
+          note: (relationshipData.settings as any)?.notes || "", // 🔥 notes를 note로 변환
           settings: relationshipData.settings || {},
         };
 
@@ -532,6 +534,7 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
           toColumns: relationshipData.to_column_name ? relationshipData.to_column_name.split(",") : [],
           connectionType: relationshipData.connection_type as "simple-key" | "data-save" | "external-call",
           relationshipName: relationshipData.relationship_name,
+          note: (relationshipData.settings as any)?.notes || "", // 🔥 notes를 note로 변환
           settings: relationshipData.settings || {},
         };
 
@@ -613,7 +616,7 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
         // 연결된 테이블 목록 추출
         const tableNames = extractTableNames(nodes);
 
-        // 관계 데이터를 JsonRelationship 형태로 변환 (settings 제거 - relationships는 순수 연결 정보만)
+        // 관계 데이터를 JsonRelationship 형태로 변환 (note 필드 포함)
         const jsonRelationships: JsonRelationship[] = tempRelationships.map((rel) => ({
           id: rel.id,
           relationshipName: rel.relationshipName, // 🔥 핵심: 관계 이름 포함
@@ -622,6 +625,7 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
           fromColumns: rel.fromColumns,
           toColumns: rel.toColumns,
           connectionType: rel.connectionType,
+          note: rel.note, // 🔥 연결 설명 포함
         }));
 
         // 저장 요청 데이터 구성
diff --git a/frontend/components/dataflow/RelationshipListModal.tsx b/frontend/components/dataflow/RelationshipListModal.tsx
index 08f7c11c..16115674 100644
--- a/frontend/components/dataflow/RelationshipListModal.tsx
+++ b/frontend/components/dataflow/RelationshipListModal.tsx
@@ -102,6 +102,7 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
         existingRelationship: {
           relationshipName: relationship.relationshipName,
           connectionType: relationship.connectionType,
+          note: relationship.note, // 🔥 연결 설명 포함
           settings: relationshipSettings,
         },
       });
diff --git a/frontend/components/dataflow/connection/ExternalCallSettings.tsx b/frontend/components/dataflow/connection/ExternalCallSettings.tsx
index 13464e8b..f919ad6c 100644
--- a/frontend/components/dataflow/connection/ExternalCallSettings.tsx
+++ b/frontend/components/dataflow/connection/ExternalCallSettings.tsx
@@ -27,7 +27,7 @@ export const ExternalCallSettings: React.FC<ExternalCallSettingsProps> = ({ sett
           </Label>
           <Select
             value={settings.callType}
-            onValueChange={(value: "rest-api" | "email" | "webhook" | "ftp" | "queue") =>
+            onValueChange={(value: "rest-api" | "email" | "webhook" | "kakao-talk" | "ftp" | "queue") =>
               onSettingsChange({ ...settings, callType: value })
             }
           >
@@ -36,6 +36,7 @@ export const ExternalCallSettings: React.FC<ExternalCallSettingsProps> = ({ sett
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="rest-api">REST API 호출</SelectItem>
+              <SelectItem value="kakao-talk"> 카카오톡 알림</SelectItem>
               <SelectItem value="email">이메일 전송</SelectItem>
               <SelectItem value="webhook">웹훅</SelectItem>
               <SelectItem value="ftp">FTP 업로드</SelectItem>
@@ -109,6 +110,64 @@ export const ExternalCallSettings: React.FC<ExternalCallSettingsProps> = ({ sett
             </div>
           </>
         )}
+
+        {settings.callType === "kakao-talk" && (
+          <>
+            <div>
+              <Label htmlFor="kakaoAccessToken" className="text-sm">
+                카카오 액세스 토큰 <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="kakaoAccessToken"
+                type="password"
+                value={settings.kakaoAccessToken || ""}
+                onChange={(e) =>
+                  onSettingsChange({
+                    ...settings,
+                    kakaoAccessToken: e.target.value,
+                  })
+                }
+                placeholder="카카오 개발자 센터에서 발급받은 토큰"
+                className="text-sm"
+              />
+              <p className="mt-1 text-xs text-gray-600">
+                💡{" "}
+                <a
+                  href="https://developers.kakao.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 hover:underline"
+                >
+                  카카오 개발자 센터
+                </a>
+                에서 앱 등록 후 토큰을 발급받으세요
+              </p>
+            </div>
+
+            <div>
+              <Label htmlFor="kakaoMessage" className="text-sm">
+                메시지 템플릿 <span className="text-red-500">*</span>
+              </Label>
+              <Textarea
+                id="kakaoMessage"
+                value={settings.bodyTemplate || ""}
+                onChange={(e) =>
+                  onSettingsChange({
+                    ...settings,
+                    bodyTemplate: e.target.value,
+                  })
+                }
+                placeholder="안녕하세요! {{customer_name}}님의 주문({{order_id}})이 처리되었습니다."
+                rows={3}
+                className="text-sm"
+              />
+              <p className="mt-1 text-xs text-gray-600">
+                💡 {"{{"} 필드명 {"}"} 형태로 데이터를 삽입할 수 있습니다 (예: {"{{"} user_name {"}"}, {"{{"} amount{" "}
+                {"}"})
+              </p>
+            </div>
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/frontend/lib/api/dataflow.ts b/frontend/lib/api/dataflow.ts
index 68585900..0924705a 100644
--- a/frontend/lib/api/dataflow.ts
+++ b/frontend/lib/api/dataflow.ts
@@ -260,7 +260,7 @@ export interface JsonRelationship {
   fromColumns: string[];
   toColumns: string[];
   connectionType: "simple-key" | "data-save" | "external-call";
-  // settings 제거 - relationships는 순수 연결 정보만 저장
+  note?: string; // 데이터 연결에 대한 설명
 }
 
 export interface CreateDiagramRequest {
diff --git a/frontend/types/connectionTypes.ts b/frontend/types/connectionTypes.ts
index 7c5ac426..538836b5 100644
--- a/frontend/types/connectionTypes.ts
+++ b/frontend/types/connectionTypes.ts
@@ -23,6 +23,7 @@ export interface ConnectionInfo {
   existingRelationship?: {
     relationshipName: string;
     connectionType: string;
+    note?: string; // 연결 설명
     settings?: Record<string, unknown>;
   };
 }
@@ -66,11 +67,15 @@ export interface DataSaveSettings {
 
 // 외부 호출 설정
 export interface ExternalCallSettings {
-  callType: "rest-api" | "email" | "webhook" | "ftp" | "queue";
+  callType: "rest-api" | "email" | "webhook" | "kakao-talk" | "ftp" | "queue";
   apiUrl?: string;
   httpMethod?: "GET" | "POST" | "PUT" | "DELETE";
   headers?: string;
   bodyTemplate?: string;
+
+  // 카카오톡 전용 설정
+  kakaoAccessToken?: string;
+  kakaoRecipient?: string;
 }
 
 // ConnectionSetupModal Props 타입
diff --git a/frontend/types/dataflowTypes.ts b/frontend/types/dataflowTypes.ts
index 50d3e760..79d1203b 100644
--- a/frontend/types/dataflowTypes.ts
+++ b/frontend/types/dataflowTypes.ts
@@ -22,6 +22,7 @@ export interface TableNodeData extends Record<string, unknown> {
 // 내부에서 사용할 확장된 JsonRelationship 타입 (connectionType 포함)
 export interface ExtendedJsonRelationship extends JsonRelationship {
   connectionType: "simple-key" | "data-save" | "external-call";
+  note?: string; // 데이터 연결에 대한 설명
   settings?: {
     control?: {
       triggerType?: "insert" | "update" | "delete";

From 5fc7dd095b929dd51aad862fd1569d350854882a Mon Sep 17 00:00:00 2001
From: hyeonsu <hyeonsu@wace.me>
Date: Tue, 16 Sep 2025 18:22:06 +0900
Subject: [PATCH 2/2] =?UTF-8?q?ConnectionSetupModal=20=EB=B0=8F=20Relation?=
 =?UTF-8?q?shipListModal=EC=97=90=EC=84=9C=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EB=A1=9C=EC=A7=81=20=EA=B0=9C=EC=84=A0:?=
 =?UTF-8?q?=20data-save=20=EC=97=B0=EA=B2=B0=EC=9D=98=20=EB=8B=A4=EC=96=91?=
 =?UTF-8?q?=ED=95=9C=20=EA=B5=AC=EC=A1=B0=20=EC=A7=80=EC=9B=90=20=EB=B0=8F?=
 =?UTF-8?q?=20=EC=9E=84=EC=8B=9C=20=EA=B4=80=EA=B3=84=20=EC=9A=B0=EC=84=A0?=
 =?UTF-8?q?=20=EB=A1=9C=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataflow/ConnectionSetupModal.tsx         | 36 ++++++++++++++-----
 .../dataflow/RelationshipListModal.tsx        | 10 ++++--
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/frontend/components/dataflow/ConnectionSetupModal.tsx b/frontend/components/dataflow/ConnectionSetupModal.tsx
index 0c2f6b91..8cb2c831 100644
--- a/frontend/components/dataflow/ConnectionSetupModal.tsx
+++ b/frontend/components/dataflow/ConnectionSetupModal.tsx
@@ -84,9 +84,20 @@ export const ConnectionSetupModal: React.FC<ConnectionSetupModalProps> = ({
         setSimpleKeySettings({
           notes: settings.notes as string,
         });
-      } else if (connectionType === "data-save" && settings.actions) {
-        // data-save 설정 로드 - 안전하게 처리
-        const actionsData = Array.isArray(settings.actions) ? settings.actions : [];
+      } else if (connectionType === "data-save") {
+        // data-save 설정 로드 - 안전하게 처리 (다양한 구조 지원)
+        let actionsData: Record<string, unknown>[] = [];
+
+        if (Array.isArray((settings as any).actions)) {
+          // 직접 actions 배열이 있는 경우
+          actionsData = (settings as any).actions;
+        } else if ((settings as any).plan && Array.isArray((settings as any).plan.actions)) {
+          // plan 객체 안에 actions가 있는 경우
+          actionsData = (settings as any).plan.actions;
+        } else if (Array.isArray(settings)) {
+          // settings 자체가 actions 배열인 경우
+          actionsData = settings as Record<string, unknown>[];
+        }
         setDataSaveSettings({
           actions: actionsData.map((action: Record<string, unknown>) => ({
             id: (action.id as string) || `action-${Date.now()}`,
@@ -118,12 +129,19 @@ export const ConnectionSetupModal: React.FC<ConnectionSetupModalProps> = ({
           })),
         });
 
-        // 전체 실행 조건 로드
-        if (settings.control) {
-          const controlSettings = settings.control as { conditionTree?: ConditionNode[] };
-          if (Array.isArray(controlSettings.conditionTree)) {
-            setConditions(controlSettings.conditionTree || []);
-          }
+        // control 설정도 로드 (전체 실행 조건)
+        if (
+          (settings as any).control &&
+          (settings as any).control.conditionTree &&
+          Array.isArray((settings as any).control.conditionTree)
+        ) {
+          const conditionTree = (settings as any).control.conditionTree as ConditionNode[];
+          setConditions(
+            conditionTree.map((condition) => ({
+              ...condition,
+              operator: condition.operator || "=", // 기본값 보장
+            })),
+          );
         }
       } else if (connectionType === "external-call") {
         setExternalCallSettings({
diff --git a/frontend/components/dataflow/RelationshipListModal.tsx b/frontend/components/dataflow/RelationshipListModal.tsx
index 16115674..6df6c17b 100644
--- a/frontend/components/dataflow/RelationshipListModal.tsx
+++ b/frontend/components/dataflow/RelationshipListModal.tsx
@@ -49,9 +49,15 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
     }
     onSetSelectedColumns(newSelectedColumns);
 
-    // 🔥 수정: 데이터베이스에서 관계 설정 정보 로드
+    // 🔥 수정: 관계 설정 정보 로드 (임시 관계 우선, 없으면 데이터베이스에서)
     let relationshipSettings = {};
-    if (diagramId && diagramId > 0) {
+
+    // 1. 먼저 임시 관계의 settings 사용 (메모리에 있는 데이터)
+    if (relationship.settings && Object.keys(relationship.settings).length > 0) {
+      relationshipSettings = relationship.settings;
+    }
+    // 2. 임시 settings가 없고 저장된 관계도인 경우 데이터베이스에서 로드
+    else if (diagramId && diagramId > 0) {
       try {
         const jsonDiagram = await DataFlowAPI.getJsonDataFlowDiagramById(diagramId, companyCode);
         if (jsonDiagram && relationship.connectionType === "data-save") {