feat(phase-6): Next.js UI + TypeScript strict + 백엔드 mypy 설정
UI: - web/lib/api.ts: 백엔드 모든 엔드포인트의 클라이언트 + 타입 (Symbol, ChartPayload, PredictResponse, LatestPredictionResponse, MetricsResponse, NewsResponse). NEXT_PUBLIC_API_BASE 자동 정규화. - web/components/SearchBox: 디바운스 검색, seed_only 토글, trigram + prefix. - web/components/StockChart: lightweight-charts 캔들 + 예측 overlay (median dashed + q10/q90 점선). base_date 에서 target_date 까지 이어 붙임. - web/components/PredictionPanel: "예상차트 보기" 버튼 → POST /api/predict → user_triggered=TRUE 저장 → onResult 콜백으로 StockChart 에 반영. 표로 +1/+3/+5거래일 direction, prob_up/flat/down, expected_return, ci_low~ci_high 표시. - web/components/MetricsPanel: 최근 30일 hit_rate / mae. - web/components/NewsList: 최근 뉴스 + 감성 라벨/점수. - web/app/page.tsx: 검색 페이지. - web/app/[code]/page.tsx: 종목 상세 (차트 + 패널 + 메트릭 + 뉴스). TypeScript 보강 (사용자 요청 "typescript도 추가해서 나중에 수정하기 쉽게"): - tsconfig.json: strict 외에 forceConsistentCasingInFileNames, noFallthroughCasesInSwitch, noImplicitOverride 추가. - package.json: typecheck (tsc --noEmit), check (typecheck + lint) 스크립트, eslint + eslint-config-next 14.2.3. - .eslintrc.json: next/core-web-vitals. - package-lock.json 커밋 (재현 가능한 dep). 백엔드: - pyproject.toml: [tool.mypy] 추가. strict_optional, no_implicit_optional, check_untyped_defs. 3rd-party stub 없는 pykrx/chronos 등은 ignore. 검증: `npx tsc --noEmit` 통과 (exit=0). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
tkrmagid
157
web/components/PredictionPanel.tsx
Normal file
157
web/components/PredictionPanel.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
api,
|
||||
type LatestPredictionResponse,
|
||||
type LatestPredictionStep,
|
||||
type PredictResponse,
|
||||
} from "../lib/api";
|
||||
|
||||
type Props = {
|
||||
code: string;
|
||||
initial?: LatestPredictionResponse | null;
|
||||
onResult: (pred: LatestPredictionResponse) => void;
|
||||
};
|
||||
|
||||
function normalizeFromPredictResponse(
|
||||
code: string,
|
||||
resp: PredictResponse,
|
||||
): LatestPredictionResponse {
|
||||
const steps: LatestPredictionStep[] = resp.steps.map((s) => ({
|
||||
predicted_at: null,
|
||||
target_date: s.target_date ?? "",
|
||||
horizon: s.horizon,
|
||||
direction: s.direction,
|
||||
prob_up: s.prob_up,
|
||||
prob_flat: s.prob_flat,
|
||||
prob_down: s.prob_down,
|
||||
expected_return: s.expected_return,
|
||||
point_close: s.point_close,
|
||||
ci_low: s.ci_low,
|
||||
ci_high: s.ci_high,
|
||||
user_triggered: resp.user_triggered,
|
||||
features_snapshot: null,
|
||||
}));
|
||||
return {
|
||||
code,
|
||||
found: true,
|
||||
base_date: resp.base_date,
|
||||
base_close: resp.base_close,
|
||||
steps,
|
||||
};
|
||||
}
|
||||
|
||||
export function PredictionPanel({ code, initial, onResult }: Props) {
|
||||
const [pred, setPred] = useState<LatestPredictionResponse | null>(initial ?? null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
|
||||
async function runPredict() {
|
||||
setLoading(true);
|
||||
setErr(null);
|
||||
try {
|
||||
const r = await api.predict(code);
|
||||
const normalized = normalizeFromPredictResponse(code, r);
|
||||
setPred(normalized);
|
||||
onResult(normalized);
|
||||
} catch (e) {
|
||||
setErr(e instanceof Error ? e.message : String(e));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const steps = pred?.steps ?? [];
|
||||
|
||||
return (
|
||||
<div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-zinc-200">예측 (Chronos + LightGBM 앙상블)</div>
|
||||
<div className="text-xs text-zinc-500">
|
||||
클릭한 종목은 자동 저장 후 다음 거래일 장 종료 시 실제 가격과 비교됩니다.
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={runPredict}
|
||||
disabled={loading}
|
||||
className="rounded-md bg-emerald-700 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-600 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "예측 중…" : pred?.found ? "다시 예측" : "예상차트 보기"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{err && <div className="mb-3 text-xs text-red-400">에러: {err}</div>}
|
||||
|
||||
{pred?.found ? (
|
||||
<div>
|
||||
<div className="mb-2 text-xs text-zinc-500">
|
||||
기준일 {pred.base_date} · 기준종가{" "}
|
||||
{pred.base_close != null ? pred.base_close.toLocaleString() : "-"}
|
||||
</div>
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="text-xs text-zinc-500">
|
||||
<tr>
|
||||
<th className="py-1">+거래일</th>
|
||||
<th>매칭일</th>
|
||||
<th>방향</th>
|
||||
<th>P(up/flat/down)</th>
|
||||
<th>기대수익</th>
|
||||
<th>예측 종가</th>
|
||||
<th>q10~q90</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-800">
|
||||
{steps.map((s) => (
|
||||
<tr key={s.horizon}>
|
||||
<td className="py-2">+{s.horizon}</td>
|
||||
<td className="text-xs text-zinc-400">{s.target_date}</td>
|
||||
<td>
|
||||
<span
|
||||
className={
|
||||
s.direction === "up"
|
||||
? "text-emerald-400"
|
||||
: s.direction === "down"
|
||||
? "text-red-400"
|
||||
: "text-zinc-300"
|
||||
}
|
||||
>
|
||||
{s.direction}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-xs text-zinc-300">
|
||||
{fmtPct(s.prob_up)} / {fmtPct(s.prob_flat)} / {fmtPct(s.prob_down)}
|
||||
</td>
|
||||
<td>{fmtSignedPct(s.expected_return)}</td>
|
||||
<td>{s.point_close != null ? s.point_close.toLocaleString() : "-"}</td>
|
||||
<td className="text-xs text-zinc-400">
|
||||
{s.ci_low != null ? s.ci_low.toLocaleString() : "-"} ~{" "}
|
||||
{s.ci_high != null ? s.ci_high.toLocaleString() : "-"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-zinc-500">
|
||||
아직 예측이 없습니다. <b>예상차트 보기</b> 버튼을 누르면 1·3·5거래일 후 예측을 생성하고
|
||||
차트에 점선으로 이어 붙입니다.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function fmtPct(v: number | null): string {
|
||||
if (v == null) return "-";
|
||||
return `${(v * 100).toFixed(0)}%`;
|
||||
}
|
||||
|
||||
function fmtSignedPct(v: number | null): string {
|
||||
if (v == null) return "-";
|
||||
const pct = v * 100;
|
||||
const sign = pct >= 0 ? "+" : "";
|
||||
return `${sign}${pct.toFixed(2)}%`;
|
||||
}
|
||||
Reference in New Issue
Block a user