[SMH-83]: Button 컴포넌트 스타일 추가 (#27)

* [SMH-83] feat(design-system): add props to Button

* [SMH-83] feat(design-system): add ButtonLayout

* [SMH-83] feat(design-system): add button storybook

* [SMH-83] feat(design-system): fix colors path

* [SMH-83] feat(design-system): add colors

* [SMH-83] fix stylelint errors

packages/design-system/src/components/button/ButtonLayout.ts

@@ -0,0 +1,103 @@
+import styled from '@emotion/styled/macro';
+import { css } from '@emotion/react';
+import { colors } from '@styles/color';
+import type { ButtonProps } from '.';
+
+const ButtonSizeMap = {
+  sm: css`
+    height: 32px;
+  `,
+  md: css`
+    height: 40px;
+  `,
+  lg: css`
+    height: 48px;
+  `,
+  xlg: css`
+    height: 52px;
+  `,
+  xxlg: css`
+    height: 56px;
+    border-radius: 0;
+  `,
+};
+
+export const ButtonColorMap = {
+  primary: css`
+    background-color: ${colors.primary20};
+
+    color: ${colors.white};
+
+    &:hover {
+      background-color: ${colors.primary40};
+    }
+
+    &:active {
+      background-color: ${colors.primary10};
+    }
+
+    &:disabled {
+      background-color: ${colors.primary60};
+
+      color: ${colors.primary80};
+    }
+  `,
+
+  secondary: css`
+    background-color: ${colors.secondary50};
+
+    color: ${colors.white};
+
+    &:hover {
+      background-color: ${colors.secondary60};
+    }
+
+    &:active {
+      background-color: ${colors.secondary30};
+    }
+
+    &:disabled {
+      background-color: ${colors.secondary80};
+
+      color: ${colors.secondary70};
+    }
+  `,
+};
+
+export const ButtonWrapper = styled.button<ButtonProps>(
+  {
+    fontSize: '16px',
+    fontWeight: 'bold',
+    borderRadius: '8px',
+  },
+  ({ width }) => css`
+    width: ${width}px;
+  `,
+  ({ size }) => ButtonSizeMap[size],
+  ({ variant, color }) =>
+    variant === 'filled' && color
+      ? ButtonColorMap[color]
+      : css`
+          border: 1px solid ${colors.primary20};
+
+          background-color: ${colors.white};
+
+          color: ${colors.primary20};
+
+          &:hover {
+            background-color: ${colors.primary90};
+          }
+
+          &:active {
+            background-color: ${colors.primary80};
+          }
+
+          &:disabled {
+            border: 1px solid ${colors.primary70};
+
+            color: ${colors.primary70};
+
+            cursor: not-allowed;
+          }
+        `,
+);

packages/design-system/src/components/button/index.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ButtonProps } from '.';
+import { Button } from '.';
+import { ButtonColorMap } from './ButtonLayout';
+
+const meta: Meta<ButtonProps> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      control: { type: 'select', options: ['filled', 'outline'] },
+    },
+    size: {
+      control: { type: 'select', options: ['sm', 'md', 'lg', 'xlg', 'xxlg'] },
+    },
+    color: {
+      control: { type: 'select', options: Object.keys(ButtonColorMap) },
+    },
+    width: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ButtonProps>;
+
+export const Filled: Story = {
+  args: {
+    variant: 'filled',
+    width: '100px',
+    size: 'md',
+    color: 'primary',
+    children: 'Filled Button',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    width: '100px',
+    size: 'md',
+    color: 'primary',
+    children: 'Outline Button',
+  },
+};
+
+export const XXLarge: Story = {
+  args: {
+    variant: 'filled',
+    width: '200px',
+    size: 'xxlg',
+    color: 'primary',
+    children: 'XXLarge Button',
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    variant: 'filled',
+    width: '150px',
+    size: 'md',
+    color: 'primary',
+    children: 'Custom Color Button',
+  },
+};

packages/design-system/src/components/button/index.tsx

@@ -1,20 +1,32 @@
-// TO DO: 버튼 작업중인 컴포넌트
+import { type ButtonHTMLAttributes } from 'react';
+import type { ButtonColorMap } from './ButtonLayout';
+import { ButtonWrapper } from './ButtonLayout';
 
-import { Children, type ButtonHTMLAttributes, type ReactNode } from 'react';
-
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'text' | 'filled' | 'outlined';
-  width: Pick<React.CSSProperties, 'width'>;
-  color: string;
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'filled' | 'outline';
+  width: React.CSSProperties['width'];
+  size: 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg';
+  color?: keyof typeof ButtonColorMap;
   children?: React.ReactNode;
 }
 
 export function Button({
-  variant = 'text',
+  variant = 'filled',
   width,
-  color,
+  size,
+  color = 'primary',
   children,
   ...props
 }: ButtonProps) {
-  return <button {...props}>{children}</button>;
+  return (
+    <ButtonWrapper
+      variant={variant}
+      width={width}
+      size={size}
+      color={color}
+      {...props}
+    >
+      {children}
+    </ButtonWrapper>
+  );
 }