feat: Spacing 컴포넌트 구현 및 스토리북 구현

Guzzing · Oct 29, 2023 · acf1743 · acf1743
1 parent 41aa08d
commit acf1743
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/common/spacing/Spacing.stories.tsx b/src/components/common/spacing/Spacing.stories.tsx
@@ -19,6 +19,13 @@ const meta: Meta<typeof Spacing> = {
       control: { type: 'text' },
       type: { name: 'string', required: true }
     }
+  },
+  render: function Render(args) {
+    return (
+      <div className={'w-[100px] h-[100px]'}>
+        <Spacing size={args.size} color={args.color} />
+      </div>
+    )
   }
 }
 
@@ -27,5 +34,9 @@ export default meta
 type Story = StoryObj<typeof Spacing>
 
 export const Primary: Story = {
-  render: () => <Spacing size={32} color={'blue-500'} />
+  ...meta,
+  args: {
+    size: 32,
+    color: 'blue-500'
+  }
 }
diff --git a/src/components/common/spacing/Spacing.tsx b/src/components/common/spacing/Spacing.tsx
@@ -9,7 +9,9 @@ interface SpacingProps {
  * */
 
 const Spacing = ({ size, color }: SpacingProps) => {
-  return <div className={`h-[${size}px] w-full bg-${color}`}></div>
+  const spacingStyle = `h-[${size}px] bg-${color}`
+
+  return <div className={spacingStyle}></div>
 }
 
 export default Spacing