ui(chart): harmonize StockChart container tone to detail-page body-card palette
상세 페이지 본문 카드 톤 통일 마무리. StockChart 컨테이너는 본문 영역의
top-level 카드 슬롯인데 마지막 남은 분기 톤이었음:
before: w-full rounded-lg border border-zinc-800 bg-zinc-900/30 p-2
after: w-full rounded-md border border-zinc-800 bg-zinc-900/40 p-2
- rounded-lg → rounded-md : 3b06b95 에서 PredictionPanel 도 같은 통일을 했고,
같은 좌측 컬럼에서 차트 바로 아래에 PredictionPanel 이 붙어있어 corner radius
분기는 시각적 톤 점프.
- bg-zinc-900/30 → bg-zinc-900/40 : /30 은 ReturnBucket 같은 nested sub-card
보조 톤. top-level 본문 카드는 일관되게 /40 이어야 함.
- p-2 유지 : 차트 캔버스가 자체 inner padding 을 들이므로 p-4 는 빈 가장자리
낭비. 이건 의도된 분기라 주석으로 근거 명시.
- fullscreen 모드는 viewport 전체 차지라 별개 — 손대지 않음.
전체화면 외 모든 종목 페이지에서 StockChart → PredictionPanel 톤 일치 확인.
tsc/next lint 통과.
This commit is contained in:
@@ -918,10 +918,14 @@ export function StockChart({ chart, prediction, targets }: Props) {
|
||||
};
|
||||
|
||||
// 전체화면(native or 폴백) 일 때는 viewport 를 꽉 채워서 차트 면적 최대화.
|
||||
// 일반 모드는 기존 카드 스타일 유지.
|
||||
// 일반 모드는 상세 페이지 본문 카드 표준 톤 (rounded-md / border-zinc-800 /
|
||||
// bg-zinc-900/40) 채택 — 같은 좌측 컬럼 바로 아래의 PredictionPanel 과 톤 일치.
|
||||
// padding 만 p-2 유지: 차트 캔버스가 자체 inner padding 을 들이므로 p-4 는 빈
|
||||
// 가장자리 낭비. (참고: bg-zinc-900/30 은 ReturnBucket 같은 nested sub-card 용
|
||||
// 보조 톤 — top-level 본문 카드는 /40 로 통일.)
|
||||
const wrapperCls = fullscreen
|
||||
? "fixed inset-0 z-50 flex w-full flex-col overflow-auto bg-zinc-950 p-3"
|
||||
: "w-full rounded-lg border border-zinc-800 bg-zinc-900/30 p-2";
|
||||
: "w-full rounded-md border border-zinc-800 bg-zinc-900/40 p-2";
|
||||
// 차트 본체 높이 — 전체화면이면 가용 공간을 차지하도록 flex-1.
|
||||
const chartBoxCls = fullscreen
|
||||
? "relative min-h-[300px] flex-1 w-full"
|
||||
|
||||
Reference in New Issue
Block a user