modal 반영

src/commons/ApiUrl.js

@@ -4,3 +4,4 @@ export const LOGIN_URL = '/api/v1/ctgy/account/login';
 export const CMM_CODE_LIST_URL = '/api/v1/biz/cmm/combo';
 export const BOARD_LIST_URL = '/api/v1/ctgy/board';
 export const SIMSA_LIST_URL = '/api/v1/ctgy/simsa/review';
+export const SIMSA_DETAILS_LIST_URL = '/api/v1/ctgy/simsa/details';

src/routes/MainRoutes.js

@@ -4,6 +4,7 @@ import { lazy } from 'react';
 import MainLayout from 'layout/MainLayout';
 import Loadable from 'ui-component/Loadable';
 import AuthGuard from 'utils/route-guard/AuthGuard';
+import ModalDetails from '../views/biz/parking/ModalDetails';
 
 // sample page routing
 const SamplePage = Loadable(lazy(() => import('views/sample-page')));
@@ -14,6 +15,7 @@ const DashboardAnalytics = Loadable(lazy(() => import('views/dashboard/Analytics
 const PublicBoard = Loadable(lazy(() => import('views/biz/board/PublicBoard')));
 const Board = Loadable(lazy(() => import('views/biz/board/Board')));
 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')));
 
 // ==============================|| MAIN ROUTING ||============================== //
@@ -97,6 +99,11 @@ const MainRoutes = {
     {
       path: '/sample-page',
       element: <SamplePage />
+    },
+
+    {
+      path: '/parking/details',
+      element: <ParkingDetails />
     }
   ]
 };

src/views/biz/board/Board.jsx

@@ -23,7 +23,7 @@ import { IconSearch } from '@tabler/icons';
 import MainCard from 'ui-component/cards/MainCard';
 
 // project imports
-import MuiGridList from 'ui-component/MuiGridList';
+import MuiGridList from 'views/form/MuiGridList';
 import opstBizService from 'apis/OpstBizService';
 
 const Board = () => {

src/views/biz/board/PublicBoard.jsx

@@ -11,7 +11,7 @@ import LockTwoToneIcon from '@mui/icons-material/LockTwoTone';
 import MainCard from 'ui-component/cards/MainCard';
 
 // project imports
-import MuiGridList from 'ui-component/MuiGridList';
+import MuiGridList from 'views/form/MuiGridList';
 import InputLabel from 'ui-component/extended/Form/InputLabel';
 import opstBizService from '../../../apis/OpstBizService';
 

src/views/biz/parking/ModalDetails.jsx

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+
+// material-ui
+import { Button, CardContent, CardActions, Divider, Grid, IconButton, Modal, Typography } from '@mui/material';
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard';
+
+// assets
+import CloseIcon from '@mui/icons-material/Close';
+import SimpleModal from 'views/form/Modal/SimpleModal';
+
+// generate random
+function rand() {
+  return Math.round(Math.random() * 20) - 10;
+}
+
+// modal position
+function getModalStyle() {
+  const top = 50 + rand();
+  const left = 50 + rand();
+
+  return {
+    top: `${top}%`,
+    left: `${left}%`,
+    transform: `translate(-${top}%, -${left}%)`
+  };
+}
+
+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>
+    </MainCard>
+  </div>
+));
+
+ModalDetails.propTypes = {
+  modalStyle: PropTypes.object,
+  handleClose: PropTypes.func
+};
+
+export default ModalDetails;

src/views/biz/parking/Regist.jsx

@@ -26,7 +26,7 @@ import { IconSearch } from '@tabler/icons';
 import MainCard from 'ui-component/cards/MainCard';
 
 // project imports
-import MuiGridList from 'ui-component/MuiGridList';
+import MuiGridList from 'views/form/MuiGridList';
 import { useTheme } from '@mui/material/styles';
 import AnimateButton from '../../../ui-component/extended/AnimateButton';
 import InputLabel from '../../../ui-component/extended/Form/InputLabel';

src/views/biz/parking/Review.jsx

@@ -17,10 +17,11 @@ import { IconSearch } from '@tabler/icons';
 import MainCard from 'ui-component/cards/MainCard';
 
 // project imports
-import MuiGridList from 'ui-component/MuiGridList';
+import MuiGridList from 'views/form/MuiGridList';
 import opstBizService from 'apis/OpstBizService';
 import { useTheme } from '@mui/material/styles';
 import xitCmm from 'commons/XitCmm';
+import { SIMSA_DETAILS_LIST_URL } from '../../../commons/ApiUrl';
 
 const ParkingReview = () => {
   const isInit = useRef(true);
@@ -80,7 +81,7 @@ const ParkingReview = () => {
       description: 'dddddd',
       valueGetter: (params) => `${params.row.msSdate} ~ ${params.row.msEdate}`,
       renderCell: (params) => (
-        <Link underline="hover" href="/board" target="_blank">
+        <Link underline="hover" href="/parking/details" target="_blank">
           {params.value}
         </Link>
       )

src/views/form/Modal/ServerModal.js

@@ -0,0 +1,79 @@
+import React from 'react';
+
+// material-ui
+import { styled } from '@mui/material/styles';
+import { Button, CardContent, CardActions, Divider, Grid, IconButton, Modal, Typography } from '@mui/material';
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard';
+
+// assets
+import CloseIcon from '@mui/icons-material/Close';
+
+const ModalWrapper = styled('div')({
+  marginBottom: 16,
+  height: 500,
+  flexGrow: 1,
+  minWidth: 300,
+  zIndex: -1,
+  transform: 'translateZ(0)',
+  '@media all and (-ms-high-contrast: none)': {
+    display: 'none'
+  }
+});
+
+// ==============================|| SERVER MODAL ||============================== //
+
+export default function ServerModal() {
+  const rootRef = React.useRef(null);
+
+  return (
+    <ModalWrapper ref={rootRef}>
+      <Modal
+        disablePortal
+        disableEnforceFocus
+        disableAutoFocus
+        open
+        aria-labelledby="server-modal-title"
+        aria-describedby="server-modal-description"
+        sx={{
+          display: 'flex',
+          p: 1,
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+        container={() => rootRef.current}
+      >
+        <MainCard
+          sx={{
+            width: 450,
+            zIndex: 1
+          }}
+          title="Server Side Modal"
+          content={false}
+          secondary={
+            <IconButton 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>
+            <Grid container justifyContent="flex-end">
+              <Button variant="contained" type="button">
+                Open Modal
+              </Button>
+            </Grid>
+          </CardActions>
+        </MainCard>
+      </Modal>
+    </ModalWrapper>
+  );
+}

src/views/form/Modal/SimpleModal.js

@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// material-ui
+import { Button, CardContent, CardActions, Divider, Grid, IconButton, Modal, Typography } from '@mui/material';
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard';
+
+// assets
+import CloseIcon from '@mui/icons-material/Close';
+
+// generate random
+function rand() {
+  return Math.round(Math.random() * 20) - 10;
+}
+
+// modal position
+function getModalStyle() {
+  const top = 50 + rand();
+  const left = 50 + rand();
+
+  return {
+    top: `${top}%`,
+    left: `${left}%`,
+    transform: `translate(-${top}%, -${left}%)`
+  };
+}
+
+const Body = React.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>
+    </MainCard>
+  </div>
+));
+
+Body.propTypes = {
+  modalStyle: PropTypes.object,
+  handleClose: PropTypes.func
+};
+
+// ==============================|| SIMPLE MODAL ||============================== //
+
+export default function SimpleModal() {
+  // getModalStyle is not a pure function, we roll the style only on the first render
+  const [modalStyle] = React.useState(getModalStyle);
+
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <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} />
+      </Modal>
+    </Grid>
+  );
+}

src/views/form/Modal/index.js

@@ -0,0 +1,16 @@
+// project imports
+import SimpleModal from './SimpleModal';
+import ServerModal from './ServerModal';
+import MainCard from 'ui-component/cards/MainCard';
+import SecondaryAction from 'ui-component/cards/CardSecondaryAction';
+
+// ==============================|| MODAL PAGE ||============================== //
+
+const Modal = () => (
+  <MainCard title="Simple Modal" secondary={<SecondaryAction link="https://next.material-ui.com/components/modal/" />}>
+    <ServerModal />
+    <SimpleModal />
+  </MainCard>
+);
+
+export default Modal;