전략평가 돋보기 기능 추가

frontend/src/App.css

@@ -5630,8 +5630,10 @@ html.desktop-client .tmb-logo-version {
   gap: 6px;
   padding: 0 8px;
   flex-shrink: 0;
+  cursor: grab;
 }
-.chart-magnifier:active { cursor: grabbing; }
+.chart-magnifier-header:active { cursor: grabbing; }
+.chart-magnifier:active { cursor: default; }
 /* 리사이즈 핸들 위에서는 grab 커서 대신 방향 커서 표시 */
 .chart-magnifier-handle { cursor: inherit; }
 

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}
+      onPointerDown={stopChartPointer}
-      onPointerMove={onHeaderMove}
-      onPointerUp={onHeaderUp}
     >
-      {/* ── 헤더 ──────────────────────────────────────────────── */}
       <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()}
+          <button
-            onClick={() => adjustXyZoom(-1)}>−</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()}
+          <button
-            onClick={() => adjustXyZoom(1)}>+</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"
+          <button
-            onPointerDown={e => e.stopPropagation()} onClick={() => adjustYZoom(-1)}>−</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"
+          <button
-            onPointerDown={e => e.stopPropagation()} onClick={() => adjustYZoom(1)}>+</button>
+            type="button"
+            className="chart-magnifier-zoom-btn chart-magnifier-yzoom-btn"
+            onPointerDown={stopChartPointer}
+            onClick={e => { stopChartPointer(e); adjustYZoom(1); }}
+          >+</button>
         </div>
 
-        {/* 닫기 */}
+        <button
-        <button className="chart-magnifier-close" onPointerDown={e => e.stopPropagation()}
+          type="button"
-          onClick={onClose} title="닫기">×</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;

frontend/src/components/TradingChart.tsx

@@ -1142,7 +1142,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
     const onPanPointerDown = (e: PointerEvent) => {
       if (!canPanRef.current || e.button !== 0) return;
       const target = e.target as HTMLElement | null;
-      if (target?.closest('[data-no-chart-pan], .chart-right-toolbar, .pane-legend-item, .pane-drag-handle, .pane-btn, .candle-pane-controls')) {
+      if (target?.closest('[data-no-chart-pan], .chart-magnifier, .chart-right-toolbar, .pane-legend-item, .pane-drag-handle, .pane-btn, .candle-pane-controls')) {
         return;
       }
       const pt = isChartPlotPointer(e.clientX, e.clientY);

frontend/src/components/strategyEvaluation/StrategyEvaluationChart.tsx

@@ -116,6 +116,7 @@ const StrategyEvaluationChart: React.FC<Props> = ({
   const [signals, setSignals] = useState<BacktestSignal[]>([]);
   const [backtestRunning, setBacktestRunning] = useState(false);
   const [backtestError, setBacktestError] = useState<string | null>(null);
+  const [magnifierActive, setMagnifierActive] = useState(false);
   const marketBtnRef = useRef<HTMLButtonElement>(null);
   const managerRef = useRef<ChartManager | null>(null);
   const backtestGenRef = useRef(0);
@@ -460,7 +461,24 @@ const StrategyEvaluationChart: React.FC<Props> = ({
             <span className="seval-chart-backtest-busy">시그널 계산 중…</span>
           )}
         </div>
-        <span className="seval-chart-hint">캔들 클릭 · 세로 영역 드래그 · ← → 키 · 하단 툴바로 분석 봉 이동</span>
+        <div className="seval-chart-toolbar-actions">
+          <button
+            type="button"
+            className={`seval-chart-magnifier-btn${magnifierActive ? ' seval-chart-magnifier-btn--active' : ''}`}
+            title={magnifierActive ? '확대경 끄기' : '확대경 켜기'}
+            aria-label={magnifierActive ? '확대경 끄기' : '확대경 켜기'}
+            aria-pressed={magnifierActive}
+            disabled={loading || bars.length === 0}
+            onClick={() => setMagnifierActive(v => !v)}
+          >
+            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
+              <circle cx="6.5" cy="6.5" r="4.5" />
+              <line x1="10" y1="10" x2="13.5" y2="13.5" />
+              <line x1="6.5" y1="4" x2="6.5" y2="9" />
+              <line x1="4" y1="6.5" x2="9" y2="6.5" />
+            </svg>
+          </button>
+        </div>
       </div>
 
       <div className="btd-analysis-main">
@@ -506,6 +524,8 @@ const StrategyEvaluationChart: React.FC<Props> = ({
               showHoverToolbar={false}
               showChartRightToolbar={false}
               showCandlePaneControls={false}
+              magnifierEnabled={magnifierActive}
+              onMagnifierClose={() => setMagnifierActive(false)}
               resolveInitialDisplayCount={resolveInitialDisplayCount}
             />
             {chartMgr && (

frontend/src/styles/strategyEvaluation.css

@@ -244,10 +244,44 @@
   flex-shrink: 0;
 }
 
-.seval-chart-hint {
+.seval-chart-toolbar-actions {
-  font-size: 0.66rem;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.seval-chart-magnifier-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid var(--btd-divider, var(--se-border));
+  border-radius: 6px;
+  background: var(--btd-surface, var(--se-input-bg));
   color: var(--se-text-muted);
-  white-space: nowrap;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.12s, border-color 0.12s, color 0.12s;
+}
+
+.seval-chart-magnifier-btn:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--btd-gold, var(--se-gold)) 45%, var(--se-border));
+  color: var(--btd-gold, var(--se-gold));
+  background: color-mix(in srgb, var(--btd-gold, var(--se-gold)) 10%, var(--se-input-bg));
+}
+
+.seval-chart-magnifier-btn--active {
+  border-color: color-mix(in srgb, var(--btd-gold, var(--se-gold)) 55%, var(--se-border));
+  color: var(--btd-gold, var(--se-gold));
+  background: color-mix(in srgb, var(--btd-gold, var(--se-gold)) 18%, var(--se-input-bg));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--btd-gold, var(--se-gold)) 25%, transparent);
+}
+
+.seval-chart-magnifier-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 /* btd-analysis-canvas-wrap--live: tv-chart-wrap 높이 (backtestDashboard.css) */
@@ -1621,9 +1655,3 @@ html.theme-light .seval-analyze-btn:hover:not(:disabled),
   border-color: rgba(25, 118, 210, 0.45);
   background: rgba(25, 118, 210, 0.08);
 }
-
-@media (max-width: 960px) {
-  .seval-chart-hint {
-    display: none;
-  }
-}