fix: can not close modal by click backdrop

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

@@ -38,15 +38,14 @@ export const Modal = (props: ModalProps) => {
   } = props;
   const [vertical, horizontal] = wrapperPosition;
   return (
-    <StyledModal {...otherProps} open={open} components={{ Backdrop }}>
-      <Fade in={open}>
-        <StyledWrapper
-          alignItems={transformConfig[vertical]}
-          justifyContent={transformConfig[horizontal]}
-        >
-          {children}
-        </StyledWrapper>
-      </Fade>
+    <StyledModal
+      {...otherProps}
+      open={open}
+      components={{ Backdrop }}
+      alignItems={transformConfig[vertical]}
+      justifyContent={transformConfig[horizontal]}
+    >
+      <Fade in={open}>{children}</Fade>
     </StyledModal>
   );
 };

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

@@ -1,6 +1,7 @@
 import { styled } from '@/styles';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import { Wrapper } from '@/ui/layout';
+import { CSSProperties } from 'react';
 
 export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => {
   return {
@@ -14,10 +15,16 @@ export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => {
   };
 });
 
-export const StyledModal = styled(ModalUnstyled)(({ theme }) => {
+export const StyledModal = styled(ModalUnstyled)<{
+  alignItems: CSSProperties['alignItems'];
+  justifyContent: CSSProperties['justifyContent'];
+}>(({ theme, alignItems, justifyContent }) => {
   return {
     width: '100vw',
     height: '100vh',
+    display: 'flex',
+    alignItems,
+    justifyContent,
     position: 'fixed',
     left: '0',
     top: '0',