Skip to content

feat: Stack 컴포넌트 Props 확장 #57

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
sage1991 merged 4 commits into from
Jul 25, 2025
Merged

feat: Stack 컴포넌트 Props 확장 #57

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de1c8be
feat: Stack 컴포넌트 Props 확장
sage1991 Jul 24, 2025
0bcd2dd
feat: 문서화 편의를 위해 타입 분리
sage1991 Jul 24, 2025
8ffc18a
chore: rest 스프레드를 뒤로 이동
sage1991 Jul 25, 2025
23b9c23
chore: changeset 버저닝
sage1991 Jul 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
115 changes: 58 additions & 57 deletions src/components/stack/Stack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,45 @@
import { PropsWithChildren, CSSProperties, HTMLAttributes, forwardRef } from 'react';
import { CSSProperties, HTMLAttributes, forwardRef, ElementType } from 'react';

/** The props type of {@link Stack | 'Stack'}. */
export interface StackProps extends PropsWithChildren {
export interface StackProps extends HTMLAttributes<HTMLDivElement> {
/** */
as?: ElementType;
/** inline-flex 사용 설정 */
inline?: boolean;
/** flex-direction 속성을 지정합니다. */
direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
direction?: CSSProperties['flexDirection'];
/** flex-wrap 속성을 지정합니다. */
wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
wrap?: CSSProperties['flexWrap'];
/** align-items 속성을 지정합니다. */
align?: 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'baseline' | 'stretch';
align?: CSSProperties['alignItems'];
/** justify-content 속성을 지정합니다. */
justify?:
| 'center'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'left'
| 'right'
| 'space-between'
| 'space-around'
| 'space-evenly'
| 'stretch';
justify?: CSSProperties['justifyContent'];
/** gap 속성을 지정합니다. */
gap?: CSSProperties['gap'];
/** width 속성을 지정합니다. */
width?: number | string;
width?: CSSProperties['width'];
/** height 속성을 지정합니다. */
height?: number | string;
height?: CSSProperties['height'];
/** margin 속성을 지정합니다. */
m?: number | string;
m?: CSSProperties['margin'];
/** margin-top 속성을 지정합니다. */
mt?: number | string;
mt?: CSSProperties['marginTop'];
/** margin-left 속성을 지정합니다. */
ml?: number | string;
ml?: CSSProperties['marginLeft'];
/** margin-right 속성을 지정합니다. */
mr?: number | string;
mr?: CSSProperties['marginRight'];
/** margin-bottom 속성을 지정합니다. */
mb?: number | string;
mb?: CSSProperties['marginBottom'];
/** padding 속성을 지정합니다. */
p?: number | string;
p?: CSSProperties['padding'];
/** padding-top 속성을 지정합니다. */
pt?: number | string;
pt?: CSSProperties['paddingTop'];
/** padding-left 속성을 지정합니다. */
pl?: number | string;
pl?: CSSProperties['paddingLeft'];
/** padding-right 속성을 지정합니다. */
pr?: number | string;
pr?: CSSProperties['paddingRight'];
/** padding-bottom 속성을 지정합니다. */
pb?: number | string;
pb?: CSSProperties['paddingBottom'];
}

/**
Expand Down Expand Up @@ -82,13 +75,18 @@ export interface StackProps extends PropsWithChildren {
* <Stack direction='column'>
* {children}
* </Stack>
*
* // inline flex 설정
* <Stack inline>
* {children}
* </Stack>
* ```
*/
export const Stack = forwardRef<HTMLDivElement, StackProps & HTMLAttributes<HTMLDivElement>>(
export const Stack = forwardRef<HTMLDivElement, StackProps>(
(
{
children,
className,
as: Root = 'div',
inline,
direction,
wrap,
align,
Expand All @@ -107,36 +105,39 @@ export const Stack = forwardRef<HTMLDivElement, StackProps & HTMLAttributes<HTML
pr,
pb,
style,
...props
children,
...rest
},
ref,
) => {
const combined_style: CSSProperties = {
display: 'flex',
...(direction !== undefined && { flexDirection: direction }),
...(wrap !== undefined && { flexWrap: wrap }),
...(align !== undefined && { alignItems: align }),
...(justify !== undefined && { justifyContent: justify }),
...(gap !== undefined && { gap }),
...(width !== undefined && { width }),
...(height !== undefined && { height }),
...(m !== undefined && { margin: m }),
...(mt !== undefined && { marginTop: mt }),
...(ml !== undefined && { marginLeft: ml }),
...(mr !== undefined && { marginRight: mr }),
...(mb !== undefined && { marginBottom: mb }),
...(p !== undefined && { padding: p }),
...(pt !== undefined && { paddingTop: pt }),
...(pl !== undefined && { paddingLeft: pl }),
...(pr !== undefined && { paddingRight: pr }),
...(pb !== undefined && { paddingBottom: pb }),
...style,
};

return (
<div ref={ref} className={className} style={combined_style} {...props}>
<Root
{...rest}
ref={ref}
style={{
display: inline ? 'inline-flex' : 'flex',
...(direction !== undefined && { flexDirection: direction }),
...(wrap !== undefined && { flexWrap: wrap }),
...(align !== undefined && { alignItems: align }),
...(justify !== undefined && { justifyContent: justify }),
...(gap !== undefined && { gap }),
...(width !== undefined && { width }),
...(height !== undefined && { height }),
...(m !== undefined && { margin: m }),
...(mt !== undefined && { marginTop: mt }),
...(ml !== undefined && { marginLeft: ml }),
...(mr !== undefined && { marginRight: mr }),
...(mb !== undefined && { marginBottom: mb }),
...(p !== undefined && { padding: p }),
...(pt !== undefined && { paddingTop: pt }),
...(pl !== undefined && { paddingLeft: pl }),
...(pr !== undefined && { paddingRight: pr }),
...(pb !== undefined && { paddingBottom: pb }),
...style,
}}
>
{children}
</div>
</Root>
);
},
);