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

frontend/src/components/VirtualTradingPage.tsx

@@ -40,12 +40,15 @@ import {
   saveVirtualTargets,
   loadVirtualCardViewMode,
   saveVirtualCardViewMode,
+  loadVirtualGridPreset,
+  saveVirtualGridPreset,
   type VirtualSessionConfig,
   type VirtualTargetItem,
   type VirtualCardViewMode,
 } from '../utils/virtualTradingStorage';
 import { useAppSettings, resolveAppDefaults } from '../hooks/useAppSettings';
 import { coerceFiniteNumber } from '../utils/safeFormat';
+import type { TradeNotificationGridPresetId } from '../utils/tradeNotificationGridPresets';
 import {
   syncVirtualTargetsToBackend,
   stopVirtualLiveOnBackend,
@@ -97,6 +100,7 @@ const VirtualTradingPage: React.FC<Props> = ({
   const [fillBuy, setFillBuy] = useState<TradeOrderFillRequest | null>(null);
   const [fillSell, setFillSell] = useState<TradeOrderFillRequest | null>(null);
   const [viewMode, setViewMode] = useState<VirtualCardViewMode>(() => loadVirtualCardViewMode());
+  const [gridPreset, setGridPreset] = useState<TradeNotificationGridPresetId>(() => loadVirtualGridPreset());
   const [globalDisplayMode, setGlobalDisplayMode] = useState<VirtualCardDisplayMode>('signal');
   const [focusMarket, setFocusMarket] = useState<string | null>(null);
   const orderAnchorRef = useRef<HTMLDivElement>(null);
@@ -150,6 +154,7 @@ const VirtualTradingPage: React.FC<Props> = ({
   }, [session.globalStrategyId]);
 
   useEffect(() => { saveVirtualCardViewMode(viewMode); }, [viewMode]);
+  useEffect(() => { saveVirtualGridPreset(gridPreset); }, [gridPreset]);
 
   const strategyNames = useMemo(
     () => Object.fromEntries(strategies.map(s => [s.id, s.name])),
@@ -170,6 +175,10 @@ const VirtualTradingPage: React.FC<Props> = ({
     setGlobalDisplayMode(mode);
   }, []);
 
+  const handleGridPresetChange = useCallback((preset: TradeNotificationGridPresetId) => {
+    setGridPreset(preset);
+  }, []);
+
   const targetRefs = useMemo(() =>
     targets.map(t => ({
       market: t.market,
@@ -405,6 +414,9 @@ const VirtualTradingPage: React.FC<Props> = ({
           globalDisplayMode={globalDisplayMode}
           onGlobalDisplayModeChange={handleGlobalDisplayModeChange}
           showSignalChartToggle={!focusMarket}
+          gridPreset={gridPreset}
+          onGridPresetChange={handleGridPresetChange}
+          showGridLayoutPicker={!focusMarket}
         />
       )}
       leftStorageKey="vtd-left-width"
@@ -448,6 +460,7 @@ const VirtualTradingPage: React.FC<Props> = ({
           viewMode={viewMode}
           globalDisplayMode={globalDisplayMode}
           onFocusMarketChange={setFocusMarket}
+          gridPreset={gridPreset}
         />
       )}
       rightTabs={rightTabs}