일목균형표 수정

2026-05-27 23:36:48 +09:00
parent 9cee6387c3
commit 8cc0d1c88c
73 changed files with 2256 additions and 334 deletions
@@ -0,0 +1,119 @@
+/**
+ * START 노드 — 평가 시간봉 다중 선택 (마감봉마다 독립 체크)
+ */
+import React from 'react';
+import {
+  START_TIMEFRAME_GRAPH_ROWS,
+  STRATEGY_CANDLE_TYPE_OPTIONS,
+  STRATEGY_CANDLE_TYPES,
+  formatStrategyCandleLabel,
+  type StrategyCandleType,
+} from '../../utils/strategyStartNodes';
+
+interface Props {
+  selected: string[];
+  onChange: (next: string[]) => void;
+  className?: string;
+  /** 그래프 START: 2행 고정 배치 + 값 라벨(1m…) */
+  layout?: 'default' | 'graph';
+  compact?: boolean;
+}
+
+const OPTIONS_BY_VALUE = Object.fromEntries(
+  STRATEGY_CANDLE_TYPE_OPTIONS.map(o => [o.value, o]),
+) as Record<StrategyCandleType, { value: string; label: string }>;
+
+function CheckItem({
+  value,
+  checked,
+  showShortLabel,
+  onToggle,
+}: {
+  value: StrategyCandleType;
+  checked: boolean;
+  showShortLabel: boolean;
+  onToggle: (value: string, checked: boolean) => void;
+}) {
+  const opt = OPTIONS_BY_VALUE[value];
+  return (
+    <label className="se-start-tf-check" title={formatStrategyCandleLabel(value)}>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={e => onToggle(value, e.target.checked)}
+      />
+      <span>{showShortLabel ? value : opt.label}</span>
+    </label>
+  );
+}
+
+const StartTimeframeCheckboxes: React.FC<Props> = ({
+  selected,
+  onChange,
+  className = '',
+  layout = 'default',
+  compact = false,
+}) => {
+  const selectedSet = new Set(selected);
+
+  const toggle = (value: string, checked: boolean) => {
+    if (checked) {
+      if (!selectedSet.has(value)) onChange([...selected, value]);
+      return;
+    }
+    const next = selected.filter(t => t !== value);
+    onChange(next.length > 0 ? next : [value]);
+  };
+
+  const stop = (e: React.SyntheticEvent) => e.stopPropagation();
+
+  if (layout === 'graph') {
+    return (
+      <div
+        className={`se-start-tf-checks se-start-tf-checks--graph${className ? ` ${className}` : ''}`}
+        role="group"
+        aria-label="조건 판별 시간봉"
+        onPointerDown={stop}
+        onMouseDown={stop}
+        onClick={stop}
+      >
+        {START_TIMEFRAME_GRAPH_ROWS.map((row, rowIdx) => (
+          <div key={rowIdx} className="se-start-tf-checks-row">
+            {row.map(ct => (
+              <CheckItem
+                key={ct}
+                value={ct}
+                checked={selectedSet.has(ct)}
+                showShortLabel
+                onToggle={toggle}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`se-start-tf-checks${compact ? ' se-start-tf-checks--compact' : ''}${className ? ` ${className}` : ''}`}
+      role="group"
+      aria-label="조건 판별 시간봉"
+      onPointerDown={stop}
+      onMouseDown={stop}
+      onClick={stop}
+    >
+      {STRATEGY_CANDLE_TYPES.map(ct => (
+        <CheckItem
+          key={ct}
+          value={ct}
+          checked={selectedSet.has(ct)}
+          showShortLabel={compact}
+          onToggle={toggle}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default StartTimeframeCheckboxes;