가상매매 화면 멀티 레이아웃 수정

frontend/src/components/virtual/VirtualTargetGrid.tsx

@@ -13,6 +13,10 @@ import type { VirtualLiveStatus } from '../../hooks/useVirtualTargetLiveStatus';
 import type { VirtualIndicatorSnapshot } from '../../hooks/useVirtualIndicatorSnapshots';
 import type { TickerData } from '../../hooks/useMarketTicker';
 import { resolveVirtualTargetStrategyId } from '../../utils/virtualTargetStrategy';
+import {
+  getTradeNotificationGridPreset,
+  type TradeNotificationGridPresetId,
+} from '../../utils/tradeNotificationGridPresets';
 
 interface Props {
   targets: VirtualTargetItem[];
@@ -34,6 +38,7 @@ interface Props {
   viewMode: VirtualCardViewMode;
   globalDisplayMode: VirtualCardDisplayMode;
   onFocusMarketChange?: (market: string | null) => void;
+  gridPreset: TradeNotificationGridPresetId;
 }
 
 const VirtualTargetGrid: React.FC<Props> = ({
@@ -50,7 +55,9 @@ const VirtualTargetGrid: React.FC<Props> = ({
   viewMode,
   globalDisplayMode,
   onFocusMarketChange,
+  gridPreset,
 }) => {
+  const gridCols = getTradeNotificationGridPreset(gridPreset).cols;
   const [cardDisplayOverrides, setCardDisplayOverrides] = useState<Record<string, VirtualCardDisplayMode>>({});
   const [focusMarket, setFocusMarket] = useState<string | null>(null);
 
@@ -132,7 +139,15 @@ const VirtualTargetGrid: React.FC<Props> = ({
           ticker={tickers?.get(focusTarget.market)}
         />
       ) : (
-        <div className={`vtd-grid vtd-grid--${viewMode}`}>
+        <div
+          className={[
+            'vtd-grid',
+            'vtd-grid--layout-preset',
+            `vtd-grid--${viewMode}`,
+            `vtd-grid--cols-${gridCols}`,
+          ].join(' ')}
+          style={{ ['--vtd-grid-cols' as string]: gridCols }}
+        >
           {targets.map(t => {
             const strat = strategies.find(s => s.id === resolveVirtualTargetStrategyId(t, session.globalStrategyId));
             return (