매매 시그널 알림 화면 수정

2026-05-28 21:58:15 +09:00
parent 9221b8dea2
commit cbad62a5b0
10 changed files with 1814 additions and 75 deletions
@@ -0,0 +1,96 @@
+/**
+ * 매매 시그널 알림 — 캔들·지표 미니 차트 카드 (펼쳐보기 / 원래보기)
+ */
+import React from 'react';
+import type { IndicatorConfig } from '../../types';
+import type { Theme, Timeframe } from '../../types';
+import TradeSignalMiniChart from './TradeSignalMiniChart';
+
+const IcExpand = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <polyline points="5,1 1,1 1,5" />
+    <polyline points="9,13 13,13 13,9" />
+    <line x1="1" y1="1" x2="6" y2="6" />
+    <line x1="13" y1="13" x2="8" y2="8" />
+  </svg>
+);
+
+const IcRestore = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <polyline points="5,5 1,5 1,1" />
+    <polyline points="9,9 13,9 13,13" />
+    <line x1="1" y1="5" x2="5" y2="1" />
+    <line x1="13" y1="9" x2="9" y2="13" />
+  </svg>
+);
+
+export interface TradeSignalChartCardProps {
+  label: string;
+  meta: string;
+  market: string;
+  timeframe: Timeframe;
+  theme: Theme;
+  indicators: IndicatorConfig[];
+  enabled: boolean;
+  expanded: boolean;
+  onExpand: () => void;
+  onRestore: () => void;
+}
+
+const TradeSignalChartCard: React.FC<TradeSignalChartCardProps> = ({
+  label,
+  meta,
+  market,
+  timeframe,
+  theme,
+  indicators,
+  enabled,
+  expanded,
+  onExpand,
+  onRestore,
+}) => (
+  <section
+    className={[
+      'tnl-chart-card',
+      expanded ? 'tnl-chart-card--expanded' : '',
+    ].filter(Boolean).join(' ')}
+  >
+    <header className="tnl-chart-card-head">
+      <span className="tnl-chart-card-label">{label}</span>
+      <span className="tnl-chart-card-meta">{meta}</span>
+    </header>
+    <div className="tnl-chart-card-body">
+      <TradeSignalMiniChart
+        market={market}
+        timeframe={timeframe}
+        theme={theme}
+        indicators={indicators}
+        enabled={enabled}
+        fillHeight={expanded}
+      />
+      {expanded ? (
+        <button
+          type="button"
+          className="tnl-chart-view-btn tnl-chart-view-btn--restore"
+          title="원래보기"
+          aria-label="원래보기"
+          onClick={e => { e.stopPropagation(); onRestore(); }}
+        >
+          <IcRestore />
+        </button>
+      ) : (
+        <button
+          type="button"
+          className="tnl-chart-view-btn tnl-chart-view-btn--expand"
+          title="펼쳐보기"
+          aria-label="펼쳐보기"
+          onClick={e => { e.stopPropagation(); onExpand(); }}
+        >
+          <IcExpand />
+        </button>
+      )}
+    </div>
+  </section>
+);
+
+export default TradeSignalChartCard;