123 lines
4.1 KiB
TypeScript
123 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Handle, Position, NodeResizer } from "@xyflow/react";
|
|
|
|
interface TableColumn {
|
|
name: string;
|
|
type: string;
|
|
description: string;
|
|
}
|
|
|
|
interface Table {
|
|
tableName: string;
|
|
displayName: string;
|
|
description: string;
|
|
columns: TableColumn[];
|
|
}
|
|
|
|
interface TableNodeData {
|
|
table: Table;
|
|
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 }) => {
|
|
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="rounded-t-lg 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="space-y-1">
|
|
{table.columns.map((column) => {
|
|
const isSelected = selectedColumns.includes(column.name);
|
|
|
|
return (
|
|
<div
|
|
key={column.name}
|
|
onClick={() => onColumnClick(table.tableName, column.name)}
|
|
className={`cursor-pointer rounded px-2 py-1 text-xs transition-colors ${
|
|
isSelected ? "bg-blue-100 text-blue-800 ring-2 ring-blue-500" : "text-gray-700 hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<span className="font-mono font-medium">{column.name}</span>
|
|
<span className="text-gray-500">{column.type}</span>
|
|
</div>
|
|
{column.description && <div className="mt-0.5 text-gray-500">{column.description}</div>}
|
|
</div>
|
|
);
|
|
})}
|
|
</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>
|
|
);
|
|
};
|