diff --git a/src/pages/stock/screener/Screener.css b/src/pages/stock/screener/Screener.css
new file mode 100644
index 0000000..ea0a224
--- /dev/null
+++ b/src/pages/stock/screener/Screener.css
@@ -0,0 +1,82 @@
+.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-page { padding: 16px; }
+ .screener-header { flex-direction: column; align-items: flex-start; gap: 8px; }
+ .screener-grid { grid-template-columns: 1fr; gap: 16px; }
+ .screener-left { order: 1; }
+ .screener-center { order: 2; }
+ .screener-right { order: 3; }
+ .screener-table { font-size: 12px; }
+ .screener-table th, .screener-table td { padding: 6px 4px; }
+}
+
+@media (max-width: 640px) {
+ .screener-page { padding: 12px; }
+ .screener-card { padding: 12px; }
+}
+
+.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; }
+
+.node-card {
+ background: #0a0f1a;
+ border: 1px solid #1f2937;
+ border-radius: 6px;
+ padding: 10px;
+ font-size: 13px;
+}
+.node-card-header { font-weight: 500; margin-bottom: 6px; }
+.weight-row, .param-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
+
+.screener-table {
+ width: 100%;
+ font-size: 13px;
+ border-collapse: collapse;
+}
+.screener-table th { text-align: left; padding: 8px; background: #0a0f1a; color: #9ca3af; font-weight: 500; border-bottom: 1px solid #1f2937; }
+.screener-table td { padding: 8px; border-bottom: 1px solid #1a2230; vertical-align: middle; }
+.screener-table tr:hover { background: #0a0f1a; }
diff --git a/src/pages/stock/screener/Screener.jsx b/src/pages/stock/screener/Screener.jsx
new file mode 100644
index 0000000..c06b4ca
--- /dev/null
+++ b/src/pages/stock/screener/Screener.jsx
@@ -0,0 +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() {
+ 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
로딩 중…
;
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/stock/screener/components/GatePanel.jsx b/src/pages/stock/screener/components/GatePanel.jsx
new file mode 100644
index 0000000..1fb568d
--- /dev/null
+++ b/src/pages/stock/screener/components/GatePanel.jsx
@@ -0,0 +1,41 @@
+export default function GatePanel({ meta, value, onChange }) {
+ if (!meta) return null;
+ const props = meta.param_schema?.properties || {};
+ return (
+
+ {meta.label}
+
+ 통과 조건 — 통과한 종목만 점수 노드에 전달
+
+ {Object.entries(props).map(([key, prop]) => (
+ onChange({ ...value, [key]: v })} />
+ ))}
+
+ );
+}
+
+function GateField({ paramKey, prop, value, onChange }) {
+ if (prop.type === 'integer') {
+ return (
+
+
+ onChange(parseInt(e.target.value, 10))}
+ style={{ flex: 1 }} />
+
+ );
+ }
+ if (prop.type === 'boolean') {
+ return (
+
+
+
+ );
+ }
+ return null;
+}
diff --git a/src/pages/stock/screener/components/GlobalControls.jsx b/src/pages/stock/screener/components/GlobalControls.jsx
new file mode 100644
index 0000000..b55c9aa
--- /dev/null
+++ b/src/pages/stock/screener/components/GlobalControls.jsx
@@ -0,0 +1,43 @@
+export default function GlobalControls({ settings, setSettings, onRun, onSave, onPersist, dirty, running }) {
+ return (
+
+ );
+}
diff --git a/src/pages/stock/screener/components/NodeCard.jsx b/src/pages/stock/screener/components/NodeCard.jsx
new file mode 100644
index 0000000..7626285
--- /dev/null
+++ b/src/pages/stock/screener/components/NodeCard.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+
+export default function NodeCard({ meta, weight, params, onWeightChange, onParamsChange }) {
+ const enabled = (weight ?? 0) > 0;
+
+ return (
+
+
+
+
+
+
+ 가중치
+ onWeightChange(parseFloat(e.target.value))}
+ style={{ flex: 1 }}
+ />
+ {(weight ?? 0).toFixed(1)}
+
+ {Object.entries(meta.param_schema?.properties || {}).map(([key, prop]) => (
+
onParamsChange({ ...params, [key]: v })}
+ />
+ ))}
+
+
+ );
+}
+
+function ParamRow({ paramKey, prop, value, disabled, onChange }) {
+ const type = prop.type;
+ if (type === 'integer' || type === 'number') {
+ return (
+
+ {paramKey}
+ onChange(type === 'integer' ? parseInt(e.target.value, 10) : parseFloat(e.target.value))}
+ style={{ width: 80 }}
+ />
+
+ );
+ }
+ if (type === 'boolean') {
+ return (
+
+
+
+ );
+ }
+ // object/array는 MVP에서 read-only JSON 표시 (RsRating의 weights 등)
+ return (
+
+ {paramKey}: {JSON.stringify(value)}
+
+ );
+}
diff --git a/src/pages/stock/screener/components/NodePanel.jsx b/src/pages/stock/screener/components/NodePanel.jsx
new file mode 100644
index 0000000..6953e26
--- /dev/null
+++ b/src/pages/stock/screener/components/NodePanel.jsx
@@ -0,0 +1,21 @@
+import NodeCard from './NodeCard';
+
+export default function NodePanel({ meta, weights, params, onWeights, onParams }) {
+ return (
+
+ 점수 노드 ({meta.length})
+
+ {meta.map((m) => (
+ onWeights({ ...weights, [m.name]: w })}
+ onParamsChange={(p) => onParams({ ...params, [m.name]: p })}
+ />
+ ))}
+
+
+ );
+}
diff --git a/src/pages/stock/screener/components/ResultTable.jsx b/src/pages/stock/screener/components/ResultTable.jsx
new file mode 100644
index 0000000..0f849e2
--- /dev/null
+++ b/src/pages/stock/screener/components/ResultTable.jsx
@@ -0,0 +1,54 @@
+import ScoreChips from './ScoreChips';
+
+export default function ResultTable({ result }) {
+ if (!result) {
+ return (
+
+ 아직 결과 없음. "지금 실행"을 눌러보세요.
+
+ );
+ }
+
+ return (
+
+
+
+ Top {result.top_n} · 통과 {result.survivors_count} · {result.asof}
+
+ {result.warnings?.length > 0 && (
+
+ ⚠ {result.warnings.join(' · ')}
+
+ )}
+
+
+
+
+ | # | 종목 | 총점 | 노드 |
+ 진입 | 손절 | 익절 | R% |
+
+
+
+ {(result.results || []).map((r) => (
+
+ | {r.rank} |
+ {r.name}
{r.ticker} |
+ {r.total_score?.toFixed(1)} |
+ |
+ {r.entry_price?.toLocaleString?.()} |
+ {r.stop_price?.toLocaleString?.()} |
+ {r.target_price?.toLocaleString?.()} |
+ {r.r_pct?.toFixed?.(1)} |
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/pages/stock/screener/components/RunHistoryList.jsx b/src/pages/stock/screener/components/RunHistoryList.jsx
new file mode 100644
index 0000000..d1b2ee9
--- /dev/null
+++ b/src/pages/stock/screener/components/RunHistoryList.jsx
@@ -0,0 +1,17 @@
+export default function RunHistoryList({ runs, loading, onSelect, selectedId }) {
+ if (loading) return
;
+ return (
+
+ 최근 실행
+
+ {(runs || []).map((r) => (
+ - onSelect(r.id)}>
+ {r.asof} · {r.mode}
+
+ ))}
+
+
+ );
+}
diff --git a/src/pages/stock/screener/components/ScoreChips.jsx b/src/pages/stock/screener/components/ScoreChips.jsx
new file mode 100644
index 0000000..34ed5df
--- /dev/null
+++ b/src/pages/stock/screener/components/ScoreChips.jsx
@@ -0,0 +1,32 @@
+const NODE_ICONS = {
+ foreign_buy: { icon: '👤', label: '외국인' },
+ volume_surge: { icon: '⚡', label: '거래량' },
+ momentum: { icon: '🚀', label: '모멘텀' },
+ high52w: { icon: '🆙', label: '52w고' },
+ rs_rating: { icon: '💪', label: 'RS' },
+ ma_alignment: { icon: '📈', label: '정배열' },
+ vcp_lite: { icon: '🌀', label: 'VCP' },
+};
+
+export default function ScoreChips({ scores }) {
+ return (
+
+ {Object.entries(scores || {}).map(([name, s]) => {
+ const meta = NODE_ICONS[name];
+ if (!meta) return null;
+ const active = s >= 70;
+ return (
+
+ {meta.icon}{Math.round(s)}
+
+ );
+ })}
+
+ );
+}
diff --git a/src/pages/stock/screener/components/TelegramPreview.jsx b/src/pages/stock/screener/components/TelegramPreview.jsx
new file mode 100644
index 0000000..02b655c
--- /dev/null
+++ b/src/pages/stock/screener/components/TelegramPreview.jsx
@@ -0,0 +1,9 @@
+export default function TelegramPreview({ payload }) {
+ if (!payload) return null;
+ return (
+
+ 텔레그램 미리보기
+ {payload.text}
+
+ );
+}
diff --git a/src/pages/stock/screener/hooks/useScreenerHistory.js b/src/pages/stock/screener/hooks/useScreenerHistory.js
new file mode 100644
index 0000000..e16b8ee
--- /dev/null
+++ b/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 };
+}
diff --git a/src/pages/stock/screener/hooks/useScreenerMeta.js b/src/pages/stock/screener/hooks/useScreenerMeta.js
new file mode 100644
index 0000000..f8fc413
--- /dev/null
+++ b/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 };
+}
diff --git a/src/pages/stock/screener/hooks/useScreenerRun.js b/src/pages/stock/screener/hooks/useScreenerRun.js
new file mode 100644
index 0000000..ac4e4ab
--- /dev/null
+++ b/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),
+ };
+}
diff --git a/src/pages/stock/screener/hooks/useScreenerSettings.js b/src/pages/stock/screener/hooks/useScreenerSettings.js
new file mode 100644
index 0000000..8ce4851
--- /dev/null
+++ b/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 };
+}
diff --git a/src/routes.jsx b/src/routes.jsx
index 0fff027..12890d0 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -19,6 +19,7 @@ const Lotto = lazy(() => import('./pages/lotto/Lotto'));
const Travel = lazy(() => import('./pages/travel/Travel'));
const Stock = lazy(() => import('./pages/stock/Stock'));
const StockTrade = lazy(() => import('./pages/stock/StockTrade'));
+const Screener = lazy(() => import('./pages/stock/screener/Screener'));
const Subscription = lazy(() => import('./pages/subscription/Subscription'));
const EffectLab = lazy(() => import('./pages/effect-lab/EffectLab'));
const SwordStream = lazy(() => import('./pages/effect-lab/SwordStream'));
@@ -160,6 +161,10 @@ export const appRoutes = [
path: 'stock/trade',
element:
,
},
+ {
+ path: 'stock/screener',
+ element:
,
+ },
{
path: 'realestate',
element:
,