feat: 버튼 컴포넌트 및 스타일 작성

src/components/Button/index.tsx

@@ -0,0 +1,25 @@
+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 }: ButtonProps) => {
+  return (
+    <button
+      className={clsx(styles.button({ state, size }), className)}
+      type="button"
+      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',
+        },
+      ],
+    },
+  },
+});