feat: modify modal component

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

@@ -1,5 +1,5 @@
 import Fade from '@mui/material/Fade';
-import { StyledModal, StyledBackdrop } from './styles';
+import { StyledModal, StyledBackdrop, StyledWrapper } from './styles';
 import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
 
 const Backdrop = ({
@@ -16,13 +16,37 @@ const Backdrop = ({
   );
 };
 
-export type ModalProps = ModalUnstyledOwnProps;
+export type ModalProps = {
+  wrapperPosition?: ['top' | 'bottom' | 'center', 'left' | 'right' | 'center'];
+} & ModalUnstyledOwnProps;
+
+const transformConfig = {
+  top: 'flex-start',
+  bottom: 'flex-end',
+  center: 'center',
+  left: 'flex-start',
+  right: 'flex-end',
+};
 
 export const Modal = (props: ModalProps) => {
-  const { components, open, children, ...otherProps } = props;
+  const {
+    wrapperPosition = ['center', 'center'],
+    components,
+    open,
+    children,
+    ...otherProps
+  } = props;
+  const [vertical, horizontal] = wrapperPosition;
   return (
     <StyledModal {...otherProps} open={open} components={{ Backdrop }}>
-      <Fade in={open}>{children}</Fade>
+      <Fade in={open}>
+        <StyledWrapper
+          alignItems={transformConfig[vertical]}
+          justifyContent={transformConfig[horizontal]}
+        >
+          {children}
+        </StyledWrapper>
+      </Fade>
     </StyledModal>
   );
 };

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

@@ -1,6 +1,6 @@
-import { absoluteCenter, displayFlex, fixedCenter, styled } from '@/styles';
+import { styled } from '@/styles';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
-import { ModalCloseButtonProps } from '@/ui/modal/modal-close-button';
+import { Wrapper } from '@/ui/layout';
 
 export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => {
   return {
@@ -22,7 +22,6 @@ export const StyledModal = styled(ModalUnstyled)(({ theme }) => {
     left: '0',
     top: '0',
     zIndex: theme.zIndex.modal,
-    ...displayFlex('center', 'center'),
     '*': {
       WebkitTapHighlightColor: 'transparent',
       outline: 'none',
@@ -30,3 +29,10 @@ export const StyledModal = styled(ModalUnstyled)(({ theme }) => {
   };
 });
 
+export const StyledWrapper = styled(Wrapper)(() => {
+  return {
+    width: '100vw',
+    height: '100vh',
+    overflow: 'hidden',
+  };
+});