전략편집기 평가탭 전략평가후 수익률 표시

frontend/src/components/StrategyEditorPage.tsx

@@ -5,7 +5,7 @@ import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react'
 import { ReactFlowProvider } from '@xyflow/react';
 import DraggableModalFrame from './DraggableModalFrame';
 import type { Theme } from '../types/index';
-import { hasRegisteredUser, loadStrategies, loadStrategy, saveStrategy, deleteStrategy, runBacktest, loadBacktestSettings, loadIndicatorSettings, type StrategyDto as ApiStrategyDto } from '../utils/backendApi';
+import { hasRegisteredUser, loadStrategies, loadStrategy, saveStrategy, deleteStrategy, runBacktest, loadBacktestSettings, loadIndicatorSettings, type BacktestSignal, type StrategyDto as ApiStrategyDto } from '../utils/backendApi';
 import { resolveStrategyPrimaryTimeframe } from '../utils/strategyToChartIndicators';
 import { fetchBacktestCandleBundle } from '../utils/backtestWarmup';
 import { syncStrategyTimeframesFromLayoutIfNeeded } from '../utils/strategyTimeframeSync';
@@ -168,7 +168,7 @@ import StrategyDescriptionModal from './strategyEditor/StrategyDescriptionModal'
 import ReactDOM from 'react-dom';
 import { MarketSearchPanel } from './MarketSearchPanel';
 import { getKoreanName } from '../utils/marketNameCache';
-import type { Timeframe } from '../types';
+import type { Timeframe, OHLCVBar } from '../types';
 import {
   BACKTEST_STRATEGY_TIMEFRAME,
   buildQuickRunTimeframeSelectOptions,
@@ -178,6 +178,14 @@ import {
 } from '../utils/backtestRunTimeframe';
 import '../styles/strategyEditor.css';
 import '../styles/strategyEditorTheme.css';
+import '../styles/strategyEvaluation.css';
+import { BACKTEST_DISPLAY_BAR_COUNT, resolveEvaluationBarSlice } from '../utils/backtestWarmup';
+import {
+  buildStrategyEvaluationToolbarSummary,
+  formatEvaluationReturnPct,
+} from '../utils/strategyEvaluationReport';
+import { resolveEvaluationCommissionRate } from '../utils/strategyEvaluationSignals';
+import type { StrategyEvaluationWindowMeta } from './strategyEvaluation/StrategyEvaluationChart';
 
 type SignalTab = 'buy' | 'sell' | 'eval';
 type BuySellTab = 'buy' | 'sell';
@@ -359,6 +367,20 @@ export default function StrategyEditorPage({
   const [qbMarketQ,    setQbMarketQ]    = useState('');
   const qbMarketBtnRef = useRef<HTMLButtonElement>(null);
 
+  // ── 평가 탭 — 수익률 요약 ─────────────────────────────────────────────────
+  const [evalBacktestSignals, setEvalBacktestSignals] = useState<BacktestSignal[]>([]);
+  const [evalBars, setEvalBars] = useState<OHLCVBar[]>([]);
+  const [evalWindowMeta, setEvalWindowMeta] = useState<StrategyEvaluationWindowMeta>({
+    evaluationBarCount: BACKTEST_DISPLAY_BAR_COUNT,
+    warmupBarCount: 0,
+    isAtLatestWindow: true,
+    windowEndTimeSec: null,
+  });
+  const [evalSignalScanRunning, setEvalSignalScanRunning] = useState(false);
+  const [evalMarket, setEvalMarket] = useState('KRW-BTC');
+  const [evalInitialCapital, setEvalInitialCapital] = useState(10_000_000);
+  const [evalCommissionRate, setEvalCommissionRate] = useState(0.0015);
+
   const [leftWidth, setLeftWidth] = useState(() => readStoredSize('se-left-width', LEFT_PANEL_DEFAULT));
   const [rightWidth, setRightWidth] = useState(() => readRightPanelWidth());
   const [rightOpen, setRightOpen] = useState(() => readStoredBool('se-right-open', true));
@@ -1690,6 +1712,54 @@ export default function StrategyEditorPage({
     [qbStrategyTimeframe],
   );
 
+  useEffect(() => {
+    void loadBacktestSettings().then(s => {
+      if (s?.initialCapital) setEvalInitialCapital(s.initialCapital);
+      setEvalCommissionRate(resolveEvaluationCommissionRate(s));
+    });
+  }, []);
+
+  useEffect(() => {
+    if (signalTab !== 'eval') {
+      setEvalBacktestSignals([]);
+      setEvalBars([]);
+      setEvalSignalScanRunning(false);
+    }
+  }, [signalTab]);
+
+  const evalAnalysisSummary = useMemo(() => {
+    if (signalTab !== 'eval' || evalBacktestSignals.length === 0) return null;
+    const { evalBars: slice } = resolveEvaluationBarSlice(evalBars, evalWindowMeta.evaluationBarCount);
+    const lastEvalBar = slice[slice.length - 1];
+    return buildStrategyEvaluationToolbarSummary(evalBacktestSignals, {
+      initialCapital: evalInitialCapital,
+      symbol: evalMarket.replace(/^KRW-/, ''),
+      commissionRate: evalCommissionRate,
+      lastBarClose: lastEvalBar?.close,
+      lastBarTimeSec: lastEvalBar?.time,
+    });
+  }, [
+    signalTab,
+    evalBacktestSignals,
+    evalBars,
+    evalWindowMeta.evaluationBarCount,
+    evalInitialCapital,
+    evalMarket,
+    evalCommissionRate,
+  ]);
+
+  const handleEvalSignalsChange = useCallback((signals: BacktestSignal[]) => {
+    setEvalBacktestSignals(signals);
+  }, []);
+
+  const handleEvalBarsLoaded = useCallback((bars: OHLCVBar[]) => {
+    setEvalBars(bars);
+  }, []);
+
+  const handleEvalWindowMetaChange = useCallback((meta: StrategyEvaluationWindowMeta) => {
+    setEvalWindowMeta(meta);
+  }, []);
+
   const operators = [
     { type: 'operator' as const, value: 'AND', label: 'AND', color: 'logic-and' },
     { type: 'operator' as const, value: 'OR', label: 'OR', color: 'logic-or' },
@@ -1982,6 +2052,36 @@ export default function StrategyEditorPage({
                 평가
               </button>
             </div>
+            {signalTab === 'eval' && (
+              evalSignalScanRunning ? (
+                <span className="se-eval-return-summary seval-header-analysis-busy">시그널 계산 중…</span>
+              ) : evalAnalysisSummary ? (
+                <span
+                  className="se-eval-return-summary seval-analysis-summary"
+                  title="일괄매수(최초 전액) · 분할매수(40/30/잔여) · 전략평가와 동일 기준"
+                >
+                  <span className={`seval-analysis-item seval-analysis-return${
+                    evalAnalysisSummary.fullBuyReturnPct > 0
+                      ? ' seval-analysis-return--pos'
+                      : evalAnalysisSummary.fullBuyReturnPct < 0
+                        ? ' seval-analysis-return--neg'
+                        : ''
+                  }`}>
+                    일괄:<strong>{formatEvaluationReturnPct(evalAnalysisSummary.fullBuyReturnPct)}</strong>
+                  </span>
+                  <span className="seval-analysis-sep" aria-hidden>·</span>
+                  <span className={`seval-analysis-item seval-analysis-return${
+                    evalAnalysisSummary.splitBuyReturnPct > 0
+                      ? ' seval-analysis-return--pos'
+                      : evalAnalysisSummary.splitBuyReturnPct < 0
+                        ? ' seval-analysis-return--neg'
+                        : ''
+                  }`}>
+                    분할:<strong>{formatEvaluationReturnPct(evalAnalysisSummary.splitBuyReturnPct)}</strong>
+                  </span>
+                </span>
+              ) : null
+            )}
             {stratName && <span className="se-editing-name">{stratName}</span>}
             {signalTab !== 'eval' && hasMultipleStartSections(currentEditorState) && (
               <StartCombineOpControl
@@ -2044,6 +2144,11 @@ export default function StrategyEditorPage({
               stratDesc={stratDesc}
               buyEditorState={buyEditorState}
               sellEditorState={sellEditorState}
+              onSignalsChange={handleEvalSignalsChange}
+              onBarsLoaded={handleEvalBarsLoaded}
+              onEvalWindowMetaChange={handleEvalWindowMetaChange}
+              onBacktestRunningChange={setEvalSignalScanRunning}
+              onMarketChange={setEvalMarket}
             />
           ) : editorMode === 'graph' ? (
             <>

frontend/src/components/strategyEditor/StrategyEditorEvaluationPanel.tsx

@@ -4,7 +4,9 @@
 import '../../styles/backtestDashboard.css';
 import '../../styles/strategyEvaluation.css';
 import React, { useEffect, useMemo, useState } from 'react';
-import type { Theme, Timeframe } from '../../types';
+import type { Theme, Timeframe, OHLCVBar } from '../../types';
+import type { BacktestSignal } from '../../utils/backendApi';
+import type { StrategyEvaluationWindowMeta } from '../strategyEvaluation/StrategyEvaluationChart';
 import StrategyEvaluationChart from '../strategyEvaluation/StrategyEvaluationChart';
 import { useIndicatorSettings } from '../../hooks/useIndicatorSettings';
 import { useMarketTicker } from '../../hooks/useMarketTicker';
@@ -27,6 +29,11 @@ interface Props {
   stratDesc: string;
   buyEditorState: EditorConditionState;
   sellEditorState: EditorConditionState;
+  onSignalsChange?: (signals: BacktestSignal[]) => void;
+  onBarsLoaded?: (bars: OHLCVBar[]) => void;
+  onEvalWindowMetaChange?: (meta: StrategyEvaluationWindowMeta) => void;
+  onBacktestRunningChange?: (running: boolean) => void;
+  onMarketChange?: (market: string) => void;
 }
 
 const StrategyEditorEvaluationPanel: React.FC<Props> = ({
@@ -35,6 +42,11 @@ const StrategyEditorEvaluationPanel: React.FC<Props> = ({
   stratDesc,
   buyEditorState,
   sellEditorState,
+  onSignalsChange,
+  onBarsLoaded,
+  onEvalWindowMetaChange,
+  onBacktestRunningChange,
+  onMarketChange,
 }) => {
   const { getParams, getVisualConfig, settingsRevision } = useIndicatorSettings();
   const [market, setMarket] = useState('KRW-BTC');
@@ -91,6 +103,11 @@ const StrategyEditorEvaluationPanel: React.FC<Props> = ({
     refreshAllTickers: refreshMarketTickers,
   } = useMarketTicker();
 
+  const handleMarketChange = (next: string) => {
+    setMarket(next);
+    onMarketChange?.(next);
+  };
+
   if (!draftStrategy) {
     return (
       <div className="se-eval-panel se-eval-panel--empty">
@@ -111,12 +128,16 @@ const StrategyEditorEvaluationPanel: React.FC<Props> = ({
         strategies={chartStrategies}
         selectedStrategyId={DRAFT_EVAL_STRATEGY_ID}
         onStrategySelect={() => {}}
-        onMarketChange={setMarket}
+        onMarketChange={handleMarketChange}
         onTimeframeChoiceChange={setTimeframeChoice}
         theme={theme}
         strategy={draftStrategy}
         selectedBarIndex={selectedBarIndex}
         onSelectedBarIndexChange={setSelectedBarIndex}
+        onBarsLoaded={onBarsLoaded}
+        onEvalWindowMetaChange={onEvalWindowMetaChange}
+        onSignalsChange={onSignalsChange}
+        onBacktestRunningChange={onBacktestRunningChange}
         paramsRevision={paramsRevision}
         getParamsOverride={getParams}
         getVisualConfigOverride={getVisualConfig}

frontend/src/styles/strategyEditor.css

@@ -902,6 +902,10 @@
   line-height: 1.5;
 }
 
+.se-eval-return-summary {
+  flex-shrink: 0;
+}
+
 .se-editing-name {
   font-size: 0.72rem;
   color: color-mix(in srgb, var(--se-gold) 85%, transparent);