feat(chart): 10m 실시간 / 일·주·월 토글 / 오늘 마커 / 예측 거래일 선택

- backend/app/api/chart.py: interval=10m|1d|1w|1mo. 10m 은 ohlcv_1m 을 time_bucket(10min) 으로 집계, stale(>10분) 이면 KIS 분봉 fetch 후 재조회. 1w/1mo 는 ohlcv_daily 를 date_trunc 로 집계. today 필드 추가. - backend/app/fetch/kis.py: fetch_minute_price() 추가 (tr_id FHKST03010200). KIS 응답 KST 시각을 tz-aware datetime 으로 변환, 오름차순 정렬. - web/lib/api.ts: ChartInterval 타입, getChart(interval), predict(horizons[]). - web/components/StockChart.tsx: 10m 이면 timeVisible. 일·주·월에서 오늘 화살표 마커 표시. ISO datetime 도 파싱. - web/components/PredictionPanel.tsx: 단기/중기/장기 프리셋 + 사용자 직접 지정 (예: 1,2,3,7). API 에 horizons 배열 전달. - web/app/[code]/page.tsx: interval 칩 (10분/일/주/월). 10m 일 때 60초마다 폴링. interval 별 기본 lookback (10m=1, 1d=180, 1w=730, 1mo=1825).
2026-05-23 01:34:29 +09:00
parent 928c2160f9
commit 0a5c634680
6 changed files with 503 additions and 81 deletions
--- a/web/app/[code]/page.tsx
+++ b/web/app/[code]/page.tsx
@@ -8,33 +8,63 @@ import { PredictionPanel } from "../../components/PredictionPanel";
 import { StockChart } from "../../components/StockChart";
 import {
  api,
+  type ChartInterval,
  type ChartPayload,
  type LatestPredictionResponse,
 } from "../../lib/api";

+const INTERVALS: { label: string; value: ChartInterval; defaultDays: number }[] = [
+  { label: "10분", value: "10m", defaultDays: 1 },
+  { label: "일", value: "1d", defaultDays: 180 },
+  { label: "주", value: "1w", defaultDays: 365 * 2 },
+  { label: "월", value: "1mo", defaultDays: 365 * 5 },
+];
+
 export default function CodePage({ params }: { params: { code: string } }) {
  const { code } = params;
  const [chart, setChart] = useState<ChartPayload | null>(null);
  const [prediction, setPrediction] = useState<LatestPredictionResponse | null>(null);
  const [err, setErr] = useState<string | null>(null);
+  const [interval, setIntervalKind] = useState<ChartInterval>("1d");
  const [days, setDays] = useState(180);

+  // interval 바꾸면 days 도 그 interval 에 맞는 기본값으로 (사용자가 명시적으로 다시 고를 수 있게).
+  function pickInterval(v: ChartInterval) {
+    const meta = INTERVALS.find((i) => i.value === v)!;
+    setIntervalKind(v);
+    setDays(meta.defaultDays);
+  }
+
+  // 초기/주기적 차트 로드. 10분봉이면 60초마다 폴링 — 백엔드가 캐시-then-fetch 로
+  // 10분 이내면 DB 만 읽고, 넘었으면 KIS 호출. 폴링 부담은 낮음.
  useEffect(() => {
    let alive = true;
    setErr(null);
    setChart(null);
-    api
-      .getChart(code, days)
-      .then((c) => {
-        if (alive) setChart(c);
-      })
-      .catch((e) => {
-        if (alive) setErr(e instanceof Error ? e.message : String(e));
-      });
+
+    const load = () => {
+      api
+        .getChart(code, days, interval)
+        .then((c) => {
+          if (alive) setChart(c);
+        })
+        .catch((e) => {
+          if (alive) setErr(e instanceof Error ? e.message : String(e));
+        });
+    };
+    load();
+
+    if (interval === "10m") {
+      const h = window.setInterval(load, 60_000);
+      return () => {
+        alive = false;
+        window.clearInterval(h);
+      };
+    }
    return () => {
      alive = false;
    };
-  }, [code, days]);
+  }, [code, days, interval]);

  useEffect(() => {
    let alive = true;
@@ -57,26 +87,55 @@ export default function CodePage({ params }: { params: { code: string } }) {
        <Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300">
          ← 검색으로
        </Link>
-        <select
-          value={days}
-          onChange={(e) => setDays(Number(e.target.value))}
-          className="rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-xs"
-        >
-          <option value={60}>최근 3개월</option>
-          <option value={180}>최근 6개월</option>
-          <option value={365}>최근 1년</option>
-          <option value={1095}>최근 3년</option>
-        </select>
+        <div className="flex items-center gap-2">
+          <div className="flex overflow-hidden rounded-md border border-zinc-700 text-xs">
+            {INTERVALS.map((it) => (
+              <button
+                key={it.value}
+                onClick={() => pickInterval(it.value)}
+                className={
+                  interval === it.value
+                    ? "bg-emerald-700 px-3 py-1 text-white"
+                    : "bg-zinc-900 px-3 py-1 text-zinc-300 hover:bg-zinc-800"
+                }
+              >
+                {it.label}
+              </button>
+            ))}
+          </div>
+          {interval !== "10m" && (
+            <select
+              value={days}
+              onChange={(e) => setDays(Number(e.target.value))}
+              className="rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-xs"
+            >
+              <option value={60}>최근 3개월</option>
+              <option value={180}>최근 6개월</option>
+              <option value={365}>최근 1년</option>
+              <option value={365 * 2}>최근 2년</option>
+              <option value={365 * 5}>최근 5년</option>
+              <option value={365 * 10}>최근 10년</option>
+            </select>
+          )}
+        </div>
      </div>

      {chart && (
-        <div className="mb-4">
+        <div className="mb-4 flex items-baseline justify-between">
          <h1 className="text-2xl font-semibold text-zinc-100">
            {chart.name}{" "}
            <span className="text-sm font-normal text-zinc-500">
              {chart.code} · {chart.market}
            </span>
          </h1>
+          {interval === "10m" && (
+            <div className="text-xs text-zinc-500">
+              실시간 10분봉 · 60초마다 갱신
+              {chart.intraday_status && (
+                <span className="ml-2 text-zinc-600">[{chart.intraday_status}]</span>
+              )}
+            </div>
+          )}
        </div>
      )}

--- a/web/components/PredictionPanel.tsx
+++ b/web/components/PredictionPanel.tsx
@@ -42,16 +42,37 @@ function normalizeFromPredictResponse(
  };
 }

+const HORIZON_PRESETS: { label: string; value: number[] }[] = [
+  { label: "단기 (1·3·5)", value: [1, 3, 5] },
+  { label: "중기 (1·5·10)", value: [1, 5, 10] },
+  { label: "장기 (5·10·20)", value: [5, 10, 20] },
+];
+
 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);
+  const [presetIdx, setPresetIdx] = useState(0);
+  const [customRaw, setCustomRaw] = useState("");
+  const [useCustom, setUseCustom] = useState(false);
+
+  function effectiveHorizons(): number[] {
+    if (useCustom) {
+      const parsed = customRaw
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => Number.isFinite(n) && n >= 1 && n <= 60);
+      if (parsed.length > 0) return Array.from(new Set(parsed)).sort((a, b) => a - b);
+    }
+    return HORIZON_PRESETS[presetIdx].value;
+  }

  async function runPredict() {
    setLoading(true);
    setErr(null);
    try {
-      const r = await api.predict(code);
+      const horizons = effectiveHorizons();
+      const r = await api.predict(code, horizons);
      const normalized = normalizeFromPredictResponse(code, r);
      setPred(normalized);
      onResult(normalized);
@@ -82,6 +103,49 @@ export function PredictionPanel({ code, initial, onResult }: Props) {
        </button>
      </div>

+      <div className="mb-3 flex flex-wrap items-center gap-2 text-xs">
+        <span className="text-zinc-500">예측 거래일:</span>
+        {HORIZON_PRESETS.map((p, i) => (
+          <button
+            key={p.label}
+            onClick={() => {
+              setUseCustom(false);
+              setPresetIdx(i);
+            }}
+            className={
+              !useCustom && presetIdx === i
+                ? "rounded-full bg-emerald-700 px-3 py-1 text-white"
+                : "rounded-full border border-zinc-700 px-3 py-1 text-zinc-300 hover:border-zinc-500"
+            }
+          >
+            {p.label}
+          </button>
+        ))}
+        <label
+          className={
+            useCustom
+              ? "flex items-center gap-1 rounded-full bg-emerald-700 px-3 py-1 text-white"
+              : "flex items-center gap-1 rounded-full border border-zinc-700 px-3 py-1 text-zinc-300 hover:border-zinc-500"
+          }
+        >
+          <input
+            type="checkbox"
+            checked={useCustom}
+            onChange={(e) => setUseCustom(e.target.checked)}
+            className="h-3 w-3"
+          />
+          직접
+          <input
+            type="text"
+            placeholder="예: 1,2,3,7"
+            value={customRaw}
+            onChange={(e) => setCustomRaw(e.target.value)}
+            onFocus={() => setUseCustom(true)}
+            className="ml-1 w-24 rounded border border-zinc-700 bg-zinc-900 px-1 py-0.5 text-xs text-zinc-100"
+          />
+        </label>
+      </div>
+
      {err && <div className="mb-3 text-xs text-red-400">에러: {err}</div>}

      {pred?.found ? (
--- a/web/components/StockChart.tsx
+++ b/web/components/StockChart.tsx
@@ -7,6 +7,8 @@ import {
  type IChartApi,
  type ISeriesApi,
  type LineData,
+  type SeriesMarker,
+  type Time,
  type UTCTimestamp,
 } from "lightweight-charts";
 import type { ChartPayload, LatestPredictionResponse } from "../lib/api";
@@ -16,12 +18,26 @@ type Props = {
  prediction?: LatestPredictionResponse | null;
 };

-function dateToUtcTs(d: string): UTCTimestamp {
-  // 'YYYY-MM-DD' → UTC midnight epoch seconds
+// 'YYYY-MM-DD' 또는 'YYYY-MM-DDTHH:MM:SS' (KST naive, 백엔드가 +09:00 시각의 wall-clock 을
+// 그대로 ISO 로 직렬화) 를 UTCTimestamp 로. lightweight-charts 는 timestamp 가 UTC 라고
+// 가정하지만, 우리는 KST wall-clock 을 UTC 인 척 넣는다 — timeScale 의 표시도 KST 그대로
+// 나와서 한국 사용자에겐 가장 직관적.
+function isoToUtcTs(s: string): UTCTimestamp {
+  if (s.length <= 10) {
+    return (Date.UTC(
+      Number(s.slice(0, 4)),
+      Number(s.slice(5, 7)) - 1,
+      Number(s.slice(8, 10)),
+    ) / 1000) as UTCTimestamp;
+  }
+  // datetime: YYYY-MM-DDTHH:MM:SS
  return (Date.UTC(
-    Number(d.slice(0, 4)),
-    Number(d.slice(5, 7)) - 1,
-    Number(d.slice(8, 10)),
+    Number(s.slice(0, 4)),
+    Number(s.slice(5, 7)) - 1,
+    Number(s.slice(8, 10)),
+    Number(s.slice(11, 13)),
+    Number(s.slice(14, 16)),
+    Number(s.slice(17, 19) || "0"),
  ) / 1000) as UTCTimestamp;
 }

@@ -33,7 +49,9 @@ export function StockChart({ chart, prediction }: Props) {
  const predLowRef = useRef<ISeriesApi<"Line"> | null>(null);
  const predHighRef = useRef<ISeriesApi<"Line"> | null>(null);

-  // create chart once
+  const isIntraday = chart.interval === "10m";
+
+  // create chart once (interval 바뀌면 timeVisible 토글 위해 의존성에 isIntraday 포함 — 재생성)
  useEffect(() => {
    if (!containerRef.current) return;
    const c = createChart(containerRef.current, {
@@ -46,7 +64,11 @@ export function StockChart({ chart, prediction }: Props) {
        horzLines: { color: "#1f2937" },
      },
      rightPriceScale: { borderColor: "#374151" },
-      timeScale: { borderColor: "#374151", timeVisible: false },
+      timeScale: {
+        borderColor: "#374151",
+        timeVisible: isIntraday,
+        secondsVisible: false,
+      },
      autoSize: true,
    });
    const candle = c.addCandlestickSeries({
@@ -67,28 +89,49 @@ export function StockChart({ chart, prediction }: Props) {
      predLowRef.current = null;
      predHighRef.current = null;
    };
-  }, []);
+  }, [isIntraday]);

-  // push candle data
+  // push candle data + today marker
  useEffect(() => {
    if (!candleRef.current) return;
    const data: CandlestickData[] = chart.ohlcv
      .filter((p) => p.open !== null && p.high !== null && p.low !== null && p.close !== null)
      .map((p) => ({
-        time: dateToUtcTs(p.date),
+        time: isoToUtcTs(p.date),
        open: p.open as number,
        high: p.high as number,
        low: p.low as number,
        close: p.close as number,
      }));
    candleRef.current.setData(data);
-    chartRef.current?.timeScale().fitContent();
-  }, [chart]);

-  // push prediction overlay
+    // 오늘 날짜 마커: 일/주/월봉에서만 표시 (10분봉은 데이터 자체가 오늘 하루라 무의미).
+    // markers 는 데이터 포인트의 time 과 일치해야 표시되므로, 오늘 또는 가장 가까운 과거
+    // 거래일을 찾는다.
+    if (!isIntraday && chart.today) {
+      const todayTs = isoToUtcTs(chart.today);
+      // 차트의 마지막 데이터가 오늘이면 그 위에, 아니면 마지막 데이터 위에 "오늘" 표시.
+      const lastTs = data.length > 0 ? (data[data.length - 1].time as UTCTimestamp) : null;
+      const markerTime = (lastTs && lastTs <= todayTs ? lastTs : todayTs) as UTCTimestamp;
+      const markers: SeriesMarker<Time>[] = [
+        {
+          time: markerTime,
+          position: "aboveBar",
+          color: "#fbbf24",
+          shape: "arrowDown",
+          text: "오늘",
+        },
+      ];
+      candleRef.current.setMarkers(markers);
+    } else {
+      candleRef.current.setMarkers([]);
+    }
+    chartRef.current?.timeScale().fitContent();
+  }, [chart, isIntraday]);
+
+  // push prediction overlay (10분봉에서는 표시 안 함 — 예측은 일봉 기준)
  useEffect(() => {
    if (!chartRef.current) return;
-    // remove previous overlay
    if (predRef.current) {
      chartRef.current.removeSeries(predRef.current);
      predRef.current = null;
@@ -101,6 +144,7 @@ export function StockChart({ chart, prediction }: Props) {
      chartRef.current.removeSeries(predHighRef.current);
      predHighRef.current = null;
    }
+    if (isIntraday) return;
    if (!prediction || !prediction.found || !prediction.steps?.length) return;
    const baseDate = prediction.base_date!;
    const baseClose = prediction.base_close;
@@ -108,22 +152,22 @@ export function StockChart({ chart, prediction }: Props) {
    const sorted = [...prediction.steps].sort((a, b) => a.horizon - b.horizon);

    const med: LineData[] = [
-      { time: dateToUtcTs(baseDate), value: baseClose },
+      { time: isoToUtcTs(baseDate), value: baseClose },
      ...sorted
        .filter((s) => s.point_close !== null)
-        .map((s) => ({ time: dateToUtcTs(s.target_date), value: s.point_close as number })),
+        .map((s) => ({ time: isoToUtcTs(s.target_date), value: s.point_close as number })),
    ];
    const lo: LineData[] = [
-      { time: dateToUtcTs(baseDate), value: baseClose },
+      { time: isoToUtcTs(baseDate), value: baseClose },
      ...sorted
        .filter((s) => s.ci_low !== null)
-        .map((s) => ({ time: dateToUtcTs(s.target_date), value: s.ci_low as number })),
+        .map((s) => ({ time: isoToUtcTs(s.target_date), value: s.ci_low as number })),
    ];
    const hi: LineData[] = [
-      { time: dateToUtcTs(baseDate), value: baseClose },
+      { time: isoToUtcTs(baseDate), value: baseClose },
      ...sorted
        .filter((s) => s.ci_high !== null)
-        .map((s) => ({ time: dateToUtcTs(s.target_date), value: s.ci_high as number })),
+        .map((s) => ({ time: isoToUtcTs(s.target_date), value: s.ci_high as number })),
    ];

    const medLine = chartRef.current.addLineSeries({
@@ -157,7 +201,7 @@ export function StockChart({ chart, prediction }: Props) {
    predLowRef.current = loLine;
    predHighRef.current = hiLine;
    chartRef.current.timeScale().fitContent();
-  }, [prediction]);
+  }, [prediction, isIntraday]);

  return (
    <div className="h-[460px] w-full rounded-md border border-zinc-800 bg-zinc-900/30 p-2">
--- a/web/lib/api.ts
+++ b/web/lib/api.ts
@@ -42,6 +42,7 @@ export type SymbolSearch = {
 };

 export type OhlcvPoint = {
+  // 1d/1w/1mo: 'YYYY-MM-DD'  /  10m: 'YYYY-MM-DDTHH:MM:SS' (KST naive ISO)
  date: string;
  open: number | null;
  high: number | null;
@@ -50,6 +51,8 @@ export type OhlcvPoint = {
  volume: number | null;
 };

+export type ChartInterval = "10m" | "1d" | "1w" | "1mo";
+
 export type SentimentPoint = {
  date: string;
  n_articles: number;
@@ -68,7 +71,10 @@ export type ChartPayload = {
  code: string;
  name: string;
  market: string;
+  interval: ChartInterval;
+  intraday_status: string | null;
  range: { from: string; to: string };
+  today: string;
  ohlcv: OhlcvPoint[];
  sentiment: SentimentPoint[];
  trading_value: TradingValuePoint[];
@@ -178,13 +184,17 @@ export const api = {
      `/api/symbols/search?q=${encodeURIComponent(q)}&limit=${limit}&seed_only=${seedOnly}`,
    ),
  getSymbol: (code: string) => getJson<Symbol>(`/api/symbols/${encodeURIComponent(code)}`),
-  getChart: (code: string, days = 180) =>
-    getJson<ChartPayload>(`/api/chart/${encodeURIComponent(code)}?days=${days}`),
-  predict: (code: string, horizons = "1,3,5") =>
-    getJson<PredictResponse>(
-      `/api/predict/${encodeURIComponent(code)}?horizons=${encodeURIComponent(horizons)}`,
-      { method: "POST" },
+  getChart: (code: string, days = 180, interval: ChartInterval = "1d") =>
+    getJson<ChartPayload>(
+      `/api/chart/${encodeURIComponent(code)}?days=${days}&interval=${encodeURIComponent(interval)}`,
    ),
+  predict: (code: string, horizons: string | number[] = "1,3,5") => {
+    const h = Array.isArray(horizons) ? horizons.join(",") : horizons;
+    return getJson<PredictResponse>(
+      `/api/predict/${encodeURIComponent(code)}?horizons=${encodeURIComponent(h)}`,
+      { method: "POST" },
+    );
+  },
  latestPrediction: (code: string) =>
    getJson<LatestPredictionResponse>(`/api/predict/${encodeURIComponent(code)}/latest`),
  metrics: (code: string, windowDays = 30) =>