그래프방식 조건선택 기능 추가

frontend/src/components/strategyEditor/FlowNodes.tsx

@@ -33,6 +33,7 @@ import {
   stochPairDisplayName,
 } from '../../utils/stochOverboughtPair';
 import ConditionNodeSettings from './ConditionNodeSettings';
+import ConditionPresetPicker from './ConditionPresetPicker';
 import StochPairNodeSettings from './StochPairNodeSettings';
 import PriceExtremePairNodeSettings from './PriceExtremePairNodeSettings';
 import {
@@ -415,7 +416,9 @@ export const ConditionFlowNode = memo(function ConditionFlowNode({ id, data, sel
   const isSell = d.signalTab === 'sell';
   const { onDragEnter, onDragOver, onDragLeave, onDrop } = usePaletteDropHandlers(id, d);
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [presetOpen, setPresetOpen] = useState(false);
   const showSettings = cond && hasNodeSettings(cond);
+  const showPreset = cond && !cond.composite;
 
   const handleSettingsChange = useCallback((next: NonNullable<typeof cond>) => {
     d.onUpdateCondition?.(id, next);
@@ -423,7 +426,7 @@ export const ConditionFlowNode = memo(function ConditionFlowNode({ id, data, sel
 
   return (
     <div
-      className={`se-flow-node se-flow-node--cond se-flow-node--${tone}${isSell ? ' se-flow-node--sell-mode' : ''}${d.isOrphan ? ' se-flow-node--orphan' : ''} ${selected ? 'se-flow-node--selected' : ''} ${d.dragOver ? 'se-flow-node--drop' : ''}${settingsOpen ? ' se-flow-node--settings-open' : ''}`}
+      className={`se-flow-node se-flow-node--cond se-flow-node--${tone}${isSell ? ' se-flow-node--sell-mode' : ''}${d.isOrphan ? ' se-flow-node--orphan' : ''} ${selected ? 'se-flow-node--selected' : ''} ${d.dragOver ? 'se-flow-node--drop' : ''}${settingsOpen ? ' se-flow-node--settings-open' : ''}${presetOpen ? ' se-flow-node--preset-open' : ''}`}
       onDragEnter={onDragEnter}
       onDragOver={onDragOver}
       onDragLeave={onDragLeave}
@@ -437,6 +440,25 @@ export const ConditionFlowNode = memo(function ConditionFlowNode({ id, data, sel
       <div className="se-flow-cond-top">
         <div className="se-flow-cond-badge">{indLabel}</div>
         <div className="se-flow-cond-actions">
+          {showPreset && (
+            <button
+              type="button"
+              className="se-flow-preset"
+              title="조건 선택"
+              aria-label="조건 선택"
+              aria-expanded={presetOpen}
+              onClick={e => {
+                e.stopPropagation();
+                setPresetOpen(v => !v);
+                setSettingsOpen(false);
+              }}
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M3 17l4-5 4 3 5-8 5 6" strokeLinecap="round" strokeLinejoin="round" />
+                <circle cx="18" cy="6" r="2" fill="currentColor" stroke="none" />
+              </svg>
+            </button>
+          )}
           {showSettings && (
             <button
               type="button"
@@ -446,6 +468,7 @@ export const ConditionFlowNode = memo(function ConditionFlowNode({ id, data, sel
               onClick={e => {
                 e.stopPropagation();
                 setSettingsOpen(v => !v);
+                setPresetOpen(false);
               }}
             >
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -458,6 +481,18 @@ export const ConditionFlowNode = memo(function ConditionFlowNode({ id, data, sel
         </div>
       </div>
       <div className="se-flow-cond-text">{d.label ?? indLabel}</div>
+      {presetOpen && cond && d.def && (
+        <ConditionPresetPicker
+          condition={cond}
+          def={d.def}
+          signalType={d.signalTab ?? 'buy'}
+          nodeId={id}
+          onChange={handleSettingsChange}
+          onReplaceNode={replaced => d.onReplaceLogicNode?.(id, replaced)}
+          onClose={() => setPresetOpen(false)}
+          popoverClassName="se-flow-preset-pop"
+        />
+      )}
       {settingsOpen && cond && d.def && (
         <ConditionNodeSettings
           condition={cond}

frontend/src/components/strategyEditor/StrategyEditorCanvas.tsx

@@ -737,6 +737,26 @@ function StrategyEditorCanvasInner({
     }
   }, [root, extraRoots, orphans, onChange, onOrphansChange, onExtraRootsChange]);
 
+  const handleReplaceLogicNode = useCallback((id: string, replaced: LogicNode) => {
+    if (isOrphanNode(orphans, id)) {
+      onOrphansChange(orphans.map(o => (o.id === id ? replaced : o)));
+      return;
+    }
+    if (root && findNodeInTree(root, id)) {
+      onChange(updateNode(root, id, () => replaced));
+      return;
+    }
+    for (const [sid, branch] of Object.entries(extraRoots)) {
+      if (branch && findNodeInTree(branch, id)) {
+        onExtraRootsChange?.({
+          ...extraRoots,
+          [sid]: updateNode(branch, id, () => replaced),
+        });
+        return;
+      }
+    }
+  }, [root, extraRoots, orphans, onChange, onOrphansChange, onExtraRootsChange]);
+
   const handleChangeLogicGateType = useCallback((id: string, gateType: 'AND' | 'OR') => {
     const patchGate = (n: LogicNode) => (
       n.type === 'AND' || n.type === 'OR'
@@ -868,6 +888,7 @@ function StrategyEditorCanvasInner({
   const flowCallbacks = useMemo(() => ({
     onDelete: handleDelete,
     onUpdateCondition: handleUpdateCondition,
+    onReplaceLogicNode: handleReplaceLogicNode,
     onUpdateStochPairSecondary: handleUpdateStochPairSecondary,
     onUpdatePriceExtremeFilterLevel: handleUpdatePriceExtremeFilterLevel,
     onUpdateInflection33FilterLevel: handleUpdateInflection33FilterLevel,
@@ -879,7 +900,7 @@ function StrategyEditorCanvasInner({
     onStartCandleTypesChange: handleStartCandleTypesChange,
     onDeleteStart: handleDeleteStart,
   }), [
-    handleDelete, handleUpdateCondition, handleUpdateStochPairSecondary, handleUpdatePriceExtremeFilterLevel, handleUpdateInflection33FilterLevel, handleUpdateStableStrategyFilterLevel, handleChangeLogicGateType,
+    handleDelete, handleUpdateCondition, handleReplaceLogicNode, handleUpdateStochPairSecondary, handleUpdatePriceExtremeFilterLevel, handleUpdateInflection33FilterLevel, handleUpdateStableStrategyFilterLevel, handleChangeLogicGateType,
     handleDropTarget, handleDragOverTarget, handleDragLeaveTarget,
     handleStartCandleTypesChange, handleDeleteStart,
   ]);

frontend/src/styles/strategyEditor.css

@@ -1218,18 +1218,57 @@
   transition: opacity 0.12s, background 0.12s;
   flex-shrink: 0;
 }
+.se-flow-preset {
+  border: none;
+  background: rgba(167, 139, 250, 0.2);
+  color: #a78bfa;
+  width: 18px; height: 18px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.12s, background 0.12s;
+  flex-shrink: 0;
+}
+.se-flow-preset:hover {
+  background: rgba(167, 139, 250, 0.35);
+}
 .se-flow-settings:hover {
   background: rgba(230, 194, 0, 0.2);
 }
 .se-flow-node:hover .se-flow-del,
 .se-flow-node:hover .se-flow-settings,
+.se-flow-node:hover .se-flow-preset,
 .se-flow-node--selected .se-flow-del,
 .se-flow-node--selected .se-flow-settings,
+.se-flow-node--selected .se-flow-preset,
 .se-flow-node--settings-open .se-flow-del,
-.se-flow-node--settings-open .se-flow-settings {
+.se-flow-node--settings-open .se-flow-settings,
+.se-flow-node--settings-open .se-flow-preset,
+.se-flow-node--preset-open .se-flow-del,
+.se-flow-node--preset-open .se-flow-settings,
+.se-flow-node--preset-open .se-flow-preset {
   opacity: 1;
 }
 
+.se-flow-preset-pop {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 40;
+  width: min(320px, calc(100vw - 24px));
+  max-height: min(420px, 60vh);
+  overflow: auto;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, #a78bfa 45%, transparent);
+  background: var(--se-bg-elevated);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
 .se-flow-settings-pop {
   position: absolute;
   top: 6px;

frontend/src/utils/strategyFlowLayout.ts

@@ -40,6 +40,8 @@ export type StrategyFlowNodeData = {
   onDeleteStart?: (startId: string) => void;
   onDelete?: (id: string) => void;
   onUpdateCondition?: (nodeId: string, condition: ConditionDSL) => void;
+  /** 조건 프리셋(복합) — 노드 전체 교체 (CONDITION → AND 등) */
+  onReplaceLogicNode?: (nodeId: string, node: LogicNode) => void;
   /** Stoch 과열×보조 복합 — 보조지표 변경 */
   onUpdateStochPairSecondary?: (nodeId: string, secondaryIndicator: string) => void;
   /** 9·20 신고가/신저가 복합 — 필터 강도 변경 */
@@ -480,7 +482,7 @@ function layoutTree(
   signalTab: 'buy' | 'sell',
   callbacks: Pick<
     StrategyFlowNodeData,
-    'onDelete' | 'onUpdateCondition' | 'onUpdateStochPairSecondary' | 'onUpdatePriceExtremeFilterLevel' | 'onUpdateInflection33FilterLevel' | 'onUpdateStableStrategyFilterLevel' | 'onChangeLogicGateType'
+    'onDelete' | 'onUpdateCondition' | 'onReplaceLogicNode' | 'onUpdateStochPairSecondary' | 'onUpdatePriceExtremeFilterLevel' | 'onUpdateInflection33FilterLevel' | 'onUpdateStableStrategyFilterLevel' | 'onChangeLogicGateType'
     | 'onDropTarget' | 'onDragOverTarget' | 'onDragLeaveTarget'
   >,
   dragOverId: string | null,
@@ -502,6 +504,7 @@ function layoutTree(
       signalTab,
       onDelete: callbacks.onDelete,
       onUpdateCondition: callbacks.onUpdateCondition,
+      onReplaceLogicNode: callbacks.onReplaceLogicNode,
       onUpdateStochPairSecondary: callbacks.onUpdateStochPairSecondary,
       onUpdatePriceExtremeFilterLevel: callbacks.onUpdatePriceExtremeFilterLevel,
       onUpdateInflection33FilterLevel: callbacks.onUpdateInflection33FilterLevel,
@@ -635,7 +638,7 @@ function appendOrphanFlowNodes(
   signalTab: 'buy' | 'sell',
   callbacks: Pick<
     StrategyFlowNodeData,
-    'onDelete' | 'onUpdateCondition' | 'onUpdateStochPairSecondary' | 'onUpdatePriceExtremeFilterLevel' | 'onUpdateInflection33FilterLevel' | 'onUpdateStableStrategyFilterLevel' | 'onChangeLogicGateType'
+    'onDelete' | 'onUpdateCondition' | 'onReplaceLogicNode' | 'onUpdateStochPairSecondary' | 'onUpdatePriceExtremeFilterLevel' | 'onUpdateInflection33FilterLevel' | 'onUpdateStableStrategyFilterLevel' | 'onChangeLogicGateType'
     | 'onDropTarget' | 'onDragOverTarget' | 'onDragLeaveTarget'
   >,
 ): void {
@@ -657,6 +660,7 @@ function appendOrphanFlowNodes(
         signalTab,
         onDelete: callbacks.onDelete,
         onUpdateCondition: callbacks.onUpdateCondition,
+      onReplaceLogicNode: callbacks.onReplaceLogicNode,
         onUpdateStochPairSecondary: callbacks.onUpdateStochPairSecondary,
       onUpdatePriceExtremeFilterLevel: callbacks.onUpdatePriceExtremeFilterLevel,
       onUpdateInflection33FilterLevel: callbacks.onUpdateInflection33FilterLevel,
@@ -684,6 +688,7 @@ export function logicNodeToFlow(
     StrategyFlowNodeData,
     | 'onDelete'
     | 'onUpdateCondition'
+    | 'onReplaceLogicNode'
     | 'onUpdateStochPairSecondary'
     | 'onUpdatePriceExtremeFilterLevel'
     | 'onUpdateInflection33FilterLevel'