백테스팅 화면 상단 툴바에 빠른 실행 기능 추가

- 헤더 중앙에 종목·타임프레임·전략 드롭다운 + 실행 버튼 추가
- 실행 클릭 시 /api/candles/history에서 캔들 로드 → runBacktest 호출
- 완료 후 결과 목록 자동 갱신 및 백테스팅 탭 활성화
- 실행 중 스피너 표시, 오류 시 인라인 에러 메시지 표시
- btd-header-run·btd-run-select·btd-run-btn·btd-run-spinner CSS 추가

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/BacktestHistoryPage.tsx

@@ -9,12 +9,17 @@ import {
   loadPaperTrades,
   loadPaperSummary,
   loadStrategies,
+  runBacktest,
+  loadBacktestSettings,
+  API_BASE,
   type BacktestResultRecord,
   type BacktestAnalysis,
   type BacktestSignal,
   type StrategyDto,
 } from '../utils/backendApi';
-import type { Theme } from '../types';
+import { UPBIT_MARKETS } from '../utils/upbitApi';
+import { timeframeToCandleType } from '../utils/chartCandleType';
+import type { Theme, Timeframe } from '../types';
 import { buildEquityFromSignals } from '../utils/backtestEquity';
 import {
   formatChartTypeKo,
@@ -67,6 +72,19 @@ interface Props {
   theme?: Theme;
 }
 
+const QUICK_RUN_TIMEFRAMES: { value: Timeframe; label: string }[] = [
+  { value: '1m',  label: '1분' },
+  { value: '3m',  label: '3분' },
+  { value: '5m',  label: '5분' },
+  { value: '10m', label: '10분' },
+  { value: '15m', label: '15분' },
+  { value: '30m', label: '30분' },
+  { value: '1h',  label: '1시간' },
+  { value: '4h',  label: '4시간' },
+  { value: '1D',  label: '일봉' },
+  { value: '1W',  label: '주봉' },
+];
+
 export function BacktestHistoryPage({ theme = 'dark' }: Props) {
   const [tab, setTab] = useState<ExecutionListTab>('backtest');
   const [records, setRecords] = useState<BacktestResultRecord[]>([]);
@@ -77,6 +95,13 @@ export function BacktestHistoryPage({ theme = 'dark' }: Props) {
   const [reportOpen, setReportOpen] = useState(false);
   const [strategies, setStrategies] = useState<StrategyDto[]>([]);
 
+  // ── 빠른 백테스팅 실행 ──────────────────────────────────────────────────────
+  const [runMarket, setRunMarket] = useState<string>(UPBIT_MARKETS[0]);
+  const [runTimeframe, setRunTimeframe] = useState<Timeframe>('1D');
+  const [runStrategyId, setRunStrategyId] = useState<number | null>(null);
+  const [runLoading, setRunLoading] = useState(false);
+  const [runError, setRunError] = useState<string | null>(null);
+
   const [leftWidth, setLeftWidth] = useState(() => readMinWidth(LEFT_KEY, LEFT_DEFAULT));
   const [rightWidth, setRightWidth] = useState(() => readMinWidth(RIGHT_KEY, RIGHT_DEFAULT));
   const leftRef = useRef(leftWidth);
@@ -173,6 +198,49 @@ export function BacktestHistoryPage({ theme = 'dark' }: Props) {
     await fetchAll();
   }, [records, fetchAll]);
 
+  const handleQuickRun = useCallback(async () => {
+    if (!runStrategyId) {
+      window.alert('전략을 선택해주세요.');
+      return;
+    }
+    setRunLoading(true);
+    setRunError(null);
+    try {
+      const [settings, barsRes] = await Promise.all([
+        loadBacktestSettings(),
+        fetch(`${API_BASE}/candles/history?${new URLSearchParams({
+          market: runMarket,
+          type:   timeframeToCandleType(runTimeframe),
+          count:  '800',
+        })}`),
+      ]);
+      if (!barsRes.ok) throw new Error(`캔들 로딩 실패 (${barsRes.status})`);
+      const bars = (await barsRes.json()) as Array<{
+        time: number; open: number; high: number; low: number; close: number; volume: number;
+      }>;
+      if (bars.length < 5) {
+        throw new Error('캔들 데이터가 부족합니다. 잠시 후 다시 시도하거나 타임프레임을 변경해 주세요.');
+      }
+      const strategy = strategies.find(s => s.id === runStrategyId);
+      const result = await runBacktest({
+        strategyId:   runStrategyId,
+        bars,
+        timeframe:    runTimeframe,
+        settings,
+        symbol:       runMarket,
+        strategyName: strategy?.name,
+      });
+      if (!result) throw new Error('백테스팅 실행에 실패했습니다.');
+      // 결과 목록 갱신 후 새 결과 자동 선택
+      await fetchAll();
+      setTab('backtest');
+    } catch (e) {
+      setRunError(e instanceof Error ? e.message : '실행 중 오류가 발생했습니다.');
+    } finally {
+      setRunLoading(false);
+    }
+  }, [runMarket, runTimeframe, runStrategyId, strategies, fetchAll]);
+
   const backtestDetail = selectedBacktest ? parseDetail(selectedBacktest) : null;
 
   const activeSignals = useMemo((): BacktestSignal[] => {
@@ -289,7 +357,7 @@ export function BacktestHistoryPage({ theme = 'dark' }: Props) {
             <span className="btd-header-sub">Golden Analysis Command Center</span>
           </div>
         </header>
-        <div className="btd-loading">분석 데이터 로딩…</div>
+        <div className="btd-loading">분석 데이터 로딩 중…</div>
       </div>
     );
   }
@@ -301,6 +369,63 @@ export function BacktestHistoryPage({ theme = 'dark' }: Props) {
           <h1 className="btd-header-title">백테스팅</h1>
           <span className="btd-header-sub">Golden Analysis Command Center</span>
         </div>
+
+        {/* 빠른 실행 툴바 */}
+        <div className="btd-header-run">
+          <select
+            className="btd-run-select"
+            value={runMarket}
+            onChange={e => setRunMarket(e.target.value)}
+            disabled={runLoading}
+            title="종목"
+          >
+            {UPBIT_MARKETS.map(m => (
+              <option key={m} value={m}>{m.replace('KRW-', '')}</option>
+            ))}
+          </select>
+          <select
+            className="btd-run-select"
+            value={runTimeframe}
+            onChange={e => setRunTimeframe(e.target.value as Timeframe)}
+            disabled={runLoading}
+            title="타임프레임"
+          >
+            {QUICK_RUN_TIMEFRAMES.map(tf => (
+              <option key={tf.value} value={tf.value}>{tf.label}</option>
+            ))}
+          </select>
+          <select
+            className="btd-run-select btd-run-select--strategy"
+            value={runStrategyId ?? ''}
+            onChange={e => setRunStrategyId(e.target.value ? Number(e.target.value) : null)}
+            disabled={runLoading}
+            title="전략"
+          >
+            <option value="">전략 선택</option>
+            {strategies.map(s => (
+              <option key={s.id} value={s.id}>{s.name}</option>
+            ))}
+          </select>
+          <button
+            type="button"
+            className={`btd-run-btn${runLoading ? ' btd-run-btn--loading' : ''}`}
+            disabled={!runStrategyId || runLoading}
+            onClick={() => void handleQuickRun()}
+            title="백테스팅 실행"
+          >
+            {runLoading ? (
+              <span className="btd-run-spinner" />
+            ) : (
+              <svg viewBox="0 0 16 16" width="13" height="13" fill="currentColor" aria-hidden="true">
+                <path d="M3 2.5l10 5.5-10 5.5V2.5z" />
+              </svg>
+            )}
+          </button>
+          {runError && (
+            <span className="btd-run-error" title={runError}>⚠ {runError}</span>
+          )}
+        </div>
+
         <div className="btd-header-actions">
           <button type="button" className="btd-btn btd-btn--ghost" onClick={() => void fetchAll()}>새로고침</button>
           {tab === 'backtest' && (

frontend/src/styles/backtestDashboard.css

@@ -838,6 +838,93 @@
   gap: 8px;
 }
 
+/* ── 빠른 백테스팅 실행 툴바 ────────────────────────────────────────────── */
+.btd-header-run {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  justify-content: center;
+  min-width: 0;
+}
+
+.btd-run-select {
+  background: var(--se-bg-elevated, var(--bg2));
+  border: 1px solid var(--se-border);
+  color: var(--se-text);
+  border-radius: 7px;
+  padding: 5px 8px;
+  font-size: 0.76rem;
+  cursor: pointer;
+  height: 30px;
+  outline: none;
+  transition: border-color 0.15s;
+  min-width: 0;
+}
+.btd-run-select:focus {
+  border-color: var(--se-accent, #3d9be9);
+}
+.btd-run-select:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.btd-run-select--strategy {
+  flex: 1;
+  max-width: 180px;
+}
+
+.btd-run-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid var(--se-accent, #3d9be9);
+  background: color-mix(in srgb, var(--se-accent, #3d9be9) 18%, transparent);
+  color: var(--se-accent, #3d9be9);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, transform 0.1s;
+  flex-shrink: 0;
+}
+.btd-run-btn:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--se-accent, #3d9be9) 32%, transparent);
+  transform: scale(1.08);
+}
+.btd-run-btn:active:not(:disabled) {
+  transform: scale(0.95);
+}
+.btd-run-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.btd-run-btn--loading {
+  border-color: var(--se-text-muted);
+  color: var(--se-text-muted);
+}
+
+.btd-run-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: btd-spin 0.7s linear infinite;
+}
+@keyframes btd-spin {
+  to { transform: rotate(360deg); }
+}
+
+.btd-run-error {
+  font-size: 0.71rem;
+  color: var(--se-sell, #f23645);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
 .btd-btn {
   border: 1px solid var(--se-border);
   background: var(--se-bg-elevated, var(--bg2));