feat(stock): /stock/screener 페이지 골격 + hooks 4개 + 컴포넌트 stub 6개

src/pages/stock/screener/Screener.css

@@ -0,0 +1,51 @@
+.screener-page {
+  padding: 24px;
+  color: var(--text, #e5e7eb);
+  background: var(--bg, #0b0f17);
+  min-height: 100vh;
+}
+
+.screener-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.screener-header h1 {
+  font-size: 28px;
+  margin: 0 0 4px 0;
+}
+
+.screener-header .meta {
+  color: #9ca3af;
+  font-size: 13px;
+  margin: 0;
+}
+
+.screener-header nav a {
+  margin-left: 12px;
+  color: #9ca3af;
+  text-decoration: none;
+}
+
+.screener-grid {
+  display: grid;
+  grid-template-columns: 320px 1fr 280px;
+  gap: 24px;
+}
+
+@media (max-width: 1023px) {
+  .screener-grid { grid-template-columns: 1fr; }
+}
+
+.screener-loading { padding: 80px; text-align: center; color: #9ca3af; }
+
+.screener-card {
+  background: #0f1623;
+  border: 1px solid #1f2937;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+.screener-card h3 { margin: 0 0 12px 0; font-size: 15px; }

src/pages/stock/screener/Screener.jsx

@@ -1,10 +1,71 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
+import './Screener.css';
+
+import { useScreenerMeta }     from './hooks/useScreenerMeta';
+import { useScreenerSettings } from './hooks/useScreenerSettings';
+import { useScreenerRun }      from './hooks/useScreenerRun';
+import { useScreenerHistory }  from './hooks/useScreenerHistory';
+
+import GatePanel        from './components/GatePanel';
+import NodePanel        from './components/NodePanel';
+import GlobalControls   from './components/GlobalControls';
+import ResultTable      from './components/ResultTable';
+import TelegramPreview  from './components/TelegramPreview';
+import RunHistoryList   from './components/RunHistoryList';
 
 export default function Screener() {
-    return (
-        <div style={{ padding: 24, color: '#e5e7eb' }}>
-            <h1>스크리너</h1>
-            <p>구현 중 — Task 4.3에서 본 페이지 골격 + hooks + 컴포넌트가 추가됩니다.</p>
+  const { meta, loading: metaLoading } = useScreenerMeta();
+  const { settings, dirty, setLocal, save }   = useScreenerSettings();
+  const { result, running, runPreview, runSave } = useScreenerRun();
+  const { runs, runs_loading, selectRun, selectedRun } = useScreenerHistory();
+
+  const activeResult = selectedRun || result;
+
+  if (metaLoading || !meta || !settings) {
+    return <div className="screener-loading">로딩 중…</div>;
+  }
+
+  return (
+    <div className="screener-page">
+      <header className="screener-header">
+        <div>
+          <h1>스크리너</h1>
+          <p className="meta">
+            최근 자동 잡: {runs?.find(r => r.mode === 'auto')?.asof ?? '-'}
+            · 분석 기준일: {activeResult?.asof ?? settings.asof ?? '-'}
+          </p>
         </div>
-    );
+        <nav>
+          <Link to="/stock">시장</Link>
+          <Link to="/stock/trade">트레이드</Link>
+        </nav>
+      </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} />
+          <TelegramPreview payload={activeResult?.telegram_payload} />
+        </main>
+
+        <aside className="screener-right">
+          <RunHistoryList runs={runs} loading={runs_loading} onSelect={selectRun}
+                          selectedId={selectedRun?.meta?.id} />
+        </aside>
+      </div>
+    </div>
+  );
 }

src/pages/stock/screener/components/GatePanel.jsx

@@ -0,0 +1,3 @@
+export default function GatePanel({ meta, value, onChange }) {
+  return <section className="screener-card"><h3>{meta?.label ?? '게이트'}</h3><p style={{fontSize: 12, color:'#9ca3af'}}>TODO: 게이트 파라미터 폼 (Task 4.5)</p></section>;
+}

src/pages/stock/screener/components/GlobalControls.jsx

@@ -0,0 +1,10 @@
+export default function GlobalControls({ settings, setSettings, onRun, onSave, onPersist, dirty, running }) {
+  return (
+    <section className="screener-card">
+      <h3>실행 옵션</h3>
+      <button onClick={onRun} disabled={running}>{running ? '실행 중…' : '지금 실행 (미리보기)'}</button>
+      <button onClick={onSave} disabled={running} style={{ marginTop: 8 }}>스냅샷 저장</button>
+      <button onClick={onPersist} disabled={!dirty} style={{ marginTop: 8 }}>설정 저장</button>
+    </section>
+  );
+}

src/pages/stock/screener/components/NodePanel.jsx

@@ -0,0 +1,3 @@
+export default function NodePanel({ meta, weights, params, onWeights, onParams }) {
+  return <section className="screener-card"><h3>점수 노드 ({meta.length})</h3><p style={{fontSize: 12, color:'#9ca3af'}}>TODO: 노드별 카드 (Task 4.4)</p></section>;
+}

src/pages/stock/screener/components/ResultTable.jsx

@@ -0,0 +1,25 @@
+export default function ResultTable({ result }) {
+  if (!result) return <section className="screener-card"><p style={{color:'#9ca3af'}}>아직 결과 없음. "지금 실행"을 눌러보세요.</p></section>;
+  return (
+    <section className="screener-card">
+      <h3>Top {result.top_n} · 통과 {result.survivors_count}</h3>
+      <table style={{ width: '100%', fontSize: 13 }}>
+        <thead>
+          <tr><th>#</th><th>종목</th><th>총점</th><th>진입</th><th>손절</th><th>익절</th><th>R%</th></tr>
+        </thead>
+        <tbody>
+          {(result.results || []).map((r) => (
+            <tr key={r.ticker}>
+              <td>{r.rank}</td><td>{r.name} ({r.ticker})</td>
+              <td>{r.total_score?.toFixed?.(1)}</td>
+              <td>{r.entry_price?.toLocaleString?.()}</td>
+              <td>{r.stop_price?.toLocaleString?.()}</td>
+              <td>{r.target_price?.toLocaleString?.()}</td>
+              <td>{r.r_pct?.toFixed?.(1)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </section>
+  );
+}

src/pages/stock/screener/components/RunHistoryList.jsx

@@ -0,0 +1,17 @@
+export default function RunHistoryList({ runs, loading, onSelect, selectedId }) {
+  if (loading) return <section className="screener-card"><p>로딩…</p></section>;
+  return (
+    <section className="screener-card">
+      <h3>최근 실행</h3>
+      <ul style={{listStyle:'none', padding:0, margin:0, fontSize:13}}>
+        {(runs || []).map((r) => (
+          <li key={r.id} style={{padding:'6px 0', borderBottom:'1px solid #1f2937', cursor:'pointer',
+                                  color: selectedId === r.id ? '#fbbf24' : '#e5e7eb'}}
+              onClick={() => onSelect(r.id)}>
+            {r.asof} · {r.mode}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

src/pages/stock/screener/components/TelegramPreview.jsx

@@ -0,0 +1,9 @@
+export default function TelegramPreview({ payload }) {
+  if (!payload) return null;
+  return (
+    <section className="screener-card">
+      <h3>텔레그램 미리보기</h3>
+      <pre style={{whiteSpace:'pre-wrap', fontFamily:'monospace', fontSize:12}}>{payload.text}</pre>
+    </section>
+  );
+}

src/pages/stock/screener/hooks/useScreenerHistory.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { listScreenerRuns, getScreenerRun } from '../../../../api';
+
+export function useScreenerHistory() {
+  const [runs, setRuns] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedRun, setSelectedRun] = useState(null);
+
+  useEffect(() => {
+    listScreenerRuns(30).then((r) => { setRuns(r); setLoading(false); });
+  }, []);
+
+  async function selectRun(id) {
+    if (!id) { setSelectedRun(null); return; }
+    const detail = await getScreenerRun(id);
+    setSelectedRun({
+      asof: detail.meta.asof,
+      mode: detail.meta.mode,
+      status: detail.meta.status,
+      run_id: detail.meta.id,
+      survivors_count: detail.meta.survivors_count,
+      weights: detail.meta.weights,
+      top_n: detail.meta.top_n,
+      results: detail.results,
+      telegram_payload: null,
+      warnings: [],
+      meta: detail.meta,
+    });
+  }
+
+  return { runs, runs_loading: loading, selectedRun, selectRun };
+}

src/pages/stock/screener/hooks/useScreenerMeta.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+import { getScreenerNodes } from '../../../../api';
+
+export function useScreenerMeta() {
+  const [meta, setMeta] = useState(null);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    getScreenerNodes().then((m) => { setMeta(m); setLoading(false); });
+  }, []);
+  return { meta, loading };
+}

src/pages/stock/screener/hooks/useScreenerRun.js

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { runScreener } from '../../../../api';
+
+export function useScreenerRun() {
+  const [result, setResult] = useState(null);
+  const [running, setRunning] = useState(false);
+
+  async function call(mode, settings) {
+    setRunning(true);
+    try {
+      const body = {
+        mode,
+        weights: settings.weights,
+        node_params: settings.node_params,
+        gate_params: settings.gate_params,
+        top_n: settings.top_n,
+      };
+      const r = await runScreener(body);
+      setResult(r);
+      return r;
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  return {
+    result, running,
+    runPreview: (s) => call('preview', s),
+    runSave:    (s) => call('manual_save', s),
+  };
+}

src/pages/stock/screener/hooks/useScreenerSettings.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { getScreenerSettings, saveScreenerSettings } from '../../../../api';
+
+export function useScreenerSettings() {
+  const [remote, setRemote] = useState(null);
+  const [local, setLocal] = useState(null);
+
+  useEffect(() => {
+    getScreenerSettings().then((s) => { setRemote(s); setLocal(s); });
+  }, []);
+
+  const dirty = remote && local && JSON.stringify(remote) !== JSON.stringify(local);
+
+  async function save() {
+    if (!local) return;
+    const saved = await saveScreenerSettings({
+      weights: local.weights, node_params: local.node_params, gate_params: local.gate_params,
+      top_n: local.top_n, rr_ratio: local.rr_ratio,
+      atr_window: local.atr_window, atr_stop_mult: local.atr_stop_mult,
+    });
+    setRemote(saved);
+    setLocal(saved);
+  }
+
+  return { settings: local, dirty, setLocal, save };
+}