대시보드(드론 별 비행운항 목록) 페이징 처리

src/components/crud/grid/GridDatatable.js

@@ -10,6 +10,7 @@ import {
 import { selectableRowsComponent } from './selectableRowsComponent';
 
 export const GridDatabase = props => {
+  console.log(props.rowsPerPageText);
   return props[`${props.handlerPageChange ? 'total' : 'count'}`] <= 0 ? (
     <div className='d-flex justify-content-center align-items-center h-100'>
       <p>표시할 데이터가 없습니다.</p>
@@ -39,7 +40,9 @@ export const GridDatabase = props => {
           }
           onChangePage={props.pagination ? props.handlerPageChange : null}
           paginationComponentOptions={{
-            noRowsPerPage: props.handlerPageChange ? true : false
+            noRowsPerPage: props.handlerPageChange ? true : false,
+            rowsPerPageText:
+              props.rowsPerPageText === 'noText' ? '' : 'Rows per page:'
           }}
           selectableRows={props.selectableRows}
           selectableRowsComponent={props.selectableRowsComponent}

src/components/dashboard/DroneFlightSchedule.js

@@ -120,47 +120,57 @@ export default function DroneFlightSchedule({
   const { dronOperationList } = useSelector(state => state.mainDashState);
 
   return (
-    <Card>
-      <CardHeader className=''>
-        <div className='w-100 d-flex justify-content-between'>
-          <CardTitle tag='h4'>드론 별 비행운항 목록</CardTitle>
-          <div className='d-flex align-items-center'>
-            {user?.cptAuthCode === 'KAC' ||
-              (user?.authId === 'SUPER' && (
-                <Input
-                  id='groupSelect'
-                  type='select'
-                  size='sm'
-                  style={{ minWidth: '120px' }}
-                  s
-                  onChange={e => {
-                    const { value } = e.target;
-                    handlerDronOperationChange(value);
-                  }}
-                >
-                  <option value='all'>그룹선택</option>
-                  {competentAgency?.map(i => (
-                    <option value={i.value}>{i.text}</option>
+    <div className='invoice-list-wrapper'>
+      <Card>
+        <div className='invoice-list-dataTable'>
+          <CardHeader className=''>
+            <div className='w-100 d-flex justify-content-between'>
+              <CardTitle tag='h4'>드론 별 비행운항 목록</CardTitle>
+              <div className='d-flex align-items-center'>
+                {user?.cptAuthCode === 'KAC' ||
+                  (user?.authId === 'SUPER' && (
+                    <Input
+                      id='groupSelect'
+                      type='select'
+                      size='sm'
+                      style={{ minWidth: '120px' }}
+                      s
+                      onChange={e => {
+                        const { value } = e.target;
+                        handlerDronOperationChange(value);
+                      }}
+                    >
+                      <option value='all'>그룹선택</option>
+                      {competentAgency?.map(i => (
+                        <option value={i.value}>{i.text}</option>
+                      ))}
+                    </Input>
                   ))}
-                </Input>
-              ))}
 
-            <button
-              onClick={() => handlerMovePage('/basis/flight/schedule/index')}
-              style={{ marginLeft: '8px' }}
-            >
-              <Plus />
-            </button>
-          </div>
+                <button
+                  onClick={() =>
+                    handlerMovePage('/basis/flight/schedule/index')
+                  }
+                  style={{ marginLeft: '8px' }}
+                >
+                  <Plus />
+                </button>
+              </div>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <GridDatabase
+              data={dronOperationList || []}
+              paginationPerPage={8}
+              paginationRowsPerPageOptions={[]}
+              rowsPerPageText={'noText'}
+              total={dronOperationList?.length || 0}
+              columns={columns}
+              pagination
+            />
+          </CardBody>
         </div>
-      </CardHeader>
-      <CardBody>
-        <GridDatabase
-          data={dronOperationList || []}
-          count={dronOperationList?.length || 0}
-          columns={columns}
-        />
-      </CardBody>
-    </Card>
+      </Card>
+    </div>
   );
 }