modal 반영 1차

src/views/biz/parking/Review.jsx

@@ -6,7 +6,7 @@ import getYear from 'date-fns/getYear';
 
 // material-ui
 import { GridActionsCellItem } from '@mui/x-data-grid';
-import { Divider, Grid, InputAdornment, Link, MenuItem, OutlinedInput, Select } from '@mui/material';
+import { Button, Divider, Fade, Grid, InputAdornment, Link, MenuItem, OutlinedInput, Select } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import MuiTooltip from '@mui/material/Tooltip';
 
@@ -22,9 +22,31 @@ import opstBizService from 'apis/OpstBizService';
 import { useTheme } from '@mui/material/styles';
 import xitCmm from 'commons/XitCmm';
 import { SIMSA_DETAILS_LIST_URL } from '../../../commons/ApiUrl';
+import ModalDetails from './ModalDetails';
+import MainRoutes from '../../../routes/MainRoutes';
+import { useNavigate } from 'react-router-dom';
+import Modal from '@mui/material/Modal';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+import Board from '../board/Board';
+import GridModal from '../../form/Modal/GridModal';
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 900,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4
+};
 
 const ParkingReview = () => {
   const isInit = useRef(true);
+  const navigate = useNavigate();
 
   const theme = useTheme();
   const year = getYear(new Date());
@@ -78,13 +100,21 @@ const ParkingReview = () => {
       headerName: '심사기간',
       field: 'msDate',
       minWidth: 180,
-      description: 'dddddd',
+      description: '심사기간',
       valueGetter: (params) => `${params.row.msSdate} ~ ${params.row.msEdate}`,
       renderCell: (params) => (
-        // <Link underline="hover" href="/parking/details" target="_blank">
+        // <Link underline="hover" href="/parking/details" rel="noopener">
-        <Link underline="hover" target="_blank">
+        <Link
+          underline="hover"
+          onClick={() => navigate(`/parking/details?msChasu=${params.msChasu}&msSdate=${params.msSdate}&msEdate=${params.msEdate}`)}
+          data-target="modalDetails"
+          rel="noopener"
+        >
+          {/* <Link underline="hover" href="#" onClick={() => <ModalDetails />}> */}
+          {/* <Link underline="hover" onClick={() => <ModalDetails />}> */}
           {params.value}
         </Link>
+        // <ModalDetails />
       )
     },
     {
@@ -137,8 +167,26 @@ const ParkingReview = () => {
     search();
   }, [rowsState.page, rowsState.pageSize, selectedYear, searchTxt]);
 
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
   return (
     <MainCard>
+      {/*
+
+      <Button onClick={handleOpen}>open</Button>
+      <Modal 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>
+
+*/}
       <Grid container spacing={2} alignItems="center">
         <Grid item xs={12} lg={6}>
           <Grid container spacing={1}>