기타 수정

frontend/components/dataflow/TableNode.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import { Handle, Position, NodeResizer } from "@xyflow/react";
 
 interface TableColumn {
   name: string;
@@ -21,66 +20,22 @@ interface TableNodeData {
   onColumnClick: (tableName: string, columnName: string) => void;
   onScrollAreaEnter?: () => void;
   onScrollAreaLeave?: () => void;
-  selected?: boolean;
   selectedColumns?: string[]; // 선택된 컬럼 목록
 }
 
-export const TableNode: React.FC<{ data: TableNodeData; selected?: boolean }> = ({ data, selected }) => {
+export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
   const { table, onColumnClick, onScrollAreaEnter, onScrollAreaLeave, selectedColumns = [] } = data;
 
-  // 컬럼 개수에 따른 높이 계산
-  // 헤더: ~80px (제목 + 설명 + 패딩)
-  const headerHeight = table.description ? 80 : 65;
-
-  // 컬럼 높이: 각 컬럼은 실제로 더 높음 (px-2 py-1 + 텍스트 2줄 + 설명 + space-y-1)
-  // 설명이 있는 컬럼: ~45px, 없는 컬럼: ~35px, 간격: ~4px
-  const avgColumnHeight = 45; // 여유있게 계산
-  const idealColumnHeight = table.columns.length * avgColumnHeight;
-
-  // 컨테이너 패딩
-  const padding = 20;
-
-  // 이상적인 높이 vs 최대 허용 높이 (너무 길면 스크롤)
-  const idealHeight = headerHeight + idealColumnHeight + padding;
-  const maxAllowedHeight = 800; // 최대 800px
-  const calculatedHeight = Math.max(200, Math.min(idealHeight, maxAllowedHeight));
-
-  // 스크롤이 필요한지 판단
-  const needsScroll = idealHeight > maxAllowedHeight;
-
   return (
-    <div
-      className="relative flex min-w-[280px] flex-col overflow-hidden rounded-lg border-2 border-gray-300 bg-white shadow-lg"
-      style={{ height: `${calculatedHeight}px`, minHeight: `${calculatedHeight}px` }}
-    >
-      {/* NodeResizer for resizing functionality */}
-      <NodeResizer
-        color="#ff0071"
-        isVisible={selected}
-        minWidth={280}
-        minHeight={calculatedHeight}
-        keepAspectRatio={false}
-        handleStyle={{
-          width: 8,
-          height: 8,
-          backgroundColor: "#ff0071",
-          border: "1px solid white",
-        }}
-      />
-
+    <div className="relative flex min-w-[280px] flex-col overflow-hidden rounded-lg border-2 border-gray-300 bg-white shadow-lg">
       {/* 테이블 헤더 */}
-      <div className="rounded-t-lg bg-blue-600 p-3 text-white">
+      <div className="bg-blue-600 p-3 text-white">
         <h3 className="truncate text-sm font-semibold">{table.displayName}</h3>
-        <p className="truncate text-xs opacity-90">{table.tableName}</p>
         {table.description && <p className="mt-1 truncate text-xs opacity-75">{table.description}</p>}
       </div>
 
       {/* 컬럼 목록 */}
-      <div
-        className={`flex-1 p-2 ${needsScroll ? "overflow-y-auto" : "overflow-hidden"}`}
-        onMouseEnter={onScrollAreaEnter}
-        onMouseLeave={onScrollAreaLeave}
-      >
+      <div className="flex-1 overflow-hidden p-2" onMouseEnter={onScrollAreaEnter} onMouseLeave={onScrollAreaLeave}>
         <div className="space-y-1">
           {table.columns.map((column) => {
             const isSelected = selectedColumns.includes(column.name);
@@ -103,20 +58,6 @@ export const TableNode: React.FC<{ data: TableNodeData; selected?: boolean }> =
           })}
         </div>
       </div>
-
-      {/* React Flow Handles */}
-      <Handle
-        type="target"
-        position={Position.Left}
-        className="h-3 w-3 border-2 border-gray-400 bg-white"
-        isConnectable={false}
-      />
-      <Handle
-        type="source"
-        position={Position.Right}
-        className="h-3 w-3 border-2 border-gray-400 bg-white"
-        isConnectable={false}
-      />
     </div>
   );
 };