2025-09-22 18:17:24 +09:00
4 changed files with 36 additions and 82 deletions
--- a/frontend/app/(main)/admin/dataflow/page.tsx
+++ b/frontend/app/(main)/admin/dataflow/page.tsx
@ -15,7 +15,6 @@ export default function DataFlowPage() {
  const { user } = useAuth();
  const router = useRouter();
  const [currentStep, setCurrentStep] = useState<Step>("list");
-  const [selectedDiagram, setSelectedDiagram] = useState<DataFlowDiagram | null>(null);
  const [stepHistory, setStepHistory] = useState<Step[]>(["list"]);

  // 단계별 제목과 설명
@ -26,10 +25,8 @@ export default function DataFlowPage() {
      icon: "📊",
    },
    design: {
-      title: selectedDiagram ? `${selectedDiagram.diagramName} 관계도 설계` : "새 관계도 설계",
-      description: selectedDiagram
-        ? "기존 관계도를 수정하거나 새로운 관계를 추가하세요"
-        : "테이블 간 데이터 관계를 시각적으로 설계하세요",
+      title: "새 관계도 설계",
+      description: "테이블 간 데이터 관계를 시각적으로 설계하세요",
      icon: "🎨",
    },
  };
@ -47,11 +44,6 @@ export default function DataFlowPage() {
      const previousStep = newHistory[newHistory.length - 1];
      setStepHistory(newHistory);
      setCurrentStep(previousStep);
-
-      // list로 돌아갈 때 선택된 관계도 초기화
-      if (previousStep === "list") {
-        setSelectedDiagram(null);
-      }
    }
  };

@ -63,11 +55,6 @@ export default function DataFlowPage() {
    if (stepIndex !== -1) {
      setStepHistory(stepHistory.slice(0, stepIndex + 1));
    }
-
-    // list로 이동할 때 선택된 관계도 초기화
-    if (step === "list") {
-      setSelectedDiagram(null);
-    }
  };

  const handleSave = (relationships: TableRelationship[]) => {
@ -78,17 +65,12 @@ export default function DataFlowPage() {
    }, 0);
  };

-  const handleDiagramSelect = (diagram: DataFlowDiagram) => {
-    setSelectedDiagram(diagram);
-  };
-
  const handleDesignDiagram = (diagram: DataFlowDiagram | null) => {
    if (diagram) {
      // 기존 관계도 편집 - 새로운 URL로 이동
      router.push(`/admin/dataflow/edit/${diagram.diagramId}`);
    } else {
      // 새 관계도 생성 - 현재 페이지에서 처리
-      setSelectedDiagram(null);
      goToNextStep("design");
    }
  };
@ -121,11 +103,7 @@ export default function DataFlowPage() {
        {/* 관계도 목록 단계 */}
        {currentStep === "list" && (
          <div className="h-full p-6">
-            <DataFlowList
-              onDiagramSelect={handleDiagramSelect}
-              selectedDiagram={selectedDiagram}
-              onDesignDiagram={handleDesignDiagram}
-            />
+            <DataFlowList onDesignDiagram={handleDesignDiagram} />
          </div>
        )}

@ -135,7 +113,7 @@ export default function DataFlowPage() {
            <DataFlowDesigner
              companyCode={user?.company_code || "COMP001"}
              onSave={handleSave}
-              selectedDiagram={selectedDiagram}
+              selectedDiagram={null}
              onBackToList={() => goToStep("list")}
            />
          </div>
--- a/frontend/components/dataflow/ConnectionSetupModal.tsx
+++ b/frontend/components/dataflow/ConnectionSetupModal.tsx
@ -32,6 +32,12 @@ interface ConnectionInfo {
      columns: string[];
    };
  };
+  existingRelationship?: {
+    relationshipName: string;
+    relationshipType: string;
+    connectionType: string;
+    settings?: any;
+  };
 }

 // 연결 설정 타입
@ -150,14 +156,18 @@ export const ConnectionSetupModal: React.FC<ConnectionSetupModalProps> = ({
      setSelectedFromTable(fromTableName);
      setSelectedToTable(toTableName);

+      // 기존 관계 정보가 있으면 사용, 없으면 기본값 설정
+      const existingRel = connection.existingRelationship;
      setConfig({
-        relationshipName: `${fromDisplayName} → ${toDisplayName}`,
-        relationshipType: "one-to-one",
-        connectionType: "simple-key",
+        relationshipName: existingRel?.relationshipName || `${fromDisplayName} → ${toDisplayName}`,
+        relationshipType:
+          (existingRel?.relationshipType as "one-to-one" | "one-to-many" | "many-to-one" | "many-to-many") ||
+          "one-to-one",
+        connectionType: (existingRel?.connectionType as "simple-key" | "data-save" | "external-call") || "simple-key",
        fromColumnName: "",
        toColumnName: "",
-        description: `${fromDisplayName}과 ${toDisplayName} 간의 데이터 관계`,
-        settings: {},
+        description: existingRel?.settings?.description || `${fromDisplayName}과 ${toDisplayName} 간의 데이터 관계`,
+        settings: existingRel?.settings || {},
      });

      // 단순 키값 연결 기본값 설정
--- a/frontend/components/dataflow/DataFlowDesigner.tsx
+++ b/frontend/components/dataflow/DataFlowDesigner.tsx
@ -101,6 +101,12 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
        columns: string[];
      };
    };
+    existingRelationship?: {
+      relationshipName: string;
+      relationshipType: string;
+      connectionType: string;
+      settings?: any;
+    };
  } | null>(null);
  const [relationships, setRelationships] = useState<TableRelationship[]>([]); // eslint-disable-line @typescript-eslint/no-unused-vars
  const [currentDiagramId, setCurrentDiagramId] = useState<number | null>(null); // 현재 화면의 diagram_id
@ -989,6 +995,13 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
          columns: edgeData.toColumns,
        },
      },
+      // 기존 관계 정보 추가 (연결 이름 유지를 위해)
+      existingRelationship: {
+        relationshipName: existingRelationship.relationshipName,
+        relationshipType: existingRelationship.relationshipType,
+        connectionType: existingRelationship.connectionType,
+        settings: existingRelationship.settings,
+      },
    };

    // ConnectionSetupModal을 위한 연결 정보 설정
@ -1123,8 +1136,8 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
            <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#E5E7EB" />
          </ReactFlow>

-          {/* 선택된 컬럼 팝업 - 캔버스 좌측 상단 고정 (엣지 정보 팝업이 없을 때만 표시) */}
-          {Object.keys(selectedColumns).length > 0 && !showEdgeActions && (
+          {/* 선택된 컬럼 팝업 - 캔버스 좌측 상단 고정 (신규 관계도 생성 시에만 표시) */}
+          {Object.keys(selectedColumns).length > 0 && !showEdgeActions && !pendingConnection && !diagramId && (
            <div className="pointer-events-auto absolute top-4 left-4 z-40 w-80 rounded-xl border border-blue-200 bg-white shadow-lg">
              {/* 헤더 */}
              <div className="flex items-center justify-between rounded-t-xl border-b border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3">
--- a/frontend/components/dataflow/DataFlowList.tsx
+++ b/frontend/components/dataflow/DataFlowList.tsx
@ -3,7 +3,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import {
@ -26,12 +25,10 @@ import { toast } from "sonner";
 import { useAuth } from "@/hooks/useAuth";

 interface DataFlowListProps {
-  onDiagramSelect: (diagram: DataFlowDiagram) => void;
-  selectedDiagram: DataFlowDiagram | null;
  onDesignDiagram: (diagram: DataFlowDiagram | null) => void;
 }

-export default function DataFlowList({ onDiagramSelect, selectedDiagram, onDesignDiagram }: DataFlowListProps) {
+export default function DataFlowList({ onDesignDiagram }: DataFlowListProps) {
  const { user } = useAuth();
  const [diagrams, setDiagrams] = useState<DataFlowDiagram[]>([]);
  const [loading, setLoading] = useState(true);
@ -88,10 +85,6 @@ export default function DataFlowList({ onDiagramSelect, selectedDiagram, onDesig
    loadDiagrams();
  }, [loadDiagrams]);

-  const handleDiagramSelect = (diagram: DataFlowDiagram) => {
-    onDiagramSelect(diagram);
-  };
-
  const handleDelete = (diagram: DataFlowDiagram) => {
    setSelectedDiagramForAction(diagram);
    setShowDeleteModal(true);
@ -149,38 +142,6 @@ export default function DataFlowList({ onDiagramSelect, selectedDiagram, onDesig
    }
  };

-  // 연결 타입에 따른 배지 색상
-  const getConnectionTypeBadge = (connectionType: string) => {
-    switch (connectionType) {
-      case "simple-key":
-        return (
-          <Badge variant="outline" className="border-blue-200 bg-blue-50 text-blue-700">
-            단순 키값
-          </Badge>
-        );
-      case "data-save":
-        return (
-          <Badge variant="outline" className="border-green-200 bg-green-50 text-green-700">
-            데이터 저장
-          </Badge>
-        );
-      case "external-call":
-        return (
-          <Badge variant="outline" className="border-purple-200 bg-purple-50 text-purple-700">
-            외부 호출
-          </Badge>
-        );
-      case "json-based":
-        return (
-          <Badge variant="outline" className="border-indigo-200 bg-indigo-50 text-indigo-700">
-            JSON 기반
-          </Badge>
-        );
-      default:
-        return <Badge variant="outline">{connectionType}</Badge>;
-    }
-  };
-
  if (loading) {
    return (
      <div className="flex items-center justify-center py-8">
@ -224,7 +185,6 @@ export default function DataFlowList({ onDiagramSelect, selectedDiagram, onDesig
            <TableHeader>
              <TableRow>
                <TableHead>관계도명</TableHead>
-                <TableHead>연결 타입</TableHead>
                <TableHead>회사 코드</TableHead>
                <TableHead>테이블 수</TableHead>
                <TableHead>관계 수</TableHead>
@ -234,13 +194,7 @@ export default function DataFlowList({ onDiagramSelect, selectedDiagram, onDesig
            </TableHeader>
            <TableBody>
              {diagrams.map((diagram) => (
-                <TableRow
-                  key={diagram.diagramId}
-                  className={`cursor-pointer hover:bg-gray-50 ${
-                    selectedDiagram?.diagramId === diagram.diagramId ? "border-blue-200 bg-blue-50" : ""
-                  }`}
-                  onClick={() => handleDiagramSelect(diagram)}
-                >
+                <TableRow key={diagram.diagramId} className="hover:bg-gray-50">
                  <TableCell>
                    <div>
                      <div className="flex items-center font-medium text-gray-900">
@ -253,7 +207,6 @@ export default function DataFlowList({ onDiagramSelect, selectedDiagram, onDesig
                      </div>
                    </div>
                  </TableCell>
-                  <TableCell>{getConnectionTypeBadge(diagram.connectionType)}</TableCell>
                  <TableCell>{diagram.companyCode || "*"}</TableCell>
                  <TableCell>
                    <div className="flex items-center">