diff --git a/.changeset/lovely-falcons-strive.md b/.changeset/lovely-falcons-strive.md new file mode 100644 index 0000000..525bd3a --- /dev/null +++ b/.changeset/lovely-falcons-strive.md @@ -0,0 +1,5 @@ +--- +'@croquiscom/monolith': minor +--- + +Stack 컴포넌트 flex props 추가 diff --git a/src/components/stack/Stack.test.tsx b/src/components/stack/Stack.test.tsx index c2ef5f7..b12b4d1 100644 --- a/src/components/stack/Stack.test.tsx +++ b/src/components/stack/Stack.test.tsx @@ -52,6 +52,15 @@ describe('Stack', () => { expect(container.firstChild).toHaveStyle({ display: 'flex', justifyContent: 'center' }); }); + it('flex prop이 정상적으로 적용됩니다', () => { + const { container } = render( + +
1번
+
, + ); + expect(container.firstChild).toHaveStyle({ display: 'flex', flex: '1 0 100px' }); + }); + it('gap prop이 정상적으로 적용됩니다', () => { const { container } = render( diff --git a/src/components/stack/Stack.tsx b/src/components/stack/Stack.tsx index be3fb91..9ceeb2c 100644 --- a/src/components/stack/Stack.tsx +++ b/src/components/stack/Stack.tsx @@ -17,6 +17,8 @@ export interface StackProps { align?: CSSProperties['alignItems']; /** justify-content 속성을 지정합니다. */ justify?: CSSProperties['justifyContent']; + /** flex 속성을 지정합니다. */ + flex?: CSSProperties['flex']; /** gap 속성을 지정합니다. */ gap?: CSSProperties['gap']; /** width 속성을 지정합니다. */ @@ -94,6 +96,7 @@ export const Stack = forwardRef