전략평가 시간봉 시간 표시 위치 수정

frontend/src/components/StrategyEvaluationPage.tsx

@@ -834,43 +834,54 @@ function StrategyEvaluationPageInner({ theme = 'dark' }: Props) {
           </div>
         </div>
         <div className="seval-top-toolbar__main">
-          {selectedStrategy && signalScanRunning && (
+          <div className="seval-top-toolbar__status">
-            <span className="seval-header-analysis-busy">시그널 계산 중…</span>
+            {selectedBarTimeSec != null && (
-          )}
+              <time
-          {selectedStrategy && analysisSummary && !signalScanRunning && (
+                className="seval-selected-bar-time"
-            <span
+                dateTime={new Date(selectedBarTimeSec * 1000).toISOString()}
-              className="seval-analysis-summary"
+                title="현재 선택 봉 시각"
-              title={`${tradeExecutionModeLabel(tradeExecutionMode)} · 일괄매수(최초 전액) · 분할매수(40/30/잔여) · 레포트와 동일 필터 기준`}
+              >
-            >
+                {new Date(selectedBarTimeSec * 1000).toLocaleString('ko-KR')}
-              <span className="seval-analysis-item">
+              </time>
-                매수:<strong>{padEvaluationSignalCount(analysisSummary.buyCount)}</strong>건
+            )}
+            {selectedStrategy && signalScanRunning && (
+              <span className="seval-header-analysis-busy">시그널 계산 중…</span>
+            )}
+            {selectedStrategy && analysisSummary && !signalScanRunning && (
+              <span
+                className="seval-analysis-summary"
+                title={`${tradeExecutionModeLabel(tradeExecutionMode)} · 일괄매수(최초 전액) · 분할매수(40/30/잔여) · 레포트와 동일 필터 기준`}
+              >
+                <span className="seval-analysis-item">
+                  매수:<strong>{padEvaluationSignalCount(analysisSummary.buyCount)}</strong>건
+                </span>
+                <span className="seval-analysis-sep" aria-hidden>·</span>
+                <span className="seval-analysis-item">
+                  매도:<strong>{padEvaluationSignalCount(analysisSummary.sellCount)}</strong>건
+                </span>
+                <span className="seval-analysis-sep" aria-hidden>·</span>
+                <span className={`seval-analysis-item seval-analysis-return${
+                  analysisSummary.fullBuyReturnPct > 0
+                    ? ' seval-analysis-return--pos'
+                    : analysisSummary.fullBuyReturnPct < 0
+                      ? ' seval-analysis-return--neg'
+                      : ''
+                }`}>
+                  일괄:<strong>{formatEvaluationReturnPct(analysisSummary.fullBuyReturnPct)}</strong>
+                </span>
+                <span className="seval-analysis-sep" aria-hidden>·</span>
+                <span className={`seval-analysis-item seval-analysis-return${
+                  analysisSummary.splitBuyReturnPct > 0
+                    ? ' seval-analysis-return--pos'
+                    : analysisSummary.splitBuyReturnPct < 0
+                      ? ' seval-analysis-return--neg'
+                      : ''
+                }`}>
+                  분할:<strong>{formatEvaluationReturnPct(analysisSummary.splitBuyReturnPct)}</strong>
+                </span>
               </span>
-              <span className="seval-analysis-sep" aria-hidden>·</span>
+            )}
-              <span className="seval-analysis-item">
+          </div>
-                매도:<strong>{padEvaluationSignalCount(analysisSummary.sellCount)}</strong>건
-              </span>
-              <span className="seval-analysis-sep" aria-hidden>·</span>
-              <span className={`seval-analysis-item seval-analysis-return${
-                analysisSummary.fullBuyReturnPct > 0
-                  ? ' seval-analysis-return--pos'
-                  : analysisSummary.fullBuyReturnPct < 0
-                    ? ' seval-analysis-return--neg'
-                    : ''
-              }`}>
-                일괄:<strong>{formatEvaluationReturnPct(analysisSummary.fullBuyReturnPct)}</strong>
-              </span>
-              <span className="seval-analysis-sep" aria-hidden>·</span>
-              <span className={`seval-analysis-item seval-analysis-return${
-                analysisSummary.splitBuyReturnPct > 0
-                  ? ' seval-analysis-return--pos'
-                  : analysisSummary.splitBuyReturnPct < 0
-                    ? ' seval-analysis-return--neg'
-                    : ''
-              }`}>
-                분할:<strong>{formatEvaluationReturnPct(analysisSummary.splitBuyReturnPct)}</strong>
-              </span>
-            </span>
-          )}
         </div>
         <div className="seval-top-toolbar__right" aria-hidden />
       </header>

frontend/src/components/strategyEvaluation/StrategyEvaluationChart.tsx

@@ -768,10 +768,14 @@ const StrategyEvaluationChart: React.FC<Props> = ({
               </option>
             ))}
           </select>
-          {selectedBar && (
+          {chartFullscreen && selectedBar && (
-            <span className="seval-chart-bar-time">
+            <time
+              className="seval-selected-bar-time"
+              dateTime={new Date(selectedBar.time * 1000).toISOString()}
+              title="현재 선택 봉 시각"
+            >
               {new Date(selectedBar.time * 1000).toLocaleString('ko-KR')}
-            </span>
+            </time>
           )}
           {strategy && backtestRunning && (
             <span className="seval-chart-backtest-busy">시그널 계산 중…</span>

frontend/src/styles/strategyEvaluation.css

@@ -40,6 +40,15 @@
   padding: 0 10px;
 }
 
+.seval-top-toolbar__status {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
 .seval-top-toolbar__right {
   flex: 0 0 16px;
   width: 16px;
@@ -474,6 +483,7 @@
   min-width: 120px;
 }
 
+.seval-selected-bar-time,
 .seval-chart-bar-time {
   display: inline-flex;
   align-items: center;
@@ -485,6 +495,7 @@
   border: 1px solid color-mix(in srgb, var(--btd-gold, var(--se-gold)) 35%, var(--se-border));
   background: color-mix(in srgb, var(--btd-gold, var(--se-gold)) 8%, transparent);
   white-space: nowrap;
+  font-variant-numeric: tabular-nums;
 }
 
 .seval-chart-bar-time--loading {