y 스크롤 기능 추가

src/components/flight/ControlApprovalsTable.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Card } from '@component/ui';
 import { openModal } from '@src/redux/features/comn/message/messageSlice';
@@ -13,7 +13,7 @@ import {
   updateLaancAprvReview
 } from '@src/redux/features/laanc/laancThunk';
 import { ERROR_MESSAGE, ERROR_TITLE } from '@src/configs/msgConst';
-import { CgKey } from 'react-icons/cg';
+import ScrollContainer from 'react-indiana-drag-scroll';
 
 export default function ControlApprovalsTable(props) {
   const dispatch = useDispatch();
@@ -31,6 +31,8 @@ export default function ControlApprovalsTable(props) {
     U: 0
   });
 
+  const scrollContainerRef = useRef(null);
+
   // 확장된 행 키
   const [expandedRowKeys, setExpandedRowKeys] = useState([]);
 
@@ -1277,12 +1279,18 @@ export default function ControlApprovalsTable(props) {
       </div>
       <div className='invoice-list-wrapper'>
         <Card>
-          <div
-            className='invoice-list-dataTable flight-approval'
-            style={{ width: '100%' }}
-          >
+          <div className='invoice-list-dataTable flight-approval'>
             {laancAprvList?.length > 0 ? (
               <Form form={form} component={false}>
+                <ScrollContainer
+                  className='scroll-container'
+                  ref={scrollContainerRef}
+                  hideScrollbars={false}
+                  vertical={true}
+                  horizontal={true}
+                  activationDistance={10}
+                >
+                  <div style={{ width: '2000px' }}>
                     <Table
                       components={{
                         body: {
@@ -1344,7 +1352,8 @@ export default function ControlApprovalsTable(props) {
                       expandable={{
                         expandedRowRender,
                         expandedRowKeys: expandedRowKeys,
-                    onExpand: (expanded, record) => handleExpand(record.key),
+                        onExpand: (expanded, record) =>
+                          handleExpand(record.key),
                         rowExpandable: record => record?.areaList?.length > 1
                       }}
                       scroll={{
@@ -1353,6 +1362,8 @@ export default function ControlApprovalsTable(props) {
                       rowHoverable={false}
                       expandIconColumnIndex={-1}
                     />
+                  </div>
+                </ScrollContainer>
               </Form>
             ) : (
               <div

src/components/flight/OperationApprovalsTable.js

@@ -10,6 +10,7 @@ import {
 } from '@src/redux/features/laanc/laancThunk';
 import { ERROR_MESSAGE, ERROR_TITLE } from '@src/configs/msgConst';
 import OperationModal from './OperationModal';
+import ScrollContainer from 'react-indiana-drag-scroll';
 
 export default function OperationApprovalsTable(props) {
   const dispatch = useDispatch();
@@ -27,6 +28,8 @@ export default function OperationApprovalsTable(props) {
     U: 0
   });
 
+  const scrollContainerRef = useRef(null);
+
   // 확장된 행 키
   const [expandedRowKeys, setExpandedRowKeys] = useState([]);
 
@@ -1086,12 +1089,18 @@ export default function OperationApprovalsTable(props) {
       </div>
       <div className='invoice-list-wrapper'>
         <Card>
-          <div
-            className='invoice-list-dataTable flight-approval'
-            style={{ width: '100%' }}
-          >
+          <div className='invoice-list-dataTable flight-approval'>
             {laancAprvList?.length > 0 ? (
               <Form form={form} component={false}>
+                <ScrollContainer
+                  className='scroll-container'
+                  ref={scrollContainerRef}
+                  hideScrollbars={false}
+                  vertical={true}
+                  horizontal={true}
+                  activationDistance={10}
+                >
+                  <div style={{ width: '2000px' }}>
                     <Table
                       components={{
                         body: {
@@ -1166,6 +1175,8 @@ export default function OperationApprovalsTable(props) {
                       rowHoverable={false}
                       expandIconColumnIndex={-1}
                     />
+                  </div>
+                </ScrollContainer>
               </Form>
             ) : (
               <div