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/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">