diff --git a/.changeset/rare-tires-fix.md b/.changeset/rare-tires-fix.md new file mode 100644 index 0000000..e1070ce --- /dev/null +++ b/.changeset/rare-tires-fix.md @@ -0,0 +1,5 @@ +--- +'@croquiscom/monolith': patch +--- + +Stack 컴포넌트 forwardRef 제거 diff --git a/src/components/stack/Stack.tsx b/src/components/stack/Stack.tsx index bf0199b..a8d54b8 100644 --- a/src/components/stack/Stack.tsx +++ b/src/components/stack/Stack.tsx @@ -1,4 +1,4 @@ -import { PropsWithChildren, CSSProperties, HTMLAttributes, forwardRef } from 'react'; +import { PropsWithChildren, CSSProperties, HTMLAttributes } from 'react'; import './Stack.css'; import { buildFlexClassNames } from './utils/buildFlexClassNames'; @@ -86,55 +86,50 @@ export interface StackProps extends PropsWithChildren { * * ``` */ -export const Stack = forwardRef>( - ( - { - children, - className, - direction, - wrap, - align, - justify, - gap, - width, - height, - m, - mt, - ml, - mr, - mb, - p, - pt, - pl, - pr, - pb, - ...props - }, - ref, - ) => { - const flex_classes = buildFlexClassNames({ direction, wrap, align, justify }); - const combined_classes = [flex_classes, className].filter(Boolean).join(' '); +export const Stack = ({ + children, + className, + direction, + wrap, + align, + justify, + gap, + width, + height, + m, + mt, + ml, + mr, + mb, + p, + pt, + pl, + pr, + pb, + ...props +}: StackProps & HTMLAttributes) => { + const flex_classes = buildFlexClassNames({ direction, wrap, align, justify }); + const combined_classes = [flex_classes, className].filter(Boolean).join(' '); - const spacing_style: CSSProperties = { - ...(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 }), - }; + const spacing_style: CSSProperties = { + ...(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 }), + }; - return ( -
- {children} -
- ); - }, -); + return ( +
+ {children} +
+ ); +};