From 66f19b84641b8c468bceb46522917ef8fc32111a Mon Sep 17 00:00:00 2001
From: sanguu516 <sanguu516@naver.com>
Date: Tue, 2 Apr 2024 10:54:25 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EC=8A=B9=EC=9D=B8=20?=
 =?UTF-8?q?=EC=8B=A0=EC=B2=AD=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/crud/grid/GridDatatable.js     |  2 +-
 .../flight/FlightApprovalsReport.js           | 51 ++++++++++++++-----
 src/components/flight/FlightApprovalsTable.js | 29 ++++++++---
 3 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/src/components/crud/grid/GridDatatable.js b/src/components/crud/grid/GridDatatable.js
index 9aaaf22b..608bebb9 100644
--- a/src/components/crud/grid/GridDatatable.js
+++ b/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}
diff --git a/src/components/flight/FlightApprovalsReport.js b/src/components/flight/FlightApprovalsReport.js
index 5d4f0ae0..e621ed89 100644
--- a/src/components/flight/FlightApprovalsReport.js
+++ b/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' }}>
-          <Input
-            type='text'
-            placeholder={`민원 번호 또는 승인 결과를 입력해 주세요.`}
-            value={filterId}
-            style={{
-              width: '500px',
-              borderRadius: '12px'
-            }}
-            onChange={e => setFilterId(`${e.target.value}`)}
-          >
-            <Search style={{ backgroundColor: 'black' }} />
-          </Input>
+      <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: '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
diff --git a/src/components/flight/FlightApprovalsTable.js b/src/components/flight/FlightApprovalsTable.js
index ade5dfa8..775d2a95 100644
--- a/src/components/flight/FlightApprovalsTable.js
+++ b/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)': {
-          // borderBottomStyle: 'solid',
-          // borderWidth: '1px',
-          // borderColor: '#ff0000'
-        }
+        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>