Compare commits

..

2 Commits

Author SHA1 Message Date
claude-owner
fabc21e262 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 통과.
2026-06-01 10:57:50 +09:00
claude-owner
9e8c32e70c docs(card): fix CardHeader comment — exclude InvestorCumulative from adopters
리뷰어 비차단 노트 후속. 959e9af 의 CardHeader.tsx 주석은 본문 카드 9개 목록에
InvestorCumulative 를 포함시켰지만, 실제로는 우측이 window 선택 button 그룹
(aria-pressed) 인 커스텀 헤더라 wrapper 적용 대상이 아님.

- 적용 카드 9 → 8 (Metrics / IntradayReturns / PeriodReturns / CompositeScoreCard
  / PeerComparePanel / TradingValuePanel / DisclosuresPanel / NewsList).
- 제외 카드 섹션에 InvestorCumulative 추가, PredictionPanel 옆에 나란히 명시.
  근거 — 둘 다 우측이 단순 subtitle 텍스트가 아닌 인터랙티브 컨트롤이라
  CardHeader 의 'subtitle 우측' 패턴에 안 맞음.

주석 한정 변경 — 런타임/타입 영향 없음. tsc/next lint 통과.
2026-06-01 10:57:37 +09:00
2 changed files with 16 additions and 10 deletions

View File

@@ -1,13 +1,15 @@
// 상세 페이지 본문 카드의 표준 헤더 — title 좌, 옵셔널 subtitle 우. // 상세 페이지 본문 카드의 표준 헤더 — title 좌, 옵셔널 subtitle 우.
// 작은 wrapper 지만 본문 카드 9개(Metrics / IntradayReturns / PeriodReturns / // 작은 wrapper 지만 본문 카드 8개(Metrics / IntradayReturns / PeriodReturns /
// CompositeScoreCard / PeerComparePanel / TradingValuePanel / InvestorCumulative / // CompositeScoreCard / PeerComparePanel / TradingValuePanel / DisclosuresPanel /
// DisclosuresPanel / NewsList) 가 같은 mb-3 flex items-baseline justify-between // NewsList) 가 같은 mb-3 flex items-baseline justify-between 패턴을
// 패턴을 character-by-character 로 중복 정의하고 있어, ReturnBucket 분리와 같은 // character-by-character 로 중복 정의하고 있어, ReturnBucket 분리와 같은 이유로
// 이유로 단일 source of truth 로 묶는다 — 한쪽만 마진/폰트 바꾸면 본문 카드들 // 단일 source of truth 로 묶는다 — 한쪽만 마진/폰트 바꾸면 본문 카드들 사이에
// 사이에 톤 점프가 생기는 future drift 리스크 제거. // 톤 점프가 생기는 future drift 리스크 제거.
// //
// PredictionPanel 은 우측이 '예측 실행' button 인 커스텀 레이아웃이라 이 wrapper // 제외 카드 — 우측이 단순 subtitle 텍스트가 아닌 인터랙티브 컨트롤이라 이
// 대상이 아님. 해당 카드는 자체 헤더 유지. // wrapper 대상이 아님. 자체 헤더 유지:
// - PredictionPanel : 우측이 '예측 실행' button.
// - InvestorCumulative : 우측이 window 선택 button 그룹(aria-pressed).
import type { ReactNode } from "react"; import type { ReactNode } from "react";

View File

@@ -918,10 +918,14 @@ export function StockChart({ chart, prediction, targets }: Props) {
}; };
// 전체화면(native or 폴백) 일 때는 viewport 를 꽉 채워서 차트 면적 최대화. // 전체화면(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 const wrapperCls = fullscreen
? "fixed inset-0 z-50 flex w-full flex-col overflow-auto bg-zinc-950 p-3" ? "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. // 차트 본체 높이 — 전체화면이면 가용 공간을 차지하도록 flex-1.
const chartBoxCls = fullscreen const chartBoxCls = fullscreen
? "relative min-h-[300px] flex-1 w-full" ? "relative min-h-[300px] flex-1 w-full"