feat(ui-kit): 모든 컴포넌트가 HTML 엘리먼트를 상속받도록 수정

.github/workflows/create-pull-request.yml

@@ -0,0 +1,16 @@
+name: PR Slack Notification
+on: [pull_request]
+
+jobs:
+  create-pull-request:
+    runs-on: ubuntu-latest
+    name: Run
+    steps:
+      - name: Checkout
+        uses: actions/checkout@master
+      - name: Fire Notification
+        uses: Lubycon/github-reviewer-slack-noti-action@v1.1.3
+        with:
+          slack-bot-token: ${{ secrets.LUBYCON_SLACK_BOT_TOKEN }}
+          github-token: ${{ secrets.LUBYCON_GITHUB_TOKEN }}
+          channel-id: C01TJJY15BP

.releaserc.js

@@ -25,6 +25,7 @@ module.exports = {
         {"type": "fix", "release": "patch"},
         {"type": "chore", "release": "patch"},
         {"type": "refactor", "release": "patch"},
+        {"type": "fix", "release": "patch"},
         {"type": "style", "release": "patch"}
       ],
       "parserOpts": {

ui-kit/src/components/Card/CardContent.tsx

@@ -1,12 +1,20 @@
 import React from 'react';
 import { ReactNode } from 'react';
 import classnames from 'classnames';
+import { CombineElementProps } from 'src/types/utils';
 
-interface CardContentProps {
-  children?: ReactNode;
-}
-const CardContent = ({ children }: CardContentProps) => {
-  return <div className={classnames('lubycon-card__content')}>{children}</div>;
+type CardContentProps = CombineElementProps<
+  'div',
+  {
+    children?: ReactNode;
+  }
+>;
+const CardContent = ({ children, className, ...props }: CardContentProps) => {
+  return (
+    <div className={classnames('lubycon-card__content', className)} {...props}>
+      {children}
+    </div>
+  );
 };
 
 export default CardContent;

ui-kit/src/components/Card/CardFooter.tsx

@@ -1,18 +1,29 @@
 import React from 'react';
 import { ReactNode } from 'react';
 import classnames from 'classnames';
+import { CombineElementProps } from 'src/types/utils';
 
-interface CardFooterProps {
-  children?: ReactNode;
-  justifyContent?: 'flex-start' | 'center' | 'flex-end';
-}
-const CardFooter = ({ children, justifyContent = 'flex-start' }: CardFooterProps) => {
+type CardFooterProps = CombineElementProps<
+  'div',
+  {
+    children?: ReactNode;
+    justifyContent?: 'flex-start' | 'center' | 'flex-end';
+  }
+>;
+const CardFooter = ({
+  children,
+  justifyContent = 'flex-start',
+  className,
+  ...props
+}: CardFooterProps) => {
   return (
     <div
       className={classnames(
         'lubycon-card__footer',
-        `lubycon-card__footer--align-${justifyContent}`
+        `lubycon-card__footer--align-${justifyContent}`,
+        className
       )}
+      {...props}
     >
       {children}
     </div>

ui-kit/src/components/Card/CardHeader.tsx

@@ -1,13 +1,17 @@
 import React, { ReactNode, isValidElement } from 'react';
 import classnames from 'classnames';
 import Text from '../Text';
+import { CombineElementProps } from 'src/types/utils';
 
-interface CardHeaderProps {
-  children?: ReactNode;
-}
-const CardHeader = ({ children }: CardHeaderProps) => {
+type CardHeaderProps = CombineElementProps<
+  'div',
+  {
+    children?: ReactNode;
+  }
+>;
+const CardHeader = ({ children, className, ...props }: CardHeaderProps) => {
   return (
-    <div className={classnames('lubycon-card__header')}>
+    <div className={classnames('lubycon-card__header', className)} {...props}>
       {isValidElement(children) ? children : <Text typography="h6">{children}</Text>}
     </div>
   );

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

@@ -1,14 +1,25 @@
 import React, { forwardRef } from 'react';
 import { ReactNode } from 'react';
 import classnames from 'classnames';
+import { CombineElementProps } from 'src/types/utils';
 
-interface Props {
-  children: ReactNode;
-}
+type Props = CombineElementProps<
+  'div',
+  {
+    children: ReactNode;
+  }
+>;
 
-const Card = forwardRef<HTMLDivElement, Props>(function Card({ children }, ref) {
+const Card = forwardRef<HTMLDivElement, Props>(function Card(
+  { children, className, ...props },
+  ref
+) {
   return (
-    <div ref={ref} className={classnames('lubycon-card', 'lubycon-shadow--2')}>
+    <div
+      ref={ref}
+      className={classnames('lubycon-card', 'lubycon-shadow--2', className)}
+      {...props}
+    >
       {children}
     </div>
   );

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

@@ -11,17 +11,22 @@ interface CheckboxBaseProps {
 type CheckboxProps = Omit<CombineElementProps<'input', CheckboxBaseProps>, 'type'>;
 
 const Checkbox = (
-  { label, display = 'block', style, disabled, ...props }: CheckboxProps,
+  { label, display = 'block', style, disabled, className, ...props }: CheckboxProps,
   ref: Ref<HTMLInputElement>
 ) => {
   const id = generateID('checkbox');
 
   return (
     <label
       role="checkbox"
-      className={classnames('lubycon-checkbox', `lubycon-checkbox--display-${display}`, {
-        'lubycon-checkbox--disabled': disabled,
-      })}
+      className={classnames(
+        'lubycon-checkbox',
+        `lubycon-checkbox--display-${display}`,
+        {
+          'lubycon-checkbox--disabled': disabled,
+        },
+        className
+      )}
       style={style}
     >
       <span className="lubycon-checkbox__input">

ui-kit/src/components/Modal/ModalContent.tsx

@@ -4,18 +4,19 @@ import Text from 'components/Text';
 import { Typographys } from 'components/Text/types';
 import { CombineElementProps } from 'types/utils';
 
-interface BaseProps {
-  size?: 'small' | 'medium';
-  children?: ReactNode;
-}
+type ModalContentProps = CombineElementProps<
+  'div',
+  {
+    size?: 'small' | 'medium';
+    children?: ReactNode;
+  }
+>;
 
-type ModalContentProps = CombineElementProps<'div', BaseProps>;
-
-const ModalContent = ({ children, size }: ModalContentProps) => {
+const ModalContent = ({ children, size, className, ...props }: ModalContentProps) => {
   const typography: Typographys = size === 'small' ? 'p2' : 'p1';
 
   return (
-    <div className={classnames('lubycon-modal__content')}>
+    <div className={classnames('lubycon-modal__content', className)} {...props}>
       {isValidElement(children) ? children : <Text typography={typography}>{children}</Text>}
     </div>
   );

ui-kit/src/components/Modal/ModalFooter.tsx

@@ -1,11 +1,20 @@
 import React, { ReactNode } from 'react';
+import { CombineElementProps } from 'src/types/utils';
+import classnames from 'classnames';
 
-interface ModalFooterProps {
-  children?: ReactNode;
-}
+type ModalFooterProps = CombineElementProps<
+  'div',
+  {
+    children?: ReactNode;
+  }
+>;
 
-const ModalFooter = ({ children }: ModalFooterProps) => {
-  return <div className="lubycon-modal__footer">{children}</div>;
+const ModalFooter = ({ children, className, ...props }: ModalFooterProps) => {
+  return (
+    <div className={classnames('lubycon-modal__footer', className)} {...props}>
+      {children}
+    </div>
+  );
 };
 
 export default ModalFooter;

ui-kit/src/components/Modal/ModalHeader.tsx

@@ -1,17 +1,22 @@
 import React, { ReactNode, isValidElement } from 'react';
 import Text from 'components/Text';
 import { Typographys } from 'components/Text/types';
+import { CombineElementProps } from 'src/types/utils';
+import classnames from 'classnames';
 
-interface ModalHeaderProps {
-  size?: 'small' | 'medium';
-  children?: ReactNode;
-}
+type ModalHeaderProps = CombineElementProps<
+  'div',
+  {
+    size?: 'small' | 'medium';
+    children?: ReactNode;
+  }
+>;
 
-const ModalHeader = ({ size, children }: ModalHeaderProps) => {
+const ModalHeader = ({ size, children, className, ...props }: ModalHeaderProps) => {
   const typography: Typographys = size === 'small' ? 'subtitle' : 'h6';
 
   return (
-    <header className="lubycon-modal__title">
+    <header className={classnames('lubycon-modal__title', className)} {...props}>
       {isValidElement(children) ? children : <Text typography={typography}>{children}</Text>}
     </header>
   );

ui-kit/src/components/Modal/ModalWindow.tsx

@@ -1,14 +1,21 @@
 import React, { ReactNode } from 'react';
 import classnames from 'classnames';
+import { CombineElementProps } from 'src/types/utils';
 
-interface ModalWindowProps {
-  children: ReactNode;
-  size: 'small' | 'medium';
-}
+type ModalWindowProps = CombineElementProps<
+  'div',
+  {
+    children: ReactNode;
+    size: 'small' | 'medium';
+  }
+>;
 
-const ModalWindow = ({ children, size }: ModalWindowProps) => {
+const ModalWindow = ({ children, size, className, ...props }: ModalWindowProps) => {
   return (
-    <div className={classnames('lubycon-modal__window', `lubycon-modal__window--${size}`)}>
+    <div
+      className={classnames('lubycon-modal__window', `lubycon-modal__window--${size}`, className)}
+      {...props}
+    >
       {children}
     </div>
   );

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

@@ -4,16 +4,28 @@ import ModalWindow from './ModalWindow';
 import { generateID } from 'utils/index';
 import { animated, useTransition } from 'react-spring';
 import { useState } from 'react';
+import { CombineElementProps } from 'src/types/utils';
 
-export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
-  show: boolean;
-  size?: 'small' | 'medium';
-  children: ReactElement | ReactElement[];
-  onOpen?: () => void;
-  onClose?: () => void;
-}
+export type ModalProps = CombineElementProps<
+  'div',
+  {
+    show: boolean;
+    size?: 'small' | 'medium';
+    children: ReactElement | ReactElement[];
+    onOpen?: () => void;
+    onClose?: () => void;
+  }
+>;
 
-const Modal = ({ show, size = 'small', children, onOpen, onClose }: ModalProps) => {
+const Modal = ({
+  show,
+  size = 'small',
+  children,
+  onOpen,
+  onClose,
+  className,
+  ...props
+}: ModalProps) => {
   const [showModal, setShowModal] = useState(show);
   const backdropRef = useRef(null);
   const backdropTransition = useTransition(showModal, null, {
@@ -68,10 +80,14 @@ const Modal = ({ show, size = 'small', children, onOpen, onClose }: ModalProps)
           )
       )}
       {modalTransition.map(
-        ({ item: show, key, props }) =>
+        ({ item: show, key, props: animationProps }) =>
           show && (
-            <animated.div key={key} style={props} className="lubycon-modal__window-wrapper">
-              <ModalWindow size={size}>
+            <animated.div
+              key={key}
+              style={animationProps}
+              className="lubycon-modal__window-wrapper"
+            >
+              <ModalWindow size={size} className={className} {...props}>
                 {Children.map(children, (child) => {
                   return cloneElement(child, {
                     key: generateID('lubycon-modal__children'),

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

@@ -11,16 +11,21 @@ interface RadioBaseProps {
 type RadioProps = Omit<CombineElementProps<'input', RadioBaseProps>, 'type'>;
 
 const Radio = (
-  { label, display = 'block', style, disabled, ...props }: RadioProps,
+  { label, display = 'block', style, disabled, className, ...props }: RadioProps,
   ref: Ref<HTMLInputElement>
 ) => {
   const id = generateID('radio');
 
   return (
     <span
-      className={classnames('lubycon-radio', `lubycon-radio--display-${display}`, {
-        'lubycon-radio--disabled': disabled,
-      })}
+      className={classnames(
+        'lubycon-radio',
+        `lubycon-radio--display-${display}`,
+        {
+          'lubycon-radio--disabled': disabled,
+        },
+        className
+      )}
       style={style}
     >
       <label htmlFor={id} className="lubycon-radio__label">

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

@@ -21,6 +21,7 @@ const Selection = (
     value,
     onChange,
     size = 'medium',
+    className,
     ...props
   }: SelectionProps,
   ref: Ref<HTMLSelectElement>
@@ -33,10 +34,15 @@ const Selection = (
 
   return (
     <div
-      className={classnames('lubycon-selection', `lubycon-selection--size-${size}`, {
-        'lubycon-selection--disabled': disabled,
-        'lubycon-selection--empty': innerValue === '',
-      })}
+      className={classnames(
+        'lubycon-selection',
+        `lubycon-selection--size-${size}`,
+        {
+          'lubycon-selection--disabled': disabled,
+          'lubycon-selection--empty': innerValue === '',
+        },
+        className
+      )}
     >
       <select
         ref={ref}