diff --git a/frontend/src/components/ChartMagnifier.tsx b/frontend/src/components/ChartMagnifier.tsx index e251dc0..90ab710 100644 --- a/frontend/src/components/ChartMagnifier.tsx +++ b/frontend/src/components/ChartMagnifier.tsx @@ -54,6 +54,18 @@ function nearestStepIndex(steps: number[], cur: number): number { return best; } +/** LWC chart-container + 래퍼 오버레이(매매 시그널 라벨·드로잉) 캔버스 — DOM 순서 유지 */ +function collectMagnifierChartLayers( + container: HTMLElement, + wrapper: HTMLElement, +): HTMLCanvasElement[] { + const containerLayers = Array.from(container.querySelectorAll('canvas')); + const containerSet = new Set(containerLayers); + const overlayLayers = Array.from(wrapper.querySelectorAll('canvas')) + .filter(c => !containerSet.has(c) && !c.classList.contains('chart-magnifier-canvas')); + return [...containerLayers, ...overlayLayers]; +} + const ChartMagnifier: React.FC = ({ containerRef, wrapperRef, enabled, onClose, }) => { @@ -126,8 +138,8 @@ const ChartMagnifier: React.FC = ({ const ssrcL = srcL; const ssrcT = srcT; - // LWC 캔버스 레이어 순서대로 복사 - const layers = Array.from(container.querySelectorAll('canvas')); + // LWC 캔버스 + 매매 시그널 라벨·드로잉 오버레이 (tv-chart-wrap 자식) 순서대로 복사 + const layers = collectMagnifierChartLayers(container, wrapper); for (const lc of layers) { const cRect = lc.getBoundingClientRect(); const csX = (ssrcL - cRect.left) * dpr;