비행 승인 클릭 중첩 방지

src/components/flight/FlightApprovalsTable.js

@@ -36,12 +36,14 @@ export default function FlightApprovalsTable(props) {
       classNames: ['flight-approval-row']
     },
     {
-      when: row => row.areaList[0].planAreaSno === props.selected,
+      when: row =>
-      classNames: ['flight-approval-row-click']
+        row.areaList[0].planAreaSno === props.selected && !row.isExpandableRow,
+      style: row => ({ border: '2px solid #000', cursor: 'pointer' })
+      // classNames: ['flight-approval-row-click']
     }
   ];
 
-  const infoRowStyles = [
+  const inConditionalRowStyles = [
     {
       when: row => row.approvalCd === 'F',
       classNames: ['flight-not-approval-row']
@@ -156,9 +158,9 @@ export default function FlightApprovalsTable(props) {
       width: '120px',
       cell: row =>
         row.areaList.length > 1 ? (
-          <Button color='flat-dark' onClick={() => toggleRow(row.applyNo)}>
+          <Button color='flat-dark' onClick={() => toggleRow(row.planSno)}>
-            {row.areaList.length}건 더 보기
+            {row.areaList.length - 1}건 더 보기
-            {expandedRows[row.applyNo] ? <FaAngleDown /> : <FaAngleUp />}
+            {expandedRows[row.planSno] ? <FaAngleDown /> : <FaAngleUp />}
           </Button>
         ) : (
           '-'
@@ -283,14 +285,17 @@ export default function FlightApprovalsTable(props) {
     }
   ];
 
+  // 테이블 내부 행 클릭 이벤트
   const handleInRowClick = row => {
     props.handlerDetail(row);
   };
+  // 테이블 행 클릭 이벤트
   const handleRowClick = row => {
     props.handlerDetail(row.areaList[0]);
     // 여기에 클릭 이벤트를 처리하는 코드를 작성하세요.
   };
 
+  // 데이터 테이블 내부 컴포넌트
   const FlightInfoComponent = ({ data }) => {
     return (
       <>
@@ -300,7 +305,7 @@ export default function FlightApprovalsTable(props) {
             noTableHead={true}
             data={data.areaList.slice(1)}
             columns={nestedColumns}
-            conditionalRowStyles={infoRowStyles}
+            conditionalRowStyles={inConditionalRowStyles}
             onRowClicked={handleInRowClick}
           />
         </div>
@@ -308,6 +313,7 @@ export default function FlightApprovalsTable(props) {
     );
   };
 
+  // 날짜 포맷 변경
   const formatDate = dateString => {
     const date = new Date(dateString);
     const year = date.getFullYear();
@@ -316,10 +322,12 @@ export default function FlightApprovalsTable(props) {
     return `${year} 년 ${month} 월 ${day} 일`;
   };
 
+  // 승인, 미승인, 비대상 건수 계산
   useEffect(() => {
     resApprovalCd();
   }, [laancAprvList]);
 
+  // 승인, 미승인, 비대상 건수 계산
   const resApprovalCd = () => {
     let approvalCdValue = { S: 0, F: 0, U: 0 };
 
@@ -377,7 +385,7 @@ export default function FlightApprovalsTable(props) {
                 FlightInfoComponent={FlightInfoComponent}
                 handleRowClick={handleRowClick}
                 expandableRowExpanded={row =>
-                  expandedRows[row.applyNo] || false
+                  expandedRows[row.planSno] || false
                 }
                 paginationPerPage={20}
               />