목록 로딩 로직 개선

frontend/src/components/trendSearch/TrendSearchResultsCardGrid.tsx

@@ -5,6 +5,7 @@ import type { Theme } from '../../types';
 import type { ChartRealtimeSource } from '../../hooks/useChartRealtimeData';
 import type { TickerData } from '../../hooks/useMarketTicker';
 import TrendSearchResultCard, { type TrendSearchDisplayMode } from './TrendSearchResultCard';
+import { VirtualGridScroll } from '../common/VirtualScroll';
 
 interface Props {
   results: TrendSearchResultDto[];
@@ -74,12 +75,27 @@ const TrendSearchResultsCardGrid: React.FC<Props> = ({
     );
   }
 
+  const gridCols = displayMode === 'chart' ? 2 : 3;
+  const rowEstimate = displayMode === 'chart' ? 420 : 300;
+
   return (
-    <div className="vtd-grid-wrap">
-      <div className={`vtd-grid${displayMode === 'chart' ? ' vtd-grid--chart-mode' : ''}`}>
-        {sortedResults.map(row => (
+    <div className="vtd-grid-wrap vtd-grid-wrap--virtual">
+      <VirtualGridScroll
+        className={`vtd-grid-scroll vl-scroll${displayMode === 'chart' ? ' vtd-grid--chart-mode' : ''}`}
+        style={{ ['--vtd-grid-cols' as string]: gridCols }}
+        rowClassName="vl-grid-row vtd-grid-row"
+        items={sortedResults}
+        columns={gridCols}
+        estimateRowSize={rowEstimate}
+        rowGap={14}
+        measureDynamic
+        remeasureKey={`${displayMode}:${sortedResults.length}`}
+        overscan={2}
+        getItemKey={row => row.market}
+        aria-label="추세검색 카드 그리드"
+      >
+        {row => (
           <TrendSearchResultCard
-            key={row.market}
             result={row}
             timeframe={timeframe}
             displayMode={displayMode}
@@ -99,8 +115,8 @@ const TrendSearchResultsCardGrid: React.FC<Props> = ({
             onAddTarget={onAddTarget ? () => onAddTarget(row) : undefined}
             onRemoveTarget={onRemoveTarget ? () => onRemoveTarget(row.market) : undefined}
           />
-        ))}
-      </div>
+        )}
+      </VirtualGridScroll>
     </div>
   );
 };