116 lines
3.8 KiB
TypeScript
116 lines
3.8 KiB
TypeScript
"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;
|