4f10b5e42d
447+ 파일, 4500+ 줄 변경: - gray-* → border/bg-muted/text-foreground/text-muted-foreground - blue-* → primary/ring - red-* → destructive - green-* → emerald (일관성) - indigo-* → primary - yellow/orange → amber (통일) - dark mode 변형도 시맨틱 토큰으로 변환 Made-with: Cursor
109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import { TableSelector } from "./TableSelector";
|
||
import { TableDefinition } from "@/lib/api/dataflow";
|
||
import { ExtendedJsonRelationship } from "@/types/dataflowTypes";
|
||
|
||
interface DataFlowSidebarProps {
|
||
companyCode: string;
|
||
nodes: Array<{ id: string; data: { table: { tableName: string } } }>;
|
||
edges: Array<{ id: string }>;
|
||
tempRelationships: ExtendedJsonRelationship[];
|
||
hasUnsavedChanges: boolean;
|
||
currentDiagramId: number | null;
|
||
currentDiagramCategory: string;
|
||
onTableAdd: (table: TableDefinition) => void;
|
||
onRemoveOrphanedNodes: () => void;
|
||
onClearAll: () => void;
|
||
onOpenSaveModal: () => void;
|
||
getSelectedTableNames: () => string[];
|
||
}
|
||
|
||
export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
|
||
companyCode,
|
||
nodes,
|
||
edges,
|
||
tempRelationships,
|
||
hasUnsavedChanges,
|
||
currentDiagramId,
|
||
currentDiagramCategory,
|
||
onTableAdd,
|
||
onRemoveOrphanedNodes,
|
||
onClearAll,
|
||
onOpenSaveModal,
|
||
getSelectedTableNames,
|
||
}) => {
|
||
return (
|
||
<div className="w-80 border-r border-border bg-white shadow-lg">
|
||
<div className="p-6">
|
||
<h2 className="mb-6 text-xl font-bold text-foreground">테이블 간 데이터 관계 설정</h2>
|
||
|
||
{/* 테이블 선택기 */}
|
||
<TableSelector companyCode={companyCode} onTableAdd={onTableAdd} selectedTables={getSelectedTableNames()} />
|
||
|
||
{/* 컨트롤 버튼들 */}
|
||
<div className="space-y-3">
|
||
<button
|
||
onClick={onRemoveOrphanedNodes}
|
||
className="w-full rounded-lg bg-amber-500 p-3 font-medium text-white transition-colors hover:bg-orange-600"
|
||
disabled={nodes.length === 0}
|
||
>
|
||
🧹 고립된 노드 정리
|
||
</button>
|
||
|
||
<button
|
||
onClick={onClearAll}
|
||
className="w-full rounded-lg bg-destructive/100 p-3 font-medium text-white transition-colors hover:bg-destructive"
|
||
>
|
||
🗑️ 전체 삭제
|
||
</button>
|
||
|
||
<button
|
||
onClick={onOpenSaveModal}
|
||
className={`w-full rounded-lg bg-emerald-500 p-3 font-medium text-white transition-colors hover:bg-emerald-600 ${
|
||
hasUnsavedChanges ? "animate-pulse" : ""
|
||
}`}
|
||
>
|
||
💾 관계 저장 {tempRelationships.length > 0 && `(${tempRelationships.length})`}
|
||
</button>
|
||
</div>
|
||
|
||
{/* 통계 정보 */}
|
||
<div className="mt-6 rounded-lg bg-muted p-4">
|
||
<div className="mb-2 text-sm font-semibold text-foreground">통계</div>
|
||
<div className="space-y-1 text-sm text-muted-foreground">
|
||
<div className="flex justify-between">
|
||
<span>테이블 노드:</span>
|
||
<span className="font-medium">{nodes.length}개</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>연결:</span>
|
||
<span className="font-medium">{edges.length}개</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>메모리 관계:</span>
|
||
<span className="font-medium text-amber-600">{tempRelationships.length}개</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>관계도 ID:</span>
|
||
<span className="font-medium">{currentDiagramId || "미설정"}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>연결 종류:</span>
|
||
<span className="font-medium">
|
||
{currentDiagramCategory === "simple-key" && "단순 키값"}
|
||
{currentDiagramCategory === "data-save" && "데이터 저장"}
|
||
{currentDiagramCategory === "external-call" && "외부 호출"}
|
||
</span>
|
||
</div>
|
||
{hasUnsavedChanges && (
|
||
<div className="mt-2 text-xs font-medium text-amber-600">⚠️ 저장되지 않은 변경사항이 있습니다</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|