목록 로딩 로직 개선

frontend/src/components/paper/PaperTradeHistoryList.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { VirtualScroll } from '../common/VirtualScroll';
 import type { PaperTradeDto } from '../../utils/backendApi';
 import type { TickerData } from '../../hooks/useMarketTicker';
 import { resolveVirtualTargetNames } from '../../utils/virtualTargetNames';
@@ -58,9 +59,17 @@ const PaperTradeHistoryList: React.FC<Props> = ({
       {trades.length === 0 ? (
         <p className="vtd-muted ptd-trade-history-empty">{emptyText}</p>
       ) : (
-        <div className="ptd-trade-history-scroll">
-          <div className="vtd-target-list vtd-trade-list">
-            {displayTrades.map(t => {
+        <VirtualScroll
+          className="ptd-trade-history-scroll vl-scroll"
+          items={displayTrades}
+          estimateSize={210}
+          measureDynamic
+          overscan={4}
+          getItemKey={t => t.id}
+          innerClassName="vl-scroll-inner vtd-target-list vtd-trade-list"
+          aria-label="거래 내역"
+        >
+          {t => {
               const { koreanName: ko, englishName: en } = resolveVirtualTargetNames(
                 t.symbol,
                 tickers?.get(t.symbol)?.koreanName,
@@ -80,7 +89,6 @@ const PaperTradeHistoryList: React.FC<Props> = ({
 
               return (
                 <div
-                  key={t.id}
                   className={[
                     'vtd-target-item',
                     'vtd-trade-item',
@@ -162,9 +170,8 @@ const PaperTradeHistoryList: React.FC<Props> = ({
                   </div>
                 </div>
               );
-            })}
-          </div>
-        </div>
+          }}
+        </VirtualScroll>
       )}
     </section>
   </div>