전략평가 돋보기 기능 추가

frontend/src/components/ChartMagnifier.tsx

@@ -10,6 +10,7 @@
  * - LIVE 지시등: 캔버스 픽셀 변화 감지 시 점멸
  */
 import React, { useRef, useEffect, useCallback, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 interface ChartMagnifierProps {
   /** LWC canvas 들이 들어있는 chart-container div */
@@ -42,6 +43,14 @@ const HANDLES: { id: ResizeDir; cursor: string; style: React.CSSProperties }[] =
   { id:'w',  cursor:'w-resize',  style:{ top:'50%', left:-5,   transform:'translateY(-50%)'             } },
 ];
 
+function nearestStepIndex(steps: number[], cur: number): number {
+  let best = 0;
+  for (let i = 1; i < steps.length; i += 1) {
+    if (Math.abs(steps[i] - cur) < Math.abs(steps[best] - cur)) best = i;
+  }
+  return best;
+}
+
 const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
   containerRef, wrapperRef, enabled, onClose,
 }) => {
@@ -136,9 +145,7 @@ const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
     }
 
     // ── Y-Zoom: 수직 방향 추가 확대 ───────────────────────────────────────────
-    // Y축의 미세한 움직임을 파악할 수 있도록 중앙 기준으로 수직만 재확대
     if (yz > 1) {
-      // 임시 캔버스 초기화 (한 번만 생성)
       let tmp = tempCvRef.current;
       if (!tmp || tmp.width !== canvas.width || tmp.height !== canvas.height) {
         tmp = document.createElement('canvas');
@@ -150,24 +157,20 @@ const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
       tCtx.clearRect(0, 0, tmp.width, tmp.height);
       tCtx.drawImage(canvas, 0, 0);
 
-      // 중앙 ±(1/yz) 영역만 잘라 전체 높이로 늘림
       const srcYH = Math.round(canvas.height / yz);
       const srcYT = Math.round((canvas.height - srcYH) / 2);
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.drawImage(tmp, 0, srcYT, canvas.width, srcYH, 0, 0, canvas.width, canvas.height);
 
-      // Y-Zoom 배율 워터마크
       ctx.fillStyle = 'rgba(255,200,50,0.6)';
       ctx.font      = `bold ${Math.round(10 * dpr)}px monospace`;
       ctx.fillText(`Y×${yz}`, 4 * dpr, (canvasH - 4) * dpr);
     }
 
-    // ── 테두리 ─────────────────────────────────────────────────────────────────
     ctx.strokeStyle = 'rgba(255, 200, 50, 0.35)';
     ctx.lineWidth   = 1;
     ctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1);
 
-    // ── LIVE 감지: 중앙 세로 라인 픽셀 샘플링으로 변화 감지 ─────────────────
     try {
       const midX   = Math.floor(canvas.width  / 2);
       const sample = ctx.getImageData(midX, 0, 1, canvas.height).data;
@@ -179,7 +182,7 @@ const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
           diff += Math.abs(sample[i+1] - prev[i+1]);
           diff += Math.abs(sample[i+2] - prev[i+2]);
         }
-        if (diff > 30) {        // 임계값: 미세 잡음 무시
+        if (diff > 30) {
           setIsLive(true);
           if (liveTimerRef.current) clearTimeout(liveTimerRef.current);
           liveTimerRef.current = setTimeout(() => setIsLive(false), 600);
@@ -189,7 +192,6 @@ const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
     } catch { /* getImageData 실패 무시 */ }
   }, [containerRef, wrapperRef]);
 
-  // enabled 시 wrapper 위치 기준으로 초기 위치 설정
   useEffect(() => {
     if (!enabled) return;
     const p = initPos();
@@ -197,7 +199,6 @@ const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
     setPos(p);
   }, [enabled, initPos]);
 
-  // rAF 루프
   useEffect(() => {
     if (!enabled) { cancelAnimationFrame(rafRef.current); return; }
     const loop = () => { renderFrame(); rafRef.current = requestAnimationFrame(loop); };
@@ -205,23 +206,26 @@ const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
     return () => cancelAnimationFrame(rafRef.current);
   }, [enabled, renderFrame]);
 
-  // ── 드래그 (헤더) ─────────────────────────────────────────────────────────
+  // ── 드래그 (헤더만) ───────────────────────────────────────────────────────
   const dragStart = useRef<{ mx: number; my: number; px: number; py: number } | null>(null);
 
   const onHeaderDown = useCallback((e: React.PointerEvent) => {
+    if (e.button !== 0) return;
     e.preventDefault();
+    e.stopPropagation();
     dragStart.current = { mx: e.clientX, my: e.clientY, px: posRef.current.x, py: posRef.current.y };
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
   }, []);
 
   const onHeaderMove = useCallback((e: React.PointerEvent) => {
     if (!dragStart.current) return;
+    e.preventDefault();
+    e.stopPropagation();
     const dx = e.clientX - dragStart.current.mx;
     const dy = e.clientY - dragStart.current.my;
     const vw = window.innerWidth;
     const vh = window.innerHeight;
     const { w, h } = sizeRef.current;
-    // 헤더가 항상 화면 안에 있도록 최소 마진만 유지 (위아래 자유 이동)
     const np = {
       x: Math.max(-(w - 60), Math.min(vw - 60,    dragStart.current.px + dx)),
       y: Math.max(-(h - HEADER_H), Math.min(vh - HEADER_H, dragStart.current.py + dy)),
@@ -230,7 +234,11 @@ const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
     setPos(np);
   }, []);
 
-  const onHeaderUp = useCallback(() => { dragStart.current = null; }, []);
+  const onHeaderUp = useCallback((e: React.PointerEvent) => {
+    if (!dragStart.current) return;
+    e.stopPropagation();
+    dragStart.current = null;
+  }, []);
 
   // ── 리사이즈 핸들 ──────────────────────────────────────────────────────────
   const resizeStart = useRef<{
@@ -239,7 +247,8 @@ const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
   } | null>(null);
 
   const onHandleDown = useCallback((e: React.PointerEvent, dir: ResizeDir) => {
-    e.preventDefault(); e.stopPropagation();
+    e.preventDefault();
+    e.stopPropagation();
     resizeStart.current = {
       dir, mx: e.clientX, my: e.clientY,
       px: posRef.current.x,  py: posRef.current.y,
@@ -249,56 +258,70 @@ const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
   }, []);
 
   const onHandleMove = useCallback((e: React.PointerEvent) => {
-    const rs = resizeStart.current; if (!rs) return;
+    const rs = resizeStart.current;
+    if (!rs) return;
+    e.preventDefault();
+    e.stopPropagation();
     const { dir, mx, my, px, py, pw, ph } = rs;
-    const dx = e.clientX - mx; const dy = e.clientY - my;
+    const dx = e.clientX - mx;
+    const dy = e.clientY - my;
     let nx = px, ny = py, nw = pw, nh = ph;
     if (dir.includes('e')) { nw = Math.max(MIN_W, pw + dx); }
     if (dir.includes('w')) { nw = Math.max(MIN_W, pw - dx); nx = px + pw - nw; }
     if (dir.includes('s')) { nh = Math.max(MIN_H, ph + dy); }
     if (dir.includes('n')) { nh = Math.max(MIN_H, ph - dy); ny = py + ph - nh; }
-    // 리사이즈 시 뷰포트 경계 안에서만 클램프 (헤더 마진 확보)
     nx = Math.max(-(nw - 60), Math.min(window.innerWidth  - 60, nx));
     ny = Math.max(-(nh - HEADER_H), Math.min(window.innerHeight - HEADER_H, ny));
     posRef.current  = { x: nx, y: ny };
     sizeRef.current = { w: nw, h: nh };
     setPos ({ x: nx, y: ny });
     setSize({ w: nw, h: nh });
-  }, [wrapperRef]);
-
-  const onHandleUp = useCallback(() => { resizeStart.current = null; }, []);
-
-  // ── XY-Zoom 조절 ──────────────────────────────────────────────────────────
-  const adjustXyZoom = useCallback((delta: number) => {
-    const cur = xyZoomRef.current;
-    const idx = XY_STEPS.findIndex(s => s >= cur - 0.01);
-    const next = XY_STEPS[Math.max(0, Math.min(XY_STEPS.length - 1, idx + delta))];
-    xyZoomRef.current = next; setXyZoom(next);
   }, []);
 
-  // ── Y-Zoom 조절 ───────────────────────────────────────────────────────────
+  const onHandleUp = useCallback((e: React.PointerEvent) => {
+    e.stopPropagation();
+    resizeStart.current = null;
+  }, []);
+
+  const stopChartPointer = useCallback((e: React.PointerEvent | React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  // ── XY-Zoom / Y-Zoom 조절 ─────────────────────────────────────────────────
+  const adjustXyZoom = useCallback((delta: number) => {
+    const cur = xyZoomRef.current;
+    const idx = nearestStepIndex(XY_STEPS, cur);
+    const next = XY_STEPS[Math.max(0, Math.min(XY_STEPS.length - 1, idx + delta))];
+    if (next === cur) return;
+    xyZoomRef.current = next;
+    setXyZoom(next);
+  }, []);
+
   const adjustYZoom = useCallback((delta: number) => {
     const cur = yZoomRef.current;
-    const idx = Y_STEPS.findIndex(s => s >= cur - 0.01);
+    const idx = nearestStepIndex(Y_STEPS, cur);
     const next = Y_STEPS[Math.max(0, Math.min(Y_STEPS.length - 1, idx + delta))];
-    yZoomRef.current = next; setYZoom(next);
+    if (next === cur) return;
+    yZoomRef.current = next;
+    setYZoom(next);
   }, []);
 
   if (!enabled) return null;
 
-  return (
+  const magnifier = (
     <div
       className="chart-magnifier"
+      data-no-chart-pan
       style={{ left: pos.x, top: pos.y, width: size.w, height: size.h }}
-      onPointerDown={onHeaderDown}
-      onPointerMove={onHeaderMove}
-      onPointerUp={onHeaderUp}
+      onPointerDown={stopChartPointer}
     >
-      {/* ── 헤더 ──────────────────────────────────────────────── */}
       <div
         className="chart-magnifier-header"
+        onPointerDown={onHeaderDown}
+        onPointerMove={onHeaderMove}
+        onPointerUp={onHeaderUp}
       >
-        {/* 아이콘 + 제목 */}
         <svg className="chart-magnifier-icon" width="13" height="13" viewBox="0 0 13 13"
           fill="none" stroke="currentColor" strokeWidth="1.8">
           <circle cx="5.5" cy="5.5" r="4"/>
@@ -308,41 +331,56 @@ const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
         </svg>
         <span className="chart-magnifier-title">확대경</span>
 
-        {/* LIVE 지시등 */}
         <span
           className={`chart-magnifier-live${isLive ? ' live-on' : ''}`}
           title="캔버스 실시간 갱신 감지"
         >LIVE</span>
 
-        {/* XY Zoom 컨트롤 */}
         <div className="chart-magnifier-zoom" title="X·Y 동시 확대">
-          <button className="chart-magnifier-zoom-btn" onPointerDown={e => e.stopPropagation()}
-            onClick={() => adjustXyZoom(-1)}>−</button>
+          <button
+            type="button"
+            className="chart-magnifier-zoom-btn"
+            onPointerDown={stopChartPointer}
+            onClick={e => { stopChartPointer(e); adjustXyZoom(-1); }}
+          >−</button>
           <span className="chart-magnifier-zoom-val">{xyZoom}×</span>
-          <button className="chart-magnifier-zoom-btn" onPointerDown={e => e.stopPropagation()}
-            onClick={() => adjustXyZoom(1)}>+</button>
+          <button
+            type="button"
+            className="chart-magnifier-zoom-btn"
+            onPointerDown={stopChartPointer}
+            onClick={e => { stopChartPointer(e); adjustXyZoom(1); }}
+          >+</button>
         </div>
 
-        {/* Y-Zoom 컨트롤 */}
         <div className="chart-magnifier-yzoom" title="Y축 전용 확대 (미세 변화 감지용)">
-          <button className="chart-magnifier-zoom-btn chart-magnifier-yzoom-btn"
-            onPointerDown={e => e.stopPropagation()} onClick={() => adjustYZoom(-1)}>−</button>
+          <button
+            type="button"
+            className="chart-magnifier-zoom-btn chart-magnifier-yzoom-btn"
+            onPointerDown={stopChartPointer}
+            onClick={e => { stopChartPointer(e); adjustYZoom(-1); }}
+          >−</button>
           <span className="chart-magnifier-zoom-val">
             <span style={{ fontSize: 9, opacity: 0.7 }}>Y</span>{yZoom}×
           </span>
-          <button className="chart-magnifier-zoom-btn chart-magnifier-yzoom-btn"
-            onPointerDown={e => e.stopPropagation()} onClick={() => adjustYZoom(1)}>+</button>
+          <button
+            type="button"
+            className="chart-magnifier-zoom-btn chart-magnifier-yzoom-btn"
+            onPointerDown={stopChartPointer}
+            onClick={e => { stopChartPointer(e); adjustYZoom(1); }}
+          >+</button>
         </div>
 
-        {/* 닫기 */}
-        <button className="chart-magnifier-close" onPointerDown={e => e.stopPropagation()}
-          onClick={onClose} title="닫기">×</button>
+        <button
+          type="button"
+          className="chart-magnifier-close"
+          onPointerDown={stopChartPointer}
+          onClick={e => { stopChartPointer(e); onClose(); }}
+          title="닫기"
+        >×</button>
       </div>
 
-      {/* ── 확대 canvas ───────────────────────────────────────── */}
       <canvas ref={canvasRef} className="chart-magnifier-canvas" />
 
-      {/* ── 리사이즈 핸들 (8방향) ─────────────────────────────── */}
       {HANDLES.map(h => (
         <div key={h.id} className="chart-magnifier-handle"
           style={{ ...h.style, cursor: h.cursor, position: 'absolute', width: 10, height: 10 }}
@@ -353,6 +391,8 @@ const ChartMagnifier: React.FC<ChartMagnifierProps> = ({
       ))}
     </div>
   );
+
+  return createPortal(magnifier, document.body);
 };
 
 export default ChartMagnifier;