refactor(card): extract shared CardHeader for detail-page body cards

상세 페이지 본문 카드 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"
This commit is contained in:
claude-owner
2026-06-01 10:52:32 +09:00
parent 232b94755a
commit 959e9afa80
9 changed files with 55 additions and 35 deletions

View File

@@ -7,6 +7,7 @@
import Link from "next/link";
import { useEffect, useState } from "react";
import { api, type PeerCompareItem, type PeerCompareResponse } from "../lib/api";
import { CardHeader } from "./CardHeader";
export function PeerComparePanel({ code }: { code: string }) {
const [data, setData] = useState<PeerCompareResponse | null>(null);
@@ -50,12 +51,10 @@ export function PeerComparePanel({ code }: { code: string }) {
return (
<div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
<div className="mb-3 flex items-baseline justify-between">
<div className="text-sm font-medium text-zinc-200"> </div>
<div className="text-[11px] text-zinc-500">
{data.window} · peer {data.peer_count ?? 0}
</div>
</div>
<CardHeader
title="동종업종 비교"
subtitle={`최근 ${data.window}거래일 · peer ${data.peer_count ?? 0}종목`}
/>
<div className="mb-3 flex flex-wrap gap-1.5">
{data.themes.map((t) => (