feat : Atoms Storybook 작성

src/components/atoms/Button.tsx

@@ -18,7 +18,7 @@ export const Button: React.FC<ButtonProps> = ({
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`bg-blue-500 text-white p-2 rounded ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+      className={`bg-blue-500 w-24 h-10 text-white p-2 rounded ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
     >
       {children}
     </button>

src/components/atoms/Input.tsx

@@ -12,7 +12,7 @@ interface InputProps {
 
 export const Input: React.FC<InputProps> = ({
   type,
-  placeholder,
+  placeholder = 'Type Something',
   value,
   onChange,
   className,

src/components/atoms/Select.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 
 interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  options: { value: string; label: string }[];
+  options: Array<{ value: string; label: string }>;
   className?: string;
 }
 
@@ -13,14 +13,15 @@ export const Select: React.FC<SelectProps> = ({
 }) => {
   return (
     <select
-      className={`border border-gray-300 rounded-lg p-2 ${className}`}
+      className={`w-48 border border-gray-300 rounded-lg p-2 ${className}`}
       {...props}
     >
-      {options.map((option) => (
-        <option key={option.value} value={option.value}>
-          {option.label}
-        </option>
-      ))}
+      {options &&
+        options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
     </select>
   );
 };

src/components/atoms/stories/Avatar.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from '../Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'components/atoms/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {};

src/components/atoms/stories/Button.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'components/atoms/Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {};

src/components/atoms/stories/Input.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from '../Input';
+
+const meta: Meta<typeof Input> = {
+  title: 'components/atoms/Input',
+  component: Input,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {};

src/components/atoms/stories/Select.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from '../Select';
+
+const meta: Meta<typeof Select> = {
+  title: 'components/atoms/Select',
+  component: Select,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {};

src/components/atoms/stories/Spinner.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from '../Spinner';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'components/atoms/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {};