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

frontend/src/components/TradeNotificationListPage.tsx

@@ -45,6 +45,7 @@ import {
   getTradeNotificationGridPreset,
   type TradeNotificationGridPresetId,
 } from '../utils/tradeNotificationGridPresets';
+import { sortTradeNotifications } from '../utils/tradeListSort';
 
 type RightTab = 'trade' | 'orderbook';
 
@@ -88,24 +89,6 @@ function fillBothSides(
   setFillSell({ market, price, side: 'sell', seq: seq + 1 });
 }
 
-function sortNotifications(
-  items: TradeNotificationItem[],
-  sort: TradeNotificationListSort,
-): TradeNotificationItem[] {
-  const arr = [...items];
-  if (sort === 'market') {
-    return arr.sort((a, b) => {
-      const byMarket = a.market.localeCompare(b.market, 'ko');
-      if (byMarket !== 0) return byMarket;
-      return b.receivedAt - a.receivedAt;
-    });
-  }
-  if (sort === 'oldest') {
-    return arr.sort((a, b) => a.receivedAt - b.receivedAt);
-  }
-  return arr.sort((a, b) => b.receivedAt - a.receivedAt);
-}
-
 export const TradeNotificationListPage: React.FC<Props> = ({
   theme,
   onGoToChart,
@@ -273,7 +256,7 @@ export const TradeNotificationListPage: React.FC<Props> = ({
   }, [allNotifications, filter, candleFilter]);
 
   const sorted = useMemo(
-    () => sortNotifications(filtered, listSort),
+    () => sortTradeNotifications(filtered, listSort),
     [filtered, listSort],
   );
 

frontend/src/components/backtest/BacktestExecutionList.tsx

@@ -13,6 +13,7 @@ import {
   toUpbitMarket,
 } from '../../utils/backtestUiUtils';
 import { getKoreanName } from '../../utils/marketNameCache';
+import { compareMarketSymbol, compareTimeAsc } from '../../utils/tradeListSort';
 
 export type ExecutionListTab = 'backtest' | 'live';
 export type BacktestListSort = 'strategy' | 'symbol' | 'return';
@@ -58,7 +59,13 @@ export default function BacktestExecutionList({
   const sortedBacktests = useMemo(() => {
     const list = [...backtestRecords];
     if (sort === 'strategy') list.sort((a, b) => (a.strategyName ?? '').localeCompare(b.strategyName ?? ''));
-    else if (sort === 'symbol') list.sort((a, b) => a.symbol.localeCompare(b.symbol));
+    else if (sort === 'symbol') {
+      list.sort((a, b) => {
+        const bySymbol = compareMarketSymbol(a.symbol, b.symbol);
+        if (bySymbol !== 0) return bySymbol;
+        return compareTimeAsc(a.createdAt, b.createdAt);
+      });
+    }
     else list.sort((a, b) => (b.totalReturn ?? 0) - (a.totalReturn ?? 0));
     return list;
   }, [backtestRecords, sort]);
@@ -117,7 +124,13 @@ export default function BacktestExecutionList({
             <p className="btd-sidebar-hint">가상투자 화면에서 자동·수동<br />매매를 실행하세요.</p>
           </div>
         ) : (
-          liveItems.map(item => {
+          [...liveItems]
+            .sort((a, b) => {
+              const bySymbol = compareMarketSymbol(a.symbol, b.symbol);
+              if (bySymbol !== 0) return bySymbol;
+              return compareTimeAsc(a.createdAt, b.createdAt);
+            })
+            .map(item => {
             const positive = item.totalReturnPct >= 0;
             const active = selectedLiveId === item.id;
             const market = toUpbitMarket(item.symbol);

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;