feat: stack storybook 작성

src/components/common/Flex/index.tsx

@@ -1,4 +1,5 @@
 import { type CSSProperties, type ForwardedRef, forwardRef, type HTMLAttributes } from 'react';
+import styled from '@emotion/styled';
 
 export type FlexOptions = {
   align?: CSSProperties['alignItems'];
@@ -16,20 +17,30 @@ export const Flex = forwardRef(function Flex(
   { children, direction, align, justify, wrap, basis, grow, shrink, ...props }: FlexProps,
   ref: ForwardedRef<HTMLDivElement>
 ) {
-  const styles = {
-    display: 'flex',
-    flexDirection: direction,
-    alignItems: align,
-    justifyContent: justify,
-    flexWrap: wrap,
-    flexBasis: basis,
-    flexGrow: grow,
-    flexShrink: shrink,
-  };
-
   return (
-    <div ref={ref} style={styles} {...props}>
+    <StyledFlex
+      ref={ref}
+      direction={direction}
+      align={align}
+      justify={justify}
+      wrap={wrap}
+      basis={basis}
+      grow={grow}
+      shrink={shrink}
+      {...props}
+    >
       {children}
-    </div>
+    </StyledFlex>
   );
 });
+
+const StyledFlex = styled.div<FlexOptions>`
+  display: flex;
+  flex-direction: ${({ direction }) => direction && direction};
+  align-items: ${({ align }) => align && align};
+  justify-content: ${({ justify }) => justify && justify};
+  flex-wrap: ${({ wrap }) => wrap && wrap};
+  flex-basis: ${({ basis }) => basis && basis};
+  flex-grow: ${({ grow }) => grow && grow};
+  flex-shrink: ${({ shrink }) => shrink && shrink};
+`;

src/components/common/Stack/Stack.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Stack as StackComponent } from '.';
+
+type Stack = typeof StackComponent;
+
+const meta: Meta<Stack> = {
+  argTypes: {
+    spacing: {
+      control: 'number',
+    },
+    align: {
+      control: 'select',
+      options: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+    },
+    justify: {
+      control: 'select',
+      options: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'],
+    },
+    direction: {
+      control: 'select',
+      options: ['row', 'row-reverse', 'column', 'column-reverse'],
+    },
+  },
+  component: StackComponent,
+  title: 'Components/Stack',
+};
+
+export default meta;
+
+export const Default: StoryObj<Stack> = {
+  render: args => (
+    <StackComponent {...args}>
+      <div style={{ width: '80px', height: '80px', backgroundColor: 'red' }} />
+      <div style={{ width: '80px', height: '80px', backgroundColor: 'green' }} />
+      <div style={{ width: '80px', height: '80px', backgroundColor: 'blue' }} />
+    </StackComponent>
+  ),
+};

src/components/common/Stack/index.tsx

@@ -6,7 +6,7 @@ type StackProps = {
   align?: CSSProperties['alignItems'];
   justify?: CSSProperties['justifyContent'];
   direction?: CSSProperties['flexDirection'];
-  spacing?: CSSProperties['margin'];
+  spacing?: number;
 } & HTMLAttributes<HTMLDivElement>;
 
 export const Stack = forwardRef(function Stack(