Feat/34 button component

src/App.tsx

@@ -1,3 +1,4 @@
+import Button from './components/common/button/Button'
 import './styles/index.css'
 
 function App() {

src/components/common/button/Button.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Button from './Button'
+const meta = {
+  title: 'Component/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    buttonType: {
+      control: 'select',
+      options: [
+        'Plain-blue',
+        'Plain-red',
+        'Round-blue-500',
+        'Round-blue-700',
+        'Square',
+        'Floating'
+      ]
+    },
+    width: {
+      control: 'select',
+      options: ['SW', 'MW', 'LW', 'XLW']
+    }
+  }
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const FloatButton: Story = {
+  args: {
+    label: '+',
+    buttonType: 'Floating'
+  }
+}
+
+export const PlainBlueButton: Story = {
+  args: {
+    label: 'Plain',
+    buttonType: 'Plain-blue',
+    fullWidth: true,
+    onClick: () => alert('plain clicked!')
+  }
+}
+
+export const PlainRedButton: Story = {
+  args: {
+    label: 'Plain',
+    buttonType: 'Plain-red',
+    onClick: () => alert('plain clicked!')
+  }
+}
+export const RoundBlue500Button: Story = {
+  args: {
+    label: 'Round',
+    buttonType: 'Round-blue-500',
+    onClick: () => alert('round clicked!')
+  }
+}
+
+export const RoundBlue700Button: Story = {
+  args: {
+    label: 'Round',
+    buttonType: 'Round-blue-700',
+    onClick: () => alert('round clicked!')
+  }
+}
+
+export const SquareButton: Story = {
+  args: {
+    label: 'Square',
+    buttonType: 'Square',
+    onClick: () => alert('square clicked!')
+  }
+}

src/components/common/button/Button.tsx

@@ -0,0 +1,68 @@
+import type { ButtonProps } from './ButtonType'
+import {
+  BUTTON_BG_COLOR,
+  BUTTON_BORDER_COLOR,
+  BUTTON_HEIGHT,
+  BUTTON_RADIUS,
+  BUTTON_TEXT_COLOR,
+  BUTTON_WIDTH,
+  FONT_STYLE
+} from './constants'
+const Button = ({
+  label,
+  buttonType,
+  fullWidth = false,
+  width = 'XLW',
+  ...props
+}: ButtonProps) => {
+  const btnClass = `
+  outline-none
+  ${
+    buttonType === 'Floating'
+      ? `${BUTTON_RADIUS['max']} ${
+          fullWidth ? BUTTON_WIDTH['FULL'] : BUTTON_WIDTH[width]
+        } ${BUTTON_HEIGHT['LH']} ${'text-1xl'} ${BUTTON_TEXT_COLOR['white0']} ${
+          BUTTON_BG_COLOR['blue500']
+        }`
+      : buttonType === 'Square'
+      ? `${BUTTON_RADIUS['min']} ${
+          fullWidth ? BUTTON_WIDTH['FULL'] : BUTTON_WIDTH[width]
+        } ${BUTTON_HEIGHT['LH']} ${BUTTON_TEXT_COLOR['white0']} ${
+          BUTTON_BG_COLOR['blue500']
+        }`
+      : buttonType === 'Plain-blue'
+      ? `${BUTTON_RADIUS['middle']} ${
+          fullWidth ? BUTTON_WIDTH['FULL'] : BUTTON_WIDTH[width]
+        } ${BUTTON_HEIGHT['MH']} ${BUTTON_BG_COLOR['white0']} ${
+          BUTTON_TEXT_COLOR['blue500']
+        } ${BUTTON_BORDER_COLOR['blue500']}`
+      : buttonType === 'Plain-red'
+      ? `${BUTTON_RADIUS['middle']} ${
+          fullWidth ? BUTTON_WIDTH['FULL'] : BUTTON_WIDTH[width]
+        } ${BUTTON_HEIGHT['MH']} ${BUTTON_BG_COLOR['white0']} ${
+          BUTTON_TEXT_COLOR['red600']
+        } ${BUTTON_BORDER_COLOR['red600']}`
+      : buttonType === 'Round-blue-500'
+      ? `${BUTTON_RADIUS['middle']} ${
+          fullWidth ? BUTTON_WIDTH['FULL'] : BUTTON_WIDTH[width]
+        } ${BUTTON_HEIGHT['MH']} ${BUTTON_BG_COLOR['blue500']} ${
+          BUTTON_TEXT_COLOR['white0']
+        }`
+      : buttonType === 'Round-blue-700'
+      ? `${BUTTON_RADIUS['middle']} ${
+          fullWidth ? BUTTON_WIDTH['FULL'] : BUTTON_WIDTH[width]
+        } ${BUTTON_HEIGHT['MH']} ${BUTTON_BG_COLOR['blue700']} ${
+          BUTTON_TEXT_COLOR['white0']
+        }`
+      : ''
+  }
+  ${FONT_STYLE['NSK']}
+  `
+  return (
+    <button className={btnClass} {...props}>
+      {label}
+    </button>
+  )
+}
+
+export default Button

src/components/common/button/ButtonType.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react'
+
+export type ButtonTextColor = 'blue500' | 'white0' | 'red600'
+export type ButtonBgColor = 'blue500' | 'blue700' | 'white0'
+export type ButtonBorderColor = 'blue500' | 'red600'
+export type ButtonType =
+  | 'Plain-blue'
+  | 'Plain-red'
+  | 'Round-blue-500'
+  | 'Round-blue-700'
+  | 'Square'
+  | 'Floating'
+export type ButtonBorderRadius = 'min' | 'middle' | 'max'
+export type ButtonWidth = 'SW' | 'MW' | 'LW' | 'XLW'
+export type ButtonHeight = 'SH' | 'MH' | 'LH'
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  label: ReactNode
+  buttonType: ButtonType
+  textColor?: ButtonTextColor
+  bgColor?: ButtonBgColor
+  borderColor?: ButtonBorderColor
+  borderRadius?: ButtonBorderRadius
+  width?: ButtonWidth
+  height?: ButtonHeight
+  fullWidth?: boolean
+  onClick?: () => void
+}

src/components/common/button/constants.ts

@@ -0,0 +1,40 @@
+export const FONT_STYLE = {
+  NSK: 'font-nsk'
+}
+
+export const BUTTON_RADIUS = {
+  min: 'rounded-none',
+  middle: 'rounded-[12px]',
+  max: 'rounded-full'
+}
+
+export const BUTTON_BORDER_COLOR = {
+  red600: 'border border-red-600',
+  blue500: 'border border-blue-500'
+}
+
+export const BUTTON_BG_COLOR = {
+  white0: 'bg-white-0',
+  blue500: 'bg-blue-500',
+  blue700: 'bg-blue-700'
+}
+
+export const BUTTON_WIDTH = {
+  SW: 'w-[60px]',
+  MW: 'w-[124px]',
+  LW: 'w-[343px]',
+  XLW: 'w-[390px]',
+  FULL: 'w-[100vw]'
+}
+
+export const BUTTON_HEIGHT = {
+  SH: 'h-[43px]',
+  MH: 'h-[56px]',
+  LH: 'h-[60px]'
+}
+
+export const BUTTON_TEXT_COLOR = {
+  white0: 'text-white-0',
+  blue500: 'text-blue-500',
+  red600: 'text-red-600'
+}

src/styles/index.css

@@ -3,6 +3,9 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+* {
+  box-sizing: border-box;
+}
 body {
   position: relative;
   width: 100vw;
@@ -15,7 +18,7 @@ body {
   position: relative;
   width: 390px;
   height: 844px;
-  background-color: #ffffff;
+  background-color: gray;
 }
 @layer components {
   .headline-30 {