매매 시그널 알림 화면 수정

2026-05-29 00:46:20 +09:00
parent cbad62a5b0
commit e43b5cbd5a
45 changed files with 2186 additions and 415 deletions
@@ -0,0 +1,102 @@
+/**
+ * 매매 시그널 알림 목록 — 가상매매 종목 카드(요약·신호)와 동일 UI · 실시간 신호 갱신
+ */
+import React, { useMemo, useState } from 'react';
+import type { TickerData } from '../../hooks/useMarketTicker';
+import type { VirtualIndicatorSnapshot } from '../../hooks/useVirtualIndicatorSnapshots';
+import { useTradeNotificationSignalSnapshot } from '../../hooks/useTradeNotificationSignalSnapshot';
+import type { StrategyDto } from '../../utils/backendApi';
+import type { Theme } from '../../types';
+import VirtualTargetCard, { type VirtualCardDisplayMode } from '../virtual/VirtualTargetCard';
+
+interface Props {
+  market: string;
+  strategyId: number | null | undefined;
+  strategy?: StrategyDto;
+  strategies?: StrategyDto[];
+  globalStrategyId?: number | null;
+  candleType?: string;
+  theme?: Theme;
+  ticker?: TickerData;
+  enabled?: boolean;
+  /** tnl-chart-card 본문에 삽입 */
+  embedded?: boolean;
+  /** 부모에서 스냅샷 공유 시(행 테두리 플래시와 중복 폴링 방지) */
+  snapshot?: VirtualIndicatorSnapshot;
+  signalLoading?: boolean;
+  /** 차트 영역 펼쳐보기 (헤더 확대 버튼) */
+  onExpandCharts?: () => void;
+  /** 푸터 전략명 (읽기 전용) */
+  strategyLabel?: string;
+}
+
+const TradeNotificationSignalSummary: React.FC<Props> = ({
+  market,
+  strategyId,
+  strategy,
+  strategies = [],
+  globalStrategyId = null,
+  theme = 'dark',
+  ticker,
+  enabled = true,
+  embedded = false,
+  snapshot: snapshotProp,
+  signalLoading: signalLoadingProp,
+  onExpandCharts,
+  strategyLabel,
+}) => {
+  const active = enabled && strategyId != null;
+  const [displayMode, setDisplayMode] = useState<VirtualCardDisplayMode>('signal');
+
+  const internal = useTradeNotificationSignalSnapshot(
+    market,
+    strategyId,
+    strategy,
+    active && snapshotProp === undefined,
+  );
+  const snapshot = snapshotProp ?? internal.snapshot;
+  const loading = signalLoadingProp ?? internal.loading;
+
+  const strategiesList = useMemo(() => {
+    if (strategies.length > 0) return strategies;
+    return strategy ? [strategy] : [];
+  }, [strategies, strategy]);
+
+  const card = (
+    <VirtualTargetCard
+      market={market}
+      strategy={strategy}
+      strategies={strategiesList}
+      strategyId={strategyId ?? null}
+      globalStrategyId={globalStrategyId}
+      snapshot={snapshot}
+      signalLoading={loading}
+      running={active}
+      liveStatus="live"
+      viewMode="summary"
+      displayMode={displayMode}
+      onDisplayModeChange={embedded ? undefined : setDisplayMode}
+      onEnterFocus={embedded ? undefined : onExpandCharts}
+      headVariant={embedded ? 'inline-quote' : 'default'}
+      theme={theme}
+      ticker={ticker}
+      chartLiveReceiveHighlight
+      readOnlyStrategyLabel={strategyLabel}
+    />
+  );
+
+  if (embedded) {
+    return (
+      <div
+        className={`tnl-signal-summary--embedded-wrap se-page se-page--${theme}`}
+        onClick={e => e.stopPropagation()}
+      >
+        {card}
+      </div>
+    );
+  }
+
+  return card;
+};
+
+export default TradeNotificationSignalSummary;