전략편집기 목록 검색창

frontend/src/components/StrategyEditorPage.tsx

@@ -300,6 +300,7 @@ export default function StrategyEditorPage({
   const [compositePalette, setCompositePalette] = useState<PaletteItem[]>(() => loadPaletteItems('composite'));
   const [sidewaysPalette, setSidewaysPalette] = useState(() => loadSidewaysPaletteItems());
   const [paletteSearch, setPaletteSearch] = useState('');
+  const [strategyListSearch, setStrategyListSearch] = useState('');
   const [templateSearch, setTemplateSearch] = useState('');
   const [userTemplates, setUserTemplates] = useState<UserStrategyTemplate[]>(() => loadUserStrategyTemplates());
   const [hiddenBuiltinTemplateIds, setHiddenBuiltinTemplateIds] = useState<string[]>(
@@ -1710,6 +1711,16 @@ export default function StrategyEditorPage({
   const match = (label: string, desc?: string) =>
     !q || label.toLowerCase().includes(q) || (desc?.toLowerCase().includes(q) ?? false);
 
+  const strategySearchQuery = strategyListSearch.trim().toLowerCase();
+  const filteredStrategies = useMemo(() => {
+    if (!strategySearchQuery) return strategies;
+    return strategies.filter(s => {
+      const name = s.name?.toLowerCase() ?? '';
+      const desc = s.description?.toLowerCase() ?? '';
+      return name.includes(strategySearchQuery) || desc.includes(strategySearchQuery);
+    });
+  }, [strategies, strategySearchQuery]);
+
   const paletteKey = (type: string, id: string) => `${type}:${id}`;
   const selectPalette = (type: string, id: string) => {
     setSelectedPaletteKey(paletteKey(type, id));
@@ -1880,6 +1891,14 @@ export default function StrategyEditorPage({
           <div className="se-strat-panel">
             <div className="se-strat-panel-head">
               <h2 className="se-panel-title">전략 목록</h2>
+              <input
+                type="search"
+                className="se-strat-search"
+                placeholder="전략 검색…"
+                value={strategyListSearch}
+                onChange={e => setStrategyListSearch(e.target.value)}
+                aria-label="전략 목록 검색"
+              />
             </div>
             <button type="button" className="se-new-strat-btn" onClick={handleNew}>
               ＋ 새 전략 만들기
@@ -1887,8 +1906,10 @@ export default function StrategyEditorPage({
             <div className="se-strat-list">
               {strategies.length === 0 ? (
                 <p className="se-empty">저장된 전략이 없습니다</p>
+              ) : filteredStrategies.length === 0 ? (
+                <p className="se-empty">검색 결과가 없습니다</p>
               ) : (
-                strategies.map(s => {
+                filteredStrategies.map(s => {
                   const isSel = selectedId === s.id;
                   return (
                     <div