diff --git a/frontend/src/App.css b/frontend/src/App.css index 76a3e9c..f08790d 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1082,6 +1082,11 @@ html.theme-blue { cursor: grabbing; } +/* 캔들 pane 상단 — 표시 설정 그룹 (⋯ 메뉴, 투자관리 차트 탭) */ +.chart-right-toolbar-cluster--overlay { + z-index: 4; +} + /* 우측 툴바 플라이아웃 — 버튼 왼쪽으로 펼침 */ .tv-side-flyout--right-anchor { transform: translateX(-100%); diff --git a/frontend/src/components/ChartRightToolbar.tsx b/frontend/src/components/ChartRightToolbar.tsx index c687c5b..259ab9d 100644 --- a/frontend/src/components/ChartRightToolbar.tsx +++ b/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 = ({ manager, indicators, chartHeight, paused = false, + candleOverlayToggles, + onToggleCandleOverlay, onSplit, onRemove, onDuplicate, onExpand, onRestore, focusedId, onDragStart, onToggleHidden, onSettings, @@ -279,16 +294,50 @@ const ChartRightToolbar: React.FC = ({ 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: