전략편집기 메뉴 추가

2026-05-24 06:20:18 +09:00
parent bbe82e510b
commit ea39f7df27
24 changed files with 4897 additions and 29 deletions
@@ -0,0 +1,52 @@
+import React from 'react';
+
+export interface PaletteDragPayload {
+  type: 'operator' | 'indicator';
+  value: string;
+  label: string;
+}
+
+interface Props {
+  type: 'operator' | 'indicator';
+  value: string;
+  label: string;
+  desc?: string;
+  color?: string;
+  period?: string;
+  onAdd: () => void;
+}
+
+export default function PaletteChip({ type, value, label, desc, color, period, onAdd }: Props) {
+  const onDragStart = (e: React.DragEvent) => {
+    const payload: PaletteDragPayload = { type, value, label };
+    e.dataTransfer.setData('application/json', JSON.stringify(payload));
+    e.dataTransfer.effectAllowed = 'copy';
+  };
+
+  return (
+    <div
+      draggable
+      className={`se-palette-card ${color ? `se-palette-card--${color}` : 'se-palette-card--ind'}`}
+      onDragStart={onDragStart}
+      onClick={onAdd}
+      role="button"
+      tabIndex={0}
+      onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') onAdd(); }}
+    >
+      <div className="se-palette-card-head">
+        <span className="se-palette-card-icon">{label.slice(0, 1)}</span>
+        <div className="se-palette-card-meta">
+          <span className="se-palette-card-name">{label}</span>
+          {desc ? <span className="se-palette-card-desc">{desc}</span> : null}
+        </div>
+      </div>
+      {period ? (
+        <div className="se-palette-card-period">
+          <span>기간</span>
+          <input readOnly value={period} className="se-palette-period-input" tabIndex={-1} />
+          <span className="se-palette-sync" title="차트 지표 설정과 동기화">⟳</span>
+        </div>
+      ) : null}
+    </div>
+  );
+}