비행 승인 신청 페이지

src/components/crud/grid/GridDatatable.js

@@ -31,7 +31,7 @@ export const GridDatabase = props => {
           columns={props.columns}
           responsive={true}
           sortIcon={<ChevronDown />}
-          className='react-dataTable pal-dateTable'
+          className='react-dataTable pal-dateTable '
           paginationDefaultPage={props.page || 1}
           // defaultSortField='invoiceId'
           // paginationDefaultPage={currentPage}

src/components/flight/FlightApprovalsReport.js

@@ -12,20 +12,43 @@ export default function FlightApprovalsReport(props) {
       <div className='layer-ti'>
         <h4>비행승인 신청 결과 현황</h4>
       </div>
-      <div className='layer-search layer-search-form'>
+      <div
-        <InputGroup style={{ display: 'flex', alineItems: 'center' }}>
+        className='layer-search layer-search-form'
-          <Input
+        style={{ width: '480px' }}
-            type='text'
+      >
-            placeholder={`민원 번호 또는 승인 결과를 입력해 주세요.`}
+        <InputGroup
-            value={filterId}
+          style={{
-            style={{
+            display: 'flex',
-              width: '500px',
+            flexDirection: 'row',
-              borderRadius: '12px'
+            alineItems: 'center',
-            }}
+            borderRadius: '12px'
-            onChange={e => setFilterId(`${e.target.value}`)}
+          }}
-          >
+        >
-            <Search style={{ backgroundColor: 'black' }} />
+          <div style={{ position: 'relative', display: 'inline-block' }}>
-          </Input>
+            <Input
+              type='text'
+              placeholder={`민원 번호 또는 승인 결과를 입력해 주세요.`}
+              value={filterId}
+              style={{
+                width: '480px',
+                borderRadius: '12px',
+                paddingRight: '30px' // Search 아이콘을 위한 공간 확보
+              }}
+              onChange={e => setFilterId(`${e.target.value}`)}
+            />
+            <Search
+              style={{
+                position: 'absolute',
+                right: '5px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                cursor: 'pointer',
+                color: '#6c757d'
+              }}
+              onClick={() => props.handlerSearch(filterId)}
+              size={21}
+            />
+          </div>
         </InputGroup>
         <div>
           {/* <Button

src/components/flight/FlightApprovalsTable.js

@@ -66,13 +66,25 @@ export default function FlightApprovalsTable(props) {
     }
   };
 
+  const conditionalRowStyles = [
+    {
+      when: row => row.approval === '미승인',
+      classNames: ['flight-not-approval-row']
+    },
+    {
+      when: row => row.approval === '승인',
+      classNames: ['flight-approval-row']
+    }
+    // {
+    //   when: row => row.approval === '비대상',
+    //   classNames: ['flight-noapproval-row']
+    // }
+  ];
   const columns = [
     {
       name: '민원번호',
-
       selector: row => row.planSno,
       center: true,
-
       cell: row => {
         return row.planSno;
       }
@@ -154,12 +166,12 @@ export default function FlightApprovalsTable(props) {
   const customStyles = {
     rows: {
       style: {
-        minHeight: '70px',
+        minHeight: '70px'
-        '&:not(:last-of-type)': {
+        // '&:not(:last-of-type)': {
-          // borderBottomStyle: 'solid',
+        //   borderBottomStyle: 'solid',
-          // borderWidth: '1px',
+        //   borderWidth: '1px',
-          // borderColor: '#ff0000'
+        //   borderColor: '#ff0000'
-        }
+        // }
       }
     },
     header: {
@@ -226,6 +238,7 @@ export default function FlightApprovalsTable(props) {
                   // handlerPageChange={props.handlerPageChange}
                   pagination={true}
                   customStyles={customStyles}
+                  conditionalRowStyles={conditionalRowStyles}
                 />
               </div>
             </Card>