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,13 +159,65 @@ 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>
+            <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}
@@ -169,9 +225,33 @@ const Dashboard = () => {
                   setRowsState={() => {}}
                   gridHeight={300}
                 />
+              </CardContent>
+            </Card>
           </Grid>
           <Grid item xs={4}>
-            <Typography variant="subtitle1">거주자심사자현황 (심사종료일 : {msEdate2})</Typography>
+            <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}
@@ -179,9 +259,34 @@ const Dashboard = () => {
                   setRowsState={() => {}}
                   gridHeight={300}
                 />
+              </CardContent>
+            </Card>
           </Grid>
           <Grid item xs={4}>
-            <Typography variant="subtitle1">장애인심사자현황 (심사종료일 : {msEdate3})</Typography>
+            <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}
@@ -189,6 +294,8 @@ const Dashboard = () => {
                   setRowsState={() => {}}
                   gridHeight={300}
                 />
+              </CardContent>
+            </Card>
           </Grid>
         </Grid>
       </Grid>