백테스팅 분석결과 레포트 출력

2026-06-03 12:14:08 +09:00
parent c228f18c25
commit ee7b1a6123
11 changed files with 1207 additions and 15 deletions
@@ -0,0 +1,149 @@
+/**
+ * 백테스팅 — 투자분석 상세 레포트 (출력·PDF 저장용 팝업)
+ */
+import React, { useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import type { BacktestAnalysis, BacktestSignal } from '../../utils/backendApi';
+import { BacktestDashboard } from '../BacktestResultModal';
+import { printReportDocument } from '../../utils/printReportDocument';
+import '../../styles/backtestReportPrint.css';
+
+export interface BacktestAnalysisReportModel {
+  analysis: BacktestAnalysis;
+  signals: BacktestSignal[];
+  strategyName: string;
+  symbol: string;
+  symbolKo?: string;
+  timeframe: string;
+  barCount: number;
+  createdAt?: string;
+  reportKind: 'backtest' | 'live';
+}
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  model: BacktestAnalysisReportModel | null;
+}
+
+const IcReport = () => (
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+    <line x1="16" y1="13" x2="8" y2="13" />
+    <line x1="16" y1="17" x2="8" y2="17" />
+    <line x1="10" y1="9" x2="8" y2="9" />
+  </svg>
+);
+
+const IcPrint = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+    <polyline points="6 9 6 2 18 2 18 9" />
+    <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
+    <rect x="6" y="14" width="12" height="8" />
+  </svg>
+);
+
+export default function BacktestAnalysisReportModal({ open, onClose, model }: Props) {
+  const printAreaRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  const handlePrint = useCallback(() => {
+    const root = printAreaRef.current;
+    if (!root) return;
+    printReportDocument(
+      root.innerHTML,
+      `GoldenChart 투자분석 레포트${model?.symbolKo ? ` · ${model.symbolKo}` : ''}`,
+    );
+  }, [model?.symbolKo]);
+
+  if (!open || !model) return null;
+
+  const printedAt = new Date().toLocaleString('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  const content = (
+    <div
+      className="btd-report-overlay"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="btd-report-title"
+      onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div className="btd-report-shell">
+        <header className="btd-report-chrome btd-report-no-print">
+          <div className="btd-report-chrome-title">
+            <span className="btd-report-chrome-icon" aria-hidden><IcReport /></span>
+            <div>
+              <h2 id="btd-report-title" className="btd-report-chrome-heading">투자분석 상세 레포트</h2>
+              <p className="btd-report-chrome-sub">
+                {model.reportKind === 'live' ? '실시간 매매' : '백테스팅'}
+                {model.symbolKo ? ` · ${model.symbolKo}` : ''}
+              </p>
+            </div>
+          </div>
+          <div className="btd-report-chrome-actions">
+            <div className="btd-report-chrome-actions-col">
+              <button
+                type="button"
+                className="btd-report-btn btd-report-btn--primary"
+                onClick={handlePrint}
+                title="프린터 또는 PDF로 저장"
+              >
+                <IcPrint />
+                인쇄 / PDF
+              </button>
+              <p className="btd-report-print-hint">PDF 저장 시 대상에서 「PDF로 저장」 선택 · 색상 유지는 「배경 그래픽」 체크</p>
+            </div>
+            <button type="button" className="btd-report-btn" onClick={onClose}>닫기</button>
+          </div>
+        </header>
+
+        <div className="btd-report-scroll">
+          <div ref={printAreaRef} className="btd-report-print-area" lang="ko">
+            <div className="btd-report-print-header">
+              <div className="btd-report-print-brand">
+                <h1>GoldenChart 투자분석 레포트</h1>
+                <p className="btd-report-print-meta">
+                  출력일시 {printedAt}
+                  {model.createdAt ? ` · 분석 실행 ${model.createdAt}` : ''}
+                </p>
+              </div>
+              {model.symbolKo && (
+                <p className="btd-report-print-symbol">{model.symbolKo}</p>
+              )}
+            </div>
+            <BacktestDashboard
+              analysis={model.analysis}
+              signals={model.signals}
+              strategyName={model.strategyName}
+              symbol={model.symbol}
+              timeframe={model.timeframe}
+              barCount={model.barCount}
+              createdAt={model.createdAt}
+              reportMode
+            />
+            <footer className="btd-report-print-footer">
+              <p>본 레포트는 GoldenChart 백테스팅·투자분석 결과이며 투자 권유가 아닙니다.</p>
+            </footer>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(content, document.body);
+}