959e9afa80
상세 페이지 본문 카드 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"
31 lines
1.4 KiB
TypeScript
31 lines
1.4 KiB
TypeScript
// 상세 페이지 본문 카드의 표준 헤더 — title 좌, 옵셔널 subtitle 우.
|
|
// 작은 wrapper 지만 본문 카드 9개(Metrics / IntradayReturns / PeriodReturns /
|
|
// CompositeScoreCard / PeerComparePanel / TradingValuePanel / InvestorCumulative /
|
|
// DisclosuresPanel / NewsList) 가 같은 mb-3 flex items-baseline justify-between
|
|
// 패턴을 character-by-character 로 중복 정의하고 있어, ReturnBucket 분리와 같은
|
|
// 이유로 단일 source of truth 로 묶는다 — 한쪽만 마진/폰트 바꾸면 본문 카드들
|
|
// 사이에 톤 점프가 생기는 future drift 리스크 제거.
|
|
//
|
|
// PredictionPanel 은 우측이 '예측 실행' button 인 커스텀 레이아웃이라 이 wrapper
|
|
// 대상이 아님. 해당 카드는 자체 헤더 유지.
|
|
|
|
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>
|
|
);
|
|
}
|