[#359] Button 컴포넌트 (#381)

* feat: Button 컴포넌트 작성

* feat: Button 컴포넌트 스토리 작성

* feat: 버튼 fontWeight props 추가

- 최근 검색어 버튼 스토리 작성

* fix: fontWeight 400 normal로 변경

* chore: 사용하지 않는 스토리북 Button 컴포넌트 삭제

* refactor: 버튼 props 및 스토리북 수정

* chore: story 버튼 컴포넌트 복구

* feat: 버튼 Default 스토리 추가

* refactor: Base 폴더 안으로 Button 스토리 이동

src/stories/Base/Button.stories.tsx

@@ -0,0 +1,68 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Button from '@/ui/Base/Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Base/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    colorScheme: { control: 'select' },
+  },
+  args: {
+    size: 'medium',
+    fill: true,
+    fullRadius: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  render: args => <Button {...args}>버튼</Button>,
+};
+
+export const Main: Story = {
+  args: {
+    colorScheme: 'main',
+  },
+  render: args => <Button {...args}>버튼</Button>,
+};
+
+export const MainLight: Story = {
+  args: {
+    colorScheme: 'main-light',
+  },
+  render: args => <Button {...args}>버튼</Button>,
+};
+
+export const Warning: Story = {
+  args: {
+    colorScheme: 'warning',
+  },
+  render: args => <Button {...args}>버튼</Button>,
+};
+
+export const Grey: Story = {
+  args: {
+    colorScheme: 'grey',
+  },
+  render: args => <Button {...args}>버튼</Button>,
+};
+
+export const Kakao: Story = {
+  args: {
+    colorScheme: 'kakao',
+  },
+  render: args => <Button {...args}>버튼</Button>,
+};
+
+export const RecentSearch: Story = {
+  args: {
+    ...MainLight.args,
+    fullRadius: true,
+  },
+  render: args => <Button {...args}>최근 검색어</Button>,
+};

src/ui/Base/Button.tsx

@@ -0,0 +1,92 @@
+import type { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+import { useMemo } from 'react';
+
+type Size = 'small' | 'medium' | 'large' | 'full';
+type ColorScheme = 'main' | 'main-light' | 'warning' | 'grey' | 'kakao';
+
+type ButtonProps = PropsWithChildren<{
+  size?: Size;
+  colorScheme?: ColorScheme;
+  fill?: boolean;
+  fullRadius?: boolean;
+}> &
+  ComponentPropsWithoutRef<'button'>;
+
+const getSizeClasses = (size: Size) => {
+  switch (size) {
+    case 'small': {
+      return 'text-sm px-[1.2rem] py-[0.6rem]';
+    }
+    case 'medium': {
+      return 'text-md px-[1.6rem] py-[0.8rem]';
+    }
+    case 'large': {
+      return 'text-lg px-[2.4rem] py-[1rem]';
+    }
+    case 'full': {
+      return 'text-lg px-[2.4rem] py-[1rem] w-full';
+    }
+    default: {
+      // medium
+      return 'text-md px-[1.6rem] py-[0.8rem]';
+    }
+  }
+};
+
+const getSchemeClasses = (theme: ColorScheme, isFill: boolean) => {
+  switch (theme) {
+    case 'main': {
+      return isFill
+        ? 'border-main-900 bg-main-900 text-white'
+        : 'border-main-900 text-main-900';
+    }
+    case 'main-light': {
+      return 'border-transparent bg-main-600/[.18] text-main-900 font-normal';
+    }
+    case 'warning': {
+      return isFill
+        ? 'border-warning-800 bg-warning-800 text-white '
+        : 'border-warning-800 text-warning-800';
+    }
+    case 'grey': {
+      return isFill
+        ? 'border-black-400 bg-black-400 text-black-500 '
+        : 'border-black-400 text-black-500';
+    }
+    case 'kakao': {
+      return 'border-kakao bg-kakao text-kakaotext';
+    }
+  }
+};
+
+const BASE_BUTTON_CLASSES =
+  'cursor-pointer border-[0.1rem] leading-none inline-block font-bold';
+
+const Button = ({
+  size = 'medium',
+  colorScheme = 'main',
+  fill = true,
+  fullRadius = false,
+  children,
+  ...props
+}: ButtonProps) => {
+  const computedClasses = useMemo(() => {
+    const sizeClass = getSizeClasses(size);
+    const schemeClass = getSchemeClasses(colorScheme, fill);
+    const roundedClass = fullRadius ? 'rounded-full' : 'rounded-[5px]';
+
+    return [sizeClass, schemeClass, roundedClass].join(' ');
+  }, [size, colorScheme, fill, fullRadius]);
+
+  return (
+    <button
+      type="button"
+      className={`${BASE_BUTTON_CLASSES} ${computedClasses}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

tailwind.config.js

@@ -21,7 +21,7 @@ module.exports = {
       },
       fontWeight: {
         thin: 100,
-        regular: 400,
+        normal: 400,
         bold: 700,
       },
       colors: {