fo: 처리시설 시설정보

apps/fo/app/pages/(with-layout)/processFacility/modal/page.tsx

@@ -5,6 +5,7 @@
  */
 
 "use client"
+import { useCallback, useRef } from "react";
 import { useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/dashboard";
 import { downloadExcelFormat, filePickedBlobArray, UITab, UiTable } from "@common/business_components/ui";
@@ -121,6 +122,21 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
   const upHeadListPlanInfoChange = headMakeList(upHeadListPlanInfo, 2);
   const upHeadListFcltyHistInfoChange = headMakeList(upHeadListFcltyHistInfo, 3);
   const upHeadListFcltyWaterQltyInfoChange = headMakeList(upHeadListFcltyWaterQltyInfo, 4);
+  const historyTopScrollRef = useRef<HTMLDivElement>(null);
+  const historyBottomScrollRef = useRef<HTMLDivElement>(null);
+  const syncLockRef = useRef(false);
+
+  const syncScroll = useCallback((source: HTMLDivElement | null, target: HTMLDivElement | null) => {
+    if (!source || !target || syncLockRef.current) return;
+    syncLockRef.current = true;
+    const nextTop = source.scrollTop;
+    if (target.scrollTop !== nextTop) {
+      target.scrollTop = nextTop;
+    }
+    requestAnimationFrame(() => {
+      syncLockRef.current = false;
+    });
+  }, []);
 
   const excelDownloadPlan = () => {
     const excelDownList: any[] = [];
@@ -218,7 +234,7 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
               <h3 className="text-2xl font-medium text-label">시설 기본정보</h3>
             </div>
             <div className="card !m-[1.2rem] max-h-[40rem] overflow-auto !p-0r">
-              <Table>
+              <Table variant="secondary">
                 <thead>
                   <TableRow className="">
                     <TableHead className="w-1/6">{'시설명'}</TableHead>
@@ -262,7 +278,11 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
             
           <TabsContent value="history_info">
             <ListDiv>
-              <div className="h-[250px] w-full overflow-y-auto overflow-x-hidden">
+              <div
+                className="h-[250px] w-full overflow-y-auto overflow-x-hidden"
+                ref={historyTopScrollRef}
+                onScroll={() => syncScroll(historyTopScrollRef.current, historyBottomScrollRef.current)}
+              >
                 <Button className={btnClass} style={{float: 'right'}} color="green" onClick={excelDownloadPlan}>
                   {"엑셀다운로드"}
                 </Button>
@@ -274,7 +294,11 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
               </div>
             </ListDiv>
             <ListDiv>
-              <div className="h-[250px] w-full overflow-y-auto overflow-x-hidden">
+              <div
+                className="h-[250px] w-full overflow-y-auto overflow-x-hidden"
+                ref={historyBottomScrollRef}
+                onScroll={() => syncScroll(historyBottomScrollRef.current, historyTopScrollRef.current)}
+              >
                 <Button className={btnClass} style={{float: 'right'}} color="green" onClick={excelDownloadQlty}>
                   {"엑셀다운로드"}
                 </Button>
@@ -292,4 +316,4 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
     </div>
     </>
   );
-}
+}