From 959e9afa802305acc08a80691b2f954e00ef1103 Mon Sep 17 00:00:00 2001 From: claude-owner Date: Mon, 1 Jun 2026 10:52:32 +0900 Subject: [PATCH] refactor(card): extract shared CardHeader for detail-page body cards MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 상세 페이지 본문 카드 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" --- web/components/CardHeader.tsx | 30 +++++++++++++++++++++++++++ web/components/CompositeScoreCard.tsx | 8 ++----- web/components/DisclosuresPanel.tsx | 11 +++++----- web/components/IntradayReturns.tsx | 6 ++---- web/components/MetricsPanel.tsx | 3 ++- web/components/NewsList.tsx | 6 ++---- web/components/PeerComparePanel.tsx | 11 +++++----- web/components/PeriodReturns.tsx | 6 ++---- web/components/TradingValuePanel.tsx | 9 ++++---- 9 files changed, 55 insertions(+), 35 deletions(-) create mode 100644 web/components/CardHeader.tsx diff --git a/web/components/CardHeader.tsx b/web/components/CardHeader.tsx new file mode 100644 index 0000000..b263452 --- /dev/null +++ b/web/components/CardHeader.tsx @@ -0,0 +1,30 @@ +// 상세 페이지 본문 카드의 표준 헤더 — 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 ( +
+
{title}
+ {subtitle != null && ( +
{subtitle}
+ )} +
+ ); +} diff --git a/web/components/CompositeScoreCard.tsx b/web/components/CompositeScoreCard.tsx index e0e2982..47ad707 100644 --- a/web/components/CompositeScoreCard.tsx +++ b/web/components/CompositeScoreCard.tsx @@ -12,6 +12,7 @@ // 종합 = 평균. 50 미만 = 약세(파랑), 50 초과 = 강세(빨강). import type { ChartPayload } from "../lib/api"; +import { CardHeader } from "./CardHeader"; type Scores = { momentum: number | null; @@ -111,12 +112,7 @@ export function CompositeScoreCard({ chart }: { chart: ChartPayload }) { const s = computeScores(chart); return (
-
-
종합 점수 (AI)
-
- 모멘텀·수급·감성·추세 평균 -
-
+
diff --git a/web/components/DisclosuresPanel.tsx b/web/components/DisclosuresPanel.tsx index 304f74d..fda3d2d 100644 --- a/web/components/DisclosuresPanel.tsx +++ b/web/components/DisclosuresPanel.tsx @@ -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(null); @@ -27,12 +28,10 @@ export function DisclosuresPanel({ code }: { code: string }) { return (
-
-
공시 (DART)
-
- {data ? `최근 ${data.items.length}건` : ""} -
-
+ {err &&
공시 로딩 실패: {err}
} {!err && !data &&
공시 로딩 중…
} diff --git a/web/components/IntradayReturns.tsx b/web/components/IntradayReturns.tsx index 3572f78..5896a93 100644 --- a/web/components/IntradayReturns.tsx +++ b/web/components/IntradayReturns.tsx @@ -13,6 +13,7 @@ // 추가 백엔드 호출 없음 — chart.ohlcv 슬라이싱만. import type { OhlcvPoint } from "../lib/api"; +import { CardHeader } from "./CardHeader"; import { ReturnBucket } from "./ReturnBucket"; const BUCKETS: { label: string; bars: number }[] = [ @@ -50,10 +51,7 @@ export function IntradayReturns({ ohlcv }: { ohlcv: OhlcvPoint[] }) { return (
-
-
단기 수익률
-
10분봉 기준 · 60초 갱신
-
+
{buckets.map((b) => ( diff --git a/web/components/MetricsPanel.tsx b/web/components/MetricsPanel.tsx index 720c3af..174988f 100644 --- a/web/components/MetricsPanel.tsx +++ b/web/components/MetricsPanel.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import { api, type MetricsResponse } from "../lib/api"; +import { CardHeader } from "./CardHeader"; export function MetricsPanel({ code }: { code: string }) { const [m, setM] = useState(null); @@ -36,7 +37,7 @@ export function MetricsPanel({ code }: { code: string }) { return (
-
최근 30일 모델 성능
+ diff --git a/web/components/NewsList.tsx b/web/components/NewsList.tsx index 5373af7..2bc977f 100644 --- a/web/components/NewsList.tsx +++ b/web/components/NewsList.tsx @@ -7,6 +7,7 @@ import { useEffect, useState } from "react"; import { api, type NewsItem, type NewsResponse } from "../lib/api"; +import { CardHeader } from "./CardHeader"; export function NewsList({ code }: { code: string }) { const [data, setData] = useState(null); @@ -34,10 +35,7 @@ export function NewsList({ code }: { code: string }) { return (
-
-
뉴스 · 공시
-
최근 {data.items.length}건
-
+
    {data.items.map((n, i) => ( diff --git a/web/components/PeerComparePanel.tsx b/web/components/PeerComparePanel.tsx index 8ac06dc..e1da889 100644 --- a/web/components/PeerComparePanel.tsx +++ b/web/components/PeerComparePanel.tsx @@ -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(null); @@ -50,12 +51,10 @@ export function PeerComparePanel({ code }: { code: string }) { return (
    -
    -
    동종업종 비교
    -
    - 최근 {data.window}거래일 · peer {data.peer_count ?? 0}종목 -
    -
    +
    {data.themes.map((t) => ( diff --git a/web/components/PeriodReturns.tsx b/web/components/PeriodReturns.tsx index 31ae2c2..f6b4519 100644 --- a/web/components/PeriodReturns.tsx +++ b/web/components/PeriodReturns.tsx @@ -5,6 +5,7 @@ // 거래일 기준 근사: 1주≈5, 1개월≈21, 3개월≈63, 6개월≈126, 1년≈252. import type { OhlcvPoint } from "../lib/api"; +import { CardHeader } from "./CardHeader"; import { ReturnBucket } from "./ReturnBucket"; const BUCKETS: { label: string; days: number }[] = [ @@ -40,10 +41,7 @@ export function PeriodReturns({ ohlcv }: { ohlcv: OhlcvPoint[] }) { return (
    -
    -
    기간 수익률
    -
    차트 구간 기준
    -
    +
    {buckets.map((b) => ( diff --git a/web/components/TradingValuePanel.tsx b/web/components/TradingValuePanel.tsx index 46c49a2..d615ec4 100644 --- a/web/components/TradingValuePanel.tsx +++ b/web/components/TradingValuePanel.tsx @@ -6,6 +6,7 @@ // 색: KR 관행 — 매수 우위(+) 빨강, 매도 우위(-) 파랑. import type { TradingValuePoint } from "../lib/api"; +import { CardHeader } from "./CardHeader"; export function TradingValuePanel({ data, @@ -24,10 +25,10 @@ export function TradingValuePanel({ return (
    -
    -
    거래주체 순매수
    -
    최근 {recent.length}일 · 단위: 억원
    -
    +