From 4a4f20c41e358aa21f671b56004f3b2a57707ef2 Mon Sep 17 00:00:00 2001
From: Macbook <macbook@Macbookui-MacBookPro.local>
Date: Wed, 17 Jun 2026 00:12:35 +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=A2=85=EB=AA=A9=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B8=B0=EB=8A=A5=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 | 20 +++++++-
 .../StrategyEvaluationMarketTab.tsx           | 48 +++++++++++++++++++
 frontend/src/styles/strategyEvaluation.css    | 43 +++++++++++++++++
 3 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/strategyEvaluation/StrategyEvaluationMarketTab.tsx

diff --git a/frontend/src/components/StrategyEvaluationPage.tsx b/frontend/src/components/StrategyEvaluationPage.tsx
index f67a9b9..275266b 100644
--- a/frontend/src/components/StrategyEvaluationPage.tsx
+++ b/frontend/src/components/StrategyEvaluationPage.tsx
@@ -25,6 +25,7 @@ import StrategyEvaluationSignalPanel from './strategyEvaluation/StrategyEvaluati
 import StrategyEvaluationChart from './strategyEvaluation/StrategyEvaluationChart';
 import StrategyEvaluationConditionPanel from './strategyEvaluation/StrategyEvaluationConditionPanel';
 import StrategyEvaluationSettingsTab from './strategyEvaluation/StrategyEvaluationSettingsTab';
+import StrategyEvaluationMarketTab from './strategyEvaluation/StrategyEvaluationMarketTab';
 import StrategyEditorModal from './strategyEvaluation/StrategyEditorModal';
 import SePanelCollapseHandle from './strategyEditor/SePanelCollapseHandle';
 import { readStoredSize, readStoredBool, storeBool, storeSize, usePanelResize } from './strategyEditor/usePanelResize';
@@ -55,7 +56,7 @@ const RIGHT_OPEN_KEY = 'seval-right-open';
 const LEFT_DEFAULT = 380;
 const RIGHT_DEFAULT = 440;
 
-type LeftTab = 'strategy' | 'settings';
+type LeftTab = 'strategy' | 'market' | 'settings';
 
 function readMinWidth(key: string, fallback: number): number {
   return Math.max(readStoredSize(key, fallback), fallback);
@@ -456,6 +457,15 @@ export default function StrategyEvaluationPage({ theme = 'dark' }: Props) {
                 >
                   전략
                 </button>
+                <button
+                  type="button"
+                  role="tab"
+                  aria-selected={leftTab === 'market'}
+                  className={`btd-exec-tab${leftTab === 'market' ? ' btd-exec-tab--on' : ''}`}
+                  onClick={() => setLeftTab('market')}
+                >
+                  종목
+                </button>
                 <button
                   type="button"
                   role="tab"
@@ -529,6 +539,12 @@ export default function StrategyEvaluationPage({ theme = 'dark' }: Props) {
                   )}
                 </div>
               </>
+            ) : leftTab === 'market' ? (
+              <StrategyEvaluationMarketTab
+                activeMarket={market}
+                onSelectMarket={setMarket}
+                enabled={leftOpen && leftTab === 'market'}
+              />
             ) : (
               <StrategyEvaluationSettingsTab
                 strategy={selectedStrategy}
@@ -545,7 +561,7 @@ export default function StrategyEvaluationPage({ theme = 'dark' }: Props) {
             side="left"
             open={leftOpen}
             onToggle={toggleLeftPanel}
-            label="전략 패널"
+            label={leftTab === 'market' ? '종목 패널' : '전략 패널'}
           />
         </div>
 
diff --git a/frontend/src/components/strategyEvaluation/StrategyEvaluationMarketTab.tsx b/frontend/src/components/strategyEvaluation/StrategyEvaluationMarketTab.tsx
new file mode 100644
index 0000000..7dcb51c
--- /dev/null
+++ b/frontend/src/components/strategyEvaluation/StrategyEvaluationMarketTab.tsx
@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import MarketPanel from '../MarketPanel';
+import { useMarketTicker } from '../../hooks/useMarketTicker';
+
+interface Props {
+  activeMarket: string;
+  onSelectMarket: (market: string) => void;
+  /** 종목 탭 표시 중 — 전 종목 시세 로드 */
+  enabled: boolean;
+}
+
+/** 전략평가 좌측 — 실시간 차트 MarketPanel 과 동일 종목 목록 */
+const StrategyEvaluationMarketTab: React.FC<Props> = ({
+  activeMarket,
+  onSelectMarket,
+  enabled,
+}) => {
+  const tickerOpts = useMemo(() => ({
+    enabled,
+    loadFull: enabled,
+    priorityMarkets: [activeMarket],
+  }), [enabled, activeMarket]);
+
+  const {
+    tickers,
+    marketInfos,
+    loading,
+    usdRate,
+    refreshAllTickers,
+  } = useMarketTicker(tickerOpts);
+
+  return (
+    <div className="seval-market-tab">
+      <MarketPanel
+        open
+        tickers={tickers}
+        marketInfos={marketInfos}
+        loading={loading}
+        usdRate={usdRate}
+        refreshAllTickers={refreshAllTickers}
+        activeSymbol={activeMarket}
+        onSymbolSelect={onSelectMarket}
+      />
+    </div>
+  );
+};
+
+export default StrategyEvaluationMarketTab;
diff --git a/frontend/src/styles/strategyEvaluation.css b/frontend/src/styles/strategyEvaluation.css
index 1d506e1..692fcab 100644
--- a/frontend/src/styles/strategyEvaluation.css
+++ b/frontend/src/styles/strategyEvaluation.css
@@ -168,6 +168,49 @@
   height: 100%;
 }
 
+/* ── 좌측 종목 탭 (실시간 차트 MarketPanel 임베드) ─────────────────────────── */
+.seval-market-tab {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.seval-market-tab .market-panel {
+  position: relative !important;
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  flex: 1;
+  transform: none !important;
+  height: 100% !important;
+  min-height: 0;
+  box-shadow: none;
+  border: none;
+  overflow: hidden;
+}
+
+.seval-market-tab .market-panel--open {
+  width: 100% !important;
+}
+
+.seval-market-tab .mp-body {
+  width: 100% !important;
+  min-width: 0 !important;
+  height: 100%;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.seval-market-tab .mp-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
 .seval-left-tabs-row {
   display: flex;
   align-items: flex-end;