전략편집기 템플릿 탭 추가,수정, 삭제 기능 적용

2026-06-12 13:30:40 +09:00
parent 52137cf1db
commit cb1bde2563
4 changed files with 278 additions and 81 deletions
@@ -45,6 +45,7 @@ import {
  type StartCombineOp,
 } from '../utils/strategyStartNodes';
 import IndicatorPaletteTab from './strategyEditor/IndicatorPaletteTab';
+import TemplatePaletteTab, { type TemplatePaletteRow } from './strategyEditor/TemplatePaletteTab';
 import SidewaysFilterPaletteTab from './strategyEditor/SidewaysFilterPaletteTab';
 import { buildSidewaysFilterNode, loadSidewaysPaletteItems } from '../utils/sidewaysFilterPaletteStorage';
 import {
@@ -121,6 +122,7 @@ import {
 import {
  addUserStrategyTemplate,
  deleteUserStrategyTemplate,
+  updateUserStrategyTemplate,
  hideBuiltinTemplate,
  loadHiddenBuiltinTemplateIds,
  loadUserStrategyTemplates,
@@ -280,9 +282,13 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
    () => loadHiddenBuiltinTemplateIds(),
  );
  const [templateSaveOpen, setTemplateSaveOpen] = useState(false);
+  const [templateModalMode, setTemplateModalMode] = useState<'add' | 'edit'>('add');
+  const [templateEditId, setTemplateEditId] = useState<string | null>(null);
+  const [templateSaveUpdateContent, setTemplateSaveUpdateContent] = useState(false);
  const [templateSaveLabel, setTemplateSaveLabel] = useState('');
  const [templateSaveDesc, setTemplateSaveDesc] = useState('');
  const [templateSaveLabelError, setTemplateSaveLabelError] = useState(false);
+  const [selectedTemplateKey, setSelectedTemplateKey] = useState<string | null>(null);
  const [selectedPaletteKey, setSelectedPaletteKey] = useState<string | null>(null);
  const [stratName, setStratName] = useState('');
  const [stratDesc, setStratDesc] = useState('');
@@ -1416,24 +1422,87 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
    showSnack('템플릿을 목록에서 제거했습니다');
  }, []);

-  const openTemplateSaveModal = useCallback(() => {
+  const openTemplateAddModal = useCallback(() => {
    const hasContent = encodeConditionForSave(currentEditorState) != null || currentOrphans.length > 0;
    if (!hasContent) {
      showSnack('저장할 조건이 없습니다', false);
      return;
    }
+    setTemplateModalMode('add');
+    setTemplateEditId(null);
+    setTemplateSaveUpdateContent(false);
    setTemplateSaveLabel(stratName.trim() || `${signalTab === 'buy' ? '매수' : '매도'} 템플릿`);
    setTemplateSaveDesc('');
    setTemplateSaveLabelError(false);
    setTemplateSaveOpen(true);
  }, [currentEditorState, currentOrphans.length, stratName, signalTab]);

+  const openTemplateEditModal = useCallback(() => {
+    if (!selectedTemplateKey) {
+      window.alert('수정할 템플릿을 먼저 선택해 주세요.');
+      return;
+    }
+    const row = templateRows.find(r => r.key === selectedTemplateKey);
+    if (!row) return;
+    if (row.source !== 'user' || !row.user) {
+      window.alert('내 템플릿만 수정할 수 있습니다.');
+      return;
+    }
+    setTemplateModalMode('edit');
+    setTemplateEditId(row.user.id);
+    setTemplateSaveUpdateContent(false);
+    setTemplateSaveLabel(row.user.label);
+    setTemplateSaveDesc(row.user.description ?? '');
+    setTemplateSaveLabelError(false);
+    setTemplateSaveOpen(true);
+  }, [selectedTemplateKey, templateRows]);
+
+  const handleTemplateToolbarDelete = useCallback(() => {
+    if (!selectedTemplateKey) {
+      window.alert('삭제할 템플릿을 먼저 선택해 주세요.');
+      return;
+    }
+    const row = templateRows.find(r => r.key === selectedTemplateKey);
+    if (!row) return;
+    if (row.source === 'user' && row.user) {
+      handleDeleteUserTemplate(row.user.id, row.label);
+    } else if (row.source === 'builtin' && row.builtinId) {
+      handleDeleteBuiltinTemplate(row.builtinId, row.label);
+    }
+    setSelectedTemplateKey(null);
+  }, [selectedTemplateKey, templateRows, handleDeleteUserTemplate, handleDeleteBuiltinTemplate]);
+
+  const handleTemplateApply = useCallback((row: TemplatePaletteRow) => {
+    if (row.source === 'user' && row.user) applyUserTemplate(row.user);
+    else if (row.builtin) handleTemplate(row.builtin);
+  }, [applyUserTemplate, handleTemplate]);
+
  const handleTemplateSaveConfirm = useCallback(() => {
    const label = templateSaveLabel.trim();
    if (!label) {
      setTemplateSaveLabelError(true);
      return;
    }
+    if (templateModalMode === 'edit' && templateEditId) {
+      const patch: Parameters<typeof updateUserStrategyTemplate>[1] = {
+        label,
+        description: templateSaveDesc.trim() || undefined,
+      };
+      if (templateSaveUpdateContent) {
+        const hasContent = encodeConditionForSave(currentEditorState) != null || currentOrphans.length > 0;
+        if (!hasContent) {
+          showSnack('갱신할 조건이 없습니다', false);
+          return;
+        }
+        patch.signal = signalTab;
+        patch.editorState = toEditorState(currentRoot, currentLayout);
+        patch.orphans = currentOrphans;
+      }
+      setUserTemplates(updateUserStrategyTemplate(templateEditId, patch));
+      setTemplateSaveOpen(false);
+      showSnack(`"${label}" 템플릿을 수정했습니다`);
+      return;
+    }
    const saved = addUserStrategyTemplate({
      label,
      description: templateSaveDesc.trim() || undefined,
@@ -1442,16 +1511,21 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
      orphans: currentOrphans,
    });
    setUserTemplates(prev => [...prev, saved]);
+    setSelectedTemplateKey(saved.id);
    setTemplateSaveOpen(false);
    setRightTab('templates');
    showSnack(`"${saved.label}" 템플릿을 저장했습니다`);
  }, [
    templateSaveLabel,
    templateSaveDesc,
+    templateModalMode,
+    templateEditId,
+    templateSaveUpdateContent,
    signalTab,
    currentRoot,
    currentLayout,
    currentOrphans,
+    currentEditorState,
  ]);

  const handleQuickRun = useCallback(async () => {
@@ -1805,7 +1879,7 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
              <button
                type="button"
                className="se-btn se-btn--ghost se-btn--sm"
-                onClick={openTemplateSaveModal}
+                onClick={openTemplateAddModal}
                title="현재 탭(매수/매도) 조건을 템플릿 목록에 저장"
              >
                템플릿 저장
@@ -2145,64 +2219,17 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
            </>
          )}
          {rightTab === 'templates' && (
-            <>
-              <input
-                className="se-palette-search"
-                placeholder="템플릿 검색 (RSI, MA, 매수…)"
-                value={templateSearch}
-                onChange={e => setTemplateSearch(e.target.value)}
-              />
-              <div className="se-template-list">
-                {filteredTemplateRows.length === 0 ? (
-                  <div className="se-template-empty">검색 결과가 없습니다</div>
-                ) : (
-                  filteredTemplateRows.map(row => (
-                    <div key={row.key} className="se-template-row">
-                      <button
-                        type="button"
-                        className="se-template-item"
-                        onClick={() => {
-                          if (row.source === 'user') applyUserTemplate(row.user);
-                          else handleTemplate(row.builtin);
-                        }}
-                      >
-                        <span className="se-template-label">
-                          {row.source === 'user' && <span className="se-template-user-badge">내 템플릿</span>}
-                          {row.label}
-                        </span>
-                        {row.description && (
-                          <span className="se-template-desc">{row.description}</span>
-                        )}
-                        <span className={`se-template-signal se-template-signal--${row.signal}`}>
-                          {row.signal === 'buy' ? '매수' : '매도'}
-                        </span>
-                      </button>
-                      <button
-                        type="button"
-                        className="se-template-delete"
-                        title="템플릿 삭제"
-                        aria-label={`${row.label} 템플릿 삭제`}
-                        onClick={e => {
-                          e.stopPropagation();
-                          if (row.source === 'user') {
-                            handleDeleteUserTemplate(row.user.id, row.label);
-                          } else {
-                            handleDeleteBuiltinTemplate(row.builtinId, row.label);
-                          }
-                        }}
-                      >
-                        <svg viewBox="0 0 16 16" width="15" height="15" aria-hidden>
-                          <path
-                            fill="currentColor"
-                            d="M5.5 2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v.5H12a.5.5 0 0 1 0 1h-.55l-.62 8.07A1.5 1.5 0 0 1 9.83 13H6.17a1.5 1.5 0 0 1-1.49-1.43L4.05 3.5H4a.5.5 0 0 1 0-1h1.5V2zm1.5 0v.5h2V2H7zm-2.38 1.5l.58 7.53a.5.5 0 0 0 .5.47h3.66a.5.5 0 0 0 .5-.47l.58-7.53H4.62z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  ))
-                )}
-              </div>
-            </>
+            <TemplatePaletteTab
+              rows={filteredTemplateRows}
+              searchQuery={templateSearch}
+              onSearchChange={setTemplateSearch}
+              selectedKey={selectedTemplateKey}
+              onSelectKey={setSelectedTemplateKey}
+              onApply={handleTemplateApply}
+              onAdd={openTemplateAddModal}
+              onEdit={openTemplateEditModal}
+              onDelete={handleTemplateToolbarDelete}
+            />
          )}
          </div>
          </div>
@@ -2213,10 +2240,15 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
      </div>

      {templateSaveOpen && (
-        <DraggableModalFrame onClose={() => { setTemplateSaveLabelError(false); setTemplateSaveOpen(false); }} title="템플릿 저장">
+        <DraggableModalFrame
+          onClose={() => { setTemplateSaveLabelError(false); setTemplateSaveOpen(false); }}
+          title={templateModalMode === 'edit' ? '템플릿 수정' : '템플릿 저장'}
+        >
          <div className="se-modal-body">
            <p className="se-template-save-hint">
-              현재 <strong>{signalTab === 'buy' ? '매수' : '매도'}</strong> 탭 조건을 템플릿 목록에 저장합니다.
+              {templateModalMode === 'edit'
+                ? <>선택한 <strong>내 템플릿</strong>의 이름·설명을 수정합니다.</>
+                : <>현재 <strong>{signalTab === 'buy' ? '매수' : '매도'}</strong> 탭 조건을 템플릿 목록에 저장합니다.</>}
            </p>
            <label className="se-field-lbl">템플릿명 *</label>
            <input
@@ -2236,9 +2268,21 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
              rows={2}
              placeholder="템플릿 설명 (선택)"
            />
+            {templateModalMode === 'edit' && (
+              <label className="se-template-save-update">
+                <input
+                  type="checkbox"
+                  checked={templateSaveUpdateContent}
+                  onChange={e => setTemplateSaveUpdateContent(e.target.checked)}
+                />
+                <span>현재 {signalTab === 'buy' ? '매수' : '매도'} 탭 조건으로 내용 갱신</span>
+              </label>
+            )}
            <div className="se-modal-actions">
              <button type="button" className="se-btn se-btn--ghost" onClick={() => setTemplateSaveOpen(false)}>취소</button>
-              <button type="button" className="se-btn se-btn--gold" onClick={handleTemplateSaveConfirm}>저장</button>
+              <button type="button" className="se-btn se-btn--gold" onClick={handleTemplateSaveConfirm}>
+                {templateModalMode === 'edit' ? '수정' : '저장'}
+              </button>
            </div>
          </div>
        </DraggableModalFrame>
@@ -0,0 +1,127 @@
+import React from 'react';
+import type { StrategyTemplateDef } from '../../utils/strategyPresets';
+import type { UserStrategyTemplate } from '../../utils/strategyTemplateStorage';
+
+export type TemplatePaletteRow = {
+  key: string;
+  source: 'user' | 'builtin';
+  label: string;
+  description?: string;
+  signal: 'buy' | 'sell';
+  user?: UserStrategyTemplate;
+  builtinId?: string;
+  builtin?: StrategyTemplateDef;
+};
+
+interface Props {
+  rows: TemplatePaletteRow[];
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  selectedKey: string | null;
+  onSelectKey: (key: string | null) => void;
+  onApply: (row: TemplatePaletteRow) => void;
+  onAdd: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export default function TemplatePaletteTab({
+  rows,
+  searchQuery,
+  onSearchChange,
+  selectedKey,
+  onSelectKey,
+  onApply,
+  onAdd,
+  onEdit,
+  onDelete,
+}: Props) {
+  return (
+    <div className="se-palette-section se-palette-section--templates se-palette-section--scroll">
+      <div className="se-palette-toolbar">
+        <span className="se-palette-toolbar-title">템플릿</span>
+        <div className="se-palette-toolbar-actions" role="toolbar" aria-label="템플릿 관리">
+          <button
+            type="button"
+            className="se-palette-tool-btn"
+            title="현재 조건을 템플릿으로 추가"
+            aria-label="템플릿 추가"
+            onClick={onAdd}
+          >
+            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
+              <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            className="se-palette-tool-btn"
+            title="선택 템플릿 수정"
+            aria-label="템플릿 수정"
+            disabled={!selectedKey}
+            onClick={onEdit}
+          >
+            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
+              <path d="M4 20h4l10-10-4-4L4 16v4z" stroke="currentColor" strokeWidth="1.75" fill="none" strokeLinejoin="round" />
+              <path d="M14 6l4 4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            className="se-palette-tool-btn se-palette-tool-btn--danger"
+            title="선택 템플릿 삭제"
+            aria-label="템플릿 삭제"
+            disabled={!selectedKey}
+            onClick={onDelete}
+          >
+            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
+              <path d="M6 7h12M9 7V5h6v2M10 11v6M14 11v6M8 7l1 12h6l1-12" stroke="currentColor" strokeWidth="1.75" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <input
+        className="se-palette-search"
+        placeholder="템플릿 검색 (RSI, MA, 매수…)"
+        value={searchQuery}
+        onChange={e => onSearchChange(e.target.value)}
+      />
+
+      <div className="se-template-list">
+        {rows.length === 0 ? (
+          <div className="se-template-empty">검색 결과가 없습니다</div>
+        ) : (
+          rows.map(row => (
+            <div
+              key={row.key}
+              className={`se-template-row${selectedKey === row.key ? ' se-template-row--selected' : ''}`}
+              onClick={() => onSelectKey(row.key)}
+              onDoubleClick={() => onApply(row)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={e => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  onApply(row);
+                }
+              }}
+            >
+              <div className="se-template-item">
+                <span className="se-template-label">
+                  {row.source === 'user' && <span className="se-template-user-badge">내 템플릿</span>}
+                  {row.label}
+                </span>
+                {row.description && (
+                  <span className="se-template-desc">{row.description}</span>
+                )}
+                <span className={`se-template-signal se-template-signal--${row.signal}`}>
+                  {row.signal === 'buy' ? '매수' : '매도'}
+                </span>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}