71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* 테이블 소스 노드
|
|
*/
|
|
|
|
import { memo } from "react";
|
|
import { Handle, Position, NodeProps } from "reactflow";
|
|
import { Database } from "lucide-react";
|
|
import type { TableSourceNodeData } from "@/types/node-editor";
|
|
|
|
export const TableSourceNode = memo(({ data, selected }: NodeProps<TableSourceNodeData>) => {
|
|
// 디버깅: 필드 데이터 확인
|
|
if (data.fields && data.fields.length > 0) {
|
|
console.log("🔍 TableSource 필드 데이터:", data.fields);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
|
|
selected ? "border-blue-500 shadow-lg" : "border-gray-200"
|
|
}`}
|
|
>
|
|
{/* 헤더 */}
|
|
<div className="flex items-center gap-2 rounded-t-lg bg-blue-500 px-3 py-2 text-white">
|
|
<Database className="h-4 w-4" />
|
|
<div className="flex-1">
|
|
<div className="text-sm font-semibold">{data.displayName || data.tableName || "테이블 소스"}</div>
|
|
{data.tableName && data.displayName !== data.tableName && (
|
|
<div className="text-xs opacity-80">{data.tableName}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 본문 */}
|
|
<div className="p-3">
|
|
<div className="mb-2 text-xs font-medium text-gray-500">📍 내부 데이터베이스</div>
|
|
|
|
{/* 필드 목록 */}
|
|
<div className="space-y-1">
|
|
<div className="text-xs font-medium text-gray-700">출력 필드:</div>
|
|
<div className="max-h-[150px] overflow-y-auto">
|
|
{data.fields && data.fields.length > 0 ? (
|
|
data.fields.slice(0, 5).map((field) => (
|
|
<div key={field.name} className="flex items-center gap-2 text-xs text-gray-600">
|
|
<div className="h-1.5 w-1.5 rounded-full bg-blue-400" />
|
|
<span className="font-medium">{field.label || field.displayName || field.name}</span>
|
|
{(field.label || field.displayName) && field.label !== field.name && (
|
|
<span className="font-mono text-gray-400">({field.name})</span>
|
|
)}
|
|
<span className="text-gray-400">{field.type}</span>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="text-xs text-gray-400">필드 없음</div>
|
|
)}
|
|
{data.fields && data.fields.length > 5 && (
|
|
<div className="text-xs text-gray-400">... 외 {data.fields.length - 5}개</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 출력 핸들 */}
|
|
<Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-blue-500 !bg-white" />
|
|
</div>
|
|
);
|
|
});
|
|
|
|
TableSourceNode.displayName = "TableSourceNode";
|