feat: add Button

app/components/Test/Test.css.ts

@@ -14,6 +14,6 @@ export const container = style({
 export const labelText = style([
   textStyle.body1R,
   {
-    color: themeVars.color.primary.normal,
+    color: themeVars.color.primary.normal.hex,
   },
 ]);

app/components/common/Button/Button.css.ts

@@ -0,0 +1,80 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { Breakpoint } from '@/constants/style';
+import { themeVars } from '@/styles/theme.css';
+import { getMediaQuery } from '@/utils/style';
+
+export const buttonBase = style({
+  cursor: 'pointer',
+  ':disabled': {
+    cursor: 'not-allowed',
+  },
+});
+
+export const buttonStyleByVariant = styleVariants({
+  primary: {
+    backgroundColor: themeVars.color.primary.normal.hex,
+    color: themeVars.color.grayscale.white.hex,
+    border: 0,
+    ':hover': {
+      backgroundColor: themeVars.color.primary.dark.hex,
+    },
+    ':active': {
+      backgroundColor: themeVars.color.primary.darker.hex,
+    },
+    ':disabled': {
+      backgroundColor: themeVars.color.grayscale.gray2.hex,
+      color: themeVars.color.grayscale.gray4.hex,
+    },
+  },
+  secondary: {
+    color: themeVars.color.primary.normal.hex,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: themeVars.color.primary.normal.hex,
+    backgroundColor: 'transparent',
+    ':hover': {
+      backgroundColor: `rgba(${themeVars.color.primary.normal.rgb}, 0.1)`,
+    },
+    ':active': {
+      backgroundColor: `rgba(${themeVars.color.primary.normal.rgb}, 0.2)`,
+    },
+    ':disabled': {
+      backgroundColor: 'transparent',
+      borderColor: themeVars.color.grayscale.gray3.hex,
+      color: themeVars.color.grayscale.gray4.hex,
+    },
+  },
+});
+
+export const buttonStyleBySize = styleVariants({
+  small: {
+    padding: '6px 12px',
+    borderRadius: '12px',
+    '@media': {
+      [getMediaQuery([Breakpoint.MOBILE1, Breakpoint.MOBILE2])]: {
+        padding: '6px 12px',
+        borderRadius: '10px',
+      },
+    },
+  },
+  medium: {
+    padding: '12px 28px',
+    borderRadius: '12px',
+    '@media': {
+      [getMediaQuery([Breakpoint.MOBILE1, Breakpoint.MOBILE2])]: {
+        padding: '10px 24px',
+        borderRadius: '10px',
+      },
+    },
+  },
+  large: {
+    padding: '12px 32px',
+    borderRadius: '12px',
+    '@media': {
+      [getMediaQuery([Breakpoint.MOBILE1, Breakpoint.MOBILE2])]: {
+        padding: '12px 32px',
+        borderRadius: '12px',
+      },
+    },
+  },
+});

app/components/common/Button/Button.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import Button from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Main: Story = {
+  args: {
+    variant: 'primary',
+    size: 'medium',
+    children: '버튼 텍스트',
+    disabled: false,
+    onClick: fn(),
+  },
+};

app/components/common/Button/Button.tsx

@@ -0,0 +1,35 @@
+import { type DetailedHTMLProps } from 'react';
+import * as styles from './Button.css';
+import { textStyle } from '@/styles/text.css';
+
+interface ButtonProps
+  extends DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  variant: 'primary' | 'secondary';
+  size: 'small' | 'medium' | 'large';
+}
+
+const textStyleBySize = {
+  small: textStyle.body1R,
+  medium: textStyle.body1SB,
+  large: textStyle.headline2B,
+};
+
+const Button = ({
+  variant,
+  size,
+  className,
+  children,
+  ...buttonProps
+}: ButtonProps) => (
+  <button
+    {...buttonProps}
+    className={`${styles.buttonBase} ${styles.buttonStyleByVariant[variant]} ${styles.buttonStyleBySize[size]} ${textStyleBySize[size]} ${className}`}
+  >
+    {children}
+  </button>
+);
+
+export default Button;

app/components/common/Button/index.ts

@@ -0,0 +1,3 @@
+import Button from './Button';
+
+export default Button;

app/styles/text.css.ts

@@ -39,7 +39,7 @@ const textStyleInfo = {
       fontWeight: FontWeight.BOLD,
     },
   },
-  header2B: {
+  headline2B: {
     pc: {
       fontSize: 24,
       lineHeight: 30,

app/styles/theme.css.ts

@@ -1,33 +1,39 @@
 import { createGlobalTheme } from '@vanilla-extract/css';
+import { getRGBFromHex } from '@/utils/style';
+
+const getColorVarsFromHex = (hex: string) => ({
+  hex,
+  rgb: getRGBFromHex(hex).join(', '),
+});
 
 export const themeVars = createGlobalTheme(':root', {
   color: {
     background: {
-      general: '#FFFFFF',
-      article: '#FBFAF6',
+      general: getColorVarsFromHex('#FFFFFF'),
+      article: getColorVarsFromHex('#FBFAF6'),
     },
     system: {
-      caution: '#FF0000',
+      caution: getColorVarsFromHex('#FF0000'),
     },
     primary: {
-      lighter: '#FAD6BD',
-      light: '#F4A871',
-      normal: '#EF7F2E',
-      dark: '#DA6511',
-      darker: '#AB4F0D',
+      lighter: getColorVarsFromHex('#FAD6BD'),
+      light: getColorVarsFromHex('#F4A871'),
+      normal: getColorVarsFromHex('#EF7F2E'),
+      dark: getColorVarsFromHex('#DA6511'),
+      darker: getColorVarsFromHex('#AB4F0D'),
     },
     grayscale: {
-      white: '#FFFFFF',
-      gray1: '#F9F9F9',
-      gray2: '#EEEEEE',
-      gray3: '#E0E0E0',
-      gray4: '#BDBDBD',
-      gray5: '#9E9E9E',
-      gray6: '#757575',
-      gray7: '#616161',
-      gray8: '#424242',
-      gray9: '#212121',
-      black: '#1D1D1D',
+      white: getColorVarsFromHex('#FFFFFF'),
+      gray1: getColorVarsFromHex('#F9F9F9'),
+      gray2: getColorVarsFromHex('#EEEEEE'),
+      gray3: getColorVarsFromHex('#E0E0E0'),
+      gray4: getColorVarsFromHex('#BDBDBD'),
+      gray5: getColorVarsFromHex('#9E9E9E'),
+      gray6: getColorVarsFromHex('#757575'),
+      gray7: getColorVarsFromHex('#616161'),
+      gray8: getColorVarsFromHex('#424242'),
+      gray9: getColorVarsFromHex('#212121'),
+      black: getColorVarsFromHex('#1D1D1D'),
     },
   },
 });

app/utils/style.ts

@@ -21,3 +21,12 @@ export const getMediaQuery = (
   );
   return `screen and (min-width: ${minimum}px)${isFinite(maximum) ? `and (max-width: ${maximum}px)` : ''}`;
 };
+
+export const getRGBFromHex = (hex: string) => {
+  const hexToConvert = hex.replace('#', '');
+  const aRgbHex = hexToConvert.match(/.{1,2}/g);
+  if (aRgbHex === null) {
+    return [0, 0, 0];
+  }
+  return [aRgbHex[0], aRgbHex[1], aRgbHex[2]].map((item) => parseInt(item, 16));
+};