feat: add Modal component to common ui

packages/app/src/ui/modal/index.tsx

@@ -0,0 +1,4 @@
+import Modal from './modal';
+
+export * from './modal';
+export default Modal;

packages/app/src/ui/modal/modal.tsx

@@ -0,0 +1,32 @@
+import Fade from '@mui/material/Fade';
+import { StyledModal, StyledBackdrop } from './style';
+import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
+
+const Backdrop = ({
+  open,
+  ...other
+}: {
+  open?: boolean;
+  className: string;
+}) => {
+  return (
+    <Fade in={open}>
+      <StyledBackdrop open={open} {...other} />
+    </Fade>
+  );
+};
+
+export type ModalProps = ModalUnstyledOwnProps;
+
+export const Modal = (props: ModalProps) => {
+  const { components, open, children, ...otherProps } = props;
+  return (
+    <div>
+      <StyledModal {...otherProps} open={open} components={{ Backdrop }}>
+        <Fade in={open}>{children}</Fade>
+      </StyledModal>
+    </div>
+  );
+};
+
+export default Modal;

packages/app/src/ui/modal/style.ts

@@ -0,0 +1,30 @@
+import { displayFlex, fixedCenter, styled } from '@/styles';
+import ModalUnstyled from '@mui/base/ModalUnstyled';
+
+export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => {
+  return {
+    zIndex: '-1',
+    position: 'fixed',
+    right: '0',
+    bottom: '0',
+    top: '0',
+    left: '0',
+    backgroundColor: 'rgba(58, 76, 92, 0.2)',
+  };
+});
+
+export const StyledModal = styled(ModalUnstyled)(({ theme }) => {
+  return {
+    width: '100vw',
+    height: '100vh',
+    position: 'fixed',
+    left: '0',
+    top: '0',
+    zIndex: theme.zIndex.modal,
+    ...displayFlex('center', 'center'),
+    '*': {
+      '-webkit-tap-highlight-color': 'transparent',
+      outline: 'none',
+    },
+  };
+});