가상투자 화면 추가

frontend/src/components/TradingChart.tsx

@@ -96,6 +96,12 @@ interface TradingChartProps {
   onTradeOrderRequest?: (req: { market: string; price: number; side: 'buy' | 'sell' }) => void;
   /** 표시 시간대 (IANA) */
   displayTimezone?: string;
+  /** 거래량 pane 표시 (기본 true) */
+  volumeVisible?: boolean;
+  /** 하단 호버 줌·스크롤 툴바 (기본 true) */
+  showHoverToolbar?: boolean;
+  /** 보조지표 우측 가격축 라벨·설명 (차트 설정, 기본 true) */
+  seriesPriceLabelsEnabled?: boolean;
 }
 
 const TradingChart: React.FC<TradingChartProps> = ({
@@ -122,6 +128,9 @@ const TradingChart: React.FC<TradingChartProps> = ({
   onRestoreIndicators,
   onTradeOrderRequest,
   displayTimezone = DEFAULT_DISPLAY_TIMEZONE,
+  volumeVisible = true,
+  showHoverToolbar = true,
+  seriesPriceLabelsEnabled = true,
 }) => {
   const containerRef  = useRef<HTMLDivElement>(null);
   const wrapperRef    = useRef<HTMLDivElement>(null);   // 스크롤 래퍼
@@ -225,6 +234,20 @@ const TradingChart: React.FC<TradingChartProps> = ({
     }
   }, [mode, drawingTool]);
 
+  const volumeVisibleRef = useRef(volumeVisible);
+  useEffect(() => { volumeVisibleRef.current = volumeVisible; }, [volumeVisible]);
+
+  useEffect(() => {
+    const mgr = managerRef.current;
+    if (!mgr) return;
+    const wrapperH = wrapperRef.current?.clientHeight ?? 0;
+    mgr.setVolumeVisible(volumeVisible, wrapperH > 0 ? wrapperH : undefined);
+  }, [volumeVisible]);
+
+  useEffect(() => {
+    managerRef.current?.setSeriesPriceLabelsEnabled(seriesPriceLabelsEnabled);
+  }, [seriesPriceLabelsEnabled]);
+
   /**
    * pane 높이 재배분 + 스크롤 컨테이너 확장
    *
@@ -509,6 +532,11 @@ const TradingChart: React.FC<TradingChartProps> = ({
     const mgr = new ChartManager(containerRef.current, theme);
     managerRef.current = mgr;
     setChartMgr(mgr);
+    if (!volumeVisibleRef.current) {
+      const wrapperH = wrapperRef.current?.clientHeight ?? 0;
+      mgr.setVolumeVisible(false, wrapperH > 0 ? wrapperH : undefined);
+    }
+    mgr.setSeriesPriceLabelsEnabled(seriesPriceLabelsEnabled);
     onManagerReady(mgr);
 
     const unsub = mgr.subscribeCrosshair((p: MouseEventParams<Time>) => {
@@ -1123,7 +1151,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
       )}
 
       {/* 마우스 오버 시 표시되는 플로팅 줌/스크롤 툴바 */}
-      {chartMgr && (
+      {chartMgr && showHoverToolbar && (
         <ChartHoverToolbar
           onZoomOut={()      => managerRef.current?.zoomOut()}
           onZoomIn={()       => managerRef.current?.zoomIn()}