데이터 하드코딩 table css 추가

src/assets/css/custom.css

@@ -1175,4 +1175,5 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .invoice-list-dataTable.flight-approval .react-dataTable .rdt_TableHead .rdt_TableHeadRow .rdt_TableCol{padding:0;text-align:center;}
 .invoice-list-dataTable.flight-approval .react-dataTable .rdt_TableBody .rdt_TableRow .rdt_TableCell{padding:0;min-height:60px;}
 .invoice-list-dataTable.flight-approval .react-dataTable .rdt_TableBody .rdt_TableRow .rdt_TableCell:hover{cursor: pointer;}
-.invoice-list-dataTable.flight-approval .pal-dateTable a{color:rgba(0,0,0,0.87);}
+.invoice-list-dataTable.flight-approval .pal-dateTable a{color:rgba(0,0,0,0.87);}
+#expandableRows {order: 1!important;}

src/components/crud/grid/GridDatatable.js

@@ -1,18 +1,19 @@
 import DataTable from 'react-data-table-component';
-import {
-  MoreVertical,
-  Edit,
-  Trash,
-  Search,
-  File,
-  ChevronDown
-} from 'react-feather';
-import { selectableRowsComponent } from './selectableRowsComponent';
+import { ChevronDown } from 'react-feather';
+import { useEffect } from 'react';
 import { EMPTY_MESSAGE } from '@src/configs/msgConst';
 
 // DataTable lib 참고
 // https://react-data-table-component.netlify.app/?path=/docs/api-props--page
 export const GridDatabase = props => {
+  useEffect(() => {
+    const el = document.querySelectorAll('.sc-AxhCb.sc-AxmLO.XMhZc');
+    for (let i = 0; i < el.length; i++) {
+      console.log(el);
+      el[i].id = 'expandableRows';
+    }
+  }, []);
+
   return props[`${props.handlerPageChange ? 'total' : 'count'}`] <= 0 ? (
     <div className='d-flex justify-content-center align-items-center h-100'>
       <p>{EMPTY_MESSAGE}</p>

src/components/flight/FlightApprovalsTable.js

@@ -11,11 +11,14 @@ export default function FlightApprovalsTable(props) {
 
   const [results, setSearchResults] = useState([]);
 
+  const { laancAprvList } = useSelector(state => state.laancState);
+
   useEffect(() => {
     if (props.data) {
       setSearchResults(props.data);
     }
   }, []);
+  console.log('>>', laancAprvList);
 
   useEffect(() => {
     if (props.filter) {
@@ -76,20 +79,20 @@ export default function FlightApprovalsTable(props) {
       classNames: ['flight-approval-row']
     },
     {
-      when: row => row.planSno === props.selected,
-      classNames: ['flight-approval-row-click']
+      when: row => row.planSno === props.selected
+      // classNames: ['flight-approval-row-click']
     }
   ];
 
   const columns = [
     {
       name: '신청번호',
-      selector: row => row.planSno,
+      selector: row => row.applyNo,
       center: true,
 
       minWidth: '10px',
       cell: row => {
-        return row.planSno;
+        return row.applyNo;
       }
     },
     {
@@ -103,7 +106,6 @@ export default function FlightApprovalsTable(props) {
         return dayjs(row.cntrlStDt).format('YYYY-MM-DD');
       }
     },
-
     {
       name: '자세히 보기',
       // selector: row => row.altitude,
@@ -176,6 +178,96 @@ export default function FlightApprovalsTable(props) {
             </dt>
           </dl>
         </div>
+        <div
+          // className={`layer-content-list ${
+          //   item.cntrlId === props.cntrlId ? 'on' : ''
+          // }`}
+          className='layer-content-list'
+          // onClick={() => {
+          //   props.handlerDetail(item.cntrlId);
+          // }}
+          key={Math.random()}
+        >
+          <dl>
+            <dt>
+              <div className='list-left-txt'>중심좌표(위/경도)</div>
+              <div className='list-right-txt'>36.45467/126.73687</div>
+            </dt>
+            <dt>
+              <div className='list-left-txt'>반경(m)</div>
+              <div className='list-right-txt'>
+                100 {/* {dayjs(item.cntrlStDt).format('YYYY년 MM월 DD일')} */}
+              </div>
+            </dt>
+            <dt>
+              <div className='list-left-txt'>고도(m)</div>
+              <div className='list-right-txt'>180</div>
+            </dt>
+            <dt>
+              <div className='list-left-txt'>검토결과</div>
+              <div className='list-right-txt'>
+                승인
+                {/* {dayjs(item.cntrlStDt).format('HH:mm')}
+                    
+                      {dayjs(item.cntrlEndDt).format('HH:mm')} */}
+              </div>
+            </dt>
+            <dt>
+              <div className='list-left-txt'>사유보기</div>
+              <div className='list-right-txt'>
+                사유보기
+                {/* {dayjs(item.cntrlStDt).format('HH:mm')}
+                    
+                      {dayjs(item.cntrlEndDt).format('HH:mm')} */}
+              </div>
+            </dt>
+          </dl>
+        </div>
+        <div
+          // className={`layer-content-list ${
+          //   item.cntrlId === props.cntrlId ? 'on' : ''
+          // }`}
+          className='layer-content-list'
+          // onClick={() => {
+          //   props.handlerDetail(item.cntrlId);
+          // }}
+          key={Math.random()}
+        >
+          <dl>
+            <dt>
+              <div className='list-left-txt'>중심좌표(위/경도)</div>
+              <div className='list-right-txt'>39.45467/126.73687</div>
+            </dt>
+            <dt>
+              <div className='list-left-txt'>반경(m)</div>
+              <div className='list-right-txt'>
+                140 {/* {dayjs(item.cntrlStDt).format('YYYY년 MM월 DD일')} */}
+              </div>
+            </dt>
+            <dt>
+              <div className='list-left-txt'>고도(m)</div>
+              <div className='list-right-txt'>120</div>
+            </dt>
+            <dt>
+              <div className='list-left-txt'>검토결과</div>
+              <div className='list-right-txt'>
+                승인
+                {/* {dayjs(item.cntrlStDt).format('HH:mm')}
+                    
+                      {dayjs(item.cntrlEndDt).format('HH:mm')} */}
+              </div>
+            </dt>
+            <dt>
+              <div className='list-left-txt'>사유보기</div>
+              <div className='list-right-txt'>
+                사유보기{' '}
+                {/* {dayjs(item.cntrlStDt).format('HH:mm')}
+                    
+                      {dayjs(item.cntrlEndDt).format('HH:mm')} */}
+              </div>
+            </dt>
+          </dl>
+        </div>
       </>
     );
   };
@@ -212,10 +304,10 @@ export default function FlightApprovalsTable(props) {
             className='invoice-list-dataTable flight-approval'
             style={{ width: '100%' }}
           >
-            {results?.length > 0 ? (
+            {laancAprvList?.length > 0 ? (
               <GridDatabase
                 title={'비행이력'}
-                data={results}
+                data={laancAprvList}
                 //   count={laancSearchData?.size}
                 columns={columns}
                 // handlerPageChange={props.handlerPageChange}