레이아웃 수정

frontend/components/dataflow/DataFlowDesigner.tsx

@@ -68,6 +68,7 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({ companyCode,
     [tableName: string]: string[];
   }>({});
   const [selectionOrder, setSelectionOrder] = useState<string[]>([]);
+  const [selectedNodes, setSelectedNodes] = useState<string[]>([]);
   const [pendingConnection, setPendingConnection] = useState<{
     fromNode: { id: string; tableName: string; displayName: string };
     toNode: { id: string; tableName: string; displayName: string };
@@ -82,6 +83,46 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({ companyCode,
   } | null>(null);
   const toastShownRef = useRef(false);
 
+  // 키보드 이벤트 핸들러 (Del 키로 선택된 노드 삭제)
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Delete" && selectedNodes.length > 0) {
+        // 선택된 노드들 삭제
+        setNodes((prevNodes) => prevNodes.filter((node) => !selectedNodes.includes(node.id)));
+
+        // 삭제된 노드들과 관련된 선택된 컬럼들도 정리
+        const deletedTableNames = selectedNodes
+          .filter((nodeId) => nodeId.startsWith("table-"))
+          .map((nodeId) => nodeId.replace("table-", ""));
+
+        setSelectedColumns((prev) => {
+          const newColumns = { ...prev };
+          deletedTableNames.forEach((tableName) => {
+            delete newColumns[tableName];
+          });
+          return newColumns;
+        });
+
+        // 선택 순서도 정리
+        setSelectionOrder((prev) => prev.filter((tableName) => !deletedTableNames.includes(tableName)));
+
+        // 선택된 노드 초기화
+        setSelectedNodes([]);
+
+        toast.success(`${selectedNodes.length}개 테이블이 삭제되었습니다.`);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedNodes, setNodes]);
+
+  // 노드 선택 변경 핸들러
+  const onSelectionChange = useCallback(({ nodes }: { nodes: Node<TableNodeData>[] }) => {
+    const selectedNodeIds = nodes.map((node) => node.id);
+    setSelectedNodes(selectedNodeIds);
+  }, []);
+
   // 빈 onConnect 함수 (드래그 연결 비활성화)
   const onConnect = useCallback(() => {
     // 드래그로 연결하는 것을 방지
@@ -284,6 +325,7 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({ companyCode,
     setEdges([]);
     setSelectedColumns({});
     setSelectionOrder([]);
+    setSelectedNodes([]);
   }, [setNodes, setEdges]);
 
   // 현재 추가된 테이블명 목록 가져오기
@@ -456,6 +498,7 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({ companyCode,
             onNodesChange={onNodesChange}
             onEdgesChange={onEdgesChange}
             onConnect={onConnect}
+            onSelectionChange={onSelectionChange}
             nodeTypes={nodeTypes}
             edgeTypes={edgeTypes}
             fitView
@@ -485,7 +528,10 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({ companyCode,
               <div className="text-center text-gray-500">
                 <div className="mb-2 text-2xl">📊</div>
                 <div className="mb-1 text-lg font-medium">테이블 간 데이터 관계 설정을 시작하세요</div>
-                <div className="text-sm">왼쪽 사이드바에서 테이블을 선택하여 추가하세요</div>
+                <div className="text-sm">
+                  <div>왼쪽 사이드바에서 테이블을 더블클릭하여 추가하세요</div>
+                  <div className="mt-1 text-xs text-gray-400">테이블 선택 후 Del 키로 삭제 가능</div>
+                </div>
               </div>
             </div>
           )}