feat(ui): 우측 시세 정보 사이드바 추가 (시가/고가/저가/거래량/52주범위)

토스 종목 페이지 우측 카드와 동일 위치/구성. ChartPayload(1Y, 1d) 한 번 받아
오늘 OHLC + 1년 high/low 만 계산. 백엔드가 PER/EPS/시총 미제공이라 제외.

lg 브레이크포인트에서 chart(1fr) + sidebar(280px) 그리드.
mobile 에서는 사이드바가 chart 아래로 스택.

verify: tsc --noEmit clean, next lint clean.
This commit is contained in:
claude
2026-05-28 01:21:43 +09:00
parent 6ab3679331
commit 16aeba1a20
2 changed files with 130 additions and 7 deletions

View File

@@ -8,6 +8,7 @@ import { PeriodTabs, periodSpec, type Period } from "../../components/PeriodTabs
import { PredictionPanel } from "../../components/PredictionPanel";
import { PriceHero } from "../../components/PriceHero";
import { StockChart } from "../../components/StockChart";
import { SymbolSidebar } from "../../components/SymbolSidebar";
import { api, type ChartPayload, type LatestPredictionResponse } from "../../lib/api";
export default function CodePage({ params }: { params: { code: string } }) {
@@ -100,14 +101,19 @@ export default function CodePage({ params }: { params: { code: string } }) {
prev={prev}
asOf={asOf}
/>
<StockChart chart={chart} prediction={prediction} />
{isIntraday && chart.intraday_status && (
<div className="mt-2 text-right text-[11px] text-zinc-500">
10 · 60 · [{chart.intraday_status}]
<div className="grid gap-6 lg:grid-cols-[1fr_280px]">
<div>
<StockChart chart={chart} prediction={prediction} />
{isIntraday && chart.intraday_status && (
<div className="mt-2 text-right text-[11px] text-zinc-500">
10 · 60 · [{chart.intraday_status}]
</div>
)}
<div className="mt-6">
<PredictionPanel code={code} initial={prediction} onResult={setPrediction} />
</div>
</div>
)}
<div className="mt-6">
<PredictionPanel code={code} initial={prediction} onResult={setPrediction} />
<SymbolSidebar code={code} />
</div>
<div className="mt-6 grid gap-6 md:grid-cols-2">
<MetricsPanel code={code} />