디자인 리소스

Dashboard Guide

D.Hub 대시보드 페이지(투자현황, 포트폴리오 현황 등)에서 반복되는 레이아웃 패턴입니다. MCP get_spec("dashboard")로 동일한 규칙을 조회할 수 있습니다.

대시보드 배경색 + 블리딩

대시보드 페이지는 bg-black-5 배경을 사용하며, AppLayout의 콘텐츠 영역 패딩을 음수 마진으로 상쇄(bleed)합니다.

속성	값	설명
배경색	bg-black-5	연한 회색, 카드와 대비
블리딩	-mx-7 -my-8	AppLayout 콘텐츠 패딩 상쇄
내부 패딩	px-8 pb-8 pt-6	블리딩 후 재설정
섹션 간격	space-y-4	행 사이 16px

tsx

// 대시보드 배경색 + AppLayout 패딩 상쇄(bleed)
<div className="-mx-7 -my-8 min-h-full space-y-4 bg-black-5 px-8 pb-8 pt-6">
  {/* 대시보드 콘텐츠 */}
</div>

신선도 표시 + 동기화 버튼

데이터 기준 시점은 페이지 헤더 우측(AppLayout의 actions 영역)에 배치합니다. 본문 내부에 두지 않습니다.

속성	값	설명
시계 아이콘	h-3.5 w-3.5 text-black-40
날짜 텍스트	typo-paragraph-normal text-black-40
동기화 버튼	h-6 w-6 rounded-md	hover: bg-black-5

tsx

const { setLayout } = useLayout();

useEffect(() => {
  setLayout({
    actions: (
      <div className="flex items-center gap-1.5">
        <ClockIcon className="h-3.5 w-3.5 text-black-40" />
        <span className="typo-paragraph-normal text-black-40">
          {date} 기준
        </span>
        <button type="button" className="flex h-6 w-6 items-center justify-center rounded-md text-black-40 hover:bg-black-5 hover:text-black" onClick={onSync}>
          <RefreshCwIcon className="h-3.5 w-3.5" />
        </button>
      </div>
    ),
  });
}, [setLayout]);

카드 컴포넌트 사용 원칙

대시보드의 모든 섹션은 DS 카드 컴포넌트로 감싸야 합니다. 커스텀 <div>로 카드를 직접 구성하지 않습니다.

용도	컴포넌트	비고
차트/테이블 섹션	InformationCard	title + label(단위) + children
KPI 요약 (컬러)	HeroCard (KPIPanel)	variant: primary / grey
지표 카드	MetricCard	단일/다중 items

포트폴리오 현황

회수완료12 개

정상기업8

주의기업3

1.24x

포트폴리오 MOIC

85%85/100

보고 완료율

차트 영역 (InformationCard + 차트)

tsx

<KPIPanel>
  <KPIPanel.Side>
    <HeroCard title="포트폴리오 현황" variant="primary">
      <div className="flex items-end">
        <StatItem label="회수완료" value="12 개" size="lg" />
        <div className="flex items-end gap-6 pl-12">
          <StatItem label="정상기업" value="8" />
          <StatItem label="주의기업" value="3" />
        </div>
      </div>
    </HeroCard>
    <div className="flex gap-3">
      <MetricCard items={[{ title: "MOIC", value: "1.24x" }]} size="large" compact className="flex-1" />
      <MetricCard items={[{ title: "보고 완료율", value: "85%", subValue: "85/100" }]} size="large" compact className="flex-1" />
    </div>
  </KPIPanel.Side>
  <KPIPanel.Main>
    <InformationCard title="섹터별 분포">
      <SectorDistributionChart data={data} />
    </InformationCard>
  </KPIPanel.Main>
</KPIPanel>

n열 레이아웃 높이 정합

2개 이상의 카드가 한 행에 배치될 때, items-stretch로 높이를 동기화합니다.

flex-row + items-stretch → 좌우 카드 외곽 높이 동일
  └─ InformationCard className="lg:h-full"
       └─ bg-black-3 wrapper (flex-1)
            └─ children className="lg:h-full"

반응형 주의:

h-full 대신 lg:h-full — 모바일에서는 콘텐츠 크기대로
items-stretch 대신 lg:items-stretch
고정폭 w-[309px]는 lg:w-[309px]로

tsx

{/* 행 컨테이너 — items-stretch로 높이 동기화 */}
<div className="flex flex-col gap-3 lg:flex-row lg:items-stretch">
  <div className="min-w-0 flex-1">
    <InformationCard title="차트 A" className="lg:h-full">
      <div className="p-4 lg:h-full">{/* 차트 */}</div>
    </InformationCard>
  </div>
  <div className="min-w-0 flex-1">
    <InformationCard title="차트 B" className="lg:h-full">
      <div className="p-4 lg:h-full">{/* 차트 */}</div>
    </InformationCard>
  </div>
</div>

DS 변경사항

InformationCard — non-collapsible children wrapper에 flex-1 추가됨
ChartContainer — height 기본값(300) 제거됨. flex 채움 시 className="min-h-[350px] flex-1"

범례 위치 — 우측 하단

선 그래프, 막대 그래프의 범례는 차트 하단 우측 정렬로 통일합니다.

속성	값	설명
정렬	justify-end	우측
위치	mt-auto	하단에 밀착
dot 크기	h-2.5 w-2.5 rounded-full
텍스트	typo-caption-normal text-black-60
간격	gap-x-5 gap-y-1

tsx

<div className="mt-auto flex flex-wrap items-center justify-end gap-x-5 gap-y-1 pt-1">
  <div className="flex items-center gap-1.5">
    <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />
    <span className="typo-caption-normal text-black-60">라벨</span>
  </div>
</div>

도넛 차트 범례

A. 우측 배치 — 공간이 충분한 경우. 2열 범례 + 세로 구분선.

Desktop (xl+):  도넛(220px) | 2열 범례
Tablet (lg~xl): 도넛(180px) | 1열 범례
Mobile (<lg):   도넛(140px) | 1열 범례

반응형: 도넛 w-[140px] lg:w-[180px] xl:w-[220px] (3단계)

B. 하단 배치 — 사이드 패널이나 좁은 카드. 1열 나열.

범례 깨짐 방지 규칙 (필수)

2열 → 1열 전환 기준을 xl(1280px)로 넉넉히 잡는다
1열로도 깨지면 도넛 크기를 줄인다 — lg:w-[180px] 중간 단계
범례 텍스트에 truncate 사용 금지 — 섹터명이 잘리면 데이터를 읽을 수 없다

속성	값	설명
색상 dot	h-3 w-3 rounded-full
이름	text-[12px] text-black-80	truncate 금지
수치/퍼센트	text-[12px] text-black-40
행 호버	rounded-lg px-2 py-1.5 hover:bg-black-5

차트 단위 표기

차트의 단위(억원, 배, % 등)는 InformationCard의 label prop으로 제목 옆에 표기합니다. 차트 내부나 하단에 별도로 두지 않습니다.

tsx

<InformationCard title="연도별 Cash Flow" label="(단위: 억원)">
  {/* 차트 */}
</InformationCard>