104 lines
3.8 KiB
TypeScript
104 lines
3.8 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";
|
|
|
|
/**
|
|
* 📋 좌측 패널 (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>
|
|
|
|
{/* 외부호출이 아닐 때만 매핑과 액션 설정 표시 */}
|
|
{state.connectionType !== "external_call" && (
|
|
<>
|
|
<Separator />
|
|
|
|
{/* 매핑 상세 목록 */}
|
|
{(() => {
|
|
// 액션 그룹에서 모든 매핑 수집
|
|
const allMappings = state.actionGroups.flatMap((group) =>
|
|
group.actions.flatMap((action) => action.fieldMappings || []),
|
|
);
|
|
|
|
// 기존 fieldMappings와 병합 (중복 제거)
|
|
const combinedMappings = [...state.fieldMappings, ...allMappings];
|
|
const uniqueMappings = combinedMappings.filter(
|
|
(mapping, index, arr) => arr.findIndex((m) => m.id === mapping.id) === index,
|
|
);
|
|
|
|
console.log("🔍 LeftPanel - 매핑 데이터 수집:", {
|
|
stateFieldMappings: state.fieldMappings,
|
|
actionGroupMappings: allMappings,
|
|
combinedMappings: uniqueMappings,
|
|
});
|
|
|
|
return (
|
|
uniqueMappings.length > 0 && (
|
|
<>
|
|
<div>
|
|
<h3 className="text-muted-foreground mb-2 text-sm font-medium">매핑 상세 목록</h3>
|
|
<MappingDetailList
|
|
mappings={uniqueMappings}
|
|
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>
|
|
</>
|
|
)}
|
|
|
|
{/* 외부호출일 때는 간단한 설명만 표시 */}
|
|
{state.connectionType === "external_call" && (
|
|
<>
|
|
<Separator />
|
|
<div className="rounded-md bg-blue-50 p-3">
|
|
<h3 className="mb-1 text-sm font-medium text-blue-800">외부 호출 모드</h3>
|
|
<p className="text-xs text-blue-600">우측 패널에서 REST API 설정을 구성하세요.</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LeftPanel;
|