복합지표 추가

frontend/src/components/strategyEditor/FlowNodes.tsx

@@ -10,7 +10,12 @@ import StartTimeframeCheckboxes from './StartTimeframeCheckboxes';
 import LogicGateOpToggle from './LogicGateOpToggle';
 import { hasNodeSettings } from '../../utils/conditionPeriods';
 import { getStrategyIndicatorDisplayName } from '../../utils/strategyPaletteStorage';
+import {
+  isStochOverboughtPairRoot,
+  stochPairDisplayName,
+} from '../../utils/stochOverboughtPair';
 import ConditionNodeSettings from './ConditionNodeSettings';
+import StochPairNodeSettings from './StochPairNodeSettings';
 
 const LOGIC_COLORS: Record<string, string> = {
   AND: '#00aaff',
@@ -190,11 +195,13 @@ export const LogicGateNode = memo(function LogicGateNode({ id, data, selected }:
   const node = d.logicNode!;
   const color = LOGIC_COLORS[node.type] ?? '#00aaff';
   const isSell = d.signalTab === 'sell';
+  const isStochPair = isStochOverboughtPairRoot(node);
   const { onDragOver, onDragLeave, onDrop } = usePaletteDropHandlers(id, d);
+  const [settingsOpen, setSettingsOpen] = useState(false);
 
   return (
     <div
-      className={`se-flow-node se-flow-node--logic${isSell ? ' se-flow-node--sell-mode' : ''}${d.isOrphan ? ' se-flow-node--orphan' : ''} ${selected ? 'se-flow-node--selected' : ''} ${d.dragOver ? 'se-flow-node--drop' : ''}`}
+      className={`se-flow-node se-flow-node--logic${isStochPair ? ' se-flow-node--stoch-pair' : ''}${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' : ''}`}
       style={{ '--se-gate-color': color } as React.CSSProperties}
       onDragOver={onDragOver}
       onDragLeave={onDragLeave}
@@ -217,10 +224,39 @@ export const LogicGateNode = memo(function LogicGateNode({ id, data, selected }:
           <span className="se-flow-gate-badge">[{node.type}]</span>
         )}
       </div>
+      {isStochPair && node.stochPair && (
+        <div className="se-flow-gate-stoch-pair">
+          <span className="se-flow-gate-stoch-pair-title">
+            {stochPairDisplayName(node.stochPair.secondaryIndicatorType)}
+          </span>
+          <button
+            type="button"
+            className="se-flow-settings"
+            title="복합지표 설정"
+            aria-label="복합지표 설정"
+            onClick={e => {
+              e.stopPropagation();
+              setSettingsOpen(v => !v);
+            }}
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <circle cx="12" cy="12" r="3"/>
+              <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+            </svg>
+          </button>
+        </div>
+      )}
       {(node.children ?? []).length === 0 && (
         <span className="se-flow-gate-hint">조건을 드롭하세요</span>
       )}
       <button type="button" className="se-flow-del" title="삭제" onClick={() => d.onDelete?.(id)}>×</button>
+      {settingsOpen && isStochPair && node.stochPair && (
+        <StochPairNodeSettings
+          secondaryIndicator={node.stochPair.secondaryIndicatorType}
+          onChange={sec => d.onUpdateStochPairSecondary?.(id, sec)}
+          onClose={() => setSettingsOpen(false)}
+        />
+      )}
     </div>
   );
 });