제어관리 외부커넥션 설정기능

frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Settings, CheckCircle, AlertCircle } from "lucide-react";
+
+// 타입 import
+import { DataConnectionState } from "../types/redesigned";
+
+interface ActionSummaryPanelProps {
+  state: DataConnectionState;
+}
+
+/**
+ * 📋 액션 설정 요약 패널
+ * - 액션 타입 표시
+ * - 실행 조건 요약
+ * - 설정 완료 상태
+ */
+const ActionSummaryPanel: React.FC<ActionSummaryPanelProps> = ({ state }) => {
+  const { actionType, actionConditions } = state;
+
+  const isConfigured = actionType && (actionType === "insert" || actionConditions.length > 0);
+
+  const actionTypeLabels = {
+    insert: "INSERT",
+    update: "UPDATE",
+    delete: "DELETE",
+    upsert: "UPSERT",
+  };
+
+  const actionTypeDescriptions = {
+    insert: "새 데이터 삽입",
+    update: "기존 데이터 수정",
+    delete: "데이터 삭제",
+    upsert: "있으면 수정, 없으면 삽입",
+  };
+
+  return (
+    <Card className="shadow-sm">
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-sm">
+          <Settings className="h-4 w-4" />
+          액션 설정
+          {isConfigured ? (
+            <CheckCircle className="h-4 w-4 text-green-600" />
+          ) : (
+            <AlertCircle className="h-4 w-4 text-orange-500" />
+          )}
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent className="space-y-3 px-4 pt-0 pb-4">
+        {/* 액션 타입 */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-medium">액션 타입</span>
+            {actionType ? (
+              <Badge variant="outline" className="text-xs">
+                {actionTypeLabels[actionType]}
+              </Badge>
+            ) : (
+              <span className="text-muted-foreground text-xs">미설정</span>
+            )}
+          </div>
+
+          {actionType && <p className="text-muted-foreground text-xs">{actionTypeDescriptions[actionType]}</p>}
+        </div>
+
+        {/* 실행 조건 */}
+        {actionType && actionType !== "insert" && (
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-medium">실행 조건</span>
+              <span className="text-muted-foreground text-xs">
+                {actionConditions.length > 0 ? `${actionConditions.length}개 조건` : "조건 없음"}
+              </span>
+            </div>
+
+            {actionConditions.length === 0 && (
+              <p className="text-xs text-orange-600">⚠️ {actionType.toUpperCase()} 액션은 실행 조건이 필요합니다</p>
+            )}
+          </div>
+        )}
+
+        {/* INSERT 액션 안내 */}
+        {actionType === "insert" && (
+          <div className="rounded-md border border-green-200 bg-green-50 p-2">
+            <p className="text-xs text-green-700">✅ INSERT 액션은 별도 조건 없이 모든 매핑된 데이터를 삽입합니다</p>
+          </div>
+        )}
+
+        {/* 설정 상태 */}
+        <div className="border-t pt-2">
+          <div className="flex items-center gap-2">
+            {isConfigured ? (
+              <>
+                <CheckCircle className="h-3 w-3 text-green-600" />
+                <span className="text-xs font-medium text-green-600">설정 완료</span>
+              </>
+            ) : (
+              <>
+                <AlertCircle className="h-3 w-3 text-orange-500" />
+                <span className="text-xs font-medium text-orange-600">설정 필요</span>
+              </>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ActionSummaryPanel;