스택

자식을 세로/가로로 일정 간격으로 배치하는 flex 레이아웃이다. 방향·간격·정렬·분배·줄바꿈을 토큰으로 다뤄 custom CSS 없이 일관된 배치를 만든다. 배치 전용이라 패딩·배경·테두리는 박스와 조합하고, 정밀한 격자는 그리드를 쓴다. gap 은 deux 간격 스케일을 따르고, per-item 간격이나 responsive direction 같은 롱테일은 className 으로 덧입힌다.

활용 방법

방향 (block · inline)

기본은 block(세로). direction="inline" 이면 가로로 배치된다.

Preview

하나둘셋

tsx

<Stack gap="sm">...</Stack>                 {/* 세로 */}
<Stack direction="inline" gap="sm">...</Stack>  {/* 가로 */}

간격 (gap)

gap 으로 자식 사이 간격을 deux 스케일에서 고른다(xs 4 · sm 8 · base 12 · lg 16 · xl 24px).

Preview

base

tsx

<Stack direction="inline" gap="xs">...</Stack>
<Stack direction="inline" gap="base">...</Stack>
<Stack direction="inline" gap="xl">...</Stack>

정렬 · 분배 (align · justify)

justify 는 주축 분배, align 은 교차축 정렬. 아래는 양끝 분배 + 세로 가운데.

Preview

왼쪽

가운데(키 큼)

오른쪽

tsx

<Stack direction="inline" justify="between" align="center">
  <Cell>왼쪽</Cell>
  <Cell>가운데</Cell>
  <Cell>오른쪽</Cell>
</Stack>

줄바꿈 (wrap)

wrap 을 주면 넘치는 자식이 다음 줄로 내려간다. 칩·태그 묶음에 적합.

Preview

서버일로와개발자 콘솔배포K-스타트업쿠팡

tsx

<Stack direction="inline" gap="sm" wrap>
  {tags.map((t) => <Badge key={t}>{t}</Badge>)}
</Stack>

박스와 조합 (카드)

배치는 Stack, 용기(패딩·배경·테두리)는 Box. 둘을 겹쳐 카드를 만든다.

Preview

제주 카페 리스트최근 7일 · 12곳

운영중브레이크

tsx

<Box background="surface" border="base" radius="lg" padding="base">
  <Stack gap="sm">
    <Heading />
    <Stack direction="inline" gap="xs" wrap>
      <Badge tone="success">운영중</Badge>
    </Stack>
  </Stack>
</Box>

박스 · 그리드와 역할

· 스택: 배치(방향·간격·정렬). 한 축으로 줄 세우기.
· 박스: 용기(패딩·배경·테두리·반경). 스택과 겹쳐 쓴다.
· 그리드: 정밀한 다열 격자. 스택으로 부족할 때(예정).

속성

이름	타입	기본값	설명
direction	"block" \| "inline"	"block"	세로(block) / 가로(inline)
gap	"none" \| "xs" \| "sm" \| "base" \| "lg" \| "xl"	"base"	자식 사이 간격(4·8·12·16·24px)
align	"start" \| "center" \| "end" \| "stretch" \| "baseline"	-	교차축 정렬(미지정 시 stretch)
justify	"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"	-	주축 분배(미지정 시 start)
wrap	boolean	false	넘치면 줄바꿈
as	ElementType	"div"	시맨틱 요소
className	string	-	롱테일: per-item 간격·responsive direction 등
...props	HTMLAttributes	-	id·role·aria-* 등 전달