4f10b5e42d
447+ 파일, 4500+ 줄 변경: - gray-* → border/bg-muted/text-foreground/text-muted-foreground - blue-* → primary/ring - red-* → destructive - green-* → emerald (일관성) - indigo-* → primary - yellow/orange → amber (통일) - dark mode 변형도 시맨틱 토큰으로 변환 Made-with: Cursor
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-emerald-600" />
|
||
) : (
|
||
<AlertCircle className="h-4 w-4 text-amber-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-amber-600">⚠️ {actionType.toUpperCase()} 액션은 실행 조건이 필요합니다</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* INSERT 액션 안내 */}
|
||
{actionType === "insert" && (
|
||
<div className="rounded-md border border-emerald-200 bg-emerald-50 p-2">
|
||
<p className="text-xs text-emerald-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-emerald-600" />
|
||
<span className="text-xs font-medium text-emerald-600">설정 완료</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<AlertCircle className="h-3 w-3 text-amber-500" />
|
||
<span className="text-xs font-medium text-amber-600">설정 필요</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default ActionSummaryPanel;
|