Layout

Box

토큰 값만 받는 레이아웃 기본 단위.

여백·배경·테두리·라운드를 토큰 이름으로 받는 div입니다. 임의의 px 값 대신 토큰을 쓰게 만들어서, 화면마다 여백이 제각각으로 흐르는 걸 막습니다.

내부적으로는 Tailwind 클래스를 조립하지 않고 CSS 변수를 직접 인라인 스타일로 씁니다. gap-${size}처럼 동적으로 만든 클래스는 Tailwind가 스캔하지 못해 누락되는데, prop으로 받는 값은 본질적으로 동적이기 때문입니다. 값 자체는 Tailwind 쪽과 같은 @nxtgen-org/tokens 변수라 어긋나지 않습니다.

import { Box } from "@nxtgen-org/react";

관계 토큰 우선

x4(16px)가 아니라 component(컴포넌트 사이)로 고른다. 의도가 코드에 남는다.

Relation vs scale

p="component" — 의도가 남는다

p="x4" — 같은 16px이지만 왜 16인지는 안 남는다

tsx

1<Box p="component" background="layerDefault" borderColor="neutral" borderRadius="r2">
2  의도가 남는다
3</Box>
4
5<Box p="x4" ...>같은 16px이지만 왜 16인지는 안 남는다</Box>

배경 층

layer* 는 고도를 뜻한다. 라이트/다크에서 방향이 반대다.

Layers

layerFloat — 모달·팝오버

layerDefault — 카드

layerBasement — 페이지 캔버스

tsx

1<Box background="layerBasement">     {/* 페이지 캔버스 */}
2  <Box background="layerDefault">     {/* 카드 */}
3    <Box background="layerFloat">     {/* 모달·팝오버 */}
4  </Box>
5</Box>

Props

Name	Type	Default	Description
as	`ElementType`	`"div"`	시맨틱이 필요할 때 section·article·aside 등으로 바꾼다.
p / px / py / pt / pr / pb / pl	`Space`	—	패딩. `x0`~`x32` 또는 관계 토큰(`gutter`, `component`, `section` 등).
m / mx / my / mt / mr / mb / ml	`Space \| "auto"`	—	마진. `mx="auto"`로 가운데 정렬.
background	`BgToken`	—	`layerDefault`·`brandSolid` 등 bg.* 시맨틱 토큰. primitive gray는 받지 않는다.
color	`FgToken`	—	fg.* 시맨틱 토큰.
borderColor	`StrokeToken`	—	stroke.* 시맨틱 토큰. 지정하면 1px solid가 함께 걸린다.
borderRadius	`Radius`	—	`r0`~`r6` 또는 `full`.
maxWidth	`"prose" \| "content" \| "wide"`	—	contentWidth 토큰. 임의의 max-w 대신 이 셋에서 고른다.