전략빌더 상단 툴바에 빠른 백테스팅 실행 기능 추가

- StrategyEditorPage: 종목 검색(MarketSearchPanel), 타임프레임 select, 실행 버튼 UI 추가
- 백테스팅 완료 후 백테스팅 화면으로 자동 이동 (onNavigateToBacktest)
- BacktestHistoryPage: sessionStorage backtest_focus_id로 신규 결과 자동 선택
- App.tsx: StrategyEditorPage에 onNavigateToBacktest prop 전달
- strategyEditor.css: se-quick-run 툴바 스타일 추가

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Macbook
2026-06-11 16:15:30 +09:00
parent f23b9a2724
commit 7f1c63ef87
4 changed files with 244 additions and 3 deletions
+95
View File
@@ -59,6 +59,101 @@
.se-subtitle { font-size: 0.72rem; color: var(--se-text-muted); }
.se-subtitle-hint { color: var(--se-accent, #7aa2f7); font-weight: 500; }
/* ── 빠른 백테스팅 실행 툴바 (se-quick-run) ─────────────────────────────── */
.se-quick-run {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
justify-content: center;
min-width: 0;
}
.se-qr-market-btn {
display: flex;
align-items: center;
gap: 4px;
background: var(--se-btn-bg, var(--bg2));
border: 1px solid var(--se-border);
color: var(--se-text);
border-radius: 7px;
padding: 0 8px;
font-size: 0.76rem;
cursor: pointer;
height: 30px;
outline: none;
transition: border-color 0.15s, background 0.15s;
white-space: nowrap;
min-width: 88px;
max-width: 140px;
}
.se-qr-market-btn:hover:not(:disabled) {
border-color: var(--se-accent, #3d9be9);
background: color-mix(in srgb, var(--se-accent, #3d9be9) 8%, var(--se-btn-bg, var(--bg2)));
}
.se-qr-market-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.se-qr-market-ko { font-weight: 600; font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.se-qr-market-sym { font-size: 0.68rem; color: var(--se-text-muted); flex-shrink: 0; }
.se-qr-market-caret { flex-shrink: 0; opacity: 0.55; margin-left: 2px; }
.se-qr-select {
background: var(--se-btn-bg, 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;
}
.se-qr-select:focus { border-color: var(--se-accent, #3d9be9); }
.se-qr-select:disabled { opacity: 0.45; cursor: not-allowed; }
.se-qr-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, transform 0.1s;
flex-shrink: 0;
}
.se-qr-run-btn:hover:not(:disabled) {
background: color-mix(in srgb, var(--se-accent, #3d9be9) 32%, transparent);
transform: scale(1.08);
}
.se-qr-run-btn:active:not(:disabled) { transform: scale(0.95); }
.se-qr-run-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.se-qr-run-btn--loading { border-color: var(--se-text-muted); color: var(--se-text-muted); }
.se-qr-spinner {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: se-spin 0.7s linear infinite;
}
@keyframes se-spin { to { transform: rotate(360deg); } }
.se-qr-error {
font-size: 0.71rem;
color: var(--se-danger, #f23645);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
/* ─────────────────────────────────────────────────────────────────────────── */
.se-header-actions { display: flex; align-items: center; gap: 8px; }
.se-editor-mode {