전략편집기 메뉴 추가

frontend/src/components/strategyEditor/MultiSelectionDeleteButton.tsx

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+import { getNodesBounds, useReactFlow, useStore } from '@xyflow/react';
+import { START_NODE_ID } from '../../utils/strategyFlowLayout';
+
+type Props = {
+  onDelete: () => void;
+};
+
+export function MultiSelectionDeleteButton({ onDelete }: Props) {
+  const { getNodes, flowToScreenPosition } = useReactFlow();
+
+  const selectionKey = useStore(useCallback((state) => {
+    const selected = state.nodes.filter(n => n.selected && n.id !== START_NODE_ID);
+    if (selected.length < 2) return null;
+    return selected
+      .map(n => `${n.id}:${Math.round(n.position.x)}:${Math.round(n.position.y)}`)
+      .join('|');
+  }, []));
+
+  if (!selectionKey) return null;
+
+  const selectedNodes = getNodes().filter(n => n.selected && n.id !== START_NODE_ID);
+  if (selectedNodes.length < 2) return null;
+
+  const bounds = getNodesBounds(selectedNodes);
+  const anchor = flowToScreenPosition({
+    x: bounds.x + bounds.width,
+    y: bounds.y,
+  });
+
+  return (
+    <button
+      type="button"
+      className="se-selection-delete"
+      title="선택 항목 모두 삭제 (Logic Expression에서 제외)"
+      style={{
+        position: 'absolute',
+        left: anchor.x + 6,
+        top: anchor.y - 6,
+        transform: 'translate(0, -100%)',
+      }}
+      onMouseDown={(e) => e.stopPropagation()}
+      onClick={(e) => {
+        e.stopPropagation();
+        onDelete();
+      }}
+    >
+      ×
+    </button>
+  );
+}