제어관리 외부커넥션 설정기능

frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx

@@ -0,0 +1,81 @@
+"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;