[Feature/BAR-156] 버튼 컴포넌트 작성 (#26)

src/components/Button/Button.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Button from '.';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    componentSubtitle: 'Action이나 Event를 Trigger하는 컴포넌트',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const MiddleDefault: Story = {
+  args: {
+    children: 'MiddleDefault',
+    size: 'M',
+    state: 'default',
+    onClick: () => {},
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'M size, Default state Button',
+      },
+    },
+  },
+};
+
+export const MiddleDisabled: Story = {
+  args: {
+    children: 'MiddleDisabled',
+    size: 'M',
+    state: 'disabled',
+    onClick: () => {},
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'M size, Disabled state Button',
+      },
+    },
+  },
+};
+
+export const MiddleEnabled: Story = {
+  args: {
+    children: 'MiddleEnabled',
+    size: 'M',
+    state: 'enabled',
+    onClick: () => {},
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'M size, Enabled state Button',
+      },
+    },
+  },
+};
+
+export const LargeDefault: Story = {
+  args: {
+    children: 'LargeDefault',
+    size: 'L',
+    state: 'default',
+    onClick: () => {},
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'L size, Default state Button',
+      },
+    },
+  },
+};
+
+export const LargeDisabled: Story = {
+  args: {
+    children: 'LargeDisabled',
+    size: 'L',
+    state: 'disabled',
+    onClick: () => {},
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'L size, Disabled state Button',
+      },
+    },
+  },
+};
+
+export const LargeEnabled: Story = {
+  args: {
+    children: 'LargeEnabled',
+    size: 'L',
+    state: 'enabled',
+    onClick: () => {},
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'L size, Enabled state Button',
+      },
+    },
+  },
+};

src/components/Button/index.tsx

@@ -0,0 +1,32 @@
+import type { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+import clsx from 'clsx';
+
+import * as styles from './style.css';
+
+interface ButtonProps
+  extends RecipeVariants<typeof styles.button>,
+    PropsWithChildren<ComponentPropsWithoutRef<'button'>> {
+  onClick: () => void;
+}
+
+const Button = ({
+  children,
+  className,
+  size,
+  state,
+  onClick,
+  type = 'button',
+}: ButtonProps) => {
+  return (
+    <button
+      className={clsx(styles.button({ state, size }), className)}
+      type={type}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/components/Button/style.css.ts

@@ -0,0 +1,40 @@
+import { recipe } from '@vanilla-extract/recipes';
+
+import { sprinkles } from '@/src/styles/sprinkles.css';
+import { COLORS } from '@/src/styles/tokens';
+
+export const button = recipe({
+  variants: {
+    state: {
+      default: {
+        backgroundColor: COLORS['Grey/150'],
+        color: COLORS['Grey/600'],
+      },
+      disabled: {
+        backgroundColor: COLORS['Blue/Default'],
+        color: COLORS['Grey/White'],
+        opacity: '50%',
+      },
+      enabled: {
+        backgroundColor: COLORS['Blue/Default'],
+        color: COLORS['Grey/White'],
+      },
+    },
+    size: {
+      M: [
+        sprinkles({ typography: '15/Title/Medium' }),
+        {
+          padding: '15px 24px',
+          borderRadius: '8px',
+        },
+      ],
+      L: [
+        sprinkles({ typography: '16/Title/Medium' }),
+        {
+          padding: '18.5px 40px',
+          borderRadius: '8px',
+        },
+      ],
+    },
+  },
+});