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

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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Macbook
2026-06-11 16:00:20 +09:00
parent 33621883dc
commit b74f305654
2 changed files with 214 additions and 2 deletions
+87
View File
@@ -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));