From 838c0fd249840d9124bffd34b3910272cd0f11e9 Mon Sep 17 00:00:00 2001
From: JunKim <93kimhyunjun@gmail.com>
Date: Mon, 18 Jan 2021 01:32:38 +0900
Subject: [PATCH 1/3] feat(ui-kit): init

---
 ui-kit/src/components/Button/index.tsx  | 28 ++++++++++++++++--
 ui-kit/src/sass/components/_Button.scss | 38 +++++++++++++++++++++++--
 ui-kit/src/stories/Button.stories.tsx   | 14 +++++++--
 3 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/ui-kit/src/components/Button/index.tsx b/ui-kit/src/components/Button/index.tsx
index 9a569c96..17a4a649 100644
--- a/ui-kit/src/components/Button/index.tsx
+++ b/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 = Omit<CombineElementProps<'button', ButtonBaseProps>, 'type'>;
+
+const Button = (
+  { size = 'small', disabled, style, ...props }: ButtonProps,
+  ref: Ref<HTMLButtonElement>
+) => {
+  return (
+    <button
+      className={classnames('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;
diff --git a/ui-kit/src/sass/components/_Button.scss b/ui-kit/src/sass/components/_Button.scss
index 21bef857..374b42b6 100644
--- a/ui-kit/src/sass/components/_Button.scss
+++ b/ui-kit/src/sass/components/_Button.scss
@@ -1,3 +1,37 @@
-.button {
-  outline: 0;
+button {
+  font: inherit;
+  outline: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+}
+
+.lubycon-button {
+  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;
+  }
 }
diff --git a/ui-kit/src/stories/Button.stories.tsx b/ui-kit/src/stories/Button.stories.tsx
index c067d042..baf758ee 100644
--- a/ui-kit/src/stories/Button.stories.tsx
+++ b/ui-kit/src/stories/Button.stories.tsx
@@ -4,7 +4,17 @@ 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 SIZE = ['Small', 'Medium', 'Large'];
+const STATUS = ['Normal', 'Hover', 'Active', 'Disabled'];
+const TEXT = '버튼 텍스트';
+
+export const Default = () => {
+  return (
+    <div>
+      <div>Rounded Button</div>
+      <Button>{TEXT}</Button>
+    </div>
+  );
+};

From 8fe6ab7a11044139a6a1dab045f070d55ff28a4a Mon Sep 17 00:00:00 2001
From: JunKim <93kimhyunjun@gmail.com>
Date: Mon, 18 Jan 2021 23:53:28 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat(ui-kit):=20Button=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui-kit/src/stories/Button.stories.tsx | 37 +++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/ui-kit/src/stories/Button.stories.tsx b/ui-kit/src/stories/Button.stories.tsx
index baf758ee..ac46c063 100644
--- a/ui-kit/src/stories/Button.stories.tsx
+++ b/ui-kit/src/stories/Button.stories.tsx
@@ -1,20 +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',
 } as Meta;
 
-const SIZE = ['Small', 'Medium', 'Large'];
-const STATUS = ['Normal', 'Hover', 'Active', 'Disabled'];
-const TEXT = '버튼 텍스트';
+const sizeList = ['small', 'medium', 'large'] as const;
+const btnText = '버튼 텍스트';
 
 export const Default = () => {
   return (
     <div>
-      <div>Rounded Button</div>
-      <Button>{TEXT}</Button>
+      <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>
   );
 };

From 6caa32440899c14496099fbf1b9b6819df873e26 Mon Sep 17 00:00:00 2001
From: JunKim <93kimhyunjun@gmail.com>
Date: Tue, 19 Jan 2021 00:50:28 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat(ui-kit):=20=EB=A6=AC=EB=B7=B0=20?=
 =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui-kit/src/components/Button/index.tsx  |  4 ++--
 ui-kit/src/sass/components/_Button.scss | 16 ++++++----------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/ui-kit/src/components/Button/index.tsx b/ui-kit/src/components/Button/index.tsx
index 17a4a649..ef5d13f7 100644
--- a/ui-kit/src/components/Button/index.tsx
+++ b/ui-kit/src/components/Button/index.tsx
@@ -6,7 +6,7 @@ import { Text } from '..';
 interface ButtonBaseProps {
   size?: 'small' | 'medium' | 'large';
 }
-type ButtonProps = Omit<CombineElementProps<'button', ButtonBaseProps>, 'type'>;
+type ButtonProps = CombineElementProps<'button', ButtonBaseProps>;
 
 const Button = (
   { size = 'small', disabled, style, ...props }: ButtonProps,
@@ -14,7 +14,7 @@ const Button = (
 ) => {
   return (
     <button
-      className={classnames('lubycon-button', `${size}`)}
+      className={classnames('lubycon-button', `lubycon-button__${size}`)}
       disabled={disabled}
       style={style}
       ref={ref}
diff --git a/ui-kit/src/sass/components/_Button.scss b/ui-kit/src/sass/components/_Button.scss
index 374b42b6..41b629f7 100644
--- a/ui-kit/src/sass/components/_Button.scss
+++ b/ui-kit/src/sass/components/_Button.scss
@@ -1,27 +1,23 @@
-button {
+.lubycon-button {
   font: inherit;
+  text-align: inherit;
   outline: none;
   border: 0;
   margin: 0;
-  padding: 0;
-  text-align: inherit;
-}
-
-.lubycon-button {
   background-color: get-color('blue50');
   border-radius: 4px;
   color: #ffffff;
   cursor: pointer;
-  
-  &.small {
+
+  &__small {
     height: 32px;
     padding: 4px 16px;
   }
-  &.medium {
+  &__medium {
     height: 40px;
     padding: 8px 16px;
   }
-  &.large {
+  &__large {
     height: 56px;
     padding: 12px 32px;
   }