Feat/button

ui-kit/src/components/Button/index.tsx

@@ -1,5 +1,27 @@
-import React, { HTMLAttributes } from 'react';
+import React, { Ref, forwardRef } from 'react';
+import classnames from 'classnames';
+import { CombineElementProps } from 'src/types/utils';
+import { Text } from '..';
 
-export default function Button(props: HTMLAttributes<HTMLButtonElement>): JSX.Element {
-  return <button className="button" {...props} />;
+interface ButtonBaseProps {
+  size?: 'small' | 'medium' | 'large';
 }
+type ButtonProps = CombineElementProps<'button', ButtonBaseProps>;
+
+const Button = (
+  { size = 'small', disabled, style, ...props }: ButtonProps,
+  ref: Ref<HTMLButtonElement>
+) => {
+  return (
+    <button
+      className={classnames('lubycon-button', `lubycon-button__${size}`)}
+      disabled={disabled}
+      style={style}
+      ref={ref}
+    >
+      <Text typography={size === 'large' ? 'p1' : 'p2'} fontWeight="bold" {...props}></Text>
+    </button>
+  );
+};
+
+export default forwardRef(Button) as typeof Button;

ui-kit/src/sass/components/_Button.scss

@@ -1,3 +1,33 @@
-.button {
-  outline: 0;
+.lubycon-button {
+  font: inherit;
+  text-align: inherit;
+  outline: none;
+  border: 0;
+  margin: 0;
+  background-color: get-color('blue50');
+  border-radius: 4px;
+  color: #ffffff;
+  cursor: pointer;
+
+  &__small {
+    height: 32px;
+    padding: 4px 16px;
+  }
+  &__medium {
+    height: 40px;
+    padding: 8px 16px;
+  }
+  &__large {
+    height: 56px;
+    padding: 12px 32px;
+  }
+
+  &:hover, &:active {
+    background-color: get-color('blue60');
+  }
+  &:disabled {
+    color: get-color('gray60');
+    background-color: get-color('gray40');
+    cursor: not-allowed;
+  }
 }

ui-kit/src/stories/Button.stories.tsx

@@ -1,10 +1,47 @@
 import React from 'react';
 import Button from 'components/Button';
+import Text from 'components/Text';
 import { Meta } from '@storybook/react/types-6-0';
 
 export default {
   title: 'Lubycon UI Kit/Button',
-  component: Button,
 } as Meta;
 
-export const Default = () => <Button>기본 버튼</Button>;
+const sizeList = ['small', 'medium', 'large'] as const;
+const btnText = '버튼 텍스트';
+
+export const Default = () => {
+  return (
+    <div>
+      <Text as="div" typography="h5" style={{ marginBottom: '40px' }}>
+        Rounded Button
+      </Text>
+      <ul style={{ listStyle: 'none' }}>
+        {sizeList.map((size, index) => (
+          <li
+            key={index}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '100px 150px 150px',
+              gridGap: '50px',
+              marginBottom: '30px',
+              alignItems: 'center',
+            }}
+          >
+            <Text style={{ width: '100px' }}>{size.charAt(0).toUpperCase() + size.slice(1)}</Text>
+            <div>
+              <Button size={size} key={index}>
+                {btnText}
+              </Button>
+            </div>
+            <div>
+              <Button size={size} key={index + 'disabled'} disabled>
+                {btnText}
+              </Button>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};