feat: 중점우수토실 페이징 처리 (테이블 동기화 추가 작업 필요)

apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx

@@ -12,20 +12,114 @@ const inputColumn = [
   { id: "swtrmtZoneCd", title: "처리구역", type: "input" },
 ];
 
-const Ssc = ({ featureData, isMainSsc, rainMeasureData, onSaveClick }: {
+const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
   featureData: any,
   isMainSsc?: boolean,
-  rainMeasureData?: any,
+  chmbrXcnts?: string,
+  chmbrYdnts?: string,
   onSaveClick?: () => void
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isDataLoaded, setIsDataLoaded] = useState(false);
   const [formData, setFormData] = useState<any>({});
-  const [mntrngsData, setMntrngsData] = useState<any[]>([]); // 수량/수질 측정 정보
+  const [rainMeasureData, setRainMeasureData] = useState<any>({}); // 강우, 측정 정보
+  const [mntrngsData, setMntrngsData] = useState<any[]>([]); // 수량/수질측정 정보
+  const [totalCount, setTotalCount] = useState<number>(0);
+  const [totalDetailCount, setTotalDetailCount] = useState<number>(0);
   const [selectedRowIndex, setSelectedRowIndex] = useState<number>(-1);
+  const [curPage, setCurPage] = useState<number>(1);
+  const [curDetailPage, setCurDetailPage] = useState<number>(1);
+  const [isResetPage, setIsResetPage] = useState<boolean>(false);
+  const [isResetDetailPage, setIsResetDetailPage] = useState<boolean>(false);
+  const [isResetSelection, setIsResetSelection] = useState<boolean>(false);
+  const [curIdx, setCurIdx] = useState<number>(0);
 
-  // console.log('featureData data received:', featureData); // 추가 데이터 확인용
-  // console.log('rainMeasureData received:', rainMeasureData); // 추가 데이터 확인용
+  // 강우, 측정 정보 API 호출 함수
+  const fetchRainMeasureData = async (chmbrXcnts: string, chmbrYdnts: string) => {
+    if (!chmbrXcnts || !chmbrYdnts) {
+      console.warn('추가 데이터 호출 실패: 필수 매개변수 누락', { chmbrXcnts, chmbrYdnts });
+      return [];
+    }
+
+    try {
+      const queryParams = new URLSearchParams({
+        chmbrXcnts: chmbrXcnts,
+        chmbrYdnts: chmbrYdnts,
+        page: `${curPage - 1}`,
+        size: '3',
+      });
+
+      console.log('queryParams', queryParams.toString());
+      console.log(`추가 데이터 API 호출 시작: v1/onsemiro/getSwgRainsByGeomety?${queryParams.toString()}`);
+
+      const result = await getData(`v1/onsemiro/getSwgRainsByGeomety?${queryParams.toString()}`);
+
+      console.log('추가 데이터 API 호출 성공:', result);
+
+      const processedDataArray: any[] = result.content.map((data: any) => {
+        // 🎯 formatDisplayData로 기본 포맷팅 적용
+        const formattedItem = formatDisplayData(data);
+
+        // 🎯 추가 데이터 조합
+        return {
+          ...formattedItem,
+          flwmtrCombined: `${data.flwmtrMesureTpEtc || '-'} / ${data.flwmtrKnd || '-'}`,
+        };
+      });
+      setRainMeasureData(processedDataArray);
+      setTotalCount(result?.totalElements || 0);
+    } catch (error) {
+      console.error('추가 데이터 로딩 실패:', error);
+      return [];
+    }
+  };
+
+  // 수량/수질측정 정보 API 호출 함수
+  const fetchMntrngsData = async (adstDstrCd: string, manageNo: string) => {
+    if (!adstDstrCd || !manageNo) {
+      console.warn('추가 데이터 호출 실패: 필수 매개변수 누락', { adstDstrCd, manageNo });
+      return [];
+    }
+
+    try {
+      const queryParams = new URLSearchParams({
+        page: `${curDetailPage - 1}`,
+        size: '3',
+      });
+
+      console.log(`SSC 추가 데이터 API 호출 시작: v1/onsemiro/swgRain?${queryParams.toString()}`);
+
+      const result = await getData(`v1/onsemiro/swgRain/${adstDstrCd}/${manageNo}/mntrngs?${queryParams.toString()}`);
+
+      console.log('SSC 추가 데이터 API 호출 성공:', result);
+
+      // 각 아이템 전처리
+      const processedDataArray = result.content.map((data: any) => {
+        // 기본 포맷팅 적용
+        const formattedItem = formatDisplayData(data);
+        return {
+          ...formattedItem,
+        };
+      });
+
+      console.log('processedDataArray', processedDataArray);
+
+      setMntrngsData(processedDataArray);
+      setTotalDetailCount(result?.totalElements || 0);
+    } catch (error) {
+      console.error('추가 데이터 로딩 실패:', error);
+      return [];
+    }
+  };
+
+
+  // 🎯 추가 데이터는 별도 useEffect로 비동기 로딩
+  useEffect(() => {
+    // 강우/측정 정보 데이터 호출
+    if (isMainSsc && chmbrXcnts && chmbrYdnts) {
+      fetchRainMeasureData(chmbrXcnts, chmbrYdnts)
+    }
+  }, [chmbrXcnts, chmbrYdnts]);
 
   const openModal = () => {
     setIsModalOpen(true);
@@ -46,6 +140,19 @@ const Ssc = ({ featureData, isMainSsc, rainMeasureData, onSaveClick }: {
     }
   }, [featureData]);
 
+  // featureData가 변경될 때 formData 초기화
+  useEffect(() => {
+    // showTable이 true일 때만 fetch (최초 렌더 방지)
+    setIsResetPage(false);
+    setIsResetDetailPage(true);
+    if (chmbrXcnts && chmbrYdnts) fetchRainMeasureData(chmbrXcnts, chmbrYdnts);
+  }, [curPage]);
+
+  // 페이지 변경 시마다 데이터 fetch
+  useEffect(() => {
+    if (chmbrXcnts && chmbrYdnts) fetchMntrngsData(chmbrXcnts, chmbrYdnts);
+  }, [curDetailPage]);
+
   // 폼 데이터가 변경될 때 호출될 핸들러
   const handleFormDataChange = (newFormData: any) => {
     setFormData(newFormData);
@@ -62,91 +169,39 @@ const Ssc = ({ featureData, isMainSsc, rainMeasureData, onSaveClick }: {
   // 테이블 셀 클릭 핸들러 추가
   const handleCellClick = async (index: number | undefined, headId: string) => {
     if (index !== undefined && rainMeasureData) {
-      const data = await fetchMntrngsData(rainMeasureData[index].adstDstrCd, rainMeasureData[index].manageNo);
-
-      setMntrngsData(data);
+      await fetchMntrngsData(rainMeasureData[index].adstDstrCd, rainMeasureData[index].manageNo);
       setSelectedRowIndex(index);
     }
   };
 
-  // 🎯 추가 데이터 API 호출 함수 (독립적으로 실행)
-  const fetchMntrngsData = useCallback(async (adstDstrCd: string, manageNo: string) => {
-    if (!adstDstrCd || !manageNo) {
-      console.warn('추가 데이터 호출 실패: 필수 매개변수 누락', { adstDstrCd, manageNo });
-      return [];
-    }
-
-    try {
-      const queryParams = new URLSearchParams({
-        pageable: `{}`,
-      });
-
-      console.log(`SSC 추가 데이터 API 호출 시작: v1/onsemiro/swgRain?${queryParams.toString()}`);
-
-      const result = await getData(`v1/onsemiro/swgRain/${adstDstrCd}/${manageNo}/mntrngs?${queryParams.toString()}`);
-
-      console.log('SSC 추가 데이터 API 호출 성공:', result);
-
-      // 🎯 result가 페이지네이션 객체인 경우 content 배열 추출
-      let dataArray: any[] = [];
-      if (result && typeof result === 'object' && 'content' in result && Array.isArray(result.content)) {
-        dataArray = result.content;
-      } else if (Array.isArray(result)) {
-        dataArray = result;
-      } else {
-        console.warn('예상치 못한 API 응답 형식:', result);
-        return [];
-      }
-
-      // 🎯 각 아이템을 전처리하여 반환
-      const processedDataArray = dataArray.map((data: any) => {
-        // 🎯 formatDisplayData로 기본 포맷팅 적용
-        const formattedItem = formatDisplayData(data);
-
-        // 🎯 추가 데이터 조합
-        return {
-          ...formattedItem,
-        };
-      });
-
-      console.log('processedDataArray', processedDataArray);
-
-      return processedDataArray;
-    } catch (error) {
-      console.error('추가 데이터 로딩 실패:', error);
-      return [];
-    }
-  }, []);
-
   const renderModalBody = () => (
     <div className='grid grid-cols-1 gap-4 p-4'>
       {/* 강우정보 테이블 */}
       <UiTable
         headName='강우정보'
-        tableData={Array.isArray(rainMeasureData) ? rainMeasureData : []}
+        tableData={rainMeasureData}
         headlist={untrtSwgRainCol3}
-        pageSize={10}
-        total={Array.isArray(rainMeasureData) ? rainMeasureData.length : 0}
+        pageSize={3}
+        total={0}
         cellClick={handleCellClick}
-        onPageChange={function (page: number): void {
-          console.log('Rain data page change:', page);
-        }}
+        onPageChange={setCurPage}
+        resetPageNo={isResetPage}
+        resetSelection={isResetSelection}
+        index={curIdx}
       />
 
       {/* 측정정보 테이블 */}
       <UiTable
         headName='측정정보'
-        tableData={Array.isArray(rainMeasureData) ? rainMeasureData : []}
+        tableData={rainMeasureData}
         headlist={untrtSwgRainCol4}
-        pageSize={10}
-        total={Array.isArray(rainMeasureData) ? rainMeasureData.length : 0}
+        pageSize={3}
+        total={totalCount}
         cellClick={handleCellClick}
-        // onPageChange={setCurPage}
-        onPageChange={function (page: number): void {
-          console.log('Rain data page change:', page);
-        }}
-        resetPageNo={false}
-        // index={curPage}
+        onPageChange={setCurPage}
+        resetPageNo={isResetPage}
+        resetSelection={isResetSelection}
+        index={curIdx}
       >
         {/* 커스텀 헤더 */}
         <TableRow>
@@ -168,14 +223,12 @@ const Ssc = ({ featureData, isMainSsc, rainMeasureData, onSaveClick }: {
       {/* 수량/수질측정 정보 테이블 */}
       <UiTable
         headName='수량/수질측정 정보'
-        tableData={Array.isArray(mntrngsData) ? mntrngsData : []}
+        tableData={mntrngsData}
         headlist={untrtSwgRainCol5}
-        pageSize={10}
-        total={Array.isArray(mntrngsData) ? mntrngsData.length : 0}
+        pageSize={3}
+        total={totalDetailCount}
         cellClick={undefined}
-        onPageChange={function (page: number): void {
-          console.log('Quality data page change:', page);
-        }}
+        onPageChange={setCurDetailPage}
       />
     </div>
   )