추세검색 화면 적용

2026-05-26 00:51:07 +09:00
parent 1e950c7db4
commit 1e11884fef
29 changed files with 3753 additions and 71 deletions
@@ -0,0 +1,132 @@
+import React, { useMemo } from 'react';
+import { getKoreanName } from '../../utils/marketNameCache';
+import type { TrendSearchResultDto } from '../../utils/trendSearchApi';
+import { tfLabelShort } from '../../utils/trendSearchMetrics';
+import type { Theme } from '../../types';
+import type { ChartRealtimeSource } from '../../hooks/useChartRealtimeData';
+import type { TickerData } from '../../hooks/useMarketTicker';
+import VirtualTargetQuote from '../virtual/VirtualTargetQuote';
+import VirtualLiveBadge from '../virtual/VirtualLiveBadge';
+import TrendSearchCardSignalPanel from './TrendSearchCardSignalPanel';
+import TrendSearchCardChart from './TrendSearchCardChart';
+
+export type TrendSearchDisplayMode = 'summary' | 'chart';
+
+interface Props {
+  result: TrendSearchResultDto;
+  timeframe: string;
+  displayMode: TrendSearchDisplayMode;
+  selected?: boolean;
+  onSelect?: () => void;
+  theme?: Theme;
+  chartRealtimeSource?: ChartRealtimeSource;
+  chartSeriesPriceLabels?: boolean;
+  ticker?: TickerData;
+  updatedAt?: number;
+  flash?: boolean;
+}
+
+function resultToTicker(result: TrendSearchResultDto): TickerData {
+  const rate = result.changeRate / 100;
+  return {
+    market: result.market,
+    koreanName: result.koreanName,
+    tradePrice: result.currentPrice,
+    changeRate: rate,
+    changePrice: null,
+    accTradePrice24: 0,
+    accTradeVolume24: null,
+    openingPrice: null,
+    highPrice: null,
+    lowPrice: null,
+    change: result.changeRate > 0 ? 'RISE' : result.changeRate < 0 ? 'FALL' : 'EVEN',
+  };
+}
+
+const TrendSearchResultCard: React.FC<Props> = ({
+  result,
+  timeframe,
+  displayMode,
+  selected = false,
+  onSelect,
+  theme = 'dark',
+  chartRealtimeSource = 'BACKEND_STOMP',
+  chartSeriesPriceLabels = true,
+  ticker,
+  updatedAt,
+  flash = false,
+}) => {
+  const ko = result.koreanName || getKoreanName(result.market);
+  const sym = result.market.replace(/^KRW-/, '');
+  const isChart = displayMode === 'chart';
+  const quoteTicker = ticker ?? resultToTicker(result);
+
+  const flashCls = useMemo(() => {
+    if (!flash) return '';
+    return result.changeRate >= 0 ? 'tsd-card--flash-up' : 'tsd-card--flash-down';
+  }, [flash, result.changeRate]);
+
+  return (
+    <div
+      className={[
+        'vtd-card',
+        'vtd-card--signal',
+        'vtd-card--detail',
+        isChart ? 'vtd-card--chart-mode' : '',
+        selected ? 'vtd-card--selected' : '',
+        flashCls,
+      ].filter(Boolean).join(' ')}
+      onClick={onSelect}
+      onKeyDown={e => {
+        if (onSelect && (e.key === 'Enter' || e.key === ' ')) {
+          e.preventDefault();
+          onSelect();
+        }
+      }}
+      role={onSelect ? 'button' : undefined}
+      tabIndex={onSelect ? 0 : undefined}
+      aria-pressed={onSelect ? selected : undefined}
+    >
+      <div className="vtd-card-head">
+        <div className="vtd-card-head-main">
+          <div className="vtd-card-title">
+            <span className="vtd-card-ko">{ko}</span>
+            <span className="vtd-card-sym">{sym}</span>
+          </div>
+          <span className="vtd-card-tf">시간봉 {tfLabelShort(timeframe)}</span>
+          {result.highMatch && <span className="tsd-card-high-badge">HIGH MATCH</span>}
+        </div>
+      </div>
+
+      <div className="vtd-card-meta">
+        <VirtualTargetQuote market={result.market} ticker={quoteTicker} compact />
+        {!isChart && (
+          <span className="vtd-card-met-count">
+            {result.matchedCount}/{result.totalConditions} 조건 충족
+          </span>
+        )}
+        <VirtualLiveBadge status="live" receiving={flash} />
+      </div>
+
+      {isChart ? (
+        <TrendSearchCardChart
+          market={result.market}
+          timeframe={timeframe}
+          theme={theme}
+          chartRealtimeSource={chartRealtimeSource}
+          chartSeriesPriceLabels={chartSeriesPriceLabels}
+        />
+      ) : (
+        <TrendSearchCardSignalPanel
+          conditions={result.conditions}
+          matchRate={result.matchRate}
+          matchedCount={result.matchedCount}
+          totalConditions={result.totalConditions}
+          updatedAt={updatedAt}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TrendSearchResultCard;