패널

화면 본문을 이루는 카드 그릇이다. 머리줄에는 제목과 개수, 필터·검색 도구, 버튼을 한 줄로 두고 본문에는 표나 목록을 넣는다. title, toolbar, actions 가 모두 없으면 머리줄을 그리지 않는다. 작은 정보 묶음은 Card 를 쓰고, 표와 목록이 들어가는 넓은 본문 영역은 Panel 을 쓴다.

활용 방법

제목 · 개수 · 액션

count 는 제목 옆에 작게, actions 는 머리줄 오른쪽 끝에 놓인다.

Preview

작업 목록3건

본문에는 기본 안쪽 여백이 있다.

tsx

<Panel title="작업 목록" count="3건" actions={<Button size="sm" icon={<Plus size={14} />}>추가</Button>}>
  <p>본문에는 기본 안쪽 여백이 있다.</p>
</Panel>

도구줄 · flush · 꼬리줄

toolbar 는 머리줄의 남은 폭을 채운다. flush 는 본문 여백을 없애 목록이 가장자리까지 닿고, footer 는 합계나 안내 문구를 둔다.

Preview

A-102 정기 점검진행
B-221 부품 교체대기
C-019 설치완료

3건

tsx

<Panel toolbar={<SearchInput placeholder="검색" />} footer={<span>3건</span>} flush>
  <ul className="divide-y divide-border">...</ul>
</Panel>

설명

description 은 제목 아래 한 줄 보조 설명이다. 집계 기간이나 정렬 기준을 적는다.

Preview

대기 큐12

오래 기다린 순

가장 오래 기다린 항목이 맨 위에 온다.

tsx

<Panel title="대기 큐" count={12} description="오래 기다린 순">
  ...
</Panel>

언제 쓰지 않나

· 제목과 짧은 값만 있는 작은 정보 묶음은 Card 를 쓴다.
· 배경·테두리·여백만 필요하면 Box 를 쓴다.

속성

이름	타입	기본값	설명
title	ReactNode	-	섹션 제목(h2)
count	number \| string	-	제목 옆 개수 표시
description	ReactNode	-	제목 아래 보조 설명. title 이 있을 때만 보인다
toolbar	ReactNode	-	머리줄의 필터 · 검색 · 보기 전환. title 없이 쓸 수 있다
actions	ReactNode	-	머리줄 오른쪽 끝 버튼 묶음
footer	ReactNode	-	본문 아래 꼬리줄
flush	boolean	false	본문 안쪽 여백 제거
children	ReactNode	-	본문
className	string	-	root section 클래스. 격자 칸 폭(lg:col-span-2 등) 지정에 쓴다
ref	Ref<HTMLElement>	-	root section