추세검색 화면 적용

2026-05-26 00:51:07 +09:00
parent 1e950c7db4
commit 1e11884fef
29 changed files with 3753 additions and 71 deletions
@@ -0,0 +1,81 @@
+import React from 'react';
+import type { TrendSearchResultDto } from '../../utils/trendSearchApi';
+import type { Theme } from '../../types';
+import type { ChartRealtimeSource } from '../../hooks/useChartRealtimeData';
+import type { TickerData } from '../../hooks/useMarketTicker';
+import TrendSearchResultCard, { type TrendSearchDisplayMode } from './TrendSearchResultCard';
+
+interface Props {
+  results: TrendSearchResultDto[];
+  timeframe: string;
+  displayMode: TrendSearchDisplayMode;
+  loading?: boolean;
+  selectedMarket?: string | null;
+  onSelect?: (row: TrendSearchResultDto) => void;
+  flashMarkets?: Set<string>;
+  theme?: Theme;
+  chartRealtimeSource?: ChartRealtimeSource;
+  chartSeriesPriceLabels?: boolean;
+  tickers?: Map<string, TickerData>;
+  lastUpdatedAt?: number;
+}
+
+const TrendSearchResultsCardGrid: React.FC<Props> = ({
+  results,
+  timeframe,
+  displayMode,
+  loading,
+  selectedMarket,
+  onSelect,
+  flashMarkets,
+  theme = 'dark',
+  chartRealtimeSource = 'BACKEND_STOMP',
+  chartSeriesPriceLabels = true,
+  tickers,
+  lastUpdatedAt,
+}) => {
+  if (loading && results.length === 0) {
+    return (
+      <div className="vtd-grid-wrap">
+        <div className="vtd-grid-empty">
+          <p className="vtd-muted">스캔 중…</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!loading && results.length === 0) {
+    return (
+      <div className="vtd-grid-wrap">
+        <div className="vtd-grid-empty">
+          <p className="vtd-muted">조건에 맞는 종목이 없습니다. 좌측 필터를 조정해 보세요.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="vtd-grid-wrap">
+      <div className={`vtd-grid${displayMode === 'chart' ? ' vtd-grid--chart-mode' : ''}`}>
+        {results.map(row => (
+          <TrendSearchResultCard
+            key={row.market}
+            result={row}
+            timeframe={timeframe}
+            displayMode={displayMode}
+            selected={selectedMarket === row.market}
+            onSelect={onSelect ? () => onSelect(row) : undefined}
+            theme={theme}
+            chartRealtimeSource={chartRealtimeSource}
+            chartSeriesPriceLabels={chartSeriesPriceLabels}
+            ticker={tickers?.get(row.market)}
+            updatedAt={lastUpdatedAt}
+            flash={flashMarkets?.has(row.market)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TrendSearchResultsCardGrid;