알림목록 종목별 정렬시 시간별로 정렬되도록 수정

frontend/src/components/paper/PaperTradeHistoryList.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { PaperTradeDto } from '../../utils/backendApi';
 import type { TickerData } from '../../hooks/useMarketTicker';
 import { resolveVirtualTargetNames } from '../../utils/virtualTargetNames';
 import { fmtKrw } from '../TradeOrderPanel';
+import { sortPaperTradesForDisplay } from '../../utils/tradeListSort';
 
 function coinCode(symbol: string): string {
   return symbol.replace(/^KRW-/, '');
@@ -43,7 +44,10 @@ const PaperTradeHistoryList: React.FC<Props> = ({
   selectedTradeId = null,
   onSelectTrade,
   onSelectMarket,
-}) => (
+}) => {
+  const displayTrades = useMemo(() => sortPaperTradesForDisplay(trades), [trades]);
+
+  return (
   <div className={`ptd-trade-history vtd-trade-history${className ? ` ${className}` : ''}`}>
     <section className="vtd-target-section vtd-trade-section">
       <div className="vtd-target-list-head">
@@ -56,7 +60,7 @@ const PaperTradeHistoryList: React.FC<Props> = ({
       ) : (
         <div className="ptd-trade-history-scroll">
           <div className="vtd-target-list vtd-trade-list">
-            {trades.map(t => {
+            {displayTrades.map(t => {
               const { koreanName: ko, englishName: en } = resolveVirtualTargetNames(
                 t.symbol,
                 tickers?.get(t.symbol)?.koreanName,
@@ -164,6 +168,7 @@ const PaperTradeHistoryList: React.FC<Props> = ({
       )}
     </section>
   </div>
-);
+  );
+};
 
 export default PaperTradeHistoryList;