Layout
VStack
수직 스택 레이아웃 컴포넌트. 자식 요소를 세로로 배치합니다.
개요
VStack은 자식 요소를 **수직(세로)**으로 배치하는 스택 컴포넌트입니다. display="flex" flexDirection="column"이 기본 적용되어 있고, $css prop으로 추가 스타일을 지정합니다.
Usage
기본 사용법
import { VStack, Box } from '@featuring-corp/components';
<VStack $css={{ gap: '$spacing-300', alignItems: 'flex-start' }}>
<Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>
One
</Box>
<Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>
Two
</Box>
<Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>
Three
</Box>
</VStack>;Stretch
CSS flexbox 기본 align-items가 stretch이므로 별도 지정 없이도 자식 요소가 부모 너비에 맞춰집니다.
import { VStack, Box } from '@featuring-corp/components';
<VStack $css={{ gap: '$spacing-200', width: '300px' }}>
<Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>
Full width
</Box>
<Box $css={{ padding: '$spacing-300', bgColor: '$primary-20', rounded: '$radius-100' }}>
Full width
</Box>
</VStack>;Props
BoxProps를 그대로 사용합니다. display="flex" flexDirection="column"이 기본 적용됩니다.
$css prop에 gap, alignItems, justifyContent 등을 전달하세요.