추세검색 수정

frontend/src/components/trendSearch/TrendSearchResultsCardGrid.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { TrendSearchResultDto } from '../../utils/trendSearchApi';
+import { sortTrendSearchByStrength } from '../../utils/trendSearchMetrics';
 import type { Theme } from '../../types';
 import type { ChartRealtimeSource } from '../../hooks/useChartRealtimeData';
 import type { TickerData } from '../../hooks/useMarketTicker';
@@ -34,6 +35,11 @@ const TrendSearchResultsCardGrid: React.FC<Props> = ({
   tickers,
   lastUpdatedAt,
 }) => {
+  const sortedResults = useMemo(
+    () => sortTrendSearchByStrength(results),
+    [results],
+  );
+
   if (loading && results.length === 0) {
     return (
       <div className="vtd-grid-wrap">
@@ -57,7 +63,7 @@ const TrendSearchResultsCardGrid: React.FC<Props> = ({
   return (
     <div className="vtd-grid-wrap">
       <div className={`vtd-grid${displayMode === 'chart' ? ' vtd-grid--chart-mode' : ''}`}>
-        {results.map(row => (
+        {sortedResults.map(row => (
           <TrendSearchResultCard
             key={row.market}
             result={row}