feat(shared/components): Button 컴포넌트 추가

packages/shared/components/src/Button/index.tsx

@@ -0,0 +1,37 @@
+import { classNames } from '@favolink/utils';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import * as styles from './styles.css';
+
+type ButtonProps = ComponentPropsWithoutRef<'button'> & {
+  colorScheme?: styles.ColorScheme;
+  size?: styles.Size;
+};
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(props, ref) {
+    const {
+      children,
+      className,
+      colorScheme = 'white',
+      size = 'medium',
+      ...restProps
+    } = props;
+
+    return (
+      <button
+        {...restProps}
+        ref={ref}
+        className={classNames(
+          styles.base,
+          styles.size[size],
+          styles.colorScheme[colorScheme],
+          className,
+        )}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+export default Button;

packages/shared/components/src/Button/styles.css.ts

@@ -0,0 +1,41 @@
+import { h5Bold, h6SemiBold } from '@favolink/styles/text.css';
+import { vars } from '@favolink/styles/theme.css';
+import { style, styleVariants } from '@vanilla-extract/css';
+
+export const base = style({
+  borderRadius: 8,
+  cursor: 'pointer',
+});
+
+export const size = styleVariants({
+  small: [h6SemiBold, { minWidth: 100, minHeight: 30 }],
+  medium: [h6SemiBold, { minWidth: 202, minHeight: 40 }],
+  large: [h5Bold, { minWidth: 332, minHeight: 44 }],
+});
+
+export type Size = keyof typeof size;
+
+export const colorScheme = styleVariants({
+  gray: {
+    backgroundColor: vars.color.gray400,
+    border: `1px solid ${vars.color.gray400}`,
+    color: vars.color.gray200,
+  },
+  black: {
+    backgroundColor: vars.color.gray1000,
+    border: `1px solid ${vars.color.gray1000}`,
+    color: 'white',
+  },
+  white: {
+    backgroundColor: 'white',
+    border: `1px solid ${vars.color.gray300}`,
+    color: vars.color.gray900,
+  },
+  red: {
+    backgroundColor: vars.color.system300,
+    border: `1px solid ${vars.color.system300}`,
+    color: 'white',
+  },
+});
+
+export type ColorScheme = keyof typeof colorScheme;

packages/shared/components/src/index.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @stylistic/padding-line-between-statements */
+export { default as Button } from './Button';