From 2effc47593fac3edb0dc7f4061e5ef9c5149ce12 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Wed, 13 May 2026 21:52:31 +0900
Subject: [PATCH] feat(screener): integrate mode toggle (form|canvas) with lazy
 canvas

---
 src/pages/stock/screener/Screener.jsx | 119 ++++++++++++++++++--------
 1 file changed, 82 insertions(+), 37 deletions(-)

diff --git a/src/pages/stock/screener/Screener.jsx b/src/pages/stock/screener/Screener.jsx
index 41995ec..5db82ab 100644
--- a/src/pages/stock/screener/Screener.jsx
+++ b/src/pages/stock/screener/Screener.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, lazy, Suspense } from 'react';
 import { Link } from 'react-router-dom';
 import './Screener.css';
 
@@ -6,6 +6,8 @@ import { useScreenerMeta }     from './hooks/useScreenerMeta';
 import { useScreenerSettings } from './hooks/useScreenerSettings';
 import { useScreenerRun }      from './hooks/useScreenerRun';
 import { useScreenerHistory }  from './hooks/useScreenerHistory';
+import { useScreenerMode }     from './hooks/useScreenerMode';
+import { useIsMobile }         from '../../../hooks/useIsMobile';
 
 import GatePanel        from './components/GatePanel';
 import NodePanel        from './components/NodePanel';
@@ -13,18 +15,22 @@ import GlobalControls   from './components/GlobalControls';
 import ResultTable      from './components/ResultTable';
 import TelegramPreview  from './components/TelegramPreview';
 import RunHistoryList   from './components/RunHistoryList';
+import ModeToggle       from './components/ModeToggle';
+
+const CanvasLayout = lazy(() => import('./components/canvas/CanvasLayout'));
 
 export default function Screener() {
   const { meta, loading: metaLoading } = useScreenerMeta();
-  const { settings, dirty, setLocal, save }   = useScreenerSettings();
+  const { settings, dirty, setLocal, save } = useScreenerSettings();
   const { result, running, previewHistory, runPreview, runSave, selectPreview } = useScreenerRun();
   const { runs, runs_loading, selectRun, selectedRun } = useScreenerHistory();
+  const { mode, setMode } = useScreenerMode();
+  const isMobile = useIsMobile();
+  const effectiveMode = isMobile ? 'form' : mode;
 
-  // 비교 모드 — 미리보기 히스토리에서 선택된 항목 ID
   const [compareId, setCompareId] = useState(null);
   const compareItem = previewHistory.find((p) => p.id === compareId);
   const compareResult = compareItem?.result ?? null;
-
   const activeResult = selectedRun || result;
 
   if (metaLoading || !meta || !settings) {
@@ -41,44 +47,83 @@ export default function Screener() {
             · 분석 기준일: {activeResult?.asof ?? settings.asof ?? '-'}
           </p>
         </div>
-        <nav>
-          <Link to="/stock">시장</Link>
-          <Link to="/stock/trade">트레이드</Link>
-        </nav>
+        <div className="screener-header-right">
+          {!isMobile && <ModeToggle value={mode} onChange={setMode} />}
+          <nav>
+            <Link to="/stock">시장</Link>
+            <Link to="/stock/trade">트레이드</Link>
+          </nav>
+        </div>
       </header>
 
-      <div className="screener-grid">
-        <aside className="screener-left">
-          <GatePanel meta={meta.gate_nodes[0]} value={settings.gate_params} onChange={(p) => setLocal({...settings, gate_params: p})} />
-          <NodePanel meta={meta.score_nodes} weights={settings.weights} params={settings.node_params}
-                     onWeights={(w) => setLocal({...settings, weights: w})}
-                     onParams={(p)  => setLocal({...settings, node_params: p})} />
-          <GlobalControls settings={settings} setSettings={setLocal}
-                          onRun={() => runPreview(settings)}
-                          onSave={() => runSave(settings)}
-                          onPersist={save}
-                          dirty={dirty}
-                          running={running} />
-        </aside>
-
-        <main className="screener-center">
-          <ResultTable result={activeResult} compareWith={compareResult} compareLabel={compareItem ? new Date(compareItem.timestamp).toLocaleTimeString() : null} />
-          <TelegramPreview payload={activeResult?.telegram_payload} />
-        </main>
-
-        <aside className="screener-right">
-          <RunHistoryList
-            runs={runs}
-            loading={runs_loading}
-            onSelect={selectRun}
-            selectedId={selectedRun?.meta?.id}
+      {effectiveMode === 'form' ? (
+        <div className="screener-grid">
+          <aside className="screener-left">
+            <GatePanel
+              meta={meta.gate_nodes[0]}
+              value={settings.gate_params}
+              onChange={(p) => setLocal({ ...settings, gate_params: p })}
+            />
+            <NodePanel
+              meta={meta.score_nodes}
+              weights={settings.weights}
+              params={settings.node_params}
+              onWeights={(w) => setLocal({ ...settings, weights: w })}
+              onParams={(p)  => setLocal({ ...settings, node_params: p })}
+            />
+            <GlobalControls
+              settings={settings} setSettings={setLocal}
+              onRun={() => runPreview(settings)}
+              onSave={() => runSave(settings)}
+              onPersist={save}
+              dirty={dirty}
+              running={running}
+            />
+          </aside>
+          <main className="screener-center">
+            <ResultTable
+              result={activeResult}
+              compareWith={compareResult}
+              compareLabel={compareItem ? new Date(compareItem.timestamp).toLocaleTimeString() : null}
+            />
+            <TelegramPreview payload={activeResult?.telegram_payload} />
+          </main>
+          <aside className="screener-right">
+            <RunHistoryList
+              runs={runs}
+              loading={runs_loading}
+              onSelect={selectRun}
+              selectedId={selectedRun?.meta?.id}
+              previewHistory={previewHistory}
+              onSelectPreview={selectPreview}
+              onSetCompare={setCompareId}
+              compareId={compareId}
+            />
+          </aside>
+        </div>
+      ) : (
+        <Suspense fallback={<div className="screener-loading">캔버스 로딩 중…</div>}>
+          <CanvasLayout
+            meta={meta}
+            settings={settings}
+            setLocal={setLocal}
+            save={save}
+            dirty={dirty}
+            result={result}
+            running={running}
             previewHistory={previewHistory}
-            onSelectPreview={selectPreview}
-            onSetCompare={setCompareId}
+            runPreview={runPreview}
+            runSave={runSave}
+            selectPreview={selectPreview}
+            runs={runs}
+            runs_loading={runs_loading}
+            selectRun={selectRun}
+            selectedRun={selectedRun}
             compareId={compareId}
+            setCompareId={setCompareId}
           />
-        </aside>
-      </div>
+        </Suspense>
+      )}
     </div>
   );
 }