비행 승인 신청 페이지

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'>
-        <InputGroup style={{ display: 'flex', alineItems: 'center' }}>
+      <div
+        className='layer-search layer-search-form'
+        style={{ width: '480px' }}
+      >
+        <InputGroup
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alineItems: 'center',
+            borderRadius: '12px'
+          }}
+        >
+          <div style={{ position: 'relative', display: 'inline-block' }}>
             <Input
               type='text'
               placeholder={`민원 번호 또는 승인 결과를 입력해 주세요.`}
               value={filterId}
               style={{
-              width: '500px',
-              borderRadius: '12px'
+                width: '480px',
+                borderRadius: '12px',
+                paddingRight: '30px' // Search 아이콘을 위한 공간 확보
               }}
               onChange={e => setFilterId(`${e.target.value}`)}
-          >
-            <Search style={{ backgroundColor: 'black' }} />
-          </Input>
+            />
+            <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',
-        '&:not(:last-of-type)': {
+        minHeight: '70px'
+        // '&:not(:last-of-type)': {
         //   borderBottomStyle: 'solid',
         //   borderWidth: '1px',
         //   borderColor: '#ff0000'
-        }
+        // }
       }
     },
     header: {
@@ -226,6 +238,7 @@ export default function FlightApprovalsTable(props) {
                   // handlerPageChange={props.handlerPageChange}
                   pagination={true}
                   customStyles={customStyles}
+                  conditionalRowStyles={conditionalRowStyles}
                 />
               </div>
             </Card>