전략편집기 목록 검색창

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

frontend/src/styles/strategyEditor.css

@@ -543,11 +543,33 @@
 }
 
 .se-strat-panel-head {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
   margin-bottom: 12px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--se-border);
 }
 
+.se-strat-search {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--se-input-border);
+  background: var(--se-input-bg);
+  color: var(--se-text);
+  font-size: 0.78rem;
+}
+.se-strat-search:focus {
+  outline: none;
+  border-color: var(--se-input-focus);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--se-accent) 12%, transparent);
+}
+.se-strat-search::placeholder {
+  color: var(--se-text-muted);
+}
+
 .se-panel-title {
   margin: 0;
   font-size: 0.88rem;