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;
|