확장 행 컬럼 수정

src/components/flight/NewFlightApprovalsTable.js

@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
 import { openModal } from '@src/redux/features/comn/message/messageSlice';
 import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
 import { Form, Input, InputNumber, Popconfirm, Table, Typography } from 'antd';
+import { render } from 'react-dom';
 
 export default function NewFlightApprovalsTable(props) {
   const dispatch = useDispatch();
@@ -134,13 +135,12 @@ export default function NewFlightApprovalsTable(props) {
         <>
           행정 <br />
           구역
-          <br />1
+          <br />
         </>
       ),
       dataIndex: 'areaList',
       width: '90px',
       align: 'center',
-
       render: areaList => {
         return areaList.length <= 1 ? '서울시특별시' : '-';
       }
@@ -227,6 +227,20 @@ export default function NewFlightApprovalsTable(props) {
         return text ? text : '-';
       }
     },
+    {
+      title: (
+        <>
+          세부 <br />
+          사항
+        </>
+      ),
+      dataIndex: 'areaList',
+      align: 'center',
+      width: '110px',
+      render: areaList => {
+        return areaList.length <= 1 ? <>-</> : '-';
+      }
+    },
     {
       title: (
         <>
@@ -381,48 +395,60 @@ export default function NewFlightApprovalsTable(props) {
     const childColumns = [
       {
         dataIndex: 'applyNo',
-        width: '30px',
+        width: '40px',
         align: 'center'
       },
       {
         dataIndex: '6월',
-        width: '85px',
-        align: 'center'
+        width: '80px',
+        align: 'center',
+        render: text => dayjs(text).format('M월')
       },
       {
         dataIndex: '21일',
-        width: '85px',
-        align: 'center'
+        width: '80px',
+        align: 'center',
+        render: text => dayjs(text).format('DD일')
       },
       {
         dataIndex: 'zoneNo',
         align: 'center',
         width: '85px',
-        editable: true
+        render: text => {
+          return <>총{text}건</>;
+        }
       },
       {
         dataIndex: '홍길동',
         align: 'center',
-        width: '85px',
-        editable: true
+        width: '90px',
+        render: text => {
+          return <>홍*동</>;
+        }
       },
       {
         dataIndex: '서울시특별시',
         align: 'center',
-        width: '85px',
-        editable: true
+        width: '90px',
+        render: text => {
+          return <>서울시특별시</>;
+        }
       },
       {
         dataIndex: '강남구',
         align: 'center',
-        width: '85px',
-        editable: true
+        width: '90px',
+        render: text => {
+          return <>강서구</>;
+        }
       },
       {
         dataIndex: '가양동439-1(원추)',
         align: 'center',
-        width: '85px',
-        editable: true
+        width: '100px',
+        render: text => {
+          return <>가양동439-1(원추)</>;
+        }
       },
       {
         align: 'center',
@@ -442,21 +468,68 @@ export default function NewFlightApprovalsTable(props) {
       {
         dataIndex: 'bufferZone',
         align: 'center',
-        width: '85px'
+        editable: true,
+        width: '70px'
       },
       {
         dataIndex: 'fltElev',
         align: 'center',
-        width: '85px'
+        editable: true,
+        width: '70px'
       },
+      {
+        dataIndex: '세부사항',
+        align: 'center',
+        editable: true,
+        width: '110px',
+        render: text => {
+          return <>기타</>;
+        }
+      },
+      {
+        dataIndex: '비행목적',
+        align: 'center',
+        width: '110px',
+        render: text => {
+          return <>레저비행</>;
+        }
+      },
+      {
+        dataIndex: '긴급구조기관',
+        align: 'center',
+        editable: true,
+        width: '110px',
+        render: text => {
+          return <>-</>;
+        }
+      },
+      {
+        dataIndex: '비고',
+        align: 'center',
+        editable: true,
+        width: '110px',
+        render: text => {
+          return <>-</>;
+        }
+      },
+
       {
         dataIndex: 'approvalCd',
         align: 'center',
-        width: '85px',
+        width: '110px',
         render: text => (
           <>{text === 'U' ? '비대상' : text === 'S' ? '승인' : '미승인'}</>
         )
       },
+      {
+        dataIndex: '더보기',
+        align: 'center',
+        editable: true,
+        width: '130px',
+        render: text => {
+          return <>-</>;
+        }
+      },
       {
         dataIndex: 'operation',
         align: 'center',
@@ -514,6 +587,9 @@ export default function NewFlightApprovalsTable(props) {
             className += 'flight-not-approval-row';
           } else className;
 
+          if (record.planAreaSno === props.selected) {
+            className += ' flight-approval-row-click';
+          }
           return className;
         }}
         size='small'
@@ -645,8 +721,6 @@ export default function NewFlightApprovalsTable(props) {
 
   // 확장된 테이블 행 클릭 이벤트
   const handleInRowClick = row => {
-    console.log('>>', row);
-
     handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax);
     props.handlerDetail(row);
   };
@@ -697,8 +771,6 @@ export default function NewFlightApprovalsTable(props) {
                     ...item,
                     key: index
                   }))}
-                  테이블
-                  데이터
                   columns={mergedColumns}
                   rowClassName={record => {
                     let className = '';
@@ -707,6 +779,12 @@ export default function NewFlightApprovalsTable(props) {
                     } else if (record.areaList[0].approvalCd === 'F') {
                       className += 'flight-not-approval-row editable-row';
                     } else className += 'editable-row';
+                    if (record.areaList[0].planAreaSno === props.selected) {
+                      className += ' flight-approval-row-click';
+                    }
+                    if (expandedRowKeys.includes(record.key)) {
+                      className += ' expanded-row';
+                    }
 
                     return className;
                   }}
@@ -762,7 +840,18 @@ const EditableCell = ({
   children,
   ...restProps
 }) => {
-  const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
+  const inputNode =
+    inputType === 'number' ? (
+      <Input
+        onKeyPress={e => {
+          if (!/[0-9]/.test(e.key)) {
+            e.preventDefault(); // 숫자 외의 입력을 막음
+          }
+        }}
+      />
+    ) : (
+      <Input />
+    );
   return (
     <td {...restProps}>
       {editing ? (