데이터 관계 정보 모달 디자인 복구
This commit is contained in:
parent
8e64b338a1
commit
6dad7c15ce
|
|
@ -1258,23 +1258,23 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
|
|||
{/* 엣지 정보 및 액션 버튼 */}
|
||||
{showEdgeActions && selectedEdgeForEdit && selectedEdgeInfo && (
|
||||
<div
|
||||
className="fixed z-50 rounded-xl border border-gray-200 bg-white shadow-xl"
|
||||
className="fixed z-50 rounded-xl border border-gray-200 bg-white shadow-2xl"
|
||||
style={{
|
||||
left: edgeActionPosition.x - 160,
|
||||
top: edgeActionPosition.y - 100,
|
||||
minWidth: "320px",
|
||||
maxWidth: "400px",
|
||||
maxWidth: "380px",
|
||||
}}
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between rounded-t-xl border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
|
||||
<span className="text-blue-600">🔗</span>
|
||||
<div className="flex items-center justify-between rounded-t-xl border-b border-gray-200 bg-blue-600 p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm">
|
||||
<span className="text-sm text-white">🔗</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-800">{selectedEdgeInfo.relationshipName}</div>
|
||||
<div className="text-xs text-gray-500">데이터 관계</div>
|
||||
<div className="text-sm font-bold text-white">{selectedEdgeInfo.relationshipName}</div>
|
||||
<div className="text-xs text-blue-100">데이터 관계 정보</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -1284,76 +1284,87 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
|
|||
setSelectedEdgeForEdit(null);
|
||||
setSelectedColumns({});
|
||||
}}
|
||||
className="flex h-6 w-6 items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600"
|
||||
className="flex h-6 w-6 items-center justify-center rounded-full text-white/80 transition-all hover:bg-white/20 hover:text-white"
|
||||
>
|
||||
✕
|
||||
<span className="text-sm">✕</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 관계 정보 요약 */}
|
||||
<div className="border-b border-gray-100 bg-gray-50 p-3">
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="text-center">
|
||||
<div className="text-xs font-medium tracking-wide text-gray-500 uppercase">관계 유형</div>
|
||||
<div className="mt-1 inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-800">
|
||||
{selectedEdgeInfo.relationshipType}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-gray-300">|</div>
|
||||
<div className="text-center">
|
||||
<div className="text-xs font-medium tracking-wide text-gray-500 uppercase">연결 유형</div>
|
||||
<div className="mt-1 inline-flex items-center rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-semibold text-indigo-800">
|
||||
{selectedEdgeInfo.connectionType}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 연결 정보 */}
|
||||
<div className="space-y-3 p-4">
|
||||
{/* From 테이블 */}
|
||||
<div className="rounded-lg bg-green-50 p-3">
|
||||
<div className="mb-1 text-xs font-medium text-green-700">From 테이블</div>
|
||||
<div className="font-semibold text-gray-800">{selectedEdgeInfo.fromTable}</div>
|
||||
<div className="mt-1 flex flex-wrap gap-1">
|
||||
{selectedEdgeInfo.fromColumns.map((column, index) => (
|
||||
<span key={index} className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">
|
||||
{column}
|
||||
</span>
|
||||
))}
|
||||
<div className="rounded-lg border-l-4 border-emerald-400 bg-emerald-50 p-3">
|
||||
<div className="mb-2 text-xs font-bold tracking-wide text-emerald-700 uppercase">FROM</div>
|
||||
<div className="mb-2 text-base font-bold text-gray-800">{selectedEdgeInfo.fromTable}</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedEdgeInfo.fromColumns.map((column, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center rounded-md bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800 ring-1 ring-emerald-200"
|
||||
>
|
||||
{column}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 화살표 */}
|
||||
{/* 관계 화살표 */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex items-center gap-2 text-gray-400">
|
||||
<div className="h-px w-8 bg-gray-300"></div>
|
||||
<span className="text-lg">→</span>
|
||||
<div className="h-px w-8 bg-gray-300"></div>
|
||||
</div>
|
||||
<span className="text-l text-gray-600">→</span>
|
||||
</div>
|
||||
|
||||
{/* To 테이블 */}
|
||||
<div className="rounded-lg bg-blue-50 p-3">
|
||||
<div className="mb-1 text-xs font-medium text-blue-700">To 테이블</div>
|
||||
<div className="font-semibold text-gray-800">{selectedEdgeInfo.toTable}</div>
|
||||
<div className="mt-1 flex flex-wrap gap-1">
|
||||
{selectedEdgeInfo.toColumns.map((column, index) => (
|
||||
<span key={index} className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-800">
|
||||
{column}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 관계 정보 */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="rounded-lg bg-gray-50 p-2">
|
||||
<div className="text-xs font-medium text-gray-600">관계 유형</div>
|
||||
<div className="text-sm font-semibold text-gray-800">{selectedEdgeInfo.relationshipType}</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-gray-50 p-2">
|
||||
<div className="text-xs font-medium text-gray-600">연결 유형</div>
|
||||
<div className="text-sm font-semibold text-gray-800">{selectedEdgeInfo.connectionType}</div>
|
||||
<div className="rounded-lg border-l-4 border-blue-400 bg-blue-50 p-3">
|
||||
<div className="mb-2 text-xs font-bold tracking-wide text-blue-700 uppercase">TO</div>
|
||||
<div className="mb-2 text-base font-bold text-gray-800">{selectedEdgeInfo.toTable}</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedEdgeInfo.toColumns.map((column, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 ring-1 ring-blue-200"
|
||||
>
|
||||
{column}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div className="flex gap-2 border-t border-gray-100 p-4">
|
||||
<div className="flex gap-2 border-t border-gray-200 bg-gray-50 p-3">
|
||||
<button
|
||||
onClick={handleEditEdge}
|
||||
className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-blue-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-600"
|
||||
className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md"
|
||||
>
|
||||
<span>✏️</span>
|
||||
<span>수정</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDeleteEdge}
|
||||
className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-red-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600"
|
||||
className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-red-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:bg-red-700 hover:shadow-md"
|
||||
>
|
||||
<span>🗑️</span>
|
||||
<span>삭제</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue