feat(ui-kit): Tag 컴포넌트 추가

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

@@ -9,6 +9,7 @@ type Props = CombineElementProps<
   {
     label?: ReactNode;
     type?: TextInputType;
+    left?: ReactNode;
     right?: ReactNode;
     hasError?: boolean;
     description?: string;
@@ -21,6 +22,7 @@ const Input = forwardRef<HTMLInputElement, Props>(function Input(
     className,
     disabled,
     type = 'text',
+    left,
     right,
     hasError,
     description,
@@ -33,6 +35,7 @@ const Input = forwardRef<HTMLInputElement, Props>(function Input(
   const [isFocused, setFocus] = useState(false);
   const hasLabel = label != null;
   const hasDescription = description != null;
+  const hasLeftArea = left != null;
   const hasRightArea = right != null;
 
   const labelElement = useMemo(() => {
@@ -64,9 +67,11 @@ const Input = forwardRef<HTMLInputElement, Props>(function Input(
       {labelElement}
       <div
         className={classnames('lubycon-input__form', {
+          'lubycon-input__form--with-left-area': hasLeftArea,
           'lubycon-input__form--with-right-area': hasRightArea,
         })}
       >
+        {left != null ? <span className="lubycon-input__form__left">{left}</span> : null}
         <input
           ref={ref}
           className={classnames('lubycon-input__form__input-element', 'lubycon-typography-p1')}

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

@@ -0,0 +1,54 @@
+import React, { isValidElement, ReactText } from 'react';
+import { colors, SemanticColor } from 'src/constants/colors';
+import { CombineElementProps } from 'src/types/utils';
+import classnames from 'classnames';
+import Text from '../Text';
+import Icon from '../Icon';
+import { close } from 'ionicons/icons';
+
+export type TagType = SemanticColor | 'default';
+
+type Props = CombineElementProps<
+  'div',
+  {
+    type?: TagType;
+    onDelete?: (label: ReactText) => void;
+    children: ReactText;
+  }
+>;
+
+const Tag = ({
+  type = 'default',
+  className,
+  children: label,
+  onClick,
+  onDelete,
+  ...props
+}: Props) => {
+  const isClickable = onClick != null || onDelete != null;
+  return (
+    <div
+      className={classnames(
+        'lubycon-tag',
+        `lubycon-tag--type-${type}`,
+        {
+          'lubycon-tag--clickable': isClickable,
+        },
+        className
+      )}
+      onClick={onClick}
+      {...props}
+    >
+      <span className="lubycon-tag__label">
+        {isValidElement(label) ? label : <Text typography="p2">{label}</Text>}
+      </span>
+      {onDelete != null ? (
+        <a className="lubycon-tag__delete-button" onClick={() => onDelete?.(label)}>
+          <Icon icon={close} type="filled" color={colors.gray70} />
+        </a>
+      ) : null}
+    </div>
+  );
+};
+
+export default Tag;

ui-kit/src/index.ts

@@ -19,10 +19,11 @@ export {
   CardFooter,
 } from './components/Card';
 export { default as Snackbar } from './components/Snackbar';
-export { default as List, ListItem } from './components/List';
+export { default as List, ListItem, ListItemImage } from './components/List';
 export { default as Input } from './components/Input';
 export { default as ProgressBar } from './components/ProgressBar';
 export { default as Accordion } from './components/Accordion';
+export { default as Tag } from './components/Tag';
 export { default as Modal, ModalHeader, ModalContent, ModalFooter } from './components/Modal';
 export { Portal } from './contexts/Portal';
 export { useToast } from './contexts/Toast';

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

@@ -66,6 +66,7 @@ $description-position: 30px;
         color: get-color('gray70');
       }
     }
+    &__left,
     &__right {
       display: inline-flex;
     }

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

@@ -0,0 +1,64 @@
+@mixin tagColor($color, $hover-color) {
+  background-color: $color;
+  &:hover {
+    background-color: $hover-color;
+  }
+}
+
+.lubycon-tag {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 0 4px 12px;
+  border-radius: 4px;
+  transition: background-color 0.1s ease-in-out;
+
+  &--type {
+    &-default {
+      background-color: get-color('gray30');
+    }
+    &-positive {
+      background-color: get-color('green40');
+    }
+    &-informative {
+      background-color: get-color('blue40');
+    }
+    &-notice {
+      background-color: get-color('yellow40');
+    }
+    &-negative {
+      background-color: get-color('red40');
+    }
+  }
+
+  &--clickable {
+    cursor: pointer;
+    &.lubycon-tag--type-default:hover {
+      background-color: get-color('gray40');
+    }
+    &.lubycon-tag--type-positive:hover {
+      background-color: #c9f5d8;
+    }
+    &.lubycon-tag--type-informative:hover {
+      background-color: #d0e1fe;
+    }
+    &.lubycon-tag--type-notice:hover {
+      background-color: #fdf1b6;
+    }
+    &.lubycon-tag--type-negative:hover {
+      background-color: #fad2d4;
+    }
+  }
+
+  &__label {
+    margin-right: 12px;
+    color: get-color('gray90');
+    user-select: none;
+  }
+
+  &__delete-button {
+    cursor: pointer;
+    display: flex;
+    margin-right: 8px;
+  }
+}

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

@@ -18,4 +18,5 @@
 @import './List';
 @import './Input';
 @import './ProgressBar';
+@import './Tag';
 @import './Modal';

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Input, Text, colors } from 'src';
 import { Meta } from '@storybook/react/types-6-0';
 import Icon from 'src/components/Icon';
-import { checkmarkCircle } from 'ionicons/icons';
+import { checkmarkCircle, closeCircle, musicalNote } from 'ionicons/icons';
 import { TextInputType } from 'components/Input';
 
 export default {
@@ -75,3 +75,17 @@ export const Types = () => {
     </div>
   );
 };
+
+export const LeftAndRight = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', maxWidth: 300 }}>
+      <Input label={'Left Area'} left={<Icon icon={musicalNote} type="filled" />} />
+      <Input label={'Right Area'} right={<Icon icon={closeCircle} type="filled" />} />
+      <Input
+        label={'Left And Right'}
+        left={<Icon icon={musicalNote} type="filled" />}
+        right={<Icon icon={closeCircle} type="filled" />}
+      />
+    </div>
+  );
+};

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

@@ -1,10 +1,8 @@
 import React from 'react';
-import { Button, List, ListItem } from 'src';
+import { Button, List, ListItem, ListItemImage, colors } from 'src';
 import { Meta } from '@storybook/react/types-6-0';
-import { ListItemImage } from 'src/components/List';
 import Icon from 'src/components/Icon';
 import { chevronForward } from 'ionicons/icons';
-import { colors } from 'src/constants/colors';
 
 export default {
   title: 'Lubycon UI Kit/List',

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Tag } from 'src';
+import { Meta } from '@storybook/react/types-6-0';
+import { SemanticColor } from 'src/constants/colors';
+
+export default {
+  title: 'Lubycon UI Kit/Tag',
+} as Meta;
+
+const samples: Array<{ label: string; type?: SemanticColor }> = [
+  {
+    label: 'chore',
+    type: undefined,
+  },
+  {
+    label: '디자인 챕터',
+    type: 'positive',
+  },
+  {
+    label: '프론트엔드 챕터',
+    type: 'informative',
+  },
+  {
+    label: 'MVP',
+    type: 'negative',
+  },
+  {
+    label: 'feature',
+    type: 'notice',
+  },
+];
+
+export const Default = () => {
+  return (
+    <div style={{ display: 'flex' }}>
+      {samples.map(({ label, type }, index) => (
+        <Tag style={{ marginRight: 8 }} key={index} type={type}>
+          {label}
+        </Tag>
+      ))}
+    </div>
+  );
+};
+
+export const DeleteButton = () => {
+  return (
+    <div style={{ display: 'flex' }}>
+      {samples.map(({ label, type }, index) => (
+        <Tag
+          style={{ marginRight: 8 }}
+          key={index}
+          type={type}
+          onDelete={(label) => console.log(`${label} is deleted`)}
+        >
+          {label}
+        </Tag>
+      ))}
+    </div>
+  );
+};