frontend 성능 개선

frontend/src/chart/ChartWorkspaceContext.tsx

@@ -0,0 +1,51 @@
+import React, { createContext, useContext } from 'react';
+import type { ChartMode, IndicatorConfig } from '../types';
+import type { TickerData } from '../hooks/useMarketTicker';
+import type { SettingsPageChartBindings } from './useChartWorkspace';
+
+export interface ChartWorkspaceSharedState {
+  symbol: string;
+  indicators: IndicatorConfig[];
+  goToMarketChart: (market: string) => void;
+  refreshPaperAccount: (forMarket?: string) => Promise<void>;
+  paperCashBalance: number;
+  paperCoinQty: number;
+  handlePaperOrderFilled: () => void;
+  paperRefreshKey: number;
+  mode: ChartMode;
+  priorityMarkets: string[];
+  marketPanelOpen: boolean;
+  marketTickers: Map<string, TickerData>;
+  marketLoading: boolean;
+  usdRate: number;
+  settingsPageProps: SettingsPageChartBindings;
+}
+
+export interface ChartWorkspaceContextValue extends ChartWorkspaceSharedState {
+  /** 실시간 차트 화면 — `.app` flex 레이아웃 안에서 렌더해야 좌·우 패널·메뉴가 정상 표시됨 */
+  chartScreen: React.ReactNode;
+}
+
+const ChartWorkspaceContext = createContext<ChartWorkspaceContextValue | null>(null);
+
+export function ChartWorkspaceProvider({
+  value,
+  children,
+}: {
+  value: ChartWorkspaceContextValue;
+  children: React.ReactNode;
+}) {
+  return (
+    <ChartWorkspaceContext.Provider value={value}>
+      {children}
+    </ChartWorkspaceContext.Provider>
+  );
+}
+
+export function useChartWorkspaceContext(): ChartWorkspaceContextValue {
+  const ctx = useContext(ChartWorkspaceContext);
+  if (!ctx) {
+    throw new Error('useChartWorkspaceContext must be used within ChartWorkspaceProvider');
+  }
+  return ctx;
+}

frontend/src/chart/ChartWorkspaceRoot.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
+import { LiveSignalNotifier } from '../components/LiveSignalNotifier';
+import { ChartWorkspaceProvider } from './ChartWorkspaceContext';
+import { ChartWorkspaceView } from './ChartWorkspaceView';
+import { useChartWorkspace, type UseChartWorkspaceParams } from './useChartWorkspace';
+import type { ChartWorkspaceBridge } from './chartWorkspaceBridge';
+
+export interface ChartWorkspaceRootProps extends UseChartWorkspaceParams {
+  visible: boolean;
+  children: React.ReactNode;
+}
+
+export const ChartWorkspaceRoot = forwardRef<ChartWorkspaceBridge, ChartWorkspaceRootProps>(
+  function ChartWorkspaceRoot(props, ref) {
+    const { visible, children, ...workspaceParams } = props;
+    const {
+      bridge,
+      contextValue,
+      viewProps,
+      liveNotifierProps,
+      liveNotifierRef,
+    } = useChartWorkspace(workspaceParams);
+
+    useImperativeHandle(ref, () => bridge, [bridge]);
+
+    const providerValue = useMemo(() => ({
+      ...contextValue,
+      chartScreen: (
+        <div style={{ display: visible ? 'contents' : 'none' }}>
+          <ChartWorkspaceView {...viewProps} />
+        </div>
+      ),
+    }), [contextValue, visible, viewProps]);
+
+    return (
+      <ChartWorkspaceProvider value={providerValue}>
+        <LiveSignalNotifier ref={liveNotifierRef} {...liveNotifierProps} />
+        {children}
+      </ChartWorkspaceProvider>
+    );
+  },
+);

frontend/src/chart/chartWorkspaceBridge.ts

@@ -0,0 +1,7 @@
+import type { IndicatorConfig } from '../types';
+
+export interface ChartWorkspaceBridge {
+  goToMarket(market: string): void;
+  getSymbol(): string;
+  getIndicators(): IndicatorConfig[];
+}