From b36207b3d81583ba00b31a29ed15efdda01945cf Mon Sep 17 00:00:00 2001
From: JunKim <93kimhyunjun@gmail.com>
Date: Mon, 21 Dec 2020 02:16:50 +0900
Subject: [PATCH 1/5] =?UTF-8?q?feat(ui-kit):=20checkbox=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui-kit/src/components/Checkbox/index.tsx | 49 ++++++++++++++++++++++++
 ui-kit/src/components/index.ts           |  1 +
 2 files changed, 50 insertions(+)
 create mode 100644 ui-kit/src/components/Checkbox/index.tsx

diff --git a/ui-kit/src/components/Checkbox/index.tsx b/ui-kit/src/components/Checkbox/index.tsx
new file mode 100644
index 00000000..8aabafc8
--- /dev/null
+++ b/ui-kit/src/components/Checkbox/index.tsx
@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import { Ref } from 'react';
+import { CombineElementProps } from 'src/types/utils';
+import clxs from 'classnames';
+import { generateID } from 'src/utils/generateID';
+import { Text } from '..';
+
+interface CheckboxBaseProps {
+  label?: string;
+  display?: 'block' | 'inline';
+}
+type CheckboxProps = Omit<CombineElementProps<'input', CheckboxBaseProps>, 'type'>;
+
+const Checkbox = (
+  { label, display = 'block', style, disabled, ...props }: CheckboxProps,
+  ref: Ref<HTMLInputElement>
+) => {
+  const id = generateID('checkbox');
+
+  return (
+    <label
+      role="checkbox"
+      className={clxs('lubycon-checkbox', `lubycon-checkbox--display-${display}`, {
+        'lubycon-checkbox--disabled': disabled,
+      })}
+      style={style}
+    >
+      <span className="lubycon-checkbox--input">
+        <input id={id} name="checkbox" ref={ref} type="checkbox" {...props} disabled={disabled} />
+        <span className="lubycon-checkbox--control">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="10"
+            viewBox="0 0 12 10"
+            fill="none"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path fill="none" stroke="#ffffff" strokeWidth="2" d="M1 4.2L4.51852 8L11 1" />
+          </svg>
+        </span>
+      </span>
+      {label ? <Text as="span">{label}</Text> : null}
+    </label>
+  );
+};
+
+export default forwardRef(Checkbox) as typeof Checkbox;
diff --git a/ui-kit/src/components/index.ts b/ui-kit/src/components/index.ts
index f34fe57f..1a30e449 100644
--- a/ui-kit/src/components/index.ts
+++ b/ui-kit/src/components/index.ts
@@ -1,3 +1,4 @@
 export { default as Button } from './Button';
 export { default as Text } from './Text';
 export { default as Column } from './Column';
+export { default as Checkbox } from './Checkbox';

From e47efa09bcff5a07641315e3f8889dcf0774ad79 Mon Sep 17 00:00:00 2001
From: JunKim <93kimhyunjun@gmail.com>
Date: Mon, 21 Dec 2020 02:17:04 +0900
Subject: [PATCH 2/5] =?UTF-8?q?feat(ui-kit):=20checkbox=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui-kit/src/sass/components/_Checkbox.scss | 73 +++++++++++++++++++++++
 ui-kit/src/sass/components/_index.scss    |  1 +
 2 files changed, 74 insertions(+)
 create mode 100644 ui-kit/src/sass/components/_Checkbox.scss

diff --git a/ui-kit/src/sass/components/_Checkbox.scss b/ui-kit/src/sass/components/_Checkbox.scss
new file mode 100644
index 00000000..4ed117e2
--- /dev/null
+++ b/ui-kit/src/sass/components/_Checkbox.scss
@@ -0,0 +1,73 @@
+$box-size: 16px;
+
+.lubycon-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover:not(&--disabled) {
+    .lubycon-checkbox--control {
+      border-color: map-get($colors, 'green50');
+    }
+  }
+
+  &--input {
+    display: grid;
+    grid-template-areas: 'checkbox';
+
+    > * {
+      grid-area: checkbox;
+    }
+    > input {
+      opacity: 0;
+      width: $box-size;
+      height: $box-size;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+    }
+  }
+
+  &--control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $box-size;
+    height: $box-size;
+    border-radius: 2px;
+    box-sizing: border-box;
+    border: 1px solid map-get($colors, 'gray40');
+    margin-right: 8px;
+
+    > svg {
+      transition: transform 0.1s;
+      transform: scale(0);
+    }
+  }
+  
+  &--input input:checked + &--control svg {
+    transform: scale(1);
+  }
+  &--input input:checked + &--control {
+    background-color: map-get($colors, 'green50');
+    border-color: map-get($colors, 'green50');
+  }
+
+  &--display-inline {
+    display: inline-flex;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    color: map-get($colors, 'gray50');
+
+    input {
+      cursor: not-allowed;
+    }
+
+    .lubycon-checkbox--input > input:checked + .lubycon-checkbox--control {
+      border-color: map-get($colors, 'gray40');
+      background-color: map-get($colors, 'gray40'); 
+    }
+  }
+}
diff --git a/ui-kit/src/sass/components/_index.scss b/ui-kit/src/sass/components/_index.scss
index 3f35d98b..642668be 100644
--- a/ui-kit/src/sass/components/_index.scss
+++ b/ui-kit/src/sass/components/_index.scss
@@ -2,3 +2,4 @@
 @import './Text';
 @import './Radio';
 @import './Column';
+@import './Checkbox';

From 089ac5240dd46705f497f0de92a756250962f089 Mon Sep 17 00:00:00 2001
From: JunKim <93kimhyunjun@gmail.com>
Date: Mon, 21 Dec 2020 02:17:11 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat(ui-kit):=20checkbox=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui-kit/src/stories/Checkbox.stories.tsx | 36 +++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 ui-kit/src/stories/Checkbox.stories.tsx

diff --git a/ui-kit/src/stories/Checkbox.stories.tsx b/ui-kit/src/stories/Checkbox.stories.tsx
new file mode 100644
index 00000000..a41f38eb
--- /dev/null
+++ b/ui-kit/src/stories/Checkbox.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Meta } from '@storybook/react/types-6-0';
+import Checkbox from 'components/Checkbox';
+
+export default {
+  title: 'Lubycon UI Kit/Checkbox',
+} as Meta;
+
+export const Default = () => {
+  return (
+    <div>
+      <Checkbox label={'체크박스1'} />
+      <Checkbox label={'체크박스2'} />
+    </div>
+  );
+};
+
+export const Disabled = () => {
+  return (
+    <div>
+      <Checkbox label={'체크박스'} />
+      <Checkbox label={'체크박스2'} />
+      <Checkbox label={'체크박스3'} disabled />
+      <Checkbox label={'체크박스4'} disabled defaultChecked={true} />
+    </div>
+  );
+};
+
+export const inline = () => {
+  return (
+    <div>
+      <Checkbox label={'체크박스'} display="inline" style={{ marginRight: '20px' }} />
+      <Checkbox label={'체크박스2'} display="inline" />
+    </div>
+  );
+};

From cf03376457caa6f6e89cba5e0b8cde3624785098 Mon Sep 17 00:00:00 2001
From: JunKim <93kimhyunjun@gmail.com>
Date: Mon, 21 Dec 2020 23:44:16 +0900
Subject: [PATCH 4/5] =?UTF-8?q?feat(ui-kit):=20Checkbox=20=EB=A6=AC?=
 =?UTF-8?q?=EB=B7=B0=20=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/Checkbox/index.tsx  | 10 +++++-----
 ui-kit/src/sass/components/_Checkbox.scss |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui-kit/src/components/Checkbox/index.tsx b/ui-kit/src/components/Checkbox/index.tsx
index 8aabafc8..0c23fb4c 100644
--- a/ui-kit/src/components/Checkbox/index.tsx
+++ b/ui-kit/src/components/Checkbox/index.tsx
@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 import { Ref } from 'react';
 import { CombineElementProps } from 'src/types/utils';
-import clxs from 'classnames';
-import { generateID } from 'src/utils/generateID';
+import classnames from 'classnames';
+import { generateID } from 'utils/index';
 import { Text } from '..';
 
 interface CheckboxBaseProps {
@@ -20,7 +20,7 @@ const Checkbox = (
   return (
     <label
       role="checkbox"
-      className={clxs('lubycon-checkbox', `lubycon-checkbox--display-${display}`, {
+      className={classnames('lubycon-checkbox', `lubycon-checkbox--display-${display}`, {
         'lubycon-checkbox--disabled': disabled,
       })}
       style={style}
@@ -37,11 +37,11 @@ const Checkbox = (
             aria-hidden="true"
             focusable="false"
           >
-            <path fill="none" stroke="#ffffff" strokeWidth="2" d="M1 4.2L4.51852 8L11 1" />
+            <path fill="none" stroke="#ffffff" strokeWidth="2" d="M1 4.2 L4.51852 8 L11 1" />
           </svg>
         </span>
       </span>
-      {label ? <Text as="span">{label}</Text> : null}
+      {label ? <Text>{label}</Text> : null}
     </label>
   );
 };
diff --git a/ui-kit/src/sass/components/_Checkbox.scss b/ui-kit/src/sass/components/_Checkbox.scss
index 4ed117e2..ebcc7f94 100644
--- a/ui-kit/src/sass/components/_Checkbox.scss
+++ b/ui-kit/src/sass/components/_Checkbox.scss
@@ -15,7 +15,7 @@ $box-size: 16px;
     display: grid;
     grid-template-areas: 'checkbox';
 
-    > * {
+    > input, > span {
       grid-area: checkbox;
     }
     > input {

From 1b329562b0f6a0ad5f9514613b4453c9cfbebe56 Mon Sep 17 00:00:00 2001
From: JunKim <93kimhyunjun@gmail.com>
Date: Mon, 21 Dec 2020 23:44:36 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat(ui-kit):=20alias=20=EB=B0=8F=20utils?=
 =?UTF-8?q?=20index=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui-kit/src/utils/index.ts | 1 +
 ui-kit/tsconfig.json      | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 ui-kit/src/utils/index.ts

diff --git a/ui-kit/src/utils/index.ts b/ui-kit/src/utils/index.ts
new file mode 100644
index 00000000..14be0d6d
--- /dev/null
+++ b/ui-kit/src/utils/index.ts
@@ -0,0 +1 @@
+export { generateID } from './generateID';
diff --git a/ui-kit/tsconfig.json b/ui-kit/tsconfig.json
index a94a6da4..f4f4430e 100644
--- a/ui-kit/tsconfig.json
+++ b/ui-kit/tsconfig.json
@@ -6,6 +6,7 @@
       "src/*": ["./src/*"],
       "components/*": ["./src/components/*"],
       "types/*": ["./src/types/*"],
+      "utils/*": ["./src/utils/*"],
     }
   }
 }
\ No newline at end of file