From c12d4b49ce1d1c33dd26b818e53fa100d2e7cee1 Mon Sep 17 00:00:00 2001
From: minuk926 <minuk926@gmail.com>
Date: Thu, 17 Mar 2022 18:02:22 +0900
Subject: [PATCH] =?UTF-8?q?modal=20=EB=B0=98=EC=98=81=201=EC=B0=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 public/index.html                             |   1 +
 src/routes/MainRoutes.js                      |  15 +-
 src/views/biz/parking/ModalDetails.jsx        |  80 +++++----
 src/views/biz/parking/Review.jsx              |   3 +-
 src/views/form/Modal/BasicModal.jsx           |  40 +++++
 src/views/form/Modal/DraggableModal.jsx       |  46 +++++
 src/views/form/Modal/DraggableResizeModal.jsx | 164 ++++++++++++++++++
 src/views/form/Modal/GridModal.jsx            |  44 +++++
 src/views/form/Modal/NestedModal.js           |  82 +++++++++
 src/views/form/Modal/SimpleModal.js           |   2 +-
 src/views/form/Modal/index.js                 |  12 +-
 12 files changed, 445 insertions(+), 45 deletions(-)
 create mode 100644 src/views/form/Modal/BasicModal.jsx
 create mode 100644 src/views/form/Modal/DraggableModal.jsx
 create mode 100644 src/views/form/Modal/DraggableResizeModal.jsx
 create mode 100644 src/views/form/Modal/GridModal.jsx
 create mode 100644 src/views/form/Modal/NestedModal.js
diff --git a/package.json b/package.json
index c64322e..cad4742 100755
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "react-perfect-scrollbar": "^1.5.8",
     "react-quill": "^2.0.0-beta.4",
     "react-redux": "^7.2.6",
+    "react-resizable": "^3.0.4",
     "react-router-dom": "^6.2.1",
     "react-scripts": "^4.0.3",
     "react-slick": "^0.28.1",
diff --git a/public/index.html b/public/index.html
index 0d22c5f..30af0aa 100755
--- a/public/index.html
+++ b/public/index.html
@@ -59,6 +59,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal"></div>
     <!--
           This HTML file is a template.
           If you open it directly in the browser, you will see an empty page.
diff --git a/src/routes/MainRoutes.js b/src/routes/MainRoutes.js
index 3881f6b..52f91f9 100755
--- a/src/routes/MainRoutes.js
+++ b/src/routes/MainRoutes.js
@@ -18,6 +18,9 @@ const ParkingReview = Loadable(lazy(() => import('views/biz/parking/Review')));
 const ParkingDetails = Loadable(lazy(() => import('views/biz/parking/ModalDetails')));
 const ParkingRegister = Loadable(lazy(() => import('views/biz/parking/Regist')));
 
+// component
+const ModalForm = Loadable(lazy(() => import('views/form/Modal')));
+
 // ==============================|| MAIN ROUTING ||============================== //
 
 const MainRoutes = {
@@ -96,14 +99,20 @@ const MainRoutes = {
       path: '/user/juror',
       element: <Board />
     },
+
+    {
+      path: '/parking/details',
+      element: <ParkingDetails />
+    },
+
+    // ----------------------------------------
     {
       path: '/sample-page',
       element: <SamplePage />
     },
-
     {
-      path: '/parking/details',
-      element: <ParkingDetails />
+      path: '/modalForm',
+      element: <ModalForm />
     }
   ]
 };
diff --git a/src/views/biz/parking/ModalDetails.jsx b/src/views/biz/parking/ModalDetails.jsx
index 28d6d9c..a2ae068 100644
--- a/src/views/biz/parking/ModalDetails.jsx
+++ b/src/views/biz/parking/ModalDetails.jsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 
 // material-ui
-import { Button, CardContent, CardActions, Divider, Grid, IconButton, Modal, Typography } from '@mui/material';
+import { Button, CardContent, CardActions, Divider, Grid, IconButton, Modal, Typography, Card } from '@mui/material';
 
 // project imports
 import MainCard from 'ui-component/cards/MainCard';
@@ -10,6 +10,8 @@ import MainCard from 'ui-component/cards/MainCard';
 // assets
 import CloseIcon from '@mui/icons-material/Close';
 import SimpleModal from 'views/form/Modal/SimpleModal';
+import Board from '../board/Board';
+// import DraggableResizeModal from 'views/form/Modal/DraggableResizeModal';
 
 // generate random
 function rand() {
@@ -28,43 +30,47 @@ function getModalStyle() {
   };
 }
 
-const ModalDetails = forwardRef(({ modalStyle, handleClose }, ref) => (
-  <div ref={ref} tabIndex={-1}>
-    <MainCard
-      style={modalStyle}
-      sx={{
-        position: 'absolute',
-        width: { xs: 280, lg: 450 },
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)'
-      }}
-      title="Title"
-      content={false}
-      secondary={
-        <IconButton onClick={handleClose} size="large">
-          <CloseIcon fontSize="small" />
-        </IconButton>
-      }
-    >
-      <CardContent>
-        <Typography variant="body1">Laboris non ad et aute sint aliquip mollit voluptate velit dolore magna fugiat ex.</Typography>
-        <Typography variant="body2" sx={{ mt: 2 }}>
-          Commodo amet veniam nostrud mollit quis sint qui nulla elit esse excepteur ullamco esse magna. Nisi duis aute est in mollit irure
-          enim tempor in.
-        </Typography>
-      </CardContent>
-      <Divider />
-      <CardActions>
-        <SimpleModal />
-      </CardActions>
+const ModalDetails = () => {
+  // getModalStyle is not a pure function, we roll the style only on the first render
+  const [modalStyle] = useState(getModalStyle);
+
+  const [open, setOpen] = useState(true);
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const [resizeOpen, setResizeOpen] = useState(false);
+  const handleOpenResizeToggle = (evt) => {
+    setResizeOpen(!resizeOpen);
+  };
+
+  return (
+    <MainCard>
+      <Grid container justifyContent="flex-end">
+        <Button variant="contained" type="button" onClick={handleOpen}>
+          Open Modal
+        </Button>
+        <Modal open={open} onClose={handleClose} aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description">
+          {/* <Body modalStyle={modalStyle} handleClose={handleClose} /> */}
+          <Board />
+          {/* dkdkkd */}
+        </Modal>
+      </Grid>
     </MainCard>
-  </div>
-));
 
-ModalDetails.propTypes = {
-  modalStyle: PropTypes.object,
-  handleClose: PropTypes.func
+    // <DraggableResizeModal title="모달 테스트2" open={resizeOpen} isResize width={450} height={450} onClose={handleOpenResizeToggle}>
+    //   test2
+    // </DraggableResizeModal>
+  );
 };
 
+// ModalDetails.propTypes = {
+//   modalStyle: PropTypes.object,
+//   handleClose: PropTypes.func
+// };
+
 export default ModalDetails;
diff --git a/src/views/biz/parking/Review.jsx b/src/views/biz/parking/Review.jsx
index 8cb929a..f193a8d 100644
--- a/src/views/biz/parking/Review.jsx
+++ b/src/views/biz/parking/Review.jsx
@@ -81,7 +81,8 @@ const ParkingReview = () => {
       description: 'dddddd',
       valueGetter: (params) => `${params.row.msSdate} ~ ${params.row.msEdate}`,
       renderCell: (params) => (
-        <Link underline="hover" href="/parking/details" target="_blank">
+        // <Link underline="hover" href="/parking/details" target="_blank">
+        <Link underline="hover" target="_blank">
           {params.value}
         </Link>
       )
diff --git a/src/views/form/Modal/BasicModal.jsx b/src/views/form/Modal/BasicModal.jsx
new file mode 100644
index 0000000..3cfaf36
--- /dev/null
+++ b/src/views/form/Modal/BasicModal.jsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4
+};
+
+export default function BasicModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <Button onClick={handleOpen}>Open BasicModal</Button>
+      <Modal hideBackdrop open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
+        <Box sx={style}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Text in a modal
+          </Typography>
+          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+          </Typography>
+          <Button onClick={handleClose}>Close Modal</Button>
+        </Box>
+      </Modal>
+    </div>
+  );
+}
diff --git a/src/views/form/Modal/DraggableModal.jsx b/src/views/form/Modal/DraggableModal.jsx
new file mode 100644
index 0000000..3599602
--- /dev/null
+++ b/src/views/form/Modal/DraggableModal.jsx
@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { makeStyles } from '@mui/styles';
+import { Button } from '@mui/material';
+import DraggableResizeModal from './DraggableResizeModal';
+
+const useStyles = makeStyles((theme) => ({
+  modal: {
+    '& > *': {
+      margin: theme.spacing(1)
+    },
+    padding: theme.spacing(2)
+  }
+}));
+
+function DraggableModal() {
+  const classes = useStyles();
+  const [open, setOpen] = useState(false);
+  const [resizeOpen, setResizeOpen] = useState(false);
+
+  const handleOpenToggle = (evt) => {
+    setOpen(!open);
+  };
+
+  const handleOpenResizeToggle = (evt) => {
+    setResizeOpen(!resizeOpen);
+  };
+
+  return (
+    <div className={classes.modal}>
+      <Button variant="outlined" color="primary" onClick={handleOpenToggle}>
+        Open Draggable Modal
+      </Button>
+      <Button variant="outlined" color="primary" onClick={handleOpenResizeToggle}>
+        Open Draggable(+resize) Modal
+      </Button>
+      <DraggableResizeModal title="모달 테스트1" open={open} width={450} height={450} onClose={handleOpenToggle}>
+        test1
+      </DraggableResizeModal>
+      <DraggableResizeModal title="모달 테스트2" open={resizeOpen} isResize width={450} height={450} onClose={handleOpenResizeToggle}>
+        test2
+      </DraggableResizeModal>
+    </div>
+  );
+}
+
+export default DraggableModal;
diff --git a/src/views/form/Modal/DraggableResizeModal.jsx b/src/views/form/Modal/DraggableResizeModal.jsx
new file mode 100644
index 0000000..bf990d0
--- /dev/null
+++ b/src/views/form/Modal/DraggableResizeModal.jsx
@@ -0,0 +1,164 @@
+import React, { useEffect, useState } from 'react';
+import { Paper, makeStyles, withStyles, IconButton, Typography, Divider } from '@mui/material';
+
+import { Close as CloseIcon, Remove as RemoveIcon, WebAsset as WebAssetIcon } from '@mui/icons-material';
+
+import Draggable from 'react-draggable';
+import { ResizableBox } from 'react-resizable';
+import PropTypes from 'prop-types';
+
+const styles = (theme) => ({
+  modal: {
+    margin: 0,
+    padding: theme.spacing(2),
+    cursor: 'move',
+    userSelect: 'none',
+    minWidth: 200
+  },
+  title: {
+    fontWeight: 'bold'
+  },
+  closeButton: {
+    position: 'fixed',
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500]
+  },
+  minimize: {
+    position: 'fixed',
+    right: theme.spacing(6),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500]
+  }
+});
+
+// modal 의 타이틀과 최소화 및 닫기버튼 구성
+const ModalTitle = withStyles(styles)((props) => {
+  const { children, classes, width, isMinimized, onMinimized, onClose, ...other } = props;
+  return (
+    <div className={classes.modal} {...other} style={{ width }}>
+      <Typography variant="h6" className={classes.title}>
+        {children}
+      </Typography>
+      {onClose ? (
+        <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+      {onMinimized ? (
+        <IconButton aria-label="close" className={classes.minimize} onClick={onMinimized}>
+          {isMinimized ? <WebAssetIcon /> : <RemoveIcon />}
+        </IconButton>
+      ) : null}
+    </div>
+  );
+});
+
+const useContentStyles = (width, height) =>
+  makeStyles((theme) => ({
+    resizable: {
+      padding: theme.spacing(2),
+      position: 'relative',
+      '& .react-resizable-handle': {
+        position: 'absolute',
+        userSelect: 'none',
+        width: 20,
+        height: 20,
+        bottom: 0,
+        right: 0,
+        background:
+          "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
+        'background-position': 'bottom right',
+        padding: '0 3px 3px 0',
+        'background-repeat': 'no-repeat',
+        'background-origin': 'content-box',
+        'box-sizing': 'border-box',
+        cursor: 'se-resize'
+      }
+    },
+    content: {
+      padding: theme.spacing(2),
+      maxHeight: height,
+      maxWidth: width
+    }
+  }));
+
+// modal의 content 영역으로 isResize 여부에 따라 다른 컴포넌트를 사용
+const ModalContent = ({ width, height, isResize, children }) => {
+  const classes = useContentStyles(width, height)();
+  return (
+    <>
+      {isResize ? (
+        <ResizableBox height={height} width={width} className={classes.resizable}>
+          {children}
+        </ResizableBox>
+      ) : (
+        <Paper className={classes.content}>{children}</Paper>
+      )}
+    </>
+  );
+};
+
+const PaperComponent = (props) => (
+  <Draggable handle="#draggable-modal-title">
+    <Paper {...props} />
+  </Draggable>
+);
+
+const useStyles = makeStyles((theme) => ({
+  modal: {
+    position: 'fixed',
+    top: '10%',
+    left: '10%',
+    zIndex: 1300,
+    userSelect: 'none'
+  }
+}));
+
+const Modal = ({ title, children, width, height, isResize, onClose }) => {
+  const classes = useStyles();
+  const [isMinimized, setIsMinimized] = useState(false);
+
+  const handleMinimized = (evt) => {
+    setIsMinimized(!isMinimized);
+  };
+
+  useEffect(() => () => {}, []);
+
+  return (
+    <PaperComponent className={classes.modal}>
+      <ModalTitle id="draggable-modal-title" onClose={onClose} width={width} isMinimized={isMinimized} onMinimized={handleMinimized}>
+        {title}
+      </ModalTitle>
+      <Divider />
+      {!isMinimized && (
+        <ModalContent width={width} height={height} isResize={isResize}>
+          {children}
+        </ModalContent>
+      )}
+    </PaperComponent>
+  );
+};
+
+// open 여부에 따라 mount 및 unmount 처리
+const DraggableResizeModal = ({ open, ...other }) => <>{open && <Modal {...other} />}</>;
+
+// property 의 기본값 셋팅
+DraggableResizeModal.defaultProps = {
+  title: '목록',
+  isResize: false,
+  width: 500,
+  height: 500
+};
+
+// property 의 타입 지정
+DraggableResizeModal.propTypes = {
+  title: PropTypes.string,
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func,
+  isResize: PropTypes.bool,
+  width: PropTypes.number,
+  height: PropTypes.number
+};
+
+export default DraggableResizeModal;
diff --git a/src/views/form/Modal/GridModal.jsx b/src/views/form/Modal/GridModal.jsx
new file mode 100644
index 0000000..29f9f6e
--- /dev/null
+++ b/src/views/form/Modal/GridModal.jsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4
+};
+
+export default function GridModal({ children }) {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <Button onClick={handleOpen}>Grid Modal(List)</Button>
+      <Modal hideBackdrop open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
+        <Box sx={style}>
+          <Typography id="modal-modal-title" variant="h2" component="h2">
+            Text in a modal
+          </Typography>
+          {children}
+          <Button onClick={handleClose}>Close Modal</Button>
+        </Box>
+      </Modal>
+    </div>
+  );
+}
+
+GridModal.propTypes = {
+  children: PropTypes.node
+};
diff --git a/src/views/form/Modal/NestedModal.js b/src/views/form/Modal/NestedModal.js
new file mode 100644
index 0000000..fe12a32
--- /dev/null
+++ b/src/views/form/Modal/NestedModal.js
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+import Button from '@mui/material/Button';
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton } from '@mui/material';
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  pt: 2,
+  px: 4,
+  pb: 3
+};
+
+function ChildModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={handleOpen}>Open Child Modal</Button>
+      <Modal hideBackdrop open={open} onClose={handleClose} aria-labelledby="child-modal-title" aria-describedby="child-modal-description">
+        <Box sx={{ ...style, width: 200 }}>
+          <h2 id="child-modal-title">Text in a child modal</h2>
+          <p id="child-modal-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
+          <Button onClick={handleClose}>Close Child Modal</Button>
+        </Box>
+      </Modal>
+    </>
+  );
+}
+
+export default function NestedModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div
+      tabIndex={-1}
+      sx={{
+        position: 'absolute',
+        width: { xs: 280, lg: 450 },
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)'
+      }}
+    >
+      <Button onClick={handleOpen}>Open Nested modal</Button>
+      <Modal
+        hideBackdrop
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="parent-modal-title"
+        aria-describedby="parent-modal-description"
+      >
+        <Box content sx={{ ...style, width: 400 }}>
+          <h2 id="parent-modal-title">Text in a modal</h2>
+          <p id="parent-modal-description">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+          <ChildModal />
+          <Button onClick={handleClose}>Close Modal</Button>
+        </Box>
+      </Modal>
+    </div>
+  );
+}
diff --git a/src/views/form/Modal/SimpleModal.js b/src/views/form/Modal/SimpleModal.js
index dac7c82..18e3844 100644
--- a/src/views/form/Modal/SimpleModal.js
+++ b/src/views/form/Modal/SimpleModal.js
@@ -39,7 +39,7 @@ const Body = React.forwardRef(({ modalStyle, handleClose }, ref) => (
         transform: 'translate(-50%, -50%)'
       }}
       title="Title"
-      content={false}
+      content
       secondary={
         <IconButton onClick={handleClose} size="large">
           <CloseIcon fontSize="small" />
diff --git a/src/views/form/Modal/index.js b/src/views/form/Modal/index.js
index 7030818..028b1af 100644
--- a/src/views/form/Modal/index.js
+++ b/src/views/form/Modal/index.js
@@ -3,13 +3,19 @@ import SimpleModal from './SimpleModal';
 import ServerModal from './ServerModal';
 import MainCard from 'ui-component/cards/MainCard';
 import SecondaryAction from 'ui-component/cards/CardSecondaryAction';
+import NestedModal from './NestedModal';
+import BasicModal from './BasicModal';
+import GridModal from './GridModal';
 
 // ==============================|| MODAL PAGE ||============================== //
 
 const Modal = () => (
-  <MainCard title="Simple Modal" secondary={<SecondaryAction link="https://next.material-ui.com/components/modal/" />}>
-    <ServerModal />
-    <SimpleModal />
+  <MainCard title="Modal Sample" secondary={<SecondaryAction link="https://next.material-ui.com/components/modal/" />}>
+    {/* <ServerModal /> */}
+    {/* <SimpleModal /> */}
+    <BasicModal />
+    <NestedModal />
+    <GridModal />
   </MainCard>
 );
 
