diff --git a/frontend/components/dataflow/DataFlowDesigner.tsx b/frontend/components/dataflow/DataFlowDesigner.tsx
index 9553a5b2..f0951f6b 100644
--- a/frontend/components/dataflow/DataFlowDesigner.tsx
+++ b/frontend/components/dataflow/DataFlowDesigner.tsx
@@ -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 && (