refactor: 페이징 표시 정리

src/views/form/CustomPagination.js

@@ -12,33 +12,39 @@ const CustomPagination = ({ totalCount, pageSize }) => {
 
   return (
     <Grid sx={{ padding: '10px', display: 'flex', justifyContent: 'center' }}>
-      <Pagination
-        // sx={(theme) => ({ padding: theme.spacing(1.5, 0) })}
-        color="primary"
-        variant="outlined"
-        shape="rounded"
-        size="small"
-        showFirstButton
-        showLastButton
-        count={pageCount}
-        page={page + 1}
-        boundaryCount={5}
-        siblingCount={2}
-        pagesize={10}
-        onChange={(event, value) => {
-          apiRef.current.setPage(value - 1);
-        }}
-      />
-      <FiberManualRecordIcon
-        fontSize="small"
-        sx={{
-          ml: 2,
-          mr: 0.5,
-          color: '#4caf50'
-        }}
-      />
-      <Typography variant="h5" color="inherit">
-        {page * pageSize + 1} / {totalCount}
+      {pageCount > 1 && (
+        <Pagination
+          // sx={(theme) => ({ padding: theme.spacing(1.5, 0) })}
+          color="primary"
+          variant="outlined"
+          shape="rounded"
+          size="small"
+          showFirstButton
+          showLastButton
+          count={pageCount}
+          page={page + 1}
+          boundaryCount={5}
+          siblingCount={2}
+          pagesize={10}
+          onChange={(event, value) => {
+            apiRef.current.setPage(value - 1);
+          }}
+        />
+      )}
+      {pageCount > 1 && (
+        <FiberManualRecordIcon
+          fontSize="small"
+          sx={{
+            ml: 2,
+            mr: 0.5,
+            color: '#4caf50'
+          }}
+        />
+      )}
+      <Typography variant="span" color="inherit">
+        {/* 전체 {totalCount} 건 현재페이지 {pageCount > 1 ? `${page * pageSize + 1} / ${totalCount} 건` : `${totalCount}`} */}
+        {totalCount > 0 ? `전체 ${totalCount} 건 ` : ``}
+        {pageCount > 1 ? `[ ${page + 1} / ${pageCount} ]` : ``}
       </Typography>
     </Grid>
   );