From d80a854d5bf4e15d399dfe6b4c5cfcf6eeed1122 Mon Sep 17 00:00:00 2001
From: Macbook <macbook@172-11-15-119.lightspeed.chrlnc.sbcglobal.net>
Date: Fri, 12 Jun 2026 14:42:12 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A0=84=EB=9E=B5=ED=8F=89=EA=B0=80=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=A0=84=EB=9E=B8=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/StrategyEvaluationPage.tsx | 18 ++++++++++++++
 .../StrategyEvaluationChart.tsx               | 24 +++++++++++++++++++
 frontend/src/styles/strategyEvaluation.css    |  7 ++++++
 3 files changed, 49 insertions(+)

diff --git a/frontend/src/components/StrategyEvaluationPage.tsx b/frontend/src/components/StrategyEvaluationPage.tsx
index 9fd49c1..d137d33 100644
--- a/frontend/src/components/StrategyEvaluationPage.tsx
+++ b/frontend/src/components/StrategyEvaluationPage.tsx
@@ -183,9 +183,24 @@ export default function StrategyEvaluationPage({ theme = 'dark' }: Props) {
     setSelectedStrategy(hydrateStrategyDto(s));
     setAppliedIndicatorParams(null);
     setParamsRevision(v => v + 1);
+    setTimeframeChoice(BACKTEST_STRATEGY_TIMEFRAME);
     setLeftTab('strategy');
   }, []);
 
+  const handleSelectStrategyById = useCallback((id: number) => {
+    const found = strategies.find(s => s.id === id);
+    if (found) {
+      handleSelectStrategy(found);
+      return;
+    }
+    setSelectedStrategyId(id);
+    setSelectedStrategy(null);
+    setAppliedIndicatorParams(null);
+    setParamsRevision(v => v + 1);
+    setTimeframeChoice(BACKTEST_STRATEGY_TIMEFRAME);
+    setLeftTab('strategy');
+  }, [strategies, handleSelectStrategy]);
+
   const handleSaveIndicatorParams = useCallback((params: EvalIndicatorParams) => {
     setAppliedIndicatorParams(params);
     setParamsRevision(v => v + 1);
@@ -308,6 +323,9 @@ export default function StrategyEvaluationPage({ theme = 'dark' }: Props) {
               timeframe={chartTimeframe}
               timeframeChoice={timeframeChoice}
               tfOptions={tfOptions}
+              strategies={strategies}
+              selectedStrategyId={selectedStrategyId}
+              onStrategySelect={handleSelectStrategyById}
               onMarketChange={setMarket}
               onTimeframeChoiceChange={setTimeframeChoice}
               theme={theme}
diff --git a/frontend/src/components/strategyEvaluation/StrategyEvaluationChart.tsx b/frontend/src/components/strategyEvaluation/StrategyEvaluationChart.tsx
index 0a376e7..bd00abb 100644
--- a/frontend/src/components/strategyEvaluation/StrategyEvaluationChart.tsx
+++ b/frontend/src/components/strategyEvaluation/StrategyEvaluationChart.tsx
@@ -19,6 +19,7 @@ import { loadBacktestSettings, runBacktest } from '../../utils/backendApi';
 import { buildVirtualTradingChartIndicators } from '../../utils/strategyToChartIndicators';
 import { buildEvalParamsFromStrategy } from '../../utils/strategyEvaluationParams';
 import { resolveEvaluationFromLoadedBars } from '../../utils/backtestWarmup';
+import { repairUtf8Mojibake } from '../../utils/textEncoding';
 import StrategyEvaluationBarSelector from './StrategyEvaluationBarSelector';
 import {
   parseBacktestRunTimeframeChoice,
@@ -30,6 +31,9 @@ interface Props {
   timeframe: Timeframe;
   timeframeChoice: BacktestRunTimeframeChoice;
   tfOptions: { value: string; label: string }[];
+  strategies: StrategyDto[];
+  selectedStrategyId: number | null;
+  onStrategySelect: (strategyId: number) => void;
   onMarketChange: (market: string) => void;
   onTimeframeChoiceChange: (choice: BacktestRunTimeframeChoice) => void;
   theme?: Theme;
@@ -67,6 +71,9 @@ const StrategyEvaluationChart: React.FC<Props> = ({
   timeframe,
   timeframeChoice,
   tfOptions,
+  strategies,
+  selectedStrategyId,
+  onStrategySelect,
   onMarketChange,
   onTimeframeChoiceChange,
   theme = 'dark',
@@ -326,6 +333,23 @@ const StrategyEvaluationChart: React.FC<Props> = ({
               <option key={o.value} value={o.value}>{o.label}</option>
             ))}
           </select>
+          <select
+            className="btd-run-select btd-run-select--strategy seval-chart-strategy-select"
+            value={selectedStrategyId ?? ''}
+            onChange={e => {
+              const raw = e.target.value;
+              if (!raw) return;
+              onStrategySelect(Number(raw));
+            }}
+            title="전략"
+          >
+            <option value="">전략 선택</option>
+            {strategies.map(s => (
+              <option key={s.id} value={s.id ?? ''}>
+                {repairUtf8Mojibake(s.name ?? `전략 #${s.id}`)}
+              </option>
+            ))}
+          </select>
           {selectedBar && (
             <span className="seval-chart-bar-time">
               {new Date(selectedBar.time * 1000).toLocaleString('ko-KR')}
diff --git a/frontend/src/styles/strategyEvaluation.css b/frontend/src/styles/strategyEvaluation.css
index 93daf95..e590f1a 100644
--- a/frontend/src/styles/strategyEvaluation.css
+++ b/frontend/src/styles/strategyEvaluation.css
@@ -45,6 +45,13 @@
   gap: 6px;
   flex-wrap: wrap;
   min-width: 0;
+  flex: 1;
+}
+
+.seval-chart-strategy-select {
+  flex: 1 1 140px;
+  max-width: 220px;
+  min-width: 120px;
 }
 
 .seval-chart-bar-time {