2025-09-22 18:17:24 +09:00
7 changed files with 110 additions and 16 deletions
--- 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({
@ -186,7 +204,7 @@ export const ConnectionSetupModal: React.FC<ConnectionSetupModalProps> = ({
      } else {
        // 기본값 설정
        setSimpleKeySettings({
-          notes: `${fromDisplayName}과 ${toDisplayName} 간의 키값 연결`,
+          notes: existingRel?.note || `${fromDisplayName}과 ${toDisplayName} 간의 키값 연결`,
        });
        setDataSaveSettings({ actions: [] });
      }
--- 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, // 🔥 연결 설명 포함
        }));

        // 저장 요청 데이터 구성
--- 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") {
@ -102,6 +108,7 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
        existingRelationship: {
          relationshipName: relationship.relationshipName,
          connectionType: relationship.connectionType,
+          note: relationship.note, // 🔥 연결 설명 포함
          settings: relationshipSettings,
        },
      });
--- 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>
  );
--- 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 {
--- 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 타입
--- 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";