데이터 흐름 설정 개선: INSERT 액션에 대한 필드 매핑 검증 로직 추가 및 새로운 InsertFieldMappingPanel 컴포넌트 구현.

2025-09-18 17:17:06 +09:00
parent 85e48353f5
commit e6cd8806e3
7 changed files with 783 additions and 4 deletions
--- a/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx
+++ b/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx
@@ -0,0 +1,395 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { ColumnInfo } from "@/lib/api/dataflow";
+import { DataSaveSettings } from "@/types/connectionTypes";
+import { ColumnTableSection } from "./ColumnTableSection";
+
+interface InsertFieldMappingPanelProps {
+  action: DataSaveSettings["actions"][0];
+  actionIndex: number;
+  settings: DataSaveSettings;
+  onSettingsChange: (settings: DataSaveSettings) => void;
+  fromTableColumns: ColumnInfo[];
+  toTableColumns: ColumnInfo[];
+  fromTableName?: string;
+  toTableName?: string;
+}
+
+interface ColumnMapping {
+  toColumnName: string;
+  fromColumnName?: string;
+  defaultValue?: string;
+}
+
+export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = ({
+  action,
+  actionIndex,
+  settings,
+  onSettingsChange,
+  fromTableColumns,
+  toTableColumns,
+  fromTableName,
+  toTableName,
+}) => {
+  const [selectedFromColumn, setSelectedFromColumn] = useState<string | null>(null);
+  const [selectedToColumn, setSelectedToColumn] = useState<string | null>(null);
+  const [columnMappings, setColumnMappings] = useState<ColumnMapping[]>([]);
+
+  // 검색 및 필터링 상태 (FROM과 TO 독립적)
+  const [fromSearchTerm, setFromSearchTerm] = useState("");
+  const [toSearchTerm, setToSearchTerm] = useState("");
+  const [fromDataTypeFilter, setFromDataTypeFilter] = useState("");
+  const [toDataTypeFilter, setToDataTypeFilter] = useState("");
+
+  // FROM 테이블 필터
+  const [fromShowMappedOnly, setFromShowMappedOnly] = useState(false);
+  const [fromShowUnmappedOnly, setFromShowUnmappedOnly] = useState(false);
+
+  // TO 테이블 필터
+  const [toShowMappedOnly, setToShowMappedOnly] = useState(false);
+  const [toShowUnmappedOnly, setToShowUnmappedOnly] = useState(false);
+
+  // 기존 매핑 데이터를 columnMappings로 변환
+  useEffect(() => {
+    const mappings: ColumnMapping[] = toTableColumns.map((toCol) => {
+      const existingMapping = action.fieldMappings.find((mapping) => mapping.targetField === toCol.columnName);
+
+      return {
+        toColumnName: toCol.columnName,
+        fromColumnName: existingMapping?.sourceField || undefined,
+        defaultValue: existingMapping?.defaultValue || "",
+      };
+    });
+
+    setColumnMappings(mappings);
+  }, [action.fieldMappings, toTableColumns]);
+
+  // columnMappings 변경 시 settings 업데이트
+  const updateSettings = (newMappings: ColumnMapping[]) => {
+    const newActions = [...settings.actions];
+
+    // 새로운 fieldMappings 생성
+    const fieldMappings = newMappings
+      .filter((mapping) => mapping.fromColumnName || (mapping.defaultValue && mapping.defaultValue.trim()))
+      .map((mapping) => ({
+        sourceTable: mapping.fromColumnName ? fromTableName || "" : "",
+        sourceField: mapping.fromColumnName || "",
+        targetTable: toTableName || "",
+        targetField: mapping.toColumnName,
+        defaultValue: mapping.defaultValue || "",
+        transformFunction: "",
+      }));
+
+    newActions[actionIndex].fieldMappings = fieldMappings;
+    onSettingsChange({ ...settings, actions: newActions });
+  };
+
+  // FROM 컬럼 클릭 핸들러
+  const handleFromColumnClick = (columnName: string) => {
+    if (selectedFromColumn === columnName) {
+      setSelectedFromColumn(null);
+    } else {
+      setSelectedFromColumn(columnName);
+
+      // TO 컬럼이 이미 선택되어 있으면 매핑 시도
+      if (selectedToColumn) {
+        const fromColumn = fromTableColumns.find((col) => col.columnName === columnName);
+        const toColumn = toTableColumns.find((col) => col.columnName === selectedToColumn);
+
+        if (fromColumn && toColumn) {
+          // 데이터 타입 호환성 체크
+          if (fromColumn.dataType !== toColumn.dataType) {
+            alert(`데이터 타입이 다릅니다. FROM: ${fromColumn.dataType}, TO: ${toColumn.dataType}`);
+            return;
+          }
+
+          // 매핑 생성
+          createMapping(columnName, selectedToColumn);
+          setSelectedFromColumn(null);
+          setSelectedToColumn(null);
+        }
+      }
+    }
+  };
+
+  // 공통 매핑 생성 함수
+  const createMapping = (fromColumnName: string, toColumnName: string) => {
+    const newMappings = columnMappings.map((mapping) => {
+      if (mapping.toColumnName === toColumnName) {
+        return {
+          ...mapping,
+          fromColumnName: fromColumnName,
+          defaultValue: "", // 매핑이 설정되면 기본값 초기화
+        };
+      }
+      return mapping;
+    });
+
+    setColumnMappings(newMappings);
+    updateSettings(newMappings);
+  };
+
+  // TO 컬럼 클릭 핸들러
+  const handleToColumnClick = (toColumnName: string) => {
+    const currentMapping = columnMappings.find((m) => m.toColumnName === toColumnName);
+
+    // 이미 매핑된 컬럼인 경우 처리하지 않음
+    if (currentMapping?.fromColumnName) return;
+
+    if (selectedToColumn === toColumnName) {
+      setSelectedToColumn(null);
+    } else {
+      setSelectedToColumn(toColumnName);
+
+      // FROM 컬럼이 이미 선택되어 있으면 매핑 시도
+      if (selectedFromColumn) {
+        const fromColumn = fromTableColumns.find((col) => col.columnName === selectedFromColumn);
+        const toColumn = toTableColumns.find((col) => col.columnName === toColumnName);
+
+        if (fromColumn && toColumn) {
+          // 데이터 타입 호환성 체크
+          if (fromColumn.dataType !== toColumn.dataType) {
+            alert(`데이터 타입이 다릅니다. FROM: ${fromColumn.dataType}, TO: ${toColumn.dataType}`);
+            return;
+          }
+
+          // 매핑 생성
+          createMapping(selectedFromColumn, toColumnName);
+          setSelectedFromColumn(null);
+          setSelectedToColumn(null);
+        }
+      }
+    }
+  };
+
+  // 기본값 변경 핸들러
+  const handleDefaultValueChange = (toColumnName: string, value: string) => {
+    const newMappings = columnMappings.map((mapping) => {
+      if (mapping.toColumnName === toColumnName) {
+        return {
+          ...mapping,
+          fromColumnName: value.trim() ? undefined : mapping.fromColumnName, // 기본값이 있으면 매핑 제거
+          defaultValue: value,
+        };
+      }
+      return mapping;
+    });
+
+    setColumnMappings(newMappings);
+    updateSettings(newMappings);
+  };
+
+  // 매핑 제거 핸들러
+  const handleRemoveMapping = (toColumnName: string) => {
+    const newMappings = columnMappings.map((mapping) => {
+      if (mapping.toColumnName === toColumnName) {
+        return {
+          ...mapping,
+          fromColumnName: undefined,
+          defaultValue: "",
+        };
+      }
+      return mapping;
+    });
+
+    setColumnMappings(newMappings);
+    updateSettings(newMappings);
+  };
+
+  // FROM 컬럼이 클릭 가능한지 확인 (데이터 타입 호환성 + 1대1 매핑 제약)
+  const isFromColumnClickable = (fromColumn: ColumnInfo) => {
+    // 이미 다른 TO 컬럼과 매핑된 FROM 컬럼은 클릭 불가
+    const isAlreadyMapped = columnMappings.some((mapping) => mapping.fromColumnName === fromColumn.columnName);
+    if (isAlreadyMapped) return false;
+
+    if (!selectedToColumn) return true; // TO가 선택되지 않았으면 모든 FROM 클릭 가능
+
+    const toColumn = toTableColumns.find((col) => col.columnName === selectedToColumn);
+    if (!toColumn) return true;
+
+    return fromColumn.dataType === toColumn.dataType;
+  };
+
+  // TO 컬럼이 클릭 가능한지 확인 (데이터 타입 호환성)
+  const isToColumnClickable = (toColumn: ColumnInfo) => {
+    const currentMapping = columnMappings.find((m) => m.toColumnName === toColumn.columnName);
+
+    // 이미 매핑된 컬럼은 클릭 불가
+    if (currentMapping?.fromColumnName) return false;
+
+    // 기본값이 설정된 컬럼은 클릭 불가
+    if (currentMapping?.defaultValue && currentMapping.defaultValue.trim()) return false;
+
+    if (!selectedFromColumn) return true; // FROM이 선택되지 않았으면 모든 TO 클릭 가능
+
+    const fromColumn = fromTableColumns.find((col) => col.columnName === selectedFromColumn);
+    if (!fromColumn) return true;
+
+    return fromColumn.dataType === toColumn.dataType;
+  };
+
+  return (
+    <div className="mt-4">
+      {/* 헤더 섹션 */}
+      <Card className="mb-6 from-blue-50 to-green-50 py-2">
+        <CardContent className="pt-0">
+          <p className="text-sm leading-relaxed text-gray-700">
+            양쪽 테이블의 컬럼을 클릭하여 매핑하거나, 대상 컬럼에 기본값을 입력하세요. 같은 데이터 타입의 컬럼만 매핑
+            가능합니다. 하나의 FROM 컬럼은 하나의 TO 컬럼에만 매핑 가능합니다.
+          </p>
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-2 gap-6">
+        <ColumnTableSection
+          type="from"
+          tableName={fromTableName || "소스 테이블"}
+          columns={fromTableColumns}
+          selectedColumn={selectedFromColumn}
+          onColumnClick={handleFromColumnClick}
+          searchTerm={fromSearchTerm}
+          onSearchChange={setFromSearchTerm}
+          dataTypeFilter={fromDataTypeFilter}
+          onDataTypeFilterChange={setFromDataTypeFilter}
+          showMappedOnly={fromShowMappedOnly}
+          onShowMappedOnlyChange={setFromShowMappedOnly}
+          showUnmappedOnly={fromShowUnmappedOnly}
+          onShowUnmappedOnlyChange={setFromShowUnmappedOnly}
+          columnMappings={columnMappings}
+          isColumnClickable={isFromColumnClickable}
+          oppositeSelectedColumn={selectedToColumn}
+          oppositeColumns={toTableColumns}
+        />
+
+        <ColumnTableSection
+          type="to"
+          tableName={toTableName || "대상 테이블"}
+          columns={toTableColumns}
+          selectedColumn={selectedToColumn}
+          onColumnClick={handleToColumnClick}
+          searchTerm={toSearchTerm}
+          onSearchChange={setToSearchTerm}
+          dataTypeFilter={toDataTypeFilter}
+          onDataTypeFilterChange={setToDataTypeFilter}
+          showMappedOnly={toShowMappedOnly}
+          onShowMappedOnlyChange={setToShowMappedOnly}
+          showUnmappedOnly={toShowUnmappedOnly}
+          onShowUnmappedOnlyChange={setToShowUnmappedOnly}
+          columnMappings={columnMappings}
+          onDefaultValueChange={handleDefaultValueChange}
+          onRemoveMapping={handleRemoveMapping}
+          isColumnClickable={isToColumnClickable}
+          oppositeSelectedColumn={selectedFromColumn}
+          oppositeColumns={fromTableColumns}
+        />
+      </div>
+
+      {/* 빠른 필터 액션 */}
+      <Card className="mt-6 py-2">
+        <CardContent className="flex flex-wrap gap-2 p-3">
+          <span className="self-center text-sm font-medium text-gray-700">빠른 필터:</span>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => {
+              setFromSearchTerm("");
+              setToSearchTerm("");
+              setFromDataTypeFilter("");
+              setToDataTypeFilter("");
+              setFromShowMappedOnly(false);
+              setFromShowUnmappedOnly(false);
+              setToShowMappedOnly(false);
+              setToShowUnmappedOnly(false);
+            }}
+            className="h-7 text-xs"
+          >
+            전체 보기
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              // FROM: 미매핑만, TO: 미설정만
+              setFromShowMappedOnly(false);
+              setFromShowUnmappedOnly(true);
+              setToShowMappedOnly(false);
+              setToShowUnmappedOnly(true);
+            }}
+            className="h-7 bg-orange-100 text-xs text-orange-700 hover:bg-orange-200"
+          >
+            미매핑만 보기
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              // FROM: 매핑됨만, TO: 설정됨만
+              setFromShowMappedOnly(true);
+              setFromShowUnmappedOnly(false);
+              setToShowMappedOnly(true);
+              setToShowUnmappedOnly(false);
+            }}
+            className="h-7 bg-green-100 text-xs text-green-700 hover:bg-green-200"
+          >
+            매핑됨만 보기
+          </Button>
+          <div className="ml-auto flex gap-2">
+            <Badge variant="outline" className="text-xs">
+              FROM: {fromTableColumns.length}
+            </Badge>
+            <Badge variant="outline" className="text-xs">
+              TO: {toTableColumns.length}
+            </Badge>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 매핑 통계 */}
+      <Card className="mt-4 bg-gradient-to-r from-gray-50 to-gray-100 py-2">
+        <CardContent className="p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div>
+                <div className="font-semibold text-gray-800">매핑 진행 상황</div>
+                <div className="text-sm text-gray-600">
+                  총 {toTableColumns.length}개 컬럼 중{" "}
+                  <span className="font-bold text-blue-600">
+                    {columnMappings.filter((m) => m.fromColumnName || (m.defaultValue && m.defaultValue.trim())).length}
+                    개
+                  </span>{" "}
+                  완료
+                </div>
+              </div>
+            </div>
+            <div className="text-right">
+              <div className="text-2xl font-bold text-gray-800">
+                {Math.round(
+                  (columnMappings.filter((m) => m.fromColumnName || (m.defaultValue && m.defaultValue.trim())).length /
+                    toTableColumns.length) *
+                    100,
+                )}
+                %
+              </div>
+              <div className="text-xs text-gray-500">완료율</div>
+            </div>
+          </div>
+          <div className="mt-3">
+            <Progress
+              value={
+                (columnMappings.filter((m) => m.fromColumnName || (m.defaultValue && m.defaultValue.trim())).length /
+                  toTableColumns.length) *
+                100
+              }
+              className="h-2"
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};