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:
@@ -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} />
|
||||
|
||||
Reference in New Issue
Block a user