feat: 페이징 custom

src/views/biz/parking/SaveParkingSimsaForm.jsx

@@ -135,6 +135,14 @@ const SaveParkingSimsaForm = ({ handleModalSave }) => {
               }}
             />
           </LocalizationProvider>
+
+          {/* <TextField */}
+          {/*  type="date" */}
+          {/*  value={msCdate} */}
+          {/*  defaultValue={msCdate} */}
+          {/*  InputLabelProps={{ shrink: true }} */}
+          {/*  onChange={(e) => setMsCdate(format(e.target.value), 'yyyy-MM-dd')} */}
+          {/* /> */}
         </Grid>
         <Grid item xs={12} sm={4}>
           <LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>

src/views/form/MuiDataGrid.jsx

@@ -2,11 +2,27 @@ import PropTypes from 'prop-types';
 
 // material-ui
 // import type { GridColumns } from '@mui/x-data-grid/colDef';
-import { DataGrid, koKR } from '@mui/x-data-grid';
+import { DataGrid, useGridApiRef, gridPageSelector, useGridApiContext, useGridSelector, gridPageCountSelector } from '@mui/x-data-grid';
-import { Box } from '@mui/material';
+import { Box, Pagination } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import dataGridKoKR from './defaultDataGridLocale';
 
+const CustomPagination = () => {
+  const apiRef = useGridApiContext();
+  const page = useGridSelector(apiRef, gridPageSelector);
+  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
+
+  return (
+    <Pagination
+      sx={(theme) => ({ padding: theme.spacing(1.5, 0) })}
+      color="primary"
+      count={pageCount}
+      page={page + 1}
+      onChange={(event, value) => apiRef.current.setPage(value - 1)}
+    />
+  );
+};
+
 // project imports
 const MuiDataGrid = ({
   isCheckbox = false,
@@ -20,6 +36,7 @@ const MuiDataGrid = ({
 }) => {
   // const { columns, rowsState, totalCount, setRowsState } = props;
   const theme = useTheme();
+  const apiRef = useGridApiRef();
 
   return (
     <Box
@@ -42,6 +59,7 @@ const MuiDataGrid = ({
       }}
     >
       <DataGrid
+        apiRef={apiRef}
         showCellRightBorder
         showColumnRightBorder
         hideFooterPagination={isHidePagination}
@@ -61,6 +79,7 @@ const MuiDataGrid = ({
         rowsPerPageOptions={[10, 50, 100]}
         onCellClick={handleCellClick}
         onSelectionModelChange={handleSelection}
+        components={{ CustomPagination }}
       />
     </Box>
   );