선택된 컬럼 팝업 렌더링 조건 수정
This commit is contained in:
parent
6f77059905
commit
967da94152
|
|
@ -784,6 +784,8 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
|
|||
// 수정 모드였다면 해제
|
||||
if (editingRelationshipId) {
|
||||
setEditingRelationshipId(null);
|
||||
// 편집 모드 취소 시 선택된 컬럼도 초기화
|
||||
setSelectedColumns({});
|
||||
}
|
||||
}, [editingRelationshipId]);
|
||||
|
||||
|
|
@ -1136,98 +1138,101 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
|
|||
<Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#E5E7EB" />
|
||||
</ReactFlow>
|
||||
|
||||
{/* 선택된 컬럼 팝업 - 캔버스 좌측 상단 고정 (신규 관계도 생성 시에만 표시) */}
|
||||
{Object.keys(selectedColumns).length > 0 && !showEdgeActions && !pendingConnection && !diagramId && (
|
||||
<div className="pointer-events-auto absolute top-4 left-4 z-40 w-80 rounded-xl border border-blue-200 bg-white shadow-lg">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between rounded-t-xl border-b border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100">
|
||||
<span className="text-sm text-blue-600">📋</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-gray-800">선택된 컬럼</div>
|
||||
<div className="text-xs text-gray-500">{Object.keys(selectedColumns).length}개 테이블</div>
|
||||
{/* 선택된 컬럼 팝업 - 캔버스 좌측 상단 고정 (새 관계 생성 시에만 표시) */}
|
||||
{Object.keys(selectedColumns).length > 0 &&
|
||||
!showEdgeActions &&
|
||||
!pendingConnection &&
|
||||
!editingRelationshipId && (
|
||||
<div className="pointer-events-auto absolute top-4 left-4 z-40 w-80 rounded-xl border border-blue-200 bg-white shadow-lg">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between rounded-t-xl border-b border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100">
|
||||
<span className="text-sm text-blue-600">📋</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-gray-800">선택된 컬럼</div>
|
||||
<div className="text-xs text-gray-500">{Object.keys(selectedColumns).length}개 테이블</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedColumns({});
|
||||
setSelectionOrder([]);
|
||||
}}
|
||||
className="flex h-5 w-5 items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedColumns({});
|
||||
setSelectionOrder([]);
|
||||
}}
|
||||
className="flex h-5 w-5 items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 컨텐츠 */}
|
||||
<div className="max-h-80 overflow-y-auto p-3">
|
||||
<div className="space-y-3">
|
||||
{[...new Set(selectionOrder)]
|
||||
.filter((tableName) => selectedColumns[tableName] && selectedColumns[tableName].length > 0)
|
||||
.map((tableName, index, filteredOrder) => {
|
||||
const columns = selectedColumns[tableName];
|
||||
const node = nodes.find((n) => n.data.table.tableName === tableName);
|
||||
const displayName = node?.data.table.displayName || tableName;
|
||||
{/* 컨텐츠 */}
|
||||
<div className="max-h-80 overflow-y-auto p-3">
|
||||
<div className="space-y-3">
|
||||
{[...new Set(selectionOrder)]
|
||||
.filter((tableName) => selectedColumns[tableName] && selectedColumns[tableName].length > 0)
|
||||
.map((tableName, index, filteredOrder) => {
|
||||
const columns = selectedColumns[tableName];
|
||||
const node = nodes.find((n) => n.data.table.tableName === tableName);
|
||||
const displayName = node?.data.table.displayName || tableName;
|
||||
|
||||
return (
|
||||
<div key={`selected-${tableName}-${index}`}>
|
||||
{/* 테이블 정보 */}
|
||||
<div className="rounded-lg bg-blue-50 p-2">
|
||||
<div className="mb-1 text-xs font-medium text-blue-700">{displayName}</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{columns.map((column, columnIndex) => (
|
||||
<span
|
||||
key={`${tableName}-${column}-${columnIndex}`}
|
||||
className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-800"
|
||||
title={column}
|
||||
>
|
||||
{column}
|
||||
</span>
|
||||
))}
|
||||
return (
|
||||
<div key={`selected-${tableName}-${index}`}>
|
||||
{/* 테이블 정보 */}
|
||||
<div className="rounded-lg bg-blue-50 p-2">
|
||||
<div className="mb-1 text-xs font-medium text-blue-700">{displayName}</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{columns.map((column, columnIndex) => (
|
||||
<span
|
||||
key={`${tableName}-${column}-${columnIndex}`}
|
||||
className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-800"
|
||||
title={column}
|
||||
>
|
||||
{column}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 화살표 */}
|
||||
{index === 0 && filteredOrder.length > 1 && (
|
||||
<div className="flex justify-center py-1">
|
||||
<div className="text-sm text-gray-400">↓</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 화살표 */}
|
||||
{index === 0 && filteredOrder.length > 1 && (
|
||||
<div className="flex justify-center py-1">
|
||||
<div className="text-sm text-gray-400">↓</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* 액션 버튼 */}
|
||||
<div className="flex gap-2 border-t border-blue-100 p-3">
|
||||
<button
|
||||
onClick={openConnectionModal}
|
||||
disabled={!canCreateConnection()}
|
||||
className={`flex flex-1 items-center justify-center gap-1 rounded-lg px-3 py-2 text-xs font-medium transition-colors ${
|
||||
canCreateConnection()
|
||||
? "bg-blue-500 text-white hover:bg-blue-600"
|
||||
: "cursor-not-allowed bg-gray-300 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
<span>🔗</span>
|
||||
<span>연결 설정</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedColumns({});
|
||||
setSelectionOrder([]);
|
||||
}}
|
||||
className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-gray-200 px-3 py-2 text-xs font-medium text-gray-600 hover:bg-gray-300"
|
||||
>
|
||||
<span>🗑️</span>
|
||||
<span>초기화</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div className="flex gap-2 border-t border-blue-100 p-3">
|
||||
<button
|
||||
onClick={openConnectionModal}
|
||||
disabled={!canCreateConnection()}
|
||||
className={`flex flex-1 items-center justify-center gap-1 rounded-lg px-3 py-2 text-xs font-medium transition-colors ${
|
||||
canCreateConnection()
|
||||
? "bg-blue-500 text-white hover:bg-blue-600"
|
||||
: "cursor-not-allowed bg-gray-300 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
<span>🔗</span>
|
||||
<span>연결 설정</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedColumns({});
|
||||
setSelectionOrder([]);
|
||||
}}
|
||||
className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-gray-200 px-3 py-2 text-xs font-medium text-gray-600 hover:bg-gray-300"
|
||||
>
|
||||
<span>🗑️</span>
|
||||
<span>초기화</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* 안내 메시지 */}
|
||||
{nodes.length === 0 && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue