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

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

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { ToastProvider } from 'contexts/Toast';
 import { PortalProvider } from 'contexts/Portal';
 import { SnackbarProvider } from 'src/contexts/Snackbar';
+import { ModalProvider } from 'src/contexts/Modal';
 
 interface Props {
   children: ReactNode;
@@ -10,9 +11,11 @@ interface Props {
 function LubyconUIKitProvider({ children }: Props) {
   return (
     <PortalProvider>
-      <SnackbarProvider>
-        <ToastProvider>{children}</ToastProvider>
-      </SnackbarProvider>
+      <ModalProvider>
+        <SnackbarProvider>
+          <ToastProvider>{children}</ToastProvider>
+        </SnackbarProvider>
+      </ModalProvider>
     </PortalProvider>
   );
 }

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import classnames from 'classnames';
+
+interface OverlayProps {
+  visibleClass: string | null;
+}
+
+const ModalBackdrop = ({ visibleClass }: OverlayProps) => {
+  return (
+    <div
+      className={classnames('lubycon-modal', 'lubycon-modal__overlay', visibleClass)}
+      aria-hidden={true}
+      tabIndex={-1}
+    />
+  );
+};
+
+export default ModalBackdrop;

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

@@ -0,0 +1,97 @@
+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 ModalBackdrop from './ModalBackdrop';
+
+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;
+  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 onKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') onClose?.();
+  };
+  useEffect(() => {
+    window.addEventListener('keydown', onKeydown);
+    return () => {
+      window.removeEventListener('keydown', onKeydown);
+    };
+  }, []);
+
+  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>
+    </>
+  );
+};
+
+export default Modal;

ui-kit/src/contexts/Modal.tsx

@@ -0,0 +1,64 @@
+import React, { useContext, ReactNode, createContext, useState, useCallback } from 'react';
+import Modal, { ModalProps } from 'components/Modal';
+import { generateID } from 'src/utils';
+import { Portal } from './Portal';
+
+interface ModalOptions extends Omit<ModalProps, 'show'> {
+  test?: boolean;
+}
+interface ModalGlobalState {
+  openModal: (option: ModalOptions) => void;
+  closeModal: (modalId: string) => void;
+}
+interface ModalProviderProps {
+  children: ReactNode;
+}
+
+const ModalContext = createContext<ModalGlobalState>({
+  openModal: () => {},
+  closeModal: () => {},
+});
+
+export function ModalProvider({ children }: ModalProviderProps) {
+  const [openedModalStack, setOpenedModalStack] = useState<ModalOptions[]>([]);
+
+  const openModal = useCallback(
+    ({ id = generateID('lubycon-modal'), ...option }: ModalOptions) => {
+      const modal = { id, ...option };
+      setOpenedModalStack([...openedModalStack, modal]);
+    },
+    [openedModalStack]
+  );
+  const closeModal = useCallback(
+    (closedModalId: string) => {
+      setOpenedModalStack(openedModalStack.filter((modal) => modal.id !== closedModalId));
+    },
+    [openedModalStack]
+  );
+
+  return (
+    <ModalContext.Provider
+      value={{
+        openModal,
+        closeModal,
+      }}
+    >
+      {children}
+      <Portal>
+        {openedModalStack.map(({ id, handleClick, ...modalProps }) => (
+          <Modal
+            show={true}
+            key={id}
+            onClose={() => closeModal(id ?? '')}
+            handleClick={() => handleClick?.()}
+            {...modalProps}
+          />
+        ))}
+      </Portal>
+    </ModalContext.Provider>
+  );
+}
+
+export function useModal() {
+  return useContext(ModalContext);
+}

ui-kit/src/index.ts

@@ -23,6 +23,7 @@ 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 { Portal } from './contexts/Portal';
 export { useToast } from './contexts/Toast';
 export { useSnackbar } from './contexts/Snackbar';

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

@@ -0,0 +1,50 @@
+.lubycon-modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  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;
+  }
+  &__window {
+    background-color: get-color('gray10');
+    border-radius: 4px;
+    box-sizing: border-box;
+    &--small {
+      width: 280px;
+      padding: 16px 20px;
+    }
+    &--medium {
+      width: 400px;
+      padding: 20px 24px;
+    }
+  }
+  &__title {
+    color: get-color('gray100');
+    margin-top: 0;
+    margin-bottom: 12px;
+  }
+  &__message {
+    color: get-color('gray70');
+    margin-top: 0;
+    margin-bottom: 24px;
+    white-space: pre-wrap;
+  }
+  &__buttons {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}

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

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

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

@@ -0,0 +1,117 @@
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import Modal from 'components/Modal';
+import Button from 'components/Button';
+import { useModal } from 'contexts/Modal';
+
+export default {
+  title: 'Lubycon UI kit/Modal',
+  component: Modal,
+} as Meta;
+
+export const Default = () => {
+  const { openModal } = useModal();
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, fit-content(100%))',
+        gridGap: '15px',
+      }}
+    >
+      <Button
+        size="medium"
+        onClick={() =>
+          openModal({
+            title: '타이틀입니다',
+            message: '여기에 본문 텍스트가 들어갑니다\n' + '여기에 본문 텍스트가 들어갑니다',
+            cancelButton: true,
+          })
+        }
+      >
+        Small Modal Trigger (with all)
+      </Button>
+      <Button
+        size="medium"
+        onClick={() =>
+          openModal({
+            message: '본문 텍스트와 타이틀은 용도에 따라 별도로 구성이 가능합니다',
+            cancelButton: true,
+          })
+        }
+      >
+        Small Modal Trigger (without title)
+      </Button>
+      <Button
+        size="medium"
+        onClick={() =>
+          openModal({
+            title: '타이틀입니다',
+            message: '여기에 본문 텍스트가 들어갑니다\n' + '여기에 본문 텍스트가 들어갑니다',
+          })
+        }
+      >
+        Small Modal Trigger (without cancel)
+      </Button>
+      <Button
+        size="medium"
+        onClick={() =>
+          openModal({
+            message: '본문 텍스트와 타이틀은 용도에 따라 별도로 구성이 가능합니다',
+          })
+        }
+      >
+        Small Modal Trigger (without title, cancel)
+      </Button>
+      <Button
+        size="medium"
+        onClick={() =>
+          openModal({
+            title: '타이틀입니다',
+            message: `텍스트 내용이 많을 경우에는 중간 크기의 모달 사용을 권장합니다. 여기에 본문 텍스트를 입력해주세요.`,
+            size: 'medium',
+            cancelButton: true,
+          })
+        }
+      >
+        Medium Modal Trigger (with all)
+      </Button>
+      <Button
+        size="medium"
+        onClick={() =>
+          openModal({
+            message: '본문 텍스트와 타이틀은 용도에 따라\n별도로 구성이 가능합니다',
+            size: 'medium',
+            cancelButton: true,
+          })
+        }
+      >
+        Medium Modal Trigger (without title)
+      </Button>
+      <Button
+        size="medium"
+        onClick={() =>
+          openModal({
+            title: '타이틀입니다',
+            message: `텍스트 내용이 많을 경우에는 중간 크기의 모달 사용을 권장합니다. 여기에 본문 텍스트를 입력해주세요.`,
+            size: 'medium',
+          })
+        }
+      >
+        Medium Modal Trigger (without cancel)
+      </Button>
+      <Button
+        size="medium"
+        onClick={() =>
+          openModal({
+            message: '본문 텍스트와 타이틀은 용도에 따라\n별도로 구성이 가능합니다',
+            size: 'medium',
+          })
+        }
+      >
+        Medium Modal Trigger (without title, cancel)
+      </Button>
+    </div>
+  );
+};