전략평가 화면 종목리스트 기능 추가

This commit is contained in:
Macbook
2026-06-17 00:12:35 +09:00
parent a6e889a579
commit 4a4f20c41e
3 changed files with 109 additions and 2 deletions
@@ -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>
@@ -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;