Merge pull request #8 from osohyun0224/master

✨ feat :: 버튼 컴포넌트 (Button/ ) 를 개발하고, 스토리북 업데이트를 진행한다.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vacgom-design-system",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Vacgom's Design System Packages",
   "main": "index.js",
   "scripts": {

src/components/Button-bottom/Button-bottom.styles.ts

@@ -0,0 +1,74 @@
+import { css } from '@emotion/react';
+import { Theme } from '../../styles/Theme'
+import { Colors } from '../../styles/color'
+ import type { ButtonButtomProps } from './Button-bottom';
+
+export const getVariantStyling = (variant: Required<ButtonButtomProps>['variant']) => {
+  const style = {
+    primary: css({
+      backgroundColor:  Colors.Primary,
+
+      color: Colors.White,
+
+    }),
+    secondary: css({
+      backgroundColor: Colors.PrimaryLight,
+
+      color: Colors.Primary,
+
+    }),
+    unavailable: css({
+      backgroundColor: Colors.White,
+
+      color: Colors.Gray700,
+
+      border: `1px solid ${Colors.Gray200}`,
+
+    }),
+  };
+
+  return style[variant];
+};
+
+export const getSizeStyling = (size: Required<ButtonButtomProps>['size']) => {
+  const style = {
+    large: css({
+      padding: '16px 20px',
+
+      fontSize: Theme.text.large.fontSize,
+      lineHeight: Theme.text.large.lineHeight,
+    }),
+    medium: css({
+      padding: '12px 16px',
+
+      fontSize: Theme.text.medium.fontSize,
+      lineHeight: Theme.text.medium.lineHeight,
+    }),
+    small: css({
+      padding: '8px 12px',
+
+      fontSize: Theme.text.small.fontSize,
+      lineHeight: Theme.text.small.lineHeight,
+    }),
+  };
+
+  return style[size];
+};
+
+export const buttonStyling = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  border: 'none',
+  outline: `0 solid ${Colors.White}`,
+
+  backgroundColor: Colors.White,
+
+  fontWeight: 600,
+
+  transition: 'all .2s ease-in',
+
+  cursor: 'pointer',
+
+});

src/components/Button-bottom/Button-bottom.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import {
+  buttonStyling,
+  getSizeStyling,
+  getVariantStyling,
+} from "./Button-bottom.styles";
+import type { Size } from "@type/index";
+import type { ComponentPropsWithRef, ForwardedRef } from "react";
+import { forwardRef } from "react";
+
+export interface ButtonButtomProps extends ComponentPropsWithRef<"button"> {
+  size?: Extract<Size, "small" | "medium" | "large">;
+  variant?: "primary" | "secondary" | "unavailable";
+}
+
+const ButtonButtom = forwardRef<HTMLButtonElement, ButtonButtomProps>(
+  ({ size = "medium", variant = "primary", children, ...attributes }, ref) => {
+    return (
+      <button
+        ref={ref}
+        css={[buttonStyling, getVariantStyling(variant), getSizeStyling(size)]}
+        {...attributes}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+export default ButtonButtom;

src/components/Button/Button.styles.ts

@@ -0,0 +1,81 @@
+import { css } from '@emotion/react';
+import { Theme } from '../../styles/Theme'
+import { Colors } from '../../styles/color'
+ import type { ButtonProps } from './Button';
+
+export const getVariantStyling = (variant: Required<ButtonProps>['variant']) => {
+  const style = {
+    primary: css({
+      backgroundColor:  Colors.Primary,
+
+      color: Colors.White,
+
+    }),
+    secondary: css({
+      backgroundColor: Colors.PrimaryLight,
+
+      color: Colors.Primary,
+
+    }),
+    outline: css({
+      backgroundColor: Colors.White,
+
+      color: Colors.Gray700,
+
+      border: `1px solid ${Colors.Gray200}`,
+
+    }),
+    disabled: css({
+      backgroundColor: Colors.Gray100,
+
+      color: Colors.Gray500,
+
+    }),
+  };
+
+  return style[variant];
+};
+
+export const getSizeStyling = (size: Required<ButtonProps>['size']) => {
+  const style = {
+    large: css({
+      padding: '16px 20px',
+
+      fontSize: Theme.text.large.fontSize,
+      lineHeight: Theme.text.large.lineHeight,
+    }),
+    medium: css({
+      padding: '12px 16px',
+
+      fontSize: Theme.text.medium.fontSize,
+      lineHeight: Theme.text.medium.lineHeight,
+    }),
+    small: css({
+      padding: '8px 12px',
+
+      fontSize: Theme.text.small.fontSize,
+      lineHeight: Theme.text.small.lineHeight,
+    }),
+  };
+
+  return style[size];
+};
+
+export const buttonStyling = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  border: 'none',
+  borderRadius: `${Theme.borderRadius.large}`,
+  outline: `0 solid ${Colors.White}`,
+
+  backgroundColor: Colors.White,
+
+  fontWeight: 600,
+
+  transition: 'all .2s ease-in',
+
+  cursor: 'pointer',
+
+});

src/components/Button/Button.tsx

@@ -1,30 +1,30 @@
-import React from 'react';
-import './Button.styles.css';
+import React from "react";
+import {
+  buttonStyling,
+  getSizeStyling,
+  getVariantStyling,
+} from "./Button.styles";
+import type { Size } from "@type/index";
+import type { ComponentPropsWithRef, ForwardedRef } from "react";
+import { forwardRef } from "react";
 
-export interface ButtonProps {
-  primary?: boolean;
-  backgroundColor?: string;
-  size?: 'small' | 'medium' | 'large';
-  label: string;
-  onClick?: () => void;
+export interface ButtonProps extends ComponentPropsWithRef<"button"> {
+  size?: Extract<Size, "small" | "medium" | "large">;
+  variant?: "primary" | "secondary" | "outline" | "disabled";
 }
 
-export const Button: React.FC<ButtonProps> = ({
-  primary = false,
-  backgroundColor,
-  size = 'medium',
-  label,
-  ...props
-}) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={backgroundColor ? { backgroundColor } : undefined}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ size = "medium", variant = "primary", children, ...attributes }, ref) => {
+    return (
+      <button
+        ref={ref}
+        css={[buttonStyling, getVariantStyling(variant), getSizeStyling(size)]}
+        {...attributes}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+export default Button;