82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Separator } from "@/components/ui/separator";
|
|
|
|
// 타입 import
|
|
import { LeftPanelProps } from "../types/redesigned";
|
|
|
|
// 컴포넌트 import
|
|
import ConnectionTypeSelector from "./ConnectionTypeSelector";
|
|
import MappingDetailList from "./MappingDetailList";
|
|
import ActionSummaryPanel from "./ActionSummaryPanel";
|
|
import AdvancedSettings from "./AdvancedSettings";
|
|
import ActionButtons from "./ActionButtons";
|
|
|
|
/**
|
|
* 📋 좌측 패널 (30% 너비)
|
|
* - 연결 타입 선택
|
|
* - 매핑 정보 모니터링
|
|
* - 상세 설정 목록
|
|
* - 액션 버튼들
|
|
*/
|
|
const LeftPanel: React.FC<LeftPanelProps> = ({ state, actions }) => {
|
|
return (
|
|
<div className="flex h-full flex-col overflow-hidden">
|
|
<ScrollArea className="flex-1 p-3 pb-0">
|
|
<div className="space-y-3 pb-3">
|
|
{/* 0단계: 연결 타입 선택 */}
|
|
<div>
|
|
<h3 className="text-muted-foreground mb-2 text-sm font-medium">0단계: 연결 타입</h3>
|
|
<ConnectionTypeSelector selectedType={state.connectionType} onTypeChange={actions.setConnectionType} />
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 매핑 상세 목록 */}
|
|
{state.fieldMappings.length > 0 && (
|
|
<>
|
|
<div>
|
|
<h3 className="text-muted-foreground mb-2 text-sm font-medium">매핑 상세 목록</h3>
|
|
<MappingDetailList
|
|
mappings={state.fieldMappings}
|
|
selectedMapping={state.selectedMapping}
|
|
onSelectMapping={(mappingId) => {
|
|
// TODO: 선택된 매핑 상태 업데이트
|
|
}}
|
|
onUpdateMapping={actions.updateMapping}
|
|
onDeleteMapping={actions.deleteMapping}
|
|
/>
|
|
</div>
|
|
|
|
<Separator />
|
|
</>
|
|
)}
|
|
|
|
{/* 액션 설정 요약 */}
|
|
<div>
|
|
<h3 className="text-muted-foreground mb-2 text-sm font-medium">액션 설정</h3>
|
|
<ActionSummaryPanel state={state} />
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 고급 설정 */}
|
|
<div>
|
|
<h3 className="text-muted-foreground mb-2 text-sm font-medium">고급 설정</h3>
|
|
<AdvancedSettings connectionType={state.connectionType} />
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
{/* 하단 액션 버튼들 - 고정 위치 */}
|
|
<div className="flex-shrink-0 border-t bg-white p-3 shadow-sm">
|
|
<ActionButtons state={state} actions={actions} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LeftPanel;
|