42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { VirtualScroll } from '../../components/common/VirtualScroll';
|
|
import { useWidgetDashboard } from '../WidgetDashboardContext';
|
|
|
|
/** 전략 목록 — API 로드된 strategies 재사용 */
|
|
const StrategyListWidgetHost: React.FC = () => {
|
|
const { strategies, selectedStrategyId, setSelectedStrategyId } = useWidgetDashboard();
|
|
|
|
if (strategies.length === 0) {
|
|
return <p className="wd-widget-empty">등록된 전략이 없습니다.</p>;
|
|
}
|
|
|
|
return (
|
|
<div className="wd-widget-host wd-widget-host--strategy-list">
|
|
<VirtualScroll
|
|
className="wd-strategy-scroll vl-scroll"
|
|
items={strategies}
|
|
estimateSize={44}
|
|
overscan={5}
|
|
getItemKey={s => String(s.id)}
|
|
innerClassName="vl-scroll-inner wd-strategy-list"
|
|
aria-label="전략 목록"
|
|
>
|
|
{s => (
|
|
<button
|
|
type="button"
|
|
className={`wd-strategy-item${selectedStrategyId === s.id ? ' wd-strategy-item--on' : ''}`}
|
|
onClick={() => setSelectedStrategyId(s.id ?? null)}
|
|
>
|
|
<span className="wd-strategy-item-name">{s.name}</span>
|
|
{s.description && (
|
|
<span className="wd-strategy-item-desc">{s.description}</span>
|
|
)}
|
|
</button>
|
|
)}
|
|
</VirtualScroll>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StrategyListWidgetHost;
|