9e8c32e70c
리뷰어 비차단 노트 후속. 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 통과.
33 lines
1.5 KiB
TypeScript
33 lines
1.5 KiB
TypeScript
// 상세 페이지 본문 카드의 표준 헤더 — title 좌, 옵셔널 subtitle 우.
|
|
// 작은 wrapper 지만 본문 카드 8개(Metrics / IntradayReturns / PeriodReturns /
|
|
// CompositeScoreCard / PeerComparePanel / TradingValuePanel / DisclosuresPanel /
|
|
// NewsList) 가 같은 mb-3 flex items-baseline justify-between 패턴을
|
|
// character-by-character 로 중복 정의하고 있어, ReturnBucket 분리와 같은 이유로
|
|
// 단일 source of truth 로 묶는다 — 한쪽만 마진/폰트 바꾸면 본문 카드들 사이에
|
|
// 톤 점프가 생기는 future drift 리스크 제거.
|
|
//
|
|
// 제외 카드 — 우측이 단순 subtitle 텍스트가 아닌 인터랙티브 컨트롤이라 이
|
|
// wrapper 대상이 아님. 자체 헤더 유지:
|
|
// - PredictionPanel : 우측이 '예측 실행' button.
|
|
// - InvestorCumulative : 우측이 window 선택 button 그룹(aria-pressed).
|
|
|
|
import type { ReactNode } from "react";
|
|
|
|
type Props = {
|
|
title: ReactNode;
|
|
// 우측 보조 정보. 없으면 헤더에 title 만 남음 (이 경우에도 mb-3 flex 컨테이너
|
|
// 는 유지 — MetricsPanel 같은 단일-제목 카드도 같은 라인 높이로 정렬).
|
|
subtitle?: ReactNode;
|
|
};
|
|
|
|
export function CardHeader({ title, subtitle }: Props) {
|
|
return (
|
|
<div className="mb-3 flex items-baseline justify-between">
|
|
<div className="text-sm font-medium text-zinc-200">{title}</div>
|
|
{subtitle != null && (
|
|
<div className="text-[11px] text-zinc-500">{subtitle}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|