투자관리 화면 수정

frontend/src/components/ChartRightToolbar.tsx

@@ -7,12 +7,25 @@ import type { IndicatorConfig } from '../types';
 import { ChartManager } from '../utils/ChartManager';
 import { getPaneHostId } from '../utils/indicatorPaneMerge';
 import { buildPaneItems, resolvePaneItemLayout } from './paneLegendLayout';
+import { PAPER_OVERLAY_MENU_TITLE } from '../utils/paperChartOverlayVisibility';
+
+/** 캔들 오버레이 표시 설정 그룹 메뉴 id */
+export const CANDLE_OVERLAY_MENU_ID = '__candle_overlay_visibility__';
+
+export interface CandleOverlayToggleItem {
+  key:     string;
+  label:   string;
+  visible: boolean;
+}
 
 export interface ChartRightToolbarProps {
   manager:     ChartManager;
   indicators:  IndicatorConfig[];
   chartHeight: number;
   paused?:     boolean;
+  /** 캔들 pane 상단 — 이동평균·일목·볼린저 표시/숨김 (투자관리 차트 탭) */
+  candleOverlayToggles?: CandleOverlayToggleItem[];
+  onToggleCandleOverlay?: (key: string) => void;
   onSplit?:    (hostId: string) => void;
   onRemove?:   (id: string) => void;
   onDuplicate?: (id: string) => void;
@@ -210,6 +223,8 @@ function buildMenuItems(
 
 const ChartRightToolbar: React.FC<ChartRightToolbarProps> = ({
   manager, indicators, chartHeight, paused = false,
+  candleOverlayToggles,
+  onToggleCandleOverlay,
   onSplit, onRemove, onDuplicate,
   onExpand, onRestore, focusedId,
   onDragStart, onToggleHidden, onSettings,
@@ -279,16 +294,50 @@ const ChartRightToolbar: React.FC<ChartRightToolbarProps> = ({
   const allowDrag = !!(onDragStart && paneItems.length > 1);
   const clusterHeight = (allowDrag ? BTN_SIZE + BTN_GAP : 0) + BTN_SIZE;
 
-  const openItem = openMenuId
+  const openItem = openMenuId && openMenuId !== CANDLE_OVERLAY_MENU_ID
     ? paneItems.find(p => p.id === openMenuId)
     : null;
 
+  const candlePane = paneLayouts.find(l => l.paneIndex === 0);
+  const showOverlayMenu = !!(candleOverlayToggles?.length && candlePane && onToggleCandleOverlay);
+  const overlayMenuOpen = openMenuId === CANDLE_OVERLAY_MENU_ID;
+
+  const overlayMenuItems: MenuItemDef[] = showOverlayMenu
+    ? candleOverlayToggles!.map(item => ({
+        key: item.key,
+        title: item.visible ? `${item.label} 숨기기` : `${item.label} 표시`,
+        icon: <IconEye hidden={!item.visible} />,
+        active: !item.visible,
+        onClick: () => {
+          onToggleCandleOverlay?.(item.key);
+        },
+      }))
+    : [];
+
   return (
     <aside className="chart-right-toolbar" aria-label="차트 우측 도구">
       <div
         className="chart-right-toolbar-inner"
         style={{ height: Math.max(innerHeight, chartHeight) }}
       >
+        {showOverlayMenu && (
+          <div
+            className="chart-right-toolbar-cluster chart-right-toolbar-cluster--overlay"
+            style={{ top: candlePane!.topY + 4 }}
+          >
+            <button
+              type="button"
+              className={`tv-side-btn tv-side-group-btn chart-right-toolbar-btn chart-right-toolbar-btn--menu${overlayMenuOpen ? ' active' : ''}`}
+              title="캔들 지표 표시 설정"
+              onMouseEnter={e => openFlyout(CANDLE_OVERLAY_MENU_ID, e.currentTarget)}
+              onMouseLeave={scheduleClose}
+            >
+              <IconMore />
+              <span className="tv-side-expand-arrow" />
+            </button>
+          </div>
+        )}
+
         {paneLayouts.map(layout => (
           <div
             key={layout.paneIndex}
@@ -348,6 +397,28 @@ const ChartRightToolbar: React.FC<ChartRightToolbarProps> = ({
         })}
       </div>
 
+      {overlayMenuOpen && overlayMenuItems.length > 0 && (
+        <div
+          className="tv-side-flyout tv-side-flyout--right-anchor"
+          style={{ top: flyoutPos.top, left: flyoutPos.left }}
+          onMouseEnter={cancelClose}
+          onMouseLeave={scheduleClose}
+        >
+          <div className="tv-side-flyout-header">{PAPER_OVERLAY_MENU_TITLE}</div>
+          {overlayMenuItems.map(mi => (
+            <button
+              key={mi.key}
+              type="button"
+              className={`tv-side-flyout-item${mi.active ? ' active' : ''}`}
+              onClick={e => { e.stopPropagation(); mi.onClick(); }}
+            >
+              <span className="tv-side-flyout-icon">{mi.icon}</span>
+              <span className="tv-side-flyout-title">{mi.title}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
       {openItem && openMenuId && (() => {
         const menuItems = buildMenuItems(openItem, indicators, paneItems, {
           focusedId, onSplit, onDuplicate, onExpand, onRestore, onRemove,