fix: dashboard fix

src/views/dashboard/index.js

@@ -1,17 +1,21 @@
 import { useEffect, useState, useCallback } from 'react';
 
 // material-ui
-import { Grid, Link, Typography } from '@mui/material';
+import { Card, CardContent, Grid, Link, Typography } from '@mui/material';
+import PlaylistAddCheckIcon from '@mui/icons-material/PlaylistAddCheck';
 
 // project imports
 import { gridSpacing } from 'store/constant';
 import { findDashboard } from 'apis/judge';
 import MuiDataGrid from 'views/cmm/mui-grid/MuiDataGrid';
 import { IconFileText } from '@tabler/icons';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
 
 // ==============================|| DEFAULT DASHBOARD ||============================== //
 
 const Dashboard = () => {
+  const theme = useTheme();
   const [totalCount, setTotalCount] = useState(0);
   const [rowsState, setRowsState] = useState({
     page: 0,
@@ -105,14 +109,14 @@ const Dashboard = () => {
       headerAlign: 'center',
       field: 'name',
       align: 'center',
-      width: 100
+      width: 95
     },
     {
       headerName: '완료 / 전체',
       headerAlign: 'center',
       field: 'judge',
       align: 'center',
-      width: 100,
+      width: 95,
       valueGetter: (params) => `${params.row.jcnt} / ${params.row.tcnt}`
     }
   ];
@@ -155,40 +159,143 @@ const Dashboard = () => {
   return (
     <Grid container spacing={gridSpacing}>
       <Grid item xs={12}>
-        <Typography variant="subtitle1">공지사항</Typography>
-        <MuiDataGrid columns={columns} rowsState={rowsState} totalCount={totalCount || 0} setRowsState={setRowsState} gridHeight={250} />
+        <Card
+          sx={{
+            background: theme.palette.mode === 'dark' ? theme.palette.dark[900] : '#fff',
+            [theme.breakpoints.down('sm')]: {
+              border: 0,
+              boxShadow: 'none'
+            }
+          }}
+        >
+          <CardContent>
+            <Box
+              sx={{
+                display: 'flex',
+                [theme.breakpoints.down('md')]: {
+                  width: 'auto'
+                }
+              }}
+            >
+              <PlaylistAddCheckIcon />
+              <Typography variant="subtitle1" ml={1}>
+                공지사항
+              </Typography>
+            </Box>
+            <MuiDataGrid
+              columns={columns}
+              rowsState={rowsState}
+              totalCount={totalCount || 0}
+              setRowsState={setRowsState}
+              gridHeight={255}
+            />
+          </CardContent>
+        </Card>
       </Grid>
       <Grid item xs={12}>
-        <Grid container spacing={gridSpacing}>
+        <Grid container spacing={1}>
           <Grid item xs={4}>
-            <Typography variant="subtitle1">주정차심사자현황 (심사종료일 : {msEdate1})</Typography>
-            <MuiDataGrid
-              columns={judgeColumns}
-              rowsState={rowsState1}
-              totalCount={totalCount1 || 0}
-              setRowsState={() => {}}
-              gridHeight={300}
-            />
+            <Card
+              sx={{
+                background: theme.palette.mode === 'dark' ? theme.palette.dark[900] : '#fff',
+                [theme.breakpoints.down('sm')]: {
+                  border: 0,
+                  boxShadow: 'none'
+                }
+              }}
+            >
+              <CardContent>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    [theme.breakpoints.down('md')]: {
+                      width: 'auto'
+                    }
+                  }}
+                >
+                  <PlaylistAddCheckIcon />
+                  <Typography variant="subtitle1" ml={1}>
+                    주정차 심사 현황 (종료일 : {msEdate1})
+                  </Typography>
+                </Box>
+                <MuiDataGrid
+                  columns={judgeColumns}
+                  rowsState={rowsState1}
+                  totalCount={totalCount1 || 0}
+                  setRowsState={() => {}}
+                  gridHeight={300}
+                />
+              </CardContent>
+            </Card>
           </Grid>
           <Grid item xs={4}>
-            <Typography variant="subtitle1">거주자심사자현황 (심사종료일 : {msEdate2})</Typography>
-            <MuiDataGrid
-              columns={judgeColumns}
-              rowsState={rowsState2}
-              totalCount={totalCount2 || 0}
-              setRowsState={() => {}}
-              gridHeight={300}
-            />
+            <Card
+              sx={{
+                background: theme.palette.mode === 'dark' ? theme.palette.dark[900] : '#fff',
+                [theme.breakpoints.down('sm')]: {
+                  border: 0,
+                  boxShadow: 'none'
+                }
+              }}
+            >
+              <CardContent>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    [theme.breakpoints.down('md')]: {
+                      width: 'auto'
+                    }
+                  }}
+                >
+                  <PlaylistAddCheckIcon />
+                  <Typography variant="subtitle1" ml={1}>
+                    거주자 심사 현황 (종료일 : {msEdate2})
+                  </Typography>
+                </Box>
+                <MuiDataGrid
+                  columns={judgeColumns}
+                  rowsState={rowsState2}
+                  totalCount={totalCount2 || 0}
+                  setRowsState={() => {}}
+                  gridHeight={300}
+                />
+              </CardContent>
+            </Card>
           </Grid>
           <Grid item xs={4}>
-            <Typography variant="subtitle1">장애인심사자현황 (심사종료일 : {msEdate3})</Typography>
-            <MuiDataGrid
-              columns={judgeColumns}
-              rowsState={rowsState3}
-              totalCount={totalCount3 || 0}
-              setRowsState={() => {}}
-              gridHeight={300}
-            />
+            <Card
+              sx={{
+                background: theme.palette.mode === 'dark' ? theme.palette.dark[900] : '#fff',
+                [theme.breakpoints.down('sm')]: {
+                  border: 0,
+                  boxShadow: 'none'
+                }
+              }}
+            >
+              <CardContent>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    [theme.breakpoints.down('md')]: {
+                      width: 'auto'
+                    }
+                  }}
+                >
+                  <PlaylistAddCheckIcon />
+                  <Typography variant="subtitle1" ml={1}>
+                    {' '}
+                    장애인 심사 현황 (종료일 : {msEdate3})
+                  </Typography>
+                </Box>
+                <MuiDataGrid
+                  columns={judgeColumns}
+                  rowsState={rowsState3}
+                  totalCount={totalCount3 || 0}
+                  setRowsState={() => {}}
+                  gridHeight={300}
+                />
+              </CardContent>
+            </Card>
           </Grid>
         </Grid>
       </Grid>