frontend 성능 개선

frontend/src/components/virtual/VirtualTargetCard.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import type { StrategyDto } from '../../utils/backendApi';
 import {
   resolveVirtualTargetNames,
@@ -11,6 +11,7 @@ import type { ChartRealtimeSource } from '../../hooks/useChartRealtimeData';
 import { buildConditionMetrics } from '../../utils/virtualSignalMetrics';
 import { resolveStrategyPrimaryTimeframe } from '../../utils/strategyToChartIndicators';
 import type { Timeframe } from '../../types';
+import { useIntersectionVisible } from '../../hooks/useIntersectionVisible';
 import VirtualLiveBadge from './VirtualLiveBadge';
 import type { VirtualLiveStatus } from '../../hooks/useVirtualTargetLiveStatus';
 import type { VirtualCardViewMode } from '../../utils/virtualTradingStorage';
@@ -128,9 +129,12 @@ const VirtualTargetCard: React.FC<Props> = ({
   }, [running, lastTickAt, snapshot?.updatedAt]);
   const receiving = useLiveReceiveFlash(receiveSignal, running);
   const highlightReceiving = chartLiveReceiveHighlight && receiving;
+  const { ref: cardRef, visible: cardInView } = useIntersectionVisible();
+  const chartStreamEnabled = isChart && cardInView;
 
   return (
     <div
+      ref={cardRef}
       className={[
         'vtd-card',
         'vtd-card--signal',
@@ -234,6 +238,7 @@ const VirtualTargetCard: React.FC<Props> = ({
           chartSeriesPriceLabels={chartSeriesPriceLabels}
           chartPaneSeparator={chartPaneSeparator}
           chartTimeframe={chartTimeframe}
+          chartStreamEnabled={chartStreamEnabled}
         />
       ) : (
         <VirtualTargetSignalPanel
@@ -257,4 +262,4 @@ const VirtualTargetCard: React.FC<Props> = ({
   );
 };
 
-export default VirtualTargetCard;
+export default memo(VirtualTargetCard);