From 3a4caa831ee154e076a798c339741274512ee8e1 Mon Sep 17 00:00:00 2001
From: Lim Jonguk <minuk926@gmail.com>
Date: Fri, 25 Mar 2022 23:23:52 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=95=20custom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../biz/parking/SaveParkingSimsaForm.jsx      |  8 +++++++
 src/views/form/MuiDataGrid.jsx                | 23 +++++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/views/biz/parking/SaveParkingSimsaForm.jsx b/src/views/biz/parking/SaveParkingSimsaForm.jsx
index 0de9391..90bda0f 100644
--- a/src/views/biz/parking/SaveParkingSimsaForm.jsx
+++ b/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}>
diff --git a/src/views/form/MuiDataGrid.jsx b/src/views/form/MuiDataGrid.jsx
index a45f040..12af1f4 100644
--- a/src/views/form/MuiDataGrid.jsx
+++ b/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 { Box } from '@mui/material';
+import { DataGrid, useGridApiRef, gridPageSelector, useGridApiContext, useGridSelector, gridPageCountSelector } from '@mui/x-data-grid';
+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>
   );