2차 문구 수정

src/assets/css/custom.css

@@ -1181,7 +1181,7 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .flight-approval .rdt_TableHeadRow>div{display:none}
 .flight-approval .rdt_TableHeadRow .rdt_TableCol{display:block;font-size:0.8rem;}
 .flight-approval .rdt_TableHeadRow .rdt_TableCol div{font-weight:600}
-.flight-approval-layer{width:630px;overflow:scroll;}
+.flight-approval-layer{width:635px;overflow:scroll;}
 .layer-ti-sub{display:block;font-size:0.875rem;color:#777;margin-top:-4px;}
 .flight-approval-layer .layer-ti-sub{margin-bottom:0.5rem}
 .flight-approval-layer .calendar-flat svg{color:#8a1c05}

src/components/flight/FlightApprovalsTable.js

@@ -23,6 +23,7 @@ export default function FlightApprovalsTable(props) {
   // 행 토글
   const [expandedRows, setExpandedRows] = useState({});
 
+  console.log('>>', expandedRows);
   // 승인, 미승인, 비대상 건수 계산
   useEffect(() => {
     resApprovalCd();
@@ -83,7 +84,7 @@ export default function FlightApprovalsTable(props) {
     {
       name: (
         <div className='custom-header-cell'>
-          비행
+          신청
           <br />
           구역
         </div>
@@ -93,7 +94,7 @@ export default function FlightApprovalsTable(props) {
       // sortable: true,
       width: '68px',
       cell: row => {
-        return row.areaList[0].zoneNo + '번';
+        return row.areaList[0].zoneNo;
       }
     },
     {
@@ -174,11 +175,11 @@ export default function FlightApprovalsTable(props) {
       name: '더보기',
       selector: row => row.areaList,
       center: true,
-      width: '86px',
+      width: '83px',
       cell: row =>
         row.areaList.length > 1 ? (
           <Button color='flat-dark' onClick={() => toggleRow(row.planSno)}>
-            {row.areaList.length - 1}건<br /> 더 보기
+            {row.areaList.length}건<br /> 더보기
             {expandedRows[row.planSno] ? <FaAngleDown /> : <FaAngleUp />}
           </Button>
         ) : (
@@ -223,7 +224,7 @@ export default function FlightApprovalsTable(props) {
       sortable: true,
       width: '68px',
       cell: row => {
-        return row.zoneNo + '번';
+        return row.zoneNo;
       }
     },
     {
@@ -275,7 +276,7 @@ export default function FlightApprovalsTable(props) {
     {
       selector: row => row.approvalCd,
       center: true,
-      width: '86px',
+      width: '83px',
       cell: row => {
         return '-';
       }
@@ -294,10 +295,21 @@ export default function FlightApprovalsTable(props) {
     },
     {
       when: row =>
-        row.areaList[0].planAreaSno === props.selected && !row.isExpandableRow,
+        row.areaList[0].planAreaSno === props.selected && expandedRows,
       style: row => ({ border: '2px solid #000 ', cursor: 'pointer' })
       // classNames: ['flight-approval-row-click']
     }
+    // {
+    //   when: row => expandedRows[row.planSno],
+    //   style: row => ({
+    //     borderBottom: 'none',
+    //     borderLeft: '2px dashed #0000FF',
+    //     borderRight: '2px dashed #0000FF',
+    //     borderTop: '2px dashed #0000FF',
+    //     cursor: 'pointer'
+    //   })
+    //   // classNames: ['flight-approval-row-click']
+    // }
   ];
 
   // 테이블 내부 행 조건부 스타일
@@ -349,12 +361,16 @@ export default function FlightApprovalsTable(props) {
 
   // 테이블 내부 행 클릭 이벤트
   const handleInRowClick = row => {
+    console.log('>>', row);
+
     handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax);
     props.handlerDetail(row);
   };
 
   // 테이블 행 클릭 이벤트
   const handleRowClick = row => {
+    console.log('>>', row);
+
     handlerOpenModal(
       row.areaList[0].approvalCd,
       row.areaList[0].fltElev,
@@ -367,7 +383,14 @@ export default function FlightApprovalsTable(props) {
   const FlightInfoComponent = ({ data }) => {
     return (
       <>
-        <div>
+        <div
+        // style={{
+        //   borderBottom: '2px dashed #0000FF',
+        //   borderLeft: '2px dashed #0000FF',
+        //   borderRight: '2px dashed #0000FF',
+        //   cursor: 'pointer'
+        // }}
+        >
           <DataTable
             className='flight-approval-in-table'
             noTableHead={true}
@@ -459,6 +482,7 @@ export default function FlightApprovalsTable(props) {
                   expandedRows[row.planSno] || false
                 }
                 paginationPerPage={20}
+                expandableRows
               />
             ) : (
               <div