Layout
HStack
수평 스택 레이아웃 컴포넌트. 자식 요소를 가로로 배치합니다.
개요
HStack은 자식 요소를 **수평(가로)**으로 배치하는 스택 컴포넌트입니다. display="flex" flexDirection="row"가 기본 적용되어 있고, $css prop으로 추가 스타일을 지정합니다.
Usage
기본 사용법
import { HStack, Box } from '@featuring-corp/components';
<HStack $css={{ gap: '$spacing-300' }}>
<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>
</HStack>;줄바꿈 (wrap)
import { HStack, Box } from '@featuring-corp/components';
<HStack $css={{ gap: '$spacing-200', flexWrap: 'wrap', maxWidth: '300px' }}>
{Array.from({ length: 8 }, (_, i) => (
<Box key={i} $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}>
Item {i + 1}
</Box>
))}
</HStack>;Props
BoxProps를 그대로 사용합니다. display="flex" flexDirection="row"가 기본 적용됩니다.
$css prop에 gap, alignItems, justifyContent, flexWrap 등을 전달하세요.