Box
아이콘·수치·레이블로 구성된 요약 정보를 하나의 박스 형태로 제공하는 레이아웃 컨테이너
개요
BoxIcon·BoxData·BoxLabel 등 하위 컴포넌트를 조합하여 대시보드 카드 형태의 요약 정보를 표시하는 레이아웃 컨테이너입니다.
주요 특징
- ✅ 아이콘 + 콘텐츠 레이아웃: icon prop과 children으로 영역 분리
- ✅ 아이콘 위치 설정: top/bottom/left/right 4방향 배치
- ✅ 클릭 이벤트: onClick 지정 시 포인터 커서 + 키보드 접근성 자동 적용
- ✅ 배경색 오버라이드: backgroundColor prop
- ✅ 가시성 제어: visible prop으로 선언적 표시/숨김
기본 사용
icon prop으로 아이콘 영역, children으로 콘텐츠 영역을 구성합니다.
Preview
1,234건
아이콘 위치 (iconPosition)
iconPosition prop으로 아이콘 배치 방향을 설정합니다. 기본값은 "right" (콘텐츠 좌측, 아이콘 우측).
Preview
클릭 이벤트 (onClick)
onClick prop을 지정하면 포인터 커서가 표시되며, role=“button”과 tabIndex가 자동으로 부여됩니다. Enter/Space 키보드 조작도 지원합니다.
Preview
배경색 (backgroundColor)
backgroundColor prop으로 박스 배경색을 오버라이드합니다.
Preview
100%
85%
3건
가시성 제어 (visible)
visible prop으로 선언적으로 표시/숨김을 제어합니다.
Preview
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | - | 아이콘 영역에 렌더링할 콘텐츠 |
iconPosition | "top" | "bottom" | "left" | "right" | "right" | 아이콘 배치 위치 |
children | ReactNode | - | 콘텐츠 영역 (BoxData, BoxLabel 등) |
suffix | string | - | 데이터 접미어 (BoxData에 전달용 메타데이터) |
visible | boolean | true | 표시 여부 (false면 렌더링 안 함) |
onClick | (e: MouseEvent) => void | - | 박스 클릭 핸들러 |
backgroundColor | string | - | 박스 배경색 오버라이드 |
className | string | - | 컨테이너에 적용할 CSS 클래스 |
style | CSSProperties | - | 인라인 스타일 |
title | string | - | HTML title (네이티브 툴팁) |
접근성
자동 적용 (onClick 지정 시)
- ✅
role="button"자동 부여 - ✅
tabIndex={0}으로 키보드 포커스 가능 - ✅ Enter/Space 키로 클릭 이벤트 발생
- ✅
cursor-pointer시각적 표시
권장 사항
- ✅ 클릭 가능한 Box에는 title prop으로 설명 제공
- ❌ 중요 정보를 색상만으로 전달하지 않기
관련 컴포넌트
Last updated on