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

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

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import classnames from 'classnames';
+import Text from 'components/Text';
+
+interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'small' | 'medium';
+  children?: ReactNode;
+  isCustom?: boolean;
+}
+
+const ModalContent = ({ children, isCustom = false, size }: ModalContentProps) => {
+  const typography = size === 'small' ? 'p2' : 'p1';
+
+  return (
+    <div className={classnames('lubycon-modal__content')}>
+      {isCustom ? children : <Text typography={typography}>{children}</Text>}
+    </div>
+  );
+};
+
+export default ModalContent;

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

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+
+interface ModalFooterProps {
+  children?: ReactNode;
+}
+
+const ModalFooter = ({ children }: ModalFooterProps) => {
+  return (
+    <div className="lubycon-modal__footer">
+      {children}
+    </div>
+  );
+};
+
+export default ModalFooter;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import Text from 'components/Text';
+
+interface ModalHeaderProps {
+  size?: 'small' | 'medium';
+  title: string;
+}
+
+const ModalHeader = ({ size, title }: ModalHeaderProps) => {
+  const typography = size === 'small' ? 'subtitle' : 'h6';
+
+  return (
+    <header className="lubycon-modal__title">
+      <Text typography={typography}>{title}</Text>
+    </header>
+  );
+};
+
+export default ModalHeader;

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

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import classnames from 'classnames';
+
+interface ModalWindowProps {
+  children: ReactNode;
+  size: 'small' | 'medium';
+}
+
+const ModalWindow = ({ children, size }: ModalWindowProps) => {
+  return (
+    <div className={classnames('lubycon-modal__window', `lubycon-modal__window--${size}`)}>
+      {children}
+    </div>
+  );
+};
+
+export default ModalWindow;

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

@@ -1,37 +1,19 @@
-import React, { useEffect, useRef } from 'react';
-import Button from 'components/Button';
-import Text from 'components/Text';
-import classnames from 'classnames';
-import { colors } from 'constants/colors';
+import React, { ReactElement, cloneElement, useRef } from 'react';
 import ModalBackdrop from './ModalBackdrop';
+import ModalWindow from './ModalWindow';
+import classnames from 'classnames';
+import { generateID } from 'utils/index';
+import { useEffect } from 'react';
 
 export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   show: boolean;
-  modalIsNested?: boolean;
-  title?: string;
-  message?: string;
   size?: 'small' | 'medium';
-  cancelButton?: boolean;
-  cancelButtonText?: string;
-  buttonText?: string;
-  handleClick?: () => void;
+  children: ReactElement[];
+  onOpen?: () => void;
   onClose?: () => void;
 }
 
-const Modal = ({
-  show = false,
-  modalIsNested = false,
-  title,
-  message,
-  size = 'small',
-  cancelButton = false,
-  cancelButtonText = '취소',
-  buttonText = '저장하기',
-  handleClick,
-  onClose,
-  style,
-}: ModalProps) => {
-  const visibleClass = show ? 'lubycon-modal--visible' : null;
+const Modal = ({ show, size = 'small', children, onClose }: ModalProps) => {
   const backdropRef = useRef(null);
   const onBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (!backdropRef.current) return;
@@ -48,56 +30,19 @@ const Modal = ({
     };
   }, []);
 
-  const modalWindowRef = useRef<HTMLDivElement>(null);
-  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.target === modalWindowRef.current) onClose?.();
-  };
-
-  return (
-    <>
-      {!modalIsNested && <ModalBackdrop visibleClass={visibleClass} />}
-      <div
-        ref={modalWindowRef}
-        onClick={handleBackdropClick}
-        className={classnames('lubycon-modal', visibleClass)}
-        tabIndex={-1}
-        aria-hidden={true}
-      >
-        <div
-          className={classnames(
-            'lubycon-modal__window',
-            `lubycon-modal__window--${size}`,
-            'lubycon-shadow--3'
-          )}
-          style={style}
-        >
-          {title && (
-            <div className={classnames('lubycon-modal__title', 'lubycon-typography--subtitle')}>
-              <Text typography={size === 'small' ? 'subtitle' : 'h6'}>{title}</Text>
-            </div>
-          )}
-          <div className={classnames('lubycon-modal__message', 'lubycon-typography--p2')}>
-            <Text typography={size === 'small' ? 'p2' : 'p1'}>{message}</Text>
-          </div>
-          <div className="lubycon-modal__buttons">
-            {cancelButton && (
-              <Button
-                size={size}
-                style={{ color: colors.gray80, background: 'transparent', marginRight: '4px' }}
-                onClick={onClose}
-              >
-                {cancelButtonText}
-              </Button>
-            )}
-            <Button size={size} onClick={handleClick}>
-              {buttonText}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </>
-  );
+  return show ? (
+    <div className={classnames('lubycon-modal')} tabIndex={-1} aria-hidden={true}>
       <ModalBackdrop onClick={onBackdropClick} ref={backdropRef} />
+      <ModalWindow size={size}>
+        {children.map((element) => {
+          return cloneElement(element, { key: generateID('lubycon-modal__children'), size: size });
+        })}
+      </ModalWindow>
+    </div>
+  ) : null;
 };
 
 export default Modal;
+export { default as ModalHeader } from './ModalHeader';
+export { default as ModalContent } from './ModalContent';
+export { default as ModalFooter } from './ModalFooter';

ui-kit/src/index.ts

@@ -23,7 +23,12 @@ export { default as List, ListItem } 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 Modal } from './components/Modal';
+export {
+  default as Modal,
+  ModalHeader,
+  ModalContent,
+  ModalFooter,
+} from './components/Modal';
 export { Portal } from './contexts/Portal';
 export { useToast } from './contexts/Toast';
 export { useSnackbar } from './contexts/Snackbar';

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

@@ -1,5 +1,8 @@
 .lubycon-modal {
-  display: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   position: fixed;
   top: 0;
   right: 0;
@@ -8,12 +11,6 @@
   overflow: auto;
   z-index: 1000;
 
-  &--visible {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
   &__overlay {
     background-color: get-color('gray100');
     opacity: 0.5;
@@ -22,6 +19,7 @@
     background-color: get-color('gray10');
     border-radius: 4px;
     box-sizing: border-box;
+    z-index: 1001;
     &--small {
       width: 280px;
       padding: 16px 20px;
@@ -36,13 +34,12 @@
     margin-top: 0;
     margin-bottom: 12px;
   }
-  &__message {
+  &__content {
     color: get-color('gray70');
-    margin-top: 0;
     margin-bottom: 24px;
     white-space: pre-wrap;
   }
-  &__buttons {
+  &__footer {
     display: flex;
     align-items: center;
     justify-content: flex-end;