114 lines
4.4 KiB
TypeScript
114 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { ConnectionTypeSelector } from "./LeftPanel/ConnectionTypeSelector";
|
|
import { MappingInfoPanel } from "./LeftPanel/MappingInfoPanel";
|
|
import { StepProgress } from "./RightPanel/StepProgress";
|
|
import { ConnectionStep } from "./RightPanel/ConnectionStep";
|
|
import { TableStep } from "./RightPanel/TableStep";
|
|
import { FieldMappingStep } from "./RightPanel/FieldMappingStep";
|
|
import { DataConnectionState } from "./types/redesigned";
|
|
import { ResponsiveContainer, ResponsiveGrid } from "@/components/layout/ResponsiveContainer";
|
|
import { useResponsive } from "@/lib/hooks/useResponsive";
|
|
|
|
const initialState: DataConnectionState = {
|
|
connectionType: "data_save",
|
|
currentStep: 1,
|
|
fieldMappings: [],
|
|
mappingStats: {
|
|
totalMappings: 0,
|
|
validMappings: 0,
|
|
invalidMappings: 0,
|
|
missingRequiredFields: 0,
|
|
estimatedRows: 0,
|
|
actionType: "INSERT",
|
|
},
|
|
isLoading: false,
|
|
validationErrors: [],
|
|
};
|
|
|
|
export const DataConnectionDesigner: React.FC = () => {
|
|
const [state, setState] = useState<DataConnectionState>(initialState);
|
|
const { isMobile, isTablet } = useResponsive();
|
|
|
|
return (
|
|
<div className="h-screen bg-gradient-to-br from-slate-50 to-gray-100">
|
|
<div className="bg-white border-b border-gray-200 px-6 py-4">
|
|
<h1 className="text-2xl font-bold text-gray-900">
|
|
🎨 제어관리 - 데이터 연결 설정
|
|
</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
시각적 필드 매핑으로 데이터 연결을 쉽게 설정하세요
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex h-[calc(100vh-80px)]">
|
|
<div className="w-[30%] bg-white border-r border-gray-200 flex flex-col">
|
|
<ConnectionTypeSelector
|
|
connectionType={state.connectionType}
|
|
onConnectionTypeChange={(type) => setState(prev => ({ ...prev, connectionType: type }))}
|
|
/>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
<MappingInfoPanel
|
|
mappingStats={state.mappingStats}
|
|
fieldMappings={state.fieldMappings}
|
|
selectedMapping={state.selectedMapping}
|
|
onMappingSelect={(mappingId) => setState(prev => ({ ...prev, selectedMapping: mappingId }))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-[70%] bg-gray-50 flex flex-col">
|
|
<StepProgress
|
|
currentStep={state.currentStep}
|
|
onStepChange={(step) => setState(prev => ({ ...prev, currentStep: step }))}
|
|
/>
|
|
|
|
<div className="flex-1 p-6">
|
|
{state.currentStep === 1 && (
|
|
<ConnectionStep
|
|
fromConnection={state.fromConnection}
|
|
toConnection={state.toConnection}
|
|
onFromConnectionChange={(conn) => setState(prev => ({ ...prev, fromConnection: conn }))}
|
|
onToConnectionChange={(conn) => setState(prev => ({ ...prev, toConnection: conn }))}
|
|
onNext={() => setState(prev => ({ ...prev, currentStep: 2 }))}
|
|
/>
|
|
)}
|
|
|
|
{state.currentStep === 2 && (
|
|
<TableStep
|
|
fromConnection={state.fromConnection}
|
|
toConnection={state.toConnection}
|
|
fromTable={state.fromTable}
|
|
toTable={state.toTable}
|
|
onFromTableChange={(table) => setState(prev => ({ ...prev, fromTable: table }))}
|
|
onToTableChange={(table) => setState(prev => ({ ...prev, toTable: table }))}
|
|
onNext={() => setState(prev => ({ ...prev, currentStep: 3 }))}
|
|
onBack={() => setState(prev => ({ ...prev, currentStep: 1 }))}
|
|
/>
|
|
)}
|
|
|
|
{state.currentStep === 3 && (
|
|
<FieldMappingStep
|
|
fromTable={state.fromTable}
|
|
toTable={state.toTable}
|
|
fieldMappings={state.fieldMappings}
|
|
onMappingsChange={(mappings) => setState(prev => ({ ...prev, fieldMappings: mappings }))}
|
|
onBack={() => setState(prev => ({ ...prev, currentStep: 2 }))}
|
|
onSave={() => {
|
|
// 저장 로직
|
|
console.log("저장:", state);
|
|
alert("데이터 연결 설정이 저장되었습니다!");
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DataConnectionDesigner;
|