Skip to content

feat: Stack컴포넌트에 flex props 추가 #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Obj277 merged 2 commits into from
Sep 25, 2025
Merged

feat: Stack컴포넌트에 flex props 추가 #59

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7bfa41e
feat: flex props 추가
Obj277 Sep 24, 2025
4e47532
chore: changeset
Obj277 Sep 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/components/stack/Stack.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,15 @@ describe('Stack', () => {
expect(container.firstChild).toHaveStyle({ display: 'flex', justifyContent: 'center' });
});

it('flex prop이 정상적으로 적용됩니다', () => {
const { container } = render(
<Stack flex='1 0 100px'>
<div>1번</div>
</Stack>,
);
expect(container.firstChild).toHaveStyle({ display: 'flex', flex: '1 0 100px' });
});

it('gap prop이 정상적으로 적용됩니다', () => {
const { container } = render(
<Stack gap={10}>
Expand Down
4 changes: 4 additions & 0 deletions src/components/stack/Stack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export interface StackProps {
align?: CSSProperties['alignItems'];
/** justify-content 속성을 지정합니다. */
justify?: CSSProperties['justifyContent'];
/** flex 속성을 지정합니다. */
flex?: CSSProperties['flex'];
/** gap 속성을 지정합니다. */
gap?: CSSProperties['gap'];
/** width 속성을 지정합니다. */
Expand Down Expand Up @@ -94,6 +96,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps & HTMLAttributes<HTML
wrap,
align,
justify,
flex,
gap,
width,
height,
Expand Down Expand Up @@ -122,6 +125,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps & HTMLAttributes<HTML
...(wrap !== undefined && { flexWrap: wrap }),
...(align !== undefined && { alignItems: align }),
...(justify !== undefined && { justifyContent: justify }),
...(flex !== undefined && { flex }),
...(gap !== undefined && { gap }),
...(width !== undefined && { width }),
...(height !== undefined && { height }),
Expand Down