박스

패딩·배경·테두리·반경을 입혀 내용을 묶고 시각 경계를 만드는 범용 레이아웃 컨테이너다. 자식을 늘리지 않고 자연 크기를 유지해, 늘어나기 쉬운 레이아웃 안에서 특히 쓸모 있다. 기본 반경은 sm(4px)으로 버튼·검색 같은 컨트롤과 같은 결을 맞췄고, 카드형 컨테이너는 lg·xl 로 키운다. prop 은 deux 스케일에 맞춰 큐레이션했고, 폭·그림자·per-side 패딩 같은 롱테일은 className 으로 덧입힌다. 행·열 정렬이 필요하면 박스가 아니라 Stack·Grid 를 쓴다.

활용 방법

컨테이너

기본은 아무 스타일 없는 일반 컨테이너. 배경·테두리를 더하면 카드가 되는데, 기본 반경(sm 4px)이 버튼·검색과 같아 한 화면에서 결이 맞는다.

Preview

아무 스타일 없는 박스(패딩만).

배경·테두리를 입힌 카드(기본 반경 = 컨트롤과 동일).

tsx

<Box padding="base">아무 스타일 없는 박스</Box>

{/* 기본 radius="sm"(4px): 버튼·검색과 같은 R */}
<Box background="surface" border="base" padding="base">
  카드
</Box>

패딩

padding 으로 사방 여백을 deux 간격 스케일에서 고른다(sm 12 · base 16 · lg 20 · xl 24px). paddingX·paddingY 로 축만 덮어쓸 수 있다.

Preview

base

tsx

<Box padding="base">...</Box>
<Box padding="lg" paddingX="xl">...</Box>

배경 · 테두리 · 반경

background(surface·muted), border(base·strong), radius(sm~xl·full)를 조합한다.

Preview

muted

border base

border strong · lg

surface · xl · shadow

tsx

<Box background="muted" radius="md" padding="base">muted</Box>
<Box border="strong" radius="lg" padding="base">border strong</Box>
<Box background="surface" border="base" radius="xl" padding="base" className="shadow-sm">
  카드 + 그림자(className)
</Box>

중첩

박스를 중첩해 위계 있는 섹션을 만든다. 단, 과한 중첩은 피한다: 정렬이 필요하면 Stack·Grid 로.

Preview

재고: 45개

부족 경고: 5개

tsx

<Box background="surface" border="base" radius="xl" padding="base">
  <Box background="muted" radius="md" padding="sm">재고: 45개</Box>
  <Box background="muted" radius="md" padding="sm">부족 경고: 5개</Box>
</Box>

시맨틱 요소 (as)

의미가 분명하면 as 로 시맨틱 요소를 렌더한다. role·aria-label 등 네이티브 속성도 그대로 전달된다(접근성).

Preview

재고 동기화: 10개 중 3개 완료

tsx

<Box as="section" aria-label="동기화 상태" background="surface" border="base" radius="lg" padding="base">
  재고 동기화: 10개 중 3개 완료
</Box>

언제 쓰나 · 쓰지 않나

· 쓴다: 간격·경계·배경으로 내용을 묶는 범용 컨테이너가 필요할 때.
· 행·열 정렬이 필요하면 박스가 아니라 Stack·Grid 를 쓴다(레이아웃 전용).
· 의미가 분명하면 더 구체적인 시맨틱 요소·컴포넌트를 먼저 고려한다(접근성·의도 전달).
· 과한 중첩은 피한다: DOM·스타일이 복잡해진다. 더 적절한 레이아웃으로 단순화한다.

속성

이름	타입	기본값	설명
as	ElementType	"div"	시맨틱 요소: section·aside·header 등
padding	"none" \| "sm" \| "base" \| "lg" \| "xl"	"none"	사방 패딩(12·16·20·24px)
paddingX / paddingY	"none" \| "sm" \| "base" \| "lg" \| "xl"	-	축(좌우/상하) 패딩 override
background	"transparent" \| "surface" \| "muted"	"transparent"	배경
border	"none" \| "base" \| "strong"	"none"	테두리(1px, border / border-strong 색)
radius	"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"	"sm"	모서리 반경: 기본 sm(4px)은 버튼·검색과 같은 값. 카드형은 lg·xl
overflow	"visible" \| "hidden"	"visible"	hidden 이면 넘치는 내용 자름
className	string	-	롱테일: 폭·그림자·per-side 패딩 등
...props	HTMLAttributes	-	id·role·aria-*·onClick·style 등 전달