전략평가 화면 전략템플릿 목록탭 적용

frontend/src/components/StrategyEditorPage.tsx

@@ -55,9 +55,9 @@ import {
   type PaletteItem,
 } from '../utils/strategyPaletteStorage';
 import {
-  buildCompositePaletteTemplateRows,
-  buildSidewaysPaletteTemplateRows,
-} from '../utils/strategyEditorTemplatePaletteRows';
+  buildStrategyTemplatePaletteRows,
+  filterStrategyTemplatePaletteRows,
+} from '../utils/strategyTemplateList';
 import {
   buildPriceExtremeBreakoutTree,
   isPriceExtremeBreakoutPairPaletteValue,
@@ -125,8 +125,6 @@ import {
   type StrategyEditorMode,
 } from '../utils/strategyEditorModeStorage';
 import {
-  getStrategyTemplates,
-  getBuiltinTemplateId,
   simpleTemplateToNode,
   type StrategyTemplateDef,
 } from '../utils/strategyPresets';
@@ -1398,55 +1396,21 @@ export default function StrategyEditorPage({
     scheduleStrategyPersist();
   }, [DEF, currentRoot, setCurrentRoot, scheduleStrategyPersist, sidewaysPalette]);
 
-  const templates = useMemo(() => getStrategyTemplates(DEF), [DEF]);
+  const templateRows = useMemo(
+    () => buildStrategyTemplatePaletteRows({
+      def: DEF,
+      userTemplates,
+      hiddenBuiltinTemplateIds,
+      compositePalette,
+      sidewaysPalette,
+    }),
+    [DEF, userTemplates, hiddenBuiltinTemplateIds, compositePalette, sidewaysPalette],
+  );
 
-  const templateRows = useMemo(() => {
-    const userRows: TemplatePaletteRow[] = userTemplates.map(t => ({
-      key: t.id,
-      source: 'user',
-      label: t.label,
-      description: t.description,
-      signal: t.signal,
-      user: t,
-    }));
-    const hidden = new Set(hiddenBuiltinTemplateIds);
-    const builtinRows: TemplatePaletteRow[] = templates
-      .filter(t => !hidden.has(getBuiltinTemplateId(t)))
-      .map(t => {
-        const builtinId = getBuiltinTemplateId(t);
-        return {
-          key: builtinId,
-          source: 'builtin',
-          label: t.label,
-          description: 'description' in t ? t.description : undefined,
-          signal: t.signal,
-          builtinId,
-          builtin: t,
-        };
-      });
-    const compositeRows: TemplatePaletteRow[] = buildCompositePaletteTemplateRows(compositePalette, hidden);
-    const sidewaysRows: TemplatePaletteRow[] = buildSidewaysPaletteTemplateRows(sidewaysPalette, hidden);
-    return [...userRows, ...builtinRows, ...compositeRows, ...sidewaysRows];
-  }, [userTemplates, templates, hiddenBuiltinTemplateIds, compositePalette, sidewaysPalette]);
-
-  const filteredTemplateRows = useMemo(() => {
-    const q = templateSearch.trim().toLowerCase();
-    if (!q) return templateRows;
-    return templateRows.filter(row => {
-      const signalLabel = row.signal === 'buy' ? '매수' : '매도';
-      const badge = row.source === 'user' ? '내 템플릿'
-        : row.source === 'composite-palette' ? '복합지표'
-          : row.source === 'sideways-palette' ? '횡보지표'
-            : '';
-      return (
-        row.label.toLowerCase().includes(q)
-        || row.description?.toLowerCase().includes(q)
-        || signalLabel.includes(q)
-        || row.signal.includes(q)
-        || badge.includes(q)
-      );
-    });
-  }, [templateRows, templateSearch]);
+  const filteredTemplateRows = useMemo(
+    () => filterStrategyTemplatePaletteRows(templateRows, templateSearch),
+    [templateRows, templateSearch],
+  );
 
   const handleTemplate = useCallback((tmpl: StrategyTemplateDef) => {
     if (editorMode === 'graph') layoutFlushRef.current?.();