From be1f8870b4f518d58131bfd04c846e8ff9801d7a Mon Sep 17 00:00:00 2001 From: claude-owner Date: Mon, 1 Jun 2026 11:02:20 +0900 Subject: [PATCH] refactor(card): extend CardHeader with right slot, absorb InvestorCumulative MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 본문 카드 헤더 단일 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 을 로 교체. 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 통과. --- web/components/CardHeader.tsx | 38 +++++++++++++-------- web/components/InvestorCumulative.tsx | 49 ++++++++++++++------------- 2 files changed, 49 insertions(+), 38 deletions(-) diff --git a/web/components/CardHeader.tsx b/web/components/CardHeader.tsx index 7cf980b..fef60d6 100644 --- a/web/components/CardHeader.tsx +++ b/web/components/CardHeader.tsx @@ -1,32 +1,40 @@ -// 상세 페이지 본문 카드의 표준 헤더 — title 좌, 옵셔널 subtitle 우. -// 작은 wrapper 지만 본문 카드 8개(Metrics / IntradayReturns / PeriodReturns / +// 상세 페이지 본문 카드의 표준 헤더 — title 좌, 옵셔널 우측 슬롯 우. +// 작은 wrapper 지만 본문 카드 9개(Metrics / IntradayReturns / PeriodReturns / // CompositeScoreCard / PeerComparePanel / TradingValuePanel / DisclosuresPanel / -// NewsList) 가 같은 mb-3 flex items-baseline justify-between 패턴을 -// character-by-character 로 중복 정의하고 있어, ReturnBucket 분리와 같은 이유로 -// 단일 source of truth 로 묶는다 — 한쪽만 마진/폰트 바꾸면 본문 카드들 사이에 -// 톤 점프가 생기는 future drift 리스크 제거. +// NewsList / InvestorCumulative) 가 같은 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). +// 우측 슬롯은 두 형태: +// - subtitle: 단순 보조 텍스트 (text-[11px] text-zinc-500 자동 적용). 8개 카드 사용. +// - right : 임의 ReactNode (버튼 그룹 등 인터랙티브). InvestorCumulative 가 사용. +// 둘 중 하나만 지정. 동시 지정 시 right 우선 (호출자 의도 명확화는 호출 시점에서). +// +// 제외 카드 — PredictionPanel: title 자체가 제목 + 설명 2줄 stack 이고 우측 큰 +// button 이라 flex 정렬이 items-center 필요. 별도 패턴이 한 곳뿐이라 wrapper 의 +// API 를 확장하기보다는 자체 헤더 유지하는 게 surgical. import type { ReactNode } from "react"; type Props = { title: ReactNode; - // 우측 보조 정보. 없으면 헤더에 title 만 남음 (이 경우에도 mb-3 flex 컨테이너 + // 우측 보조 텍스트. 없으면 헤더에 title 만 남음 (이 경우에도 mb-3 flex 컨테이너 // 는 유지 — MetricsPanel 같은 단일-제목 카드도 같은 라인 높이로 정렬). subtitle?: ReactNode; + // 우측 임의 노드 (버튼 그룹 등). 제공되면 subtitle 대신 렌더. + right?: ReactNode; }; -export function CardHeader({ title, subtitle }: Props) { +export function CardHeader({ title, subtitle, right }: Props) { return ( -
+
{title}
- {subtitle != null && ( + {right != null ? ( + right + ) : subtitle != null ? (
{subtitle}
- )} + ) : null}
); } diff --git a/web/components/InvestorCumulative.tsx b/web/components/InvestorCumulative.tsx index 081326c..150ba62 100644 --- a/web/components/InvestorCumulative.tsx +++ b/web/components/InvestorCumulative.tsx @@ -14,6 +14,7 @@ import { useMemo, useState } from "react"; import type { TradingValuePoint } from "../lib/api"; +import { CardHeader } from "./CardHeader"; type Window = 20 | 60 | 120; @@ -66,29 +67,31 @@ export function InvestorCumulative({ data }: { data: TradingValuePoint[] }) { return (
-
-
투자자별 누적 순매수
-
- {WINDOW_OPTIONS.map((w) => { - const on = win === w.v; - return ( - - ); - })} -
-
+ + {WINDOW_OPTIONS.map((w) => { + const on = win === w.v; + return ( + + ); + })} +
+ } + />
{SUBJECTS.map((s) => (