572 lines
25 KiB
TypeScript
572 lines
25 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import React, { useState, useEffect } from "react";
|
|||
|
|
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { Badge } from "@/components/ui/badge";
|
|||
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
|||
|
|
import { Input } from "@/components/ui/input";
|
|||
|
|
import { Label } from "@/components/ui/label";
|
|||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|||
|
|
import { Switch } from "@/components/ui/switch";
|
|||
|
|
import { Separator } from "@/components/ui/separator";
|
|||
|
|
import {
|
|||
|
|
ChevronDown,
|
|||
|
|
ChevronRight,
|
|||
|
|
Plus,
|
|||
|
|
Trash2,
|
|||
|
|
Copy,
|
|||
|
|
Settings2,
|
|||
|
|
ArrowLeft,
|
|||
|
|
Save,
|
|||
|
|
Play,
|
|||
|
|
AlertTriangle,
|
|||
|
|
} from "lucide-react";
|
|||
|
|
import { toast } from "sonner";
|
|||
|
|
|
|||
|
|
// API import
|
|||
|
|
import { getColumnsFromConnection } from "@/lib/api/multiConnection";
|
|||
|
|
|
|||
|
|
// 타입 import
|
|||
|
|
import { ColumnInfo, Connection, TableInfo } from "@/lib/types/multiConnection";
|
|||
|
|
import { ActionGroup, SingleAction, FieldMapping } from "../types/redesigned";
|
|||
|
|
|
|||
|
|
// 컴포넌트 import
|
|||
|
|
import ActionConditionBuilder from "./ActionConfig/ActionConditionBuilder";
|
|||
|
|
import FieldMappingCanvas from "./VisualMapping/FieldMappingCanvas";
|
|||
|
|
|
|||
|
|
interface MultiActionConfigStepProps {
|
|||
|
|
fromTable?: TableInfo;
|
|||
|
|
toTable?: TableInfo;
|
|||
|
|
fromConnection?: Connection;
|
|||
|
|
toConnection?: Connection;
|
|||
|
|
// 제어 조건 관련
|
|||
|
|
controlConditions: any[];
|
|||
|
|
onUpdateControlCondition: (index: number, condition: any) => void;
|
|||
|
|
onDeleteControlCondition: (index: number) => void;
|
|||
|
|
onAddControlCondition: () => void;
|
|||
|
|
// 액션 그룹 관련
|
|||
|
|
actionGroups: ActionGroup[];
|
|||
|
|
onUpdateActionGroup: (groupId: string, updates: Partial<ActionGroup>) => void;
|
|||
|
|
onDeleteActionGroup: (groupId: string) => void;
|
|||
|
|
onAddActionGroup: () => void;
|
|||
|
|
onAddActionToGroup: (groupId: string) => void;
|
|||
|
|
onUpdateActionInGroup: (groupId: string, actionId: string, updates: Partial<SingleAction>) => void;
|
|||
|
|
onDeleteActionFromGroup: (groupId: string, actionId: string) => void;
|
|||
|
|
// 필드 매핑 관련
|
|||
|
|
fieldMappings: FieldMapping[];
|
|||
|
|
onCreateMapping: (fromField: ColumnInfo, toField: ColumnInfo) => void;
|
|||
|
|
onDeleteMapping: (mappingId: string) => void;
|
|||
|
|
// 네비게이션
|
|||
|
|
onNext: () => void;
|
|||
|
|
onBack: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 🎯 4단계: 통합된 멀티 액션 설정
|
|||
|
|
* - 제어 조건 설정
|
|||
|
|
* - 여러 액션 그룹 관리
|
|||
|
|
* - AND/OR 논리 연산자
|
|||
|
|
* - 액션별 조건 설정
|
|||
|
|
* - INSERT 액션 시 컬럼 매핑
|
|||
|
|
*/
|
|||
|
|
const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
|||
|
|
fromTable,
|
|||
|
|
toTable,
|
|||
|
|
fromConnection,
|
|||
|
|
toConnection,
|
|||
|
|
controlConditions,
|
|||
|
|
onUpdateControlCondition,
|
|||
|
|
onDeleteControlCondition,
|
|||
|
|
onAddControlCondition,
|
|||
|
|
actionGroups,
|
|||
|
|
onUpdateActionGroup,
|
|||
|
|
onDeleteActionGroup,
|
|||
|
|
onAddActionGroup,
|
|||
|
|
onAddActionToGroup,
|
|||
|
|
onUpdateActionInGroup,
|
|||
|
|
onDeleteActionFromGroup,
|
|||
|
|
fieldMappings,
|
|||
|
|
onCreateMapping,
|
|||
|
|
onDeleteMapping,
|
|||
|
|
onNext,
|
|||
|
|
onBack,
|
|||
|
|
}) => {
|
|||
|
|
const [fromColumns, setFromColumns] = useState<ColumnInfo[]>([]);
|
|||
|
|
const [toColumns, setToColumns] = useState<ColumnInfo[]>([]);
|
|||
|
|
const [isLoading, setIsLoading] = useState(false);
|
|||
|
|
const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set(["group_1"])); // 첫 번째 그룹은 기본 열림
|
|||
|
|
const [activeTab, setActiveTab] = useState<"control" | "actions" | "mapping">("control"); // 현재 활성 탭
|
|||
|
|
|
|||
|
|
// 컬럼 정보 로드
|
|||
|
|
useEffect(() => {
|
|||
|
|
const loadColumns = async () => {
|
|||
|
|
if (!fromConnection || !toConnection || !fromTable || !toTable) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setIsLoading(true);
|
|||
|
|
const [fromCols, toCols] = await Promise.all([
|
|||
|
|
getColumnsFromConnection(fromConnection.id, fromTable.tableName),
|
|||
|
|
getColumnsFromConnection(toConnection.id, toTable.tableName),
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
setFromColumns(Array.isArray(fromCols) ? fromCols : []);
|
|||
|
|
setToColumns(Array.isArray(toCols) ? toCols : []);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("❌ 컬럼 정보 로드 실패:", error);
|
|||
|
|
toast.error("필드 정보를 불러오는데 실패했습니다.");
|
|||
|
|
} finally {
|
|||
|
|
setIsLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
loadColumns();
|
|||
|
|
}, [fromConnection, toConnection, fromTable, toTable]);
|
|||
|
|
|
|||
|
|
// 그룹 확장/축소 토글
|
|||
|
|
const toggleGroupExpansion = (groupId: string) => {
|
|||
|
|
setExpandedGroups((prev) => {
|
|||
|
|
const newSet = new Set(prev);
|
|||
|
|
if (newSet.has(groupId)) {
|
|||
|
|
newSet.delete(groupId);
|
|||
|
|
} else {
|
|||
|
|
newSet.add(groupId);
|
|||
|
|
}
|
|||
|
|
return newSet;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 액션 타입별 아이콘
|
|||
|
|
const getActionTypeIcon = (actionType: string) => {
|
|||
|
|
switch (actionType) {
|
|||
|
|
case "insert":
|
|||
|
|
return "➕";
|
|||
|
|
case "update":
|
|||
|
|
return "✏️";
|
|||
|
|
case "delete":
|
|||
|
|
return "🗑️";
|
|||
|
|
case "upsert":
|
|||
|
|
return "🔄";
|
|||
|
|
default:
|
|||
|
|
return "⚙️";
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 논리 연산자별 색상
|
|||
|
|
const getLogicalOperatorColor = (operator: string) => {
|
|||
|
|
switch (operator) {
|
|||
|
|
case "AND":
|
|||
|
|
return "bg-blue-100 text-blue-800";
|
|||
|
|
case "OR":
|
|||
|
|
return "bg-orange-100 text-orange-800";
|
|||
|
|
default:
|
|||
|
|
return "bg-gray-100 text-gray-800";
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// INSERT 액션이 있는지 확인
|
|||
|
|
const hasInsertActions = actionGroups.some((group) =>
|
|||
|
|
group.actions.some((action) => action.actionType === "insert" && action.isEnabled),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 탭 정보
|
|||
|
|
const tabs = [
|
|||
|
|
{ id: "control" as const, label: "제어 조건", icon: "🎯", description: "전체 제어 실행 조건" },
|
|||
|
|
{ id: "actions" as const, label: "액션 설정", icon: "⚙️", description: "액션 그룹 및 실행 조건" },
|
|||
|
|
...(hasInsertActions
|
|||
|
|
? [{ id: "mapping" as const, label: "컬럼 매핑", icon: "🔗", description: "INSERT 액션 필드 매핑" }]
|
|||
|
|
: []),
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<CardHeader className="pb-2">
|
|||
|
|
<CardTitle className="flex items-center gap-2">
|
|||
|
|
<Settings2 className="h-5 w-5" />
|
|||
|
|
4단계: 액션 및 매핑 설정
|
|||
|
|
</CardTitle>
|
|||
|
|
<p className="text-muted-foreground text-sm">제어 조건, 액션 그룹, 필드 매핑을 설정하세요</p>
|
|||
|
|
</CardHeader>
|
|||
|
|
|
|||
|
|
<CardContent className="flex h-full flex-col p-4">
|
|||
|
|
{/* 탭 헤더 */}
|
|||
|
|
<div className="mb-4 flex border-b">
|
|||
|
|
{tabs.map((tab) => (
|
|||
|
|
<button
|
|||
|
|
key={tab.id}
|
|||
|
|
onClick={() => setActiveTab(tab.id)}
|
|||
|
|
className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${
|
|||
|
|
activeTab === tab.id
|
|||
|
|
? "border-primary text-primary border-b-2"
|
|||
|
|
: "text-muted-foreground hover:text-foreground"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<span>{tab.icon}</span>
|
|||
|
|
<span>{tab.label}</span>
|
|||
|
|
{tab.id === "actions" && (
|
|||
|
|
<Badge variant="outline" className="ml-1 text-xs">
|
|||
|
|
{actionGroups.filter((g) => g.isEnabled).length}
|
|||
|
|
</Badge>
|
|||
|
|
)}
|
|||
|
|
{tab.id === "mapping" && hasInsertActions && (
|
|||
|
|
<Badge variant="outline" className="ml-1 text-xs">
|
|||
|
|
{fieldMappings.length}
|
|||
|
|
</Badge>
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 탭 설명 */}
|
|||
|
|
<div className="bg-muted/30 mb-4 rounded-md p-3">
|
|||
|
|
<p className="text-muted-foreground text-sm">{tabs.find((tab) => tab.id === activeTab)?.description}</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 탭별 컨텐츠 */}
|
|||
|
|
<div className="min-h-0 flex-1 overflow-y-auto">
|
|||
|
|
{activeTab === "control" && (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{/* 제어 조건 섹션 */}
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<h3 className="text-lg font-medium">제어 조건</h3>
|
|||
|
|
<Button onClick={onAddControlCondition} size="sm" className="flex items-center gap-2">
|
|||
|
|
<Plus className="h-4 w-4" />
|
|||
|
|
조건 추가
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{controlConditions.length === 0 ? (
|
|||
|
|
<div className="rounded-lg border border-dashed border-gray-300 p-8 text-center">
|
|||
|
|
<div className="text-muted-foreground">
|
|||
|
|
<AlertTriangle className="mx-auto mb-2 h-8 w-8" />
|
|||
|
|
<p className="mb-2">제어 조건이 없습니다</p>
|
|||
|
|
<p className="text-sm">조건을 추가하면 해당 조건이 충족될 때만 액션이 실행됩니다</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{controlConditions.map((condition, index) => (
|
|||
|
|
<div key={index} className="flex items-center gap-3 rounded-md border p-3">
|
|||
|
|
<span className="text-muted-foreground text-sm">조건 {index + 1}</span>
|
|||
|
|
<div className="flex-1">
|
|||
|
|
{/* 여기에 조건 편집 컴포넌트 추가 */}
|
|||
|
|
<div className="text-muted-foreground text-sm">조건 설정: {JSON.stringify(condition)}</div>
|
|||
|
|
</div>
|
|||
|
|
<Button variant="ghost" size="sm" onClick={() => onDeleteControlCondition(index)}>
|
|||
|
|
<Trash2 className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{activeTab === "actions" && (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{/* 액션 그룹 헤더 */}
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<h3 className="text-lg font-medium">액션 그룹</h3>
|
|||
|
|
<Badge variant="outline" className="text-xs">
|
|||
|
|
{actionGroups.filter((g) => g.isEnabled).length}개 활성화
|
|||
|
|
</Badge>
|
|||
|
|
</div>
|
|||
|
|
<Button onClick={onAddActionGroup} size="sm" className="flex items-center gap-2">
|
|||
|
|
<Plus className="h-4 w-4" />
|
|||
|
|
그룹 추가
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 액션 그룹 목록 */}
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{actionGroups.map((group, groupIndex) => (
|
|||
|
|
<div key={group.id} className="bg-card rounded-lg border">
|
|||
|
|
{/* 그룹 헤더 */}
|
|||
|
|
<Collapsible
|
|||
|
|
open={expandedGroups.has(group.id)}
|
|||
|
|
onOpenChange={() => toggleGroupExpansion(group.id)}
|
|||
|
|
>
|
|||
|
|
<CollapsibleTrigger asChild>
|
|||
|
|
<div className="hover:bg-muted/50 flex cursor-pointer items-center justify-between p-4">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
{expandedGroups.has(group.id) ? (
|
|||
|
|
<ChevronDown className="h-4 w-4" />
|
|||
|
|
) : (
|
|||
|
|
<ChevronRight className="h-4 w-4" />
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Input
|
|||
|
|
value={group.name}
|
|||
|
|
onChange={(e) => onUpdateActionGroup(group.id, { name: e.target.value })}
|
|||
|
|
className="h-8 w-40"
|
|||
|
|
onClick={(e) => e.stopPropagation()}
|
|||
|
|
/>
|
|||
|
|
<Badge className={getLogicalOperatorColor(group.logicalOperator)}>
|
|||
|
|
{group.logicalOperator}
|
|||
|
|
</Badge>
|
|||
|
|
<Badge variant={group.isEnabled ? "default" : "secondary"}>
|
|||
|
|
{group.actions.length}개 액션
|
|||
|
|
</Badge>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
{/* 그룹 논리 연산자 선택 */}
|
|||
|
|
<Select
|
|||
|
|
value={group.logicalOperator}
|
|||
|
|
onValueChange={(value: "AND" | "OR") =>
|
|||
|
|
onUpdateActionGroup(group.id, { logicalOperator: value })
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<SelectTrigger className="h-8 w-20" onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<SelectValue />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
<SelectItem value="AND">AND</SelectItem>
|
|||
|
|
<SelectItem value="OR">OR</SelectItem>
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
|
|||
|
|
{/* 그룹 활성화/비활성화 */}
|
|||
|
|
<Switch
|
|||
|
|
checked={group.isEnabled}
|
|||
|
|
onCheckedChange={(checked) => onUpdateActionGroup(group.id, { isEnabled: checked })}
|
|||
|
|
onClick={(e) => e.stopPropagation()}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 그룹 삭제 */}
|
|||
|
|
{actionGroups.length > 1 && (
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
onDeleteActionGroup(group.id);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Trash2 className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</CollapsibleTrigger>
|
|||
|
|
|
|||
|
|
{/* 그룹 내용 */}
|
|||
|
|
<CollapsibleContent>
|
|||
|
|
<div className="bg-muted/20 border-t p-4">
|
|||
|
|
{/* 액션 추가 버튼 */}
|
|||
|
|
<div className="mb-4 flex justify-end">
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={() => onAddActionToGroup(group.id)}
|
|||
|
|
className="flex items-center gap-2"
|
|||
|
|
>
|
|||
|
|
<Plus className="h-4 w-4" />
|
|||
|
|
액션 추가
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 액션 목록 */}
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{group.actions.map((action, actionIndex) => (
|
|||
|
|
<div key={action.id} className="rounded-md border bg-white p-3">
|
|||
|
|
{/* 액션 헤더 */}
|
|||
|
|
<div className="mb-3 flex items-center justify-between">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<span className="text-lg">{getActionTypeIcon(action.actionType)}</span>
|
|||
|
|
<Input
|
|||
|
|
value={action.name}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
onUpdateActionInGroup(group.id, action.id, { name: e.target.value })
|
|||
|
|
}
|
|||
|
|
className="h-8 w-32"
|
|||
|
|
/>
|
|||
|
|
<Select
|
|||
|
|
value={action.actionType}
|
|||
|
|
onValueChange={(value: "insert" | "update" | "delete" | "upsert") =>
|
|||
|
|
onUpdateActionInGroup(group.id, action.id, { actionType: value })
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<SelectTrigger className="h-8 w-24">
|
|||
|
|
<SelectValue />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
<SelectItem value="insert">INSERT</SelectItem>
|
|||
|
|
<SelectItem value="update">UPDATE</SelectItem>
|
|||
|
|
<SelectItem value="delete">DELETE</SelectItem>
|
|||
|
|
<SelectItem value="upsert">UPSERT</SelectItem>
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Switch
|
|||
|
|
checked={action.isEnabled}
|
|||
|
|
onCheckedChange={(checked) =>
|
|||
|
|
onUpdateActionInGroup(group.id, action.id, { isEnabled: checked })
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
{group.actions.length > 1 && (
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={() => onDeleteActionFromGroup(group.id, action.id)}
|
|||
|
|
>
|
|||
|
|
<Trash2 className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 액션 조건 설정 */}
|
|||
|
|
<ActionConditionBuilder
|
|||
|
|
actionType={action.actionType}
|
|||
|
|
fromColumns={fromColumns}
|
|||
|
|
toColumns={toColumns}
|
|||
|
|
conditions={action.conditions}
|
|||
|
|
fieldMappings={action.fieldMappings}
|
|||
|
|
onConditionsChange={(conditions) =>
|
|||
|
|
onUpdateActionInGroup(group.id, action.id, { conditions })
|
|||
|
|
}
|
|||
|
|
onFieldMappingsChange={(fieldMappings) =>
|
|||
|
|
onUpdateActionInGroup(group.id, action.id, { fieldMappings })
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 그룹 로직 설명 */}
|
|||
|
|
<div className="mt-4 rounded-md bg-blue-50 p-3">
|
|||
|
|
<div className="flex items-start gap-2">
|
|||
|
|
<AlertTriangle className="mt-0.5 h-4 w-4 text-blue-600" />
|
|||
|
|
<div className="text-sm">
|
|||
|
|
<div className="font-medium text-blue-900">{group.logicalOperator} 조건 그룹</div>
|
|||
|
|
<div className="text-blue-700">
|
|||
|
|
{group.logicalOperator === "AND"
|
|||
|
|
? "이 그룹의 모든 액션이 실행 가능한 조건일 때만 실행됩니다."
|
|||
|
|
: "이 그룹의 액션 중 하나라도 실행 가능한 조건이면 해당 액션만 실행됩니다."}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</CollapsibleContent>
|
|||
|
|
</Collapsible>
|
|||
|
|
|
|||
|
|
{/* 그룹 간 연결선 (마지막 그룹이 아닌 경우) */}
|
|||
|
|
{groupIndex < actionGroups.length - 1 && (
|
|||
|
|
<div className="flex justify-center py-2">
|
|||
|
|
<div className="text-muted-foreground flex items-center gap-2 text-xs">
|
|||
|
|
<div className="bg-border h-px w-8"></div>
|
|||
|
|
<span>다음 그룹</span>
|
|||
|
|
<div className="bg-border h-px w-8"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{activeTab === "mapping" && hasInsertActions && (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{/* 컬럼 매핑 헤더 */}
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<h3 className="text-lg font-medium">컬럼 매핑</h3>
|
|||
|
|
<Badge variant="outline" className="text-xs">
|
|||
|
|
{fieldMappings.length}개 매핑
|
|||
|
|
</Badge>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-muted-foreground text-sm">INSERT 액션에 필요한 필드들을 매핑하세요</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 컬럼 매핑 캔버스 */}
|
|||
|
|
{isLoading ? (
|
|||
|
|
<div className="flex h-64 items-center justify-center">
|
|||
|
|
<div className="text-muted-foreground">컬럼 정보를 불러오는 중...</div>
|
|||
|
|
</div>
|
|||
|
|
) : fromColumns.length > 0 && toColumns.length > 0 ? (
|
|||
|
|
<div className="rounded-lg border bg-white p-4">
|
|||
|
|
<FieldMappingCanvas
|
|||
|
|
fromFields={fromColumns}
|
|||
|
|
toFields={toColumns}
|
|||
|
|
mappings={fieldMappings}
|
|||
|
|
onCreateMapping={onCreateMapping}
|
|||
|
|
onDeleteMapping={onDeleteMapping}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="flex h-64 flex-col items-center justify-center space-y-3 rounded-lg border border-dashed">
|
|||
|
|
<AlertTriangle className="text-muted-foreground h-8 w-8" />
|
|||
|
|
<div className="text-muted-foreground">컬럼 정보를 찾을 수 없습니다.</div>
|
|||
|
|
<div className="text-muted-foreground text-xs">
|
|||
|
|
FROM 컬럼: {fromColumns.length}개, TO 컬럼: {toColumns.length}개
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 매핑되지 않은 필드 처리 옵션 */}
|
|||
|
|
<div className="rounded-md border bg-yellow-50 p-4">
|
|||
|
|
<h4 className="mb-3 flex items-center gap-2 font-medium text-yellow-800">
|
|||
|
|
<AlertTriangle className="h-4 w-4" />
|
|||
|
|
매핑되지 않은 필드 처리
|
|||
|
|
</h4>
|
|||
|
|
<div className="space-y-3 text-sm">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<input type="radio" id="empty" name="unmapped-strategy" defaultChecked className="h-4 w-4" />
|
|||
|
|
<label htmlFor="empty" className="text-yellow-700">
|
|||
|
|
비워두기 (NULL 또는 빈 값)
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<input type="radio" id="default" name="unmapped-strategy" className="h-4 w-4" />
|
|||
|
|
<label htmlFor="default" className="text-yellow-700">
|
|||
|
|
기본값 사용 (데이터베이스 DEFAULT 값)
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<input type="radio" id="skip" name="unmapped-strategy" className="h-4 w-4" />
|
|||
|
|
<label htmlFor="skip" className="text-yellow-700">
|
|||
|
|
해당 필드 제외 (INSERT 구문에 포함하지 않음)
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 하단 네비게이션 */}
|
|||
|
|
<div className="flex-shrink-0 border-t pt-4">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<Button variant="outline" onClick={onBack} className="flex items-center gap-2">
|
|||
|
|
<ArrowLeft className="h-4 w-4" />
|
|||
|
|
이전
|
|||
|
|
</Button>
|
|||
|
|
|
|||
|
|
<div className="text-muted-foreground text-sm">
|
|||
|
|
{actionGroups.filter((g) => g.isEnabled).length}개 그룹, 총{" "}
|
|||
|
|
{actionGroups.reduce((sum, g) => sum + g.actions.filter((a) => a.isEnabled).length, 0)}개 액션
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Button onClick={onNext} className="flex items-center gap-2">
|
|||
|
|
<Save className="h-4 w-4" />
|
|||
|
|
저장
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default MultiActionConfigStep;
|