본문 카드 헤더 단일 source of truth 한 단계 확장.
CardHeader:
- 옵셔널 right?: ReactNode 슬롯 추가. 제공되면 subtitle 대신 렌더. subtitle 은
텍스트 케이스(text-[11px] text-zinc-500 자동) 편의 prop 으로 유지.
- 컨테이너에 gap-2 추가. 기존 8개 caller 는 justify-between 으로 충분히 떨어져
있어 시각 변화 없고, 좁은 폭에서 title↔우측 슬롯 충돌 방지 효과.
- 주석: 적용 카드 8 → 9 (InvestorCumulative 추가). 제외 카드 PredictionPanel
유지 — title 이 제목+설명 2줄 stack 이고 큰 button 정렬을 위해 items-center
필요해 wrapper API 확장 비용보다 자체 헤더 유지가 surgical.
InvestorCumulative:
- 자체 헤더 markup 을 <CardHeader title=... right={...} /> 로 교체. window
선택 button 그룹(20/60/120일 · aria-pressed) 은 right slot 으로 전달, 기존
inline className/동작 그대로 보존.
- 시각 결과 완전 동일 — 기존 헤더가 character-by-character 로 CardHeader 와
같은 mb-3 flex items-baseline justify-between gap-2 였음을 확인.
검증: tsc/next lint 통과.
리뷰어 비차단 노트 후속. 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 통과.
상세 페이지 본문 카드 8개가 character-by-character 로 동일한 헤더
markup 을 중복 정의하고 있었음 — ReturnBucket 분리와 같은 future
drift 리스크. 단일 source of truth 로 묶음.
신규 web/components/CardHeader.tsx:
- 표준 패턴 캡슐화: mb-3 flex items-baseline justify-between 컨테이너
+ text-sm font-medium text-zinc-200 title + 옵셔널 text-[11px]
text-zinc-500 subtitle.
- subtitle 은 옵셔널 — MetricsPanel 처럼 제목만 있는 카드도 같은
컨테이너로 정렬돼 본문 카드 라인 높이 통일.
적용한 카드 8개:
- IntradayReturns / PeriodReturns / CompositeScoreCard /
PeerComparePanel / TradingValuePanel / DisclosuresPanel / NewsList
— 기존 markup 과 시각 결과 완전 동일.
- MetricsPanel — 기존 mb-2 standalone div → CardHeader 로 흡수,
마진이 mb-2 → mb-3 으로 정렬됨. 다른 본문 카드들과 헤더 아래 공간
통일.
적용 제외:
- PredictionPanel: 우측 슬롯이 button (예측 실행), 좌측이 title+
subtitle 두 줄 중첩. 단순 text subtitle 모델에 안 맞음.
- InvestorCumulative: 우측 슬롯이 window 선택 button 그룹 (1M/3M/...)
+ aria-pressed. 위와 같은 이유.
검증:
- npx tsc --noEmit clean
- npx next lint "✔ No ESLint warnings or errors"
