ERP-node/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx

114 lines
3.4 KiB
TypeScript

"use client";
import React from "react";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Save, Eye, TestTube, Copy, RotateCcw, Loader2 } from "lucide-react";
import { toast } from "sonner";
// 타입 import
import { DataConnectionState, DataConnectionActions } from "../types/redesigned";
interface ActionButtonsProps {
state: DataConnectionState;
actions: DataConnectionActions;
}
/**
* 🎯 액션 버튼들
* - 저장, 미리보기, 테스트 실행
* - 설정 복사, 초기화
*/
const ActionButtons: React.FC<ActionButtonsProps> = ({ state, actions }) => {
const handleSave = async () => {
try {
await actions.saveMappings();
} catch (error) {
console.error("저장 실패:", error);
}
};
const handlePreview = () => {
// TODO: 미리보기 모달 열기
toast.info("미리보기 기능은 곧 구현될 예정입니다.");
};
const handleTest = async () => {
try {
await actions.testExecution();
} catch (error) {
console.error("테스트 실패:", error);
}
};
const handleCopySettings = () => {
// TODO: 설정 복사 기능
toast.info("설정 복사 기능은 곧 구현될 예정입니다.");
};
const handleReset = () => {
if (confirm("모든 설정을 초기화하시겠습니까?")) {
// TODO: 상태 초기화
toast.success("설정이 초기화되었습니다.");
}
};
const canSave = state.fieldMappings.length > 0 && !state.isLoading;
const canTest = state.fieldMappings.length > 0 && !state.isLoading;
return (
<div className="space-y-3">
{/* 주요 액션 */}
<div className="grid grid-cols-2 gap-2">
<Button onClick={handleSave} disabled={!canSave} className="h-8 text-xs">
{state.isLoading ? <Loader2 className="mr-1 h-3 w-3 animate-spin" /> : <Save className="mr-1 h-3 w-3" />}
</Button>
<Button variant="outline" onClick={handlePreview} className="h-8 text-xs">
<Eye className="mr-1 h-3 w-3" />
</Button>
</div>
{/* 테스트 실행 */}
<Button variant="secondary" onClick={handleTest} disabled={!canTest} className="h-8 w-full text-xs">
{state.isLoading ? <Loader2 className="mr-1 h-3 w-3 animate-spin" /> : <TestTube className="mr-1 h-3 w-3" />}
</Button>
<Separator />
{/* 보조 액션 */}
<div className="grid grid-cols-2 gap-2">
<Button variant="ghost" size="sm" onClick={handleCopySettings} className="h-7 text-xs">
<Copy className="mr-1 h-3 w-3" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={handleReset}
className="text-destructive hover:text-destructive h-7 text-xs"
>
<RotateCcw className="mr-1 h-3 w-3" />
</Button>
</div>
{/* 상태 정보 */}
{state.fieldMappings.length > 0 && (
<div className="text-muted-foreground border-t pt-2 text-center text-xs">
{state.fieldMappings.length}
{state.validationErrors.length > 0 && (
<span className="ml-1 text-orange-600">({state.validationErrors.length} )</span>
)}
</div>
)}
</div>
);
};
export default ActionButtons;