복합지표 전략 추가

2026-06-12 13:26:53 +09:00
parent 9208418c33
commit 52137cf1db
27 changed files with 2712 additions and 55 deletions
@@ -0,0 +1,104 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  INFLECTION_33_FILTER_OPTIONS,
+  inflection33FilterSummary,
+  inflection33SummaryText,
+  type Inflection33FilterLevel,
+} from '../../utils/inflection33Strategy';
+
+interface Props {
+  mode: 'buy' | 'sell';
+  period: number;
+  filterLevel: Inflection33FilterLevel;
+  onChange: (filterLevel: Inflection33FilterLevel) => void;
+  onClose: () => void;
+  popoverClassName?: string;
+  variant?: 'popover' | 'inline';
+}
+
+export default function Inflection33PairNodeSettings({
+  mode,
+  period,
+  filterLevel,
+  onChange,
+  onClose,
+  popoverClassName = 'se-flow-settings-pop',
+  variant = 'popover',
+}: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (variant === 'inline') return;
+    const onDoc = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [onClose, variant]);
+
+  const body = (
+    <>
+      <label className="se-flow-settings-field se-flow-settings-field--readonly">
+        <span>변곡 기간</span>
+        <output className="se-flow-settings-readout">
+          EMA{period} · {period}봉 종가 채널
+        </output>
+      </label>
+
+      <label className="se-flow-settings-field">
+        <span>필터 강도</span>
+        <select
+          className="se-combo-num-select sp-cond-sel"
+          value={filterLevel}
+          onChange={e => onChange(e.target.value as Inflection33FilterLevel)}
+        >
+          {INFLECTION_33_FILTER_OPTIONS.map(o => (
+            <option key={o.value} value={o.value}>{o.label}</option>
+          ))}
+        </select>
+      </label>
+
+      <p className="se-flow-settings-hint">
+        {INFLECTION_33_FILTER_OPTIONS.find(o => o.value === filterLevel)?.desc}
+      </p>
+      <p className="se-flow-settings-hint se-flow-settings-hint--muted">
+        {inflection33FilterSummary(mode, filterLevel)}
+      </p>
+      <p className="se-flow-settings-hint se-flow-settings-hint--muted">
+        {inflection33SummaryText(mode, period, filterLevel)}
+      </p>
+    </>
+  );
+
+  if (variant === 'inline') {
+    return (
+      <div className="se-inflection33-inline-settings" onClick={e => e.stopPropagation()}>
+        {body}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={popoverClassName}
+      role="dialog"
+      aria-label="33변곡 복합 필터 설정"
+      onClick={e => e.stopPropagation()}
+    >
+      <div className="se-flow-settings-head">
+        <span>필터 강도</span>
+        <button
+          type="button"
+          className="se-flow-settings-close"
+          aria-label="닫기"
+          title="닫기"
+          onClick={onClose}
+        >
+          ×
+        </button>
+      </div>
+      {body}
+    </div>
+  );
+}