feat(Stack): Storybook 내 버그 수정 (#147)

* feat: Stack의 gutter를 css gap 속성으로 변경

* 더 이상 quantumic-design의 관심사가 아닌 useOverlay 스토리 제거

.storybook/preview.js

@@ -1,20 +1,22 @@
 import React from 'react';
 import { QDProvider, Container } from 'src';
 
-export const decorators = [(Story => (
-  <QDProvider>
-    <Container>
-      <Story />
-    </Container>
-  </QDProvider>
-))];
+export const decorators = [
+  (Story) => (
+    <QDProvider>
+      <Container>
+        <Story />
+      </Container>
+    </QDProvider>
+  ),
+];
 
 export const parameters = {
   options: {
     storySort: {
       method: '',
-      order: ['Quantumic Design',['Welcome', 'Getting Started', 'Usage'], 'Styles', 'Components'], 
-      locales: '', 
+      order: ['Quantumic Design', ['Welcome', 'Getting Started', 'Usage'], 'Styles', 'Components'],
+      locales: '',
     },
   },
-};
+};

src/components/Stack/index.tsx

@@ -4,22 +4,17 @@ import { OverridableProps } from '../../types/OverridableProps';
 import Flex, { FlexBaseProps } from '../Flex';
 
 interface StackProps extends FlexBaseProps {
-  gutter: number;
-  selector?: string;
+  gap: number;
 }
 
 type Props<T extends ElementType = 'div'> = OverridableProps<T, StackProps>;
-const Stack = <T extends ElementType = 'div'>(
-  { direction = 'row', gutter: gutterSpace, selector, ...rest }: Props<T>,
-  ref: Ref<any>
-) => {
+const Stack = <T extends ElementType = 'div'>({ gap, ...rest }: Props<T>, ref: Ref<any>) => {
   return (
     <Flex
       ref={ref}
       css={css`
-        gap: ${gutterSpace}px;
+        gap: ${gap}px;
       `}
-      direction={direction}
       {...rest}
     />
   );

src/stories/Components/Spacing/Components.tsx

@@ -4,8 +4,8 @@ export function Box({ color }: { color: string }) {
   return (
     <div
       css={css`
-        width: 100;
-        height: 100;
+        width: 100px;
+        height: 100px;
         background-color: ${color};
       `}
     />

src/stories/Components/Stack/index.stories.mdx

@@ -10,14 +10,14 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 
 <Canvas>
   <Story name="Stack/Horizontal">
-    <Stack gutter={20}>
+    <Stack gap={20}>
       <Box color="#f783ac" />
       <Box color="#da77f2" />
       <Box color="#9775fa" />
     </Stack>
   </Story>
   <Story name="Stack/Vertical">
-    <Stack gutter={20} direction="column">
+    <Stack gap={20} direction="column">
       <Box color="#f783ac" />
       <Box color="#da77f2" />
       <Box color="#9775fa" />