fix: selected row 상태 표시 추가

src/views/form/CustomPagination.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import { Typography } from '@mui/material';
 
-const CustomPagination = ({ totalCount }) => {
+const CustomPagination = ({ totalCount, numSelected }) => {
   const apiRef = useGridApiContext();
   const page = useGridSelector(apiRef, gridPageSelector);
   const pageCount = useGridSelector(apiRef, gridPageCountSelector);
@@ -30,6 +30,11 @@ const CustomPagination = ({ totalCount }) => {
           }}
         />
       )}
+      {numSelected > 0 && (
+        <Typography color="inherit" variant="subtitle1">
+          {numSelected}행 선택
+        </Typography>
+      )}
       {pageCount > 1 && (
         <FiberManualRecordIcon
           fontSize="small"
@@ -50,7 +55,7 @@ const CustomPagination = ({ totalCount }) => {
 };
 
 CustomPagination.propTypes = {
-  totalCount: PropTypes.number.isRequired
+  totalCount: PropTypes.number.isRequired,
-  // pageSize: PropTypes.number.isRequired
+  numSelected: PropTypes.number
 };
 export default CustomPagination;

src/views/form/MuiDataGrid.jsx

@@ -9,6 +9,8 @@ import Box from '@mui/material/Box';
 import { useTheme } from '@mui/styles';
 import dataGridKoKR from './defaultDataGridLocale';
 import CustomPagination from './CustomPagination';
+import { IconButton, Toolbar, Tooltip, Typography } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 // TODO : grid style
 /*
@@ -91,9 +93,27 @@ const styles = (theme) => ({
 });
 */
 
+const EnhancedTableToolbar = ({ children }) => (
+  <Toolbar
+    sx={{
+      p: 0,
+      pl: 1,
+      pr: 1
+    }}
+  >
+    {children}
+  </Toolbar>
+);
+
+EnhancedTableToolbar.propTypes = {
+  children: PropTypes.node
+};
+
 // project imports
 const MuiDataGrid = ({
   // apiRef = () => {},
+  isToolbar = false,
+  children = <div />,
   isCheckbox = false,
   // isDisableSelection = true,
   columns,
@@ -107,6 +127,7 @@ const MuiDataGrid = ({
 }) => {
   const theme = useTheme();
   const { pageSize } = rowsState;
+  const numSelected = selectionModel.length;
 
   const getRowSpacing = useCallback(
     (params) => ({
@@ -141,6 +162,7 @@ const MuiDataGrid = ({
         }
       }}
     >
+      {isToolbar && <EnhancedTableToolbar>{children}</EnhancedTableToolbar>}
       <DataGrid
         // apiRef={apiRef}
         // showCellRightBorder
@@ -166,7 +188,7 @@ const MuiDataGrid = ({
           Footer: CustomPagination
         }}
         componentsProps={{
-          footer: { totalCount, pageSize }
+          footer: { totalCount, pageSize, numSelected }
         }}
         hideFooterRowCount={false}
         hideFooterSelectedRowCount={false}
@@ -201,6 +223,8 @@ const MuiDataGrid = ({
 
 MuiDataGrid.propTypes = {
   // apiRef: PropTypes.func,
+  isToolbar: PropTypes.bool.isRequired,
+  children: PropTypes.node,
   isCheckbox: PropTypes.bool,
   // isDisableSelection: PropTypes.bool,
   columns: PropTypes.array.isRequired,