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:
@@ -5,6 +5,7 @@
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { api, type NewsResponse } from "../lib/api";
|
||||
import { CardHeader } from "./CardHeader";
|
||||
|
||||
export function DisclosuresPanel({ code }: { code: string }) {
|
||||
const [data, setData] = useState<NewsResponse | null>(null);
|
||||
@@ -27,12 +28,10 @@ export function DisclosuresPanel({ 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">공시 (DART)</div>
|
||||
<div className="text-[11px] text-zinc-500">
|
||||
{data ? `최근 ${data.items.length}건` : ""}
|
||||
</div>
|
||||
</div>
|
||||
<CardHeader
|
||||
title="공시 (DART)"
|
||||
subtitle={data ? `최근 ${data.items.length}건` : ""}
|
||||
/>
|
||||
|
||||
{err && <div className="text-xs text-red-400">공시 로딩 실패: {err}</div>}
|
||||
{!err && !data && <div className="text-xs text-zinc-500">공시 로딩 중…</div>}
|
||||
|
||||
Reference in New Issue
Block a user