전략편집기 병합

frontend/src/components/StrategyEditorPage.tsx

@@ -30,7 +30,13 @@ import {
 } from '../utils/strategyEditorLayoutStorage';
 import LogicExpressionPreview from './strategyEditor/LogicExpressionPreview';
 import StrategyEditorCanvas, { type FlowLayoutSeed } from './strategyEditor/StrategyEditorCanvas';
+import StrategyListEditor from './strategyEditor/StrategyListEditor';
 import { layoutFlushRef } from './strategyEditor/strategyEditorCallbacks';
+import {
+  loadEditorMode,
+  saveEditorMode,
+  type StrategyEditorMode,
+} from '../utils/strategyEditorModeStorage';
 import PaletteChip from './strategyEditor/PaletteChip';
 import { readStoredSize, storeSize, usePanelResize } from './strategyEditor/usePanelResize';
 import '../styles/strategyEditor.css';
@@ -105,6 +111,7 @@ export default function StrategyEditorPage({ theme, activeIndicators = [] }: Pro
   terminalHeightRef.current = terminalHeight;
 
   const [layoutSeedKey, setLayoutSeedKey] = useState('draft:buy:0');
+  const [editorMode, setEditorMode] = useState<StrategyEditorMode>(() => loadEditorMode());
 
   const onLeftSplitter = usePanelResize(
     'vertical',
@@ -216,13 +223,27 @@ export default function StrategyEditorPage({ theme, activeIndicators = [] }: Pro
   }, [layoutStrategyKey, schedulePersistFlowLayout]);
 
   const switchSignalTab = useCallback((tab: 'buy' | 'sell') => {
-    layoutFlushRef.current?.();
+    if (editorMode === 'graph') layoutFlushRef.current?.();
     persistFlowLayout(layoutStrategyKey);
     layoutRevisionRef.current += 1;
     setLayoutSeedKey(`${layoutStrategyKey}:${tab}:${layoutRevisionRef.current}`);
     setSignalTab(tab);
     setSelectedNodeId(null);
-  }, [layoutStrategyKey, persistFlowLayout]);
+  }, [layoutStrategyKey, persistFlowLayout, editorMode]);
+
+  const handleEditorModeChange = useCallback((mode: StrategyEditorMode) => {
+    if (mode === editorMode) return;
+    if (editorMode === 'graph') {
+      layoutFlushRef.current?.();
+      persistFlowLayout(layoutStrategyKey);
+    }
+    if (mode === 'list' && (buyOrphans.length > 0 || sellOrphans.length > 0)) {
+      showSnack('목록 방식에서는 미연결(고아) 노드가 표시되지 않습니다', false);
+    }
+    setEditorMode(mode);
+    saveEditorMode(mode);
+    setSelectedNodeId(null);
+  }, [editorMode, layoutStrategyKey, persistFlowLayout, buyOrphans.length, sellOrphans.length]);
 
   const layoutSeed = useMemo((): FlowLayoutSeed => {
     const source = signalTab === 'buy' ? buyLayout : sellLayout;
@@ -444,6 +465,22 @@ export default function StrategyEditorPage({ theme, activeIndicators = [] }: Pro
           <span className="se-subtitle">Strategy Builder</span>
         </div>
         <div className="se-header-actions">
+          <div className="se-editor-mode" role="group" aria-label="편집 방식">
+            <button
+              type="button"
+              className={`se-editor-mode-btn${editorMode === 'graph' ? ' se-editor-mode-btn--on' : ''}`}
+              onClick={() => handleEditorModeChange('graph')}
+            >
+              그래프 방식
+            </button>
+            <button
+              type="button"
+              className={`se-editor-mode-btn${editorMode === 'list' ? ' se-editor-mode-btn--on' : ''}`}
+              onClick={() => handleEditorModeChange('list')}
+            >
+              목록 방식
+            </button>
+          </div>
           <button type="button" className="se-btn se-btn--ghost" onClick={handleNew}>＋ 새 전략</button>
           <button type="button" className="se-btn se-btn--gold" onClick={() => setSaveOpen(true)}>저장하기</button>
         </div>
@@ -539,43 +576,54 @@ export default function StrategyEditorPage({ theme, activeIndicators = [] }: Pro
             {stratName && <span className="se-editing-name">{stratName}</span>}
             </div>
 
-          <ReactFlowProvider>
-            <StrategyEditorCanvas
-              theme={theme}
-              root={currentRoot}
-              orphans={currentOrphans}
-              onOrphansChange={setCurrentOrphans}
-              def={DEF}
-              signalTab={signalTab}
-              onChange={setCurrentRoot}
-              selectedNodeId={selectedNodeId}
-              onSelectNode={setSelectedNodeId}
-              layoutSeed={layoutSeed}
-              onLayoutChange={handleLayoutChange}
-            />
-          </ReactFlowProvider>
+          {editorMode === 'graph' ? (
+            <>
+              <ReactFlowProvider>
+                <StrategyEditorCanvas
+                  theme={theme}
+                  root={currentRoot}
+                  orphans={currentOrphans}
+                  onOrphansChange={setCurrentOrphans}
+                  def={DEF}
+                  signalTab={signalTab}
+                  onChange={setCurrentRoot}
+                  selectedNodeId={selectedNodeId}
+                  onSelectNode={setSelectedNodeId}
+                  layoutSeed={layoutSeed}
+                  onLayoutChange={handleLayoutChange}
+                />
+              </ReactFlowProvider>
 
-          {selectedLogicNode?.type === 'CONDITION' && selectedLogicNode.condition && (
-            <div className="se-node-config-bar">
-              <span className="se-node-config-label">{selectedLogicNode.condition.indicatorType}</span>
-              <CondEditor
-                cond={selectedLogicNode.condition}
-                signalType={signalTab}
-                def={DEF}
-                onChange={c => {
-                  if (!selectedNodeId) return;
-                  const inOrphans = currentOrphans.some(o => o.id === selectedNodeId);
-                  if (inOrphans) {
-                    setCurrentOrphans(currentOrphans.map(o => (
-                      o.id === selectedNodeId ? updateNode(o, selectedNodeId, n => ({ ...n, condition: c })) : o
-                    )));
-                  } else if (currentRoot) {
-                    setCurrentRoot(updateNode(currentRoot, selectedNodeId, n => ({ ...n, condition: c })));
-                  }
-                }}
-              />
-              <span className="se-sync-tip">차트 설정 동기화 · 기간 {getIndicatorPeriodLabel(selectedLogicNode.condition.indicatorType, DEF) || '—'}</span>
-            </div>
+              {selectedLogicNode?.type === 'CONDITION' && selectedLogicNode.condition && (
+                <div className="se-node-config-bar">
+                  <span className="se-node-config-label">{selectedLogicNode.condition.indicatorType}</span>
+                  <CondEditor
+                    cond={selectedLogicNode.condition}
+                    signalType={signalTab}
+                    def={DEF}
+                    onChange={c => {
+                      if (!selectedNodeId) return;
+                      const inOrphans = currentOrphans.some(o => o.id === selectedNodeId);
+                      if (inOrphans) {
+                        setCurrentOrphans(currentOrphans.map(o => (
+                          o.id === selectedNodeId ? updateNode(o, selectedNodeId, n => ({ ...n, condition: c })) : o
+                        )));
+                      } else if (currentRoot) {
+                        setCurrentRoot(updateNode(currentRoot, selectedNodeId, n => ({ ...n, condition: c })));
+                      }
+                    }}
+                  />
+                  <span className="se-sync-tip">차트 설정 동기화 · 기간 {getIndicatorPeriodLabel(selectedLogicNode.condition.indicatorType, DEF) || '—'}</span>
+                </div>
+              )}
+            </>
+          ) : (
+            <StrategyListEditor
+              root={currentRoot}
+              signalTab={signalTab}
+              def={DEF}
+              onChange={setCurrentRoot}
+            />
           )}
 
           </div>

frontend/src/components/StrategyPage.tsx

@@ -1269,47 +1269,98 @@ export const StrategyPage: React.FC<Props> = ({ activeIndicators = [] }) => {
           <div className="sp-panel-body">
             {/* 전략 목록 */}
             {rightTab === 'list' && (
-              <div>
-                {isLoading ? (
-                  <div className="sp-loading">로딩 중...</div>
-                ) : strategies.length === 0 ? (
-                  <div className="sp-empty-info">저장된 전략이 없습니다</div>
-                ) : (
-                  <>
-                    <div className="sp-list-header">
-                      <span>전략: {strategies.length}개</span>
-                      <select className="sp-sort-sel" value={sortOrder}
-                        onChange={e => setSortOrder(e.target.value as any)}>
-                        <option value="name-asc">이름(A)</option>
-                        <option value="name-desc">이름(D)</option>
-                        <option value="date-asc">날짜(A)</option>
-                        <option value="date-desc">날짜(D)</option>
-                      </select>
-                    </div>
-                    {sortedStrategies.map(s => (
-                      <div key={s.id}
-                        className={`sp-list-item ${selectedId === s.id ? 'sp-list-item--sel' : ''}`}
-                        onClick={() => handleSelectStrategy(s)}>
-                        <div className="sp-li-row1">
-                          <span className="sp-li-name">{s.name}</span>
-                          <span className={`sp-li-chip sp-li-chip--type`}>드래그방식</span>
-                          <span className={`sp-li-chip ${s.enabled ? 'sp-li-chip--on' : 'sp-li-chip--off'}`}>
-                            {s.enabled ? '활성' : '비활성'}
-                          </span>
+              <div className="sp-strat-panel">
+                <div className="sp-strat-panel-head">
+                  <h2 className="sp-strat-panel-title">전략 목록</h2>
+                  {strategies.length > 0 && (
+                    <select
+                      className="sp-strat-sort"
+                      value={sortOrder}
+                      onChange={e => setSortOrder(e.target.value as typeof sortOrder)}
+                      aria-label="전략 정렬"
+                    >
+                      <option value="name-asc">이름(A)</option>
+                      <option value="name-desc">이름(D)</option>
+                      <option value="date-asc">날짜(A)</option>
+                      <option value="date-desc">날짜(D)</option>
+                    </select>
+                  )}
+                </div>
+                <button type="button" className="sp-new-strat-btn" onClick={handleNew}>
+                  ＋ 새 전략 만들기
+                </button>
+                <div className="sp-strat-list">
+                  {isLoading ? (
+                    <p className="sp-strat-empty">로딩 중...</p>
+                  ) : strategies.length === 0 ? (
+                    <p className="sp-strat-empty">저장된 전략이 없습니다</p>
+                  ) : (
+                    sortedStrategies.map(s => {
+                      const isSel = selectedId === s.id;
+                      return (
+                        <div
+                          key={s.id}
+                          role="button"
+                          tabIndex={0}
+                          className={`sp-strat-item${isSel ? ' sp-strat-item--sel' : ''}`}
+                          onClick={() => handleSelectStrategy(s)}
+                          onKeyDown={e => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault();
+                              handleSelectStrategy(s);
+                            }
+                          }}
+                        >
+                          <span className="sp-strat-name" title={s.name}>{s.name}</span>
+                          <div className="sp-strat-item-actions">
+                            <button
+                              type="button"
+                              className="sp-strat-action"
+                              title={s.enabled ? '알림 해제' : '알림 추가'}
+                              onClick={e => {
+                                e.stopPropagation();
+                                handleToggleEnabled(s.id);
+                              }}
+                            >
+                              {s.enabled ? '🔔' : '🔕'}
+                            </button>
+                            <button
+                              type="button"
+                              className="sp-strat-action"
+                              title="복제"
+                              onClick={e => {
+                                e.stopPropagation();
+                                handleDuplicate(s);
+                              }}
+                            >
+                              ⎘
+                            </button>
+                            <button
+                              type="button"
+                              className="sp-strat-del"
+                              title="전략 삭제"
+                              onClick={e => {
+                                e.stopPropagation();
+                                setDeleteId(s.id);
+                                setDeleteOpen(true);
+                              }}
+                            >
+                              <svg viewBox="0 0 16 16" width="14" height="14" 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>
+                            <span className={`sp-strat-status${s.enabled ? ' sp-strat-status--on' : ''}`}>
+                              {s.enabled ? '활성' : '비활성'}
+                            </span>
+                          </div>
                         </div>
-                        <div className="sp-li-actions" onClick={e => e.stopPropagation()}>
-                          <button className="sp-li-btn" title={s.enabled ? '알림 해제' : '알림 추가'}
-                            onClick={() => handleToggleEnabled(s.id)}>
-                            {s.enabled ? '🔔' : '🔕'}
-                          </button>
-                          <button className="sp-li-btn" title="복제" onClick={() => handleDuplicate(s)}>⎘</button>
-                          <button className="sp-li-btn sp-li-btn--del" title="삭제"
-                            onClick={() => { setDeleteId(s.id); setDeleteOpen(true); }}>🗑</button>
-                        </div>
-                      </div>
-                    ))}
-                  </>
-                )}
+                      );
+                    })
+                  )}
+                </div>
               </div>
             )}
 

frontend/src/components/strategyEditor/StrategyListEditor.tsx

@@ -0,0 +1,187 @@
+import React, { useCallback, useState } from 'react';
+import type { LogicNode } from '../../utils/strategyTypes';
+import {
+  CondEditor,
+  addChild,
+  makeNode,
+  mergeAtRoot,
+  nodeToText,
+  type DefType,
+} from '../../utils/strategyEditorShared';
+
+const NODE_COLORS: Record<string, string> = {
+  AND: '#4caf50',
+  OR: '#2196f3',
+  NOT: '#ff9800',
+};
+const IND_COLOR = '#9c27b0';
+
+interface TreeNodeProps {
+  node: LogicNode;
+  signalType: 'buy' | 'sell';
+  onUpdate: (n: LogicNode) => void;
+  onDelete: () => void;
+  onDropOnNode?: (targetId: string, data: { type: string; value: string; label: string }) => void;
+  dragOverId?: string | null;
+  setDragOverId?: (id: string | null) => void;
+  depth?: number;
+  def: DefType;
+}
+
+const TreeNodeComp: React.FC<TreeNodeProps> = ({
+  node,
+  signalType,
+  onUpdate,
+  onDelete,
+  onDropOnNode,
+  dragOverId,
+  setDragOverId,
+  depth = 0,
+  def,
+}) => {
+  const isLogic = ['AND', 'OR', 'NOT'].includes(node.type);
+  const color = isLogic ? NODE_COLORS[node.type] : IND_COLOR;
+  const label = node.type === 'CONDITION' && node.condition
+    ? nodeToText(node, def)
+    : node.type === 'AND'
+      ? 'AND (그리고)'
+      : node.type === 'OR'
+        ? 'OR (또는)'
+        : 'NOT (반대)';
+
+  const handleDragOver = (e: React.DragEvent) => {
+    if (!isLogic) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOverId?.(node.id);
+  };
+  const handleDragLeave = () => setDragOverId?.(null);
+  const handleDrop = (e: React.DragEvent) => {
+    if (!isLogic) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOverId?.(null);
+    try {
+      const data = JSON.parse(e.dataTransfer.getData('application/json'));
+      onDropOnNode?.(node.id, data);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const handleCondChange = (c: NonNullable<LogicNode['condition']>) => onUpdate({ ...node, condition: c });
+  const handleChildUpdate = (childId: string, updated: LogicNode) =>
+    onUpdate({ ...node, children: (node.children ?? []).map(c => (c.id === childId ? updated : c)) });
+  const handleChildDelete = (childId: string) =>
+    onUpdate({ ...node, children: (node.children ?? []).filter(c => c.id !== childId) });
+
+  return (
+    <div
+      className={`sp-tree-node${dragOverId === node.id ? ' sp-tree-node--over' : ''}`}
+      style={{ marginLeft: depth > 0 ? 12 : 0 }}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <div className="sp-node-head" style={{ borderLeftColor: color }}>
+        <span className="sp-node-badge" style={{ background: color }}>
+          {node.type === 'CONDITION' && node.condition ? node.condition.indicatorType : node.type}
+        </span>
+        <span className="sp-node-label">{label}</span>
+        <button type="button" className="sp-node-del" title="삭제" onClick={onDelete}>✕</button>
+      </div>
+
+      {node.type === 'CONDITION' && node.condition && (
+        <CondEditor cond={node.condition} signalType={signalType} onChange={handleCondChange} def={def} />
+      )}
+
+      {isLogic && (
+        <div className="sp-node-children">
+          {(node.children ?? []).map(child => (
+            <TreeNodeComp
+              key={child.id}
+              node={child}
+              signalType={signalType}
+              onUpdate={u => handleChildUpdate(child.id, u)}
+              onDelete={() => handleChildDelete(child.id)}
+              onDropOnNode={onDropOnNode}
+              dragOverId={dragOverId}
+              setDragOverId={setDragOverId}
+              depth={depth + 1}
+              def={def}
+            />
+          ))}
+          {dragOverId === node.id && (
+            <div className="sp-drop-hint-inner">여기에 드롭하세요</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface Props {
+  root: LogicNode | null;
+  signalTab: 'buy' | 'sell';
+  def: DefType;
+  onChange: (root: LogicNode | null) => void;
+}
+
+export default function StrategyListEditor({ root, signalTab, def, onChange }: Props) {
+  const [dragOverId, setDragOverId] = useState<string | null>(null);
+
+  const applyDrop = useCallback((
+    targetId: string | null,
+    data: { type: string; value: string; label: string },
+  ) => {
+    const newNode = makeNode(data.type, data.value, signalTab, def);
+    if (!root) {
+      onChange(newNode);
+      return;
+    }
+    if (!targetId) {
+      onChange(mergeAtRoot(root, newNode, data.type === 'operator'));
+      return;
+    }
+    onChange(addChild(root, targetId, newNode));
+  }, [root, signalTab, def, onChange]);
+
+  const handleRootDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOverId(null);
+    try {
+      applyDrop(null, JSON.parse(e.dataTransfer.getData('application/json')));
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const handleDropOnNode = (targetId: string, data: { type: string; value: string; label: string }) => {
+    applyDrop(targetId, data);
+  };
+
+  return (
+    <div
+      className="se-list-editor sp-dropzone"
+      onDragOver={e => e.preventDefault()}
+      onDrop={handleRootDrop}
+    >
+      {!root ? (
+        <div className="sp-drop-empty">
+          우측 패널에서 논리 연산자나 지표를 드래그하여 전략을 시작하세요.
+        </div>
+      ) : (
+        <TreeNodeComp
+          node={root}
+          signalType={signalTab}
+          onUpdate={onChange}
+          onDelete={() => onChange(null)}
+          onDropOnNode={handleDropOnNode}
+          dragOverId={dragOverId}
+          setDragOverId={setDragOverId}
+          def={def}
+        />
+      )}
+    </div>
+  );
+}