레이아웃 수정

frontend/components/dataflow/TableNode.tsx

@@ -28,14 +28,38 @@ interface TableNodeData {
 export const TableNode: React.FC<{ data: TableNodeData; selected?: boolean }> = ({ data, selected }) => {
   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 min-h-[200px] min-w-[280px] rounded-lg border-2 border-gray-300 bg-white shadow-lg">
+    <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={200}
+        minHeight={calculatedHeight}
+        keepAspectRatio={false}
         handleStyle={{
           width: 8,
           height: 8,
@@ -53,7 +77,7 @@ export const TableNode: React.FC<{ data: TableNodeData; selected?: boolean }> =
 
       {/* 컬럼 목록 */}
       <div
-        className="max-h-[300px] overflow-y-auto p-2"
+        className={`flex-1 p-2 ${needsScroll ? "overflow-y-auto" : "overflow-hidden"}`}
         onMouseEnter={onScrollAreaEnter}
         onMouseLeave={onScrollAreaLeave}
       >