510 lines
20 KiB
TypeScript
510 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Handle, Position } from "@xyflow/react";
|
|
import {
|
|
Monitor,
|
|
Database,
|
|
FormInput,
|
|
Table2,
|
|
LayoutDashboard,
|
|
MousePointer2,
|
|
Key,
|
|
Link2,
|
|
Columns3,
|
|
} from "lucide-react";
|
|
import { ScreenLayoutSummary } from "@/lib/api/screenGroup";
|
|
|
|
// ========== 타입 정의 ==========
|
|
|
|
// 화면 노드 데이터 인터페이스
|
|
export interface ScreenNodeData {
|
|
label: string;
|
|
subLabel?: string;
|
|
type: "screen" | "table" | "action";
|
|
tableName?: string;
|
|
isMain?: boolean;
|
|
// 레이아웃 요약 정보 (미리보기용)
|
|
layoutSummary?: ScreenLayoutSummary;
|
|
// 그룹 내 포커스 관련 속성
|
|
isInGroup?: boolean; // 그룹 모드인지
|
|
isFocused?: boolean; // 포커스된 화면인지
|
|
isFaded?: boolean; // 흑백 처리할지
|
|
screenRole?: string; // 화면 역할 (메인그리드, 등록폼 등)
|
|
}
|
|
|
|
// 테이블 노드 데이터 인터페이스
|
|
export interface TableNodeData {
|
|
label: string;
|
|
subLabel?: string;
|
|
isMain?: boolean;
|
|
columns?: Array<{
|
|
name: string;
|
|
type: string;
|
|
isPrimaryKey?: boolean;
|
|
isForeignKey?: boolean;
|
|
}>;
|
|
}
|
|
|
|
// ========== 유틸리티 함수 ==========
|
|
|
|
// 화면 타입별 아이콘
|
|
const getScreenTypeIcon = (screenType?: string) => {
|
|
switch (screenType) {
|
|
case "grid":
|
|
return <Table2 className="h-4 w-4" />;
|
|
case "dashboard":
|
|
return <LayoutDashboard className="h-4 w-4" />;
|
|
case "action":
|
|
return <MousePointer2 className="h-4 w-4" />;
|
|
default:
|
|
return <FormInput className="h-4 w-4" />;
|
|
}
|
|
};
|
|
|
|
// 화면 타입별 색상 (헤더)
|
|
const getScreenTypeColor = (screenType?: string, isMain?: boolean) => {
|
|
if (!isMain) return "bg-slate-400";
|
|
switch (screenType) {
|
|
case "grid":
|
|
return "bg-violet-500";
|
|
case "dashboard":
|
|
return "bg-amber-500";
|
|
case "action":
|
|
return "bg-rose-500";
|
|
default:
|
|
return "bg-blue-500";
|
|
}
|
|
};
|
|
|
|
// 화면 역할(screenRole)에 따른 색상
|
|
const getScreenRoleColor = (screenRole?: string) => {
|
|
if (!screenRole) return "bg-slate-400";
|
|
|
|
// 역할명에 포함된 키워드로 색상 결정
|
|
const role = screenRole.toLowerCase();
|
|
|
|
if (role.includes("그리드") || role.includes("grid") || role.includes("메인") || role.includes("main") || role.includes("list")) {
|
|
return "bg-violet-500"; // 보라색 - 메인 그리드
|
|
}
|
|
if (role.includes("등록") || role.includes("폼") || role.includes("form") || role.includes("register") || role.includes("input")) {
|
|
return "bg-blue-500"; // 파란색 - 등록 폼
|
|
}
|
|
if (role.includes("액션") || role.includes("action") || role.includes("이벤트") || role.includes("event") || role.includes("클릭")) {
|
|
return "bg-rose-500"; // 빨간색 - 액션/이벤트
|
|
}
|
|
if (role.includes("상세") || role.includes("detail") || role.includes("popup") || role.includes("팝업")) {
|
|
return "bg-amber-500"; // 주황색 - 상세/팝업
|
|
}
|
|
|
|
return "bg-slate-400"; // 기본 회색
|
|
};
|
|
|
|
// 화면 타입별 라벨
|
|
const getScreenTypeLabel = (screenType?: string) => {
|
|
switch (screenType) {
|
|
case "grid":
|
|
return "그리드";
|
|
case "dashboard":
|
|
return "대시보드";
|
|
case "action":
|
|
return "액션";
|
|
default:
|
|
return "폼";
|
|
}
|
|
};
|
|
|
|
// ========== 화면 노드 (상단) - 미리보기 표시 ==========
|
|
export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
|
|
const { label, subLabel, isMain, tableName, layoutSummary, isInGroup, isFocused, isFaded, screenRole } = data;
|
|
const screenType = layoutSummary?.screenType || "form";
|
|
|
|
// 그룹 모드에서는 screenRole 기반 색상, 그렇지 않으면 screenType 기반 색상
|
|
// isFocused일 때 색상 활성화, isFaded일 때 회색
|
|
let headerColor: string;
|
|
if (isInGroup) {
|
|
if (isFaded) {
|
|
headerColor = "bg-gray-300"; // 흑백 처리 - 더 확실한 회색
|
|
} else {
|
|
// 포커스되었거나 아직 아무것도 선택 안됐을 때: 역할별 색상
|
|
headerColor = getScreenRoleColor(screenRole);
|
|
}
|
|
} else {
|
|
headerColor = getScreenTypeColor(screenType, isMain);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`group relative flex h-[320px] w-[260px] flex-col overflow-hidden rounded-lg border bg-card shadow-md transition-all cursor-pointer ${
|
|
isFocused
|
|
? "border-2 border-primary ring-4 ring-primary/50 shadow-xl scale-105"
|
|
: isFaded
|
|
? "border-gray-200 opacity-50"
|
|
: "border-border hover:shadow-lg hover:ring-2 hover:ring-primary/20"
|
|
}`}
|
|
style={{
|
|
filter: isFaded ? "grayscale(100%)" : "none",
|
|
transition: "all 0.3s ease",
|
|
transform: isFocused ? "scale(1.02)" : "scale(1)",
|
|
}}
|
|
>
|
|
{/* Handles */}
|
|
<Handle
|
|
type="target"
|
|
position={Position.Left}
|
|
id="left"
|
|
className="!h-2 !w-2 !border-2 !border-background !bg-blue-500 opacity-0 transition-opacity group-hover:opacity-100"
|
|
/>
|
|
<Handle
|
|
type="source"
|
|
position={Position.Right}
|
|
id="right"
|
|
className="!h-2 !w-2 !border-2 !border-background !bg-blue-500 opacity-0 transition-opacity group-hover:opacity-100"
|
|
/>
|
|
<Handle
|
|
type="source"
|
|
position={Position.Bottom}
|
|
id="bottom"
|
|
className="!h-2 !w-2 !border-2 !border-background !bg-blue-500 opacity-0 transition-opacity group-hover:opacity-100"
|
|
/>
|
|
|
|
{/* 헤더 (컬러) */}
|
|
<div className={`flex items-center gap-2 px-3 py-2 text-white ${headerColor} transition-colors duration-300`}>
|
|
<Monitor className="h-4 w-4" />
|
|
<span className="flex-1 truncate text-xs font-semibold">{label}</span>
|
|
{(isMain || isFocused) && <span className="flex h-2 w-2 rounded-full bg-white/80 animate-pulse" />}
|
|
</div>
|
|
|
|
{/* 화면 미리보기 영역 (컴팩트) */}
|
|
<div className="h-[140px] overflow-hidden bg-slate-50 p-2">
|
|
{layoutSummary ? (
|
|
<ScreenPreview layoutSummary={layoutSummary} screenType={screenType} />
|
|
) : (
|
|
<div className="flex h-full flex-col items-center justify-center text-muted-foreground">
|
|
{getScreenTypeIcon(screenType)}
|
|
<span className="mt-1 text-[10px]">화면: {label}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 필드 매핑 영역 */}
|
|
<div className="flex-1 overflow-hidden border-t border-slate-200 bg-white px-2 py-1.5">
|
|
<div className="mb-1 flex items-center gap-1 text-[9px] font-medium text-slate-500">
|
|
<Columns3 className="h-3 w-3" />
|
|
<span>필드 매핑</span>
|
|
<span className="ml-auto text-[8px] text-slate-400">
|
|
{layoutSummary?.layoutItems?.filter(i => i.label && !i.componentKind?.includes('button')).length || 0}개
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-0.5 overflow-y-auto" style={{ maxHeight: '80px' }}>
|
|
{layoutSummary?.layoutItems
|
|
?.filter(item => item.label && !item.componentKind?.includes('button'))
|
|
?.slice(0, 6)
|
|
?.map((item, idx) => (
|
|
<div key={idx} className="flex items-center gap-1 rounded bg-slate-50 px-1.5 py-0.5">
|
|
<div className={`h-1.5 w-1.5 rounded-full ${
|
|
item.componentKind === 'table-list' ? 'bg-violet-400' :
|
|
item.componentKind?.includes('select') ? 'bg-amber-400' :
|
|
'bg-slate-400'
|
|
}`} />
|
|
<span className="flex-1 truncate text-[9px] text-slate-600">{item.label}</span>
|
|
<span className="text-[8px] text-slate-400">{item.componentKind?.split('-')[0] || 'field'}</span>
|
|
</div>
|
|
)) || (
|
|
<div className="text-center text-[9px] text-slate-400 py-2">필드 정보 없음</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 푸터 (테이블 정보) */}
|
|
<div className="flex items-center justify-between border-t border-border bg-muted/30 px-3 py-1.5">
|
|
<div className="flex items-center gap-1 text-[10px] text-muted-foreground">
|
|
<Database className="h-3 w-3" />
|
|
<span className="max-w-[120px] truncate font-mono">{tableName || "No Table"}</span>
|
|
</div>
|
|
<span className="rounded bg-muted px-1.5 py-0.5 text-[9px] font-medium text-muted-foreground">
|
|
{getScreenTypeLabel(screenType)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ========== 컴포넌트 종류별 미니어처 색상 ==========
|
|
// componentKind는 더 정확한 컴포넌트 타입 (table-list, button-primary 등)
|
|
const getComponentColor = (componentKind: string) => {
|
|
// 테이블/그리드 관련
|
|
if (componentKind === "table-list" || componentKind === "data-grid") {
|
|
return "bg-violet-200 border-violet-400";
|
|
}
|
|
// 검색 필터
|
|
if (componentKind === "table-search-widget" || componentKind === "search-filter") {
|
|
return "bg-pink-200 border-pink-400";
|
|
}
|
|
// 버튼 관련
|
|
if (componentKind?.includes("button")) {
|
|
return "bg-blue-300 border-blue-500";
|
|
}
|
|
// 입력 필드
|
|
if (componentKind?.includes("input") || componentKind?.includes("text")) {
|
|
return "bg-slate-200 border-slate-400";
|
|
}
|
|
// 셀렉트/드롭다운
|
|
if (componentKind?.includes("select") || componentKind?.includes("dropdown")) {
|
|
return "bg-amber-200 border-amber-400";
|
|
}
|
|
// 차트
|
|
if (componentKind?.includes("chart")) {
|
|
return "bg-emerald-200 border-emerald-400";
|
|
}
|
|
// 커스텀 위젯
|
|
if (componentKind === "custom") {
|
|
return "bg-pink-200 border-pink-400";
|
|
}
|
|
return "bg-slate-100 border-slate-300";
|
|
};
|
|
|
|
// ========== 화면 미리보기 컴포넌트 - 화면 타입별 간단한 일러스트 ==========
|
|
const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType: string }> = ({
|
|
layoutSummary,
|
|
screenType,
|
|
}) => {
|
|
const { totalComponents, widgetCounts } = layoutSummary;
|
|
|
|
// 그리드 화면 일러스트
|
|
if (screenType === "grid") {
|
|
return (
|
|
<div className="flex h-full flex-col gap-2 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
|
|
{/* 상단 툴바 */}
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-4 w-16 rounded bg-pink-400/80 shadow-sm" />
|
|
<div className="flex-1" />
|
|
<div className="h-4 w-8 rounded bg-blue-500 shadow-sm" />
|
|
<div className="h-4 w-8 rounded bg-blue-500 shadow-sm" />
|
|
<div className="h-4 w-8 rounded bg-rose-500 shadow-sm" />
|
|
</div>
|
|
{/* 테이블 헤더 */}
|
|
<div className="flex gap-1 rounded-t-md bg-violet-500 px-2 py-2 shadow-sm">
|
|
{[...Array(5)].map((_, i) => (
|
|
<div key={i} className="h-2.5 flex-1 rounded bg-white/40" />
|
|
))}
|
|
</div>
|
|
{/* 테이블 행들 */}
|
|
<div className="flex flex-1 flex-col gap-1 overflow-hidden">
|
|
{[...Array(7)].map((_, i) => (
|
|
<div key={i} className={`flex gap-1 rounded px-2 py-1.5 ${i % 2 === 0 ? "bg-slate-100" : "bg-white"}`}>
|
|
{[...Array(5)].map((_, j) => (
|
|
<div key={j} className="h-2 flex-1 rounded bg-slate-300/70" />
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* 페이지네이션 */}
|
|
<div className="flex items-center justify-center gap-2 pt-1">
|
|
<div className="h-2.5 w-4 rounded bg-slate-300" />
|
|
<div className="h-2.5 w-4 rounded bg-blue-500" />
|
|
<div className="h-2.5 w-4 rounded bg-slate-300" />
|
|
<div className="h-2.5 w-4 rounded bg-slate-300" />
|
|
</div>
|
|
{/* 컴포넌트 수 */}
|
|
<div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
|
|
{totalComponents}개
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 폼 화면 일러스트
|
|
if (screenType === "form") {
|
|
return (
|
|
<div className="flex h-full flex-col gap-3 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
|
|
{/* 폼 필드들 */}
|
|
{[...Array(6)].map((_, i) => (
|
|
<div key={i} className="flex items-center gap-3">
|
|
<div className="h-2.5 w-14 rounded bg-slate-400" />
|
|
<div className="h-5 flex-1 rounded-md border border-slate-300 bg-white shadow-sm" />
|
|
</div>
|
|
))}
|
|
{/* 버튼 영역 */}
|
|
<div className="mt-auto flex justify-end gap-2 border-t border-slate-100 pt-3">
|
|
<div className="h-5 w-14 rounded-md bg-slate-300 shadow-sm" />
|
|
<div className="h-5 w-14 rounded-md bg-blue-500 shadow-sm" />
|
|
</div>
|
|
{/* 컴포넌트 수 */}
|
|
<div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
|
|
{totalComponents}개
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 대시보드 화면 일러스트
|
|
if (screenType === "dashboard") {
|
|
return (
|
|
<div className="grid h-full grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
|
|
{/* 카드/차트들 */}
|
|
<div className="rounded-lg bg-emerald-100 p-2 shadow-sm">
|
|
<div className="mb-2 h-2.5 w-10 rounded bg-emerald-400" />
|
|
<div className="h-10 rounded-md bg-emerald-300/80" />
|
|
</div>
|
|
<div className="rounded-lg bg-amber-100 p-2 shadow-sm">
|
|
<div className="mb-2 h-2.5 w-10 rounded bg-amber-400" />
|
|
<div className="h-10 rounded-md bg-amber-300/80" />
|
|
</div>
|
|
<div className="col-span-2 rounded-lg bg-blue-100 p-2 shadow-sm">
|
|
<div className="mb-2 h-2.5 w-12 rounded bg-blue-400" />
|
|
<div className="flex h-14 items-end gap-1">
|
|
{[...Array(10)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex-1 rounded-t bg-blue-400/80"
|
|
style={{ height: `${25 + Math.random() * 75}%` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{/* 컴포넌트 수 */}
|
|
<div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
|
|
{totalComponents}개
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 액션 화면 일러스트 (버튼 중심)
|
|
if (screenType === "action") {
|
|
return (
|
|
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
|
|
<div className="rounded-full bg-slate-100 p-4 text-slate-400">
|
|
<MousePointer2 className="h-10 w-10" />
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<div className="h-7 w-16 rounded-md bg-blue-500 shadow-sm" />
|
|
<div className="h-7 w-16 rounded-md bg-slate-300 shadow-sm" />
|
|
</div>
|
|
<div className="text-xs font-medium text-slate-400">액션 화면</div>
|
|
{/* 컴포넌트 수 */}
|
|
<div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
|
|
{totalComponents}개
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 기본 (알 수 없는 타입)
|
|
return (
|
|
<div className="flex h-full flex-col items-center justify-center gap-3 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white text-slate-400">
|
|
<div className="rounded-full bg-slate-100 p-4">
|
|
{getScreenTypeIcon(screenType)}
|
|
</div>
|
|
<span className="text-sm font-medium">{totalComponents}개 컴포넌트</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ========== 테이블 노드 (하단) - 컬럼 목록 표시 (컴팩트) ==========
|
|
export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
|
|
const { label, subLabel, isMain, columns } = data;
|
|
// 최대 5개 컬럼만 표시
|
|
const displayColumns = columns?.slice(0, 5) || [];
|
|
const remainingCount = (columns?.length || 0) - 5;
|
|
|
|
return (
|
|
<div className="group relative flex w-[260px] flex-col overflow-hidden rounded-lg border border-border bg-card shadow-md transition-all hover:shadow-lg hover:ring-2 hover:ring-emerald-500/20">
|
|
{/* Handles */}
|
|
<Handle
|
|
type="target"
|
|
position={Position.Top}
|
|
id="top"
|
|
className="!h-2 !w-2 !border-2 !border-background !bg-emerald-500 opacity-0 transition-opacity group-hover:opacity-100"
|
|
/>
|
|
<Handle
|
|
type="target"
|
|
position={Position.Left}
|
|
id="left"
|
|
className="!h-2 !w-2 !border-2 !border-background !bg-emerald-500 opacity-0 transition-opacity group-hover:opacity-100"
|
|
/>
|
|
<Handle
|
|
type="source"
|
|
position={Position.Right}
|
|
id="right"
|
|
className="!h-2 !w-2 !border-2 !border-background !bg-emerald-500 opacity-0 transition-opacity group-hover:opacity-100"
|
|
/>
|
|
<Handle
|
|
type="source"
|
|
position={Position.Bottom}
|
|
id="bottom"
|
|
className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
|
|
/>
|
|
|
|
{/* 헤더 (초록색, 컴팩트) */}
|
|
<div className={`flex items-center gap-2 px-3 py-1.5 text-white ${isMain ? "bg-emerald-600" : "bg-slate-500"}`}>
|
|
<Database className="h-3.5 w-3.5" />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="truncate text-[11px] font-semibold">{label}</div>
|
|
{subLabel && <div className="truncate text-[9px] opacity-80">{subLabel}</div>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 컬럼 목록 (컴팩트) */}
|
|
<div className="p-1.5">
|
|
{displayColumns.length > 0 ? (
|
|
<div className="flex flex-col gap-px">
|
|
{displayColumns.map((col, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="flex items-center gap-1 rounded bg-slate-50 px-1.5 py-0.5 hover:bg-slate-100"
|
|
>
|
|
{/* PK/FK 아이콘 */}
|
|
{col.isPrimaryKey && <Key className="h-2.5 w-2.5 text-amber-500" />}
|
|
{col.isForeignKey && !col.isPrimaryKey && <Link2 className="h-2.5 w-2.5 text-blue-500" />}
|
|
{!col.isPrimaryKey && !col.isForeignKey && <div className="w-2.5" />}
|
|
|
|
{/* 컬럼명 */}
|
|
<span className="flex-1 truncate font-mono text-[9px] font-medium text-slate-700">
|
|
{col.name}
|
|
</span>
|
|
|
|
{/* 타입 */}
|
|
<span className="text-[8px] text-slate-400">{col.type}</span>
|
|
</div>
|
|
))}
|
|
|
|
{remainingCount > 0 && (
|
|
<div className="text-center text-[8px] text-slate-400 py-0.5">+ {remainingCount}개 더</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center py-2 text-muted-foreground">
|
|
<Database className="h-4 w-4 text-slate-300" />
|
|
<span className="mt-0.5 text-[8px] text-slate-400">컬럼 정보 없음</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 푸터 (컴팩트) */}
|
|
<div className="flex items-center justify-between border-t border-border bg-muted/30 px-2 py-1">
|
|
<span className="text-[9px] text-muted-foreground">PostgreSQL</span>
|
|
{columns && (
|
|
<span className="text-[9px] text-muted-foreground">{columns.length}개 컬럼</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ========== 기존 호환성 유지용 ==========
|
|
export const LegacyScreenNode = ScreenNode;
|
|
export const AggregateNode: React.FC<{ data: any }> = ({ data }) => {
|
|
return (
|
|
<div className="rounded-lg border-2 border-purple-300 bg-white p-3 shadow-lg">
|
|
<Handle type="target" position={Position.Left} id="left" className="!h-3 !w-3 !bg-purple-500" />
|
|
<Handle type="source" position={Position.Right} id="right" className="!h-3 !w-3 !bg-purple-500" />
|
|
<div className="flex items-center gap-2 text-purple-600">
|
|
<Table2 className="h-4 w-4" />
|
|
<span className="text-sm font-semibold">{data.label || "Aggregate"}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|