ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/iipbs/wr/gisPopup' into iipbs/wr/dev
iipbs_wr / build (push) Waiting to run
Details

Browse Source
This commit is contained in:
truthwing
2025-07-14 14:56:36 +09:00
parent 3c1e0f7016 0c608e75a0
commit e115a7b2b3
4 changed files with 110 additions and 854 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/map/htdflSttn/page.tsx
-1
View File
@@ -3,7 +3,6 @@
import Gis from "@common/business_components/ui/map/Gis";
import { useEffect, useRef, useState, useCallback } from "react";
import { mapService } from "../service";
// import { MapSearchBar } from "../mapSearchBar";
import NewWindowPopup from "../newWindowPopup";
import GisApp from "@common/business_components/ui/map/lib/gis.core";
apps/wr/app/map/mapSearchBar.tsx
-414
View File
@@ -1,414 +0,0 @@
// "use client"
// import { useWrStore } from "@/app/store";
// import SearchInputText from "@/components/ui/searchInput/searchInput";
// import type { EnvPartSelectDataType, ReturnType, SelectDataType } from "@common/business_components/ui";
// import { SelectBox } from "@common/business_components/ui";
// import { Button, Input, Label } from "@common/components/ui";
// import React, { useEffect, useMemo, useRef, useState } from "react";
// import { MapSearchFormLeft } from "./mapSearchForm";
// // 건물 검색 타입 정의
// interface BuildingInfo {
// bdstInfoPk: number;
// ctpvCd: number;
// sggCd: number;
// daddr: string;
// bdstNm: string;
// frstArchPrmsnDt: string;
// archArea: number;
// ctpvNm: string | null;
// sggNm: string | null;
// lat: number | null;
// lot: number | null;
// regDt: string;
// rgtr: string | null;
// mdfcnDt: string;
// mdfr: string | null;
// }
// type SearchBaseType = {
// searchType: string;
// selectSidoData?: SelectDataType[] | [];
// selectSigunData?: SelectDataType[] | [];
// selectRegionData?: SelectDataType[] | [];
// selectUnitWaterShedData?: SelectDataType[] | [];
// selectMiddleRegionData?: SelectDataType[] | [];
// selectEnvPartData?: EnvPartSelectDataType[] | [];
// onFeatureSelect: () => void;
// btnClass?: string;
// ref?: React.RefObject<ReturnType>;
// isAdmin?: boolean;
// leftClassName?: string;
// rightClassName?: string;
// showQueryButton?: boolean;
// showInitButton?: boolean;
// showApplyButton?: boolean;
// checkedLayers?: string[];
// checkedLayersData?: any[];
// }
// const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`;
// const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`);
// interface SearchModalProps {
// open: boolean;
// onOpenChange: (open: boolean) => void;
// onFeatureSelect: (row: any) => void;
// }
// interface SelectedDataTypeWithSggNm {
// text: string;
// val: string;
// sggNm: string;
// }
// export function MapSearchBar({
// searchType,
// selectSidoData,
// selectSigunData,
// selectRegionData,
// selectUnitWaterShedData,
// selectMiddleRegionData,
// selectEnvPartData,
// btnClass,
// onFeatureSelect,
// isAdmin = false,
// leftClassName,
// rightClassName,
// showQueryButton = true,
// showInitButton = true,
// showApplyButton = true,
// checkedLayers = [],
// checkedLayersData = [],
// }: SearchBaseType) {
// // 로딩바
// const [isLoading, setIsLoading] = useState(false);
// // 상세 정보 조회를 위한 상태 추가
// const [popupFeature, setPopupFeature] = useState<any>(null);
// const [isChHead, setIsChHead] = useState(false);
// const ref = useRef<ReturnType>({} as ReturnType);
// // zustand store에서 건물 검색 함수와 데이터 가져오기
// const {
// code,
// bdst,
// findBdst,
// wrMap,
// buildingSearchRes,
// buildingNmSearch,
// buildingNmSearchMultiple
// } = useWrStore((state) => state);
// const [selectedBuilding, setSelectedBuilding] = useState<BuildingInfo | null>(null);
// const [buildingSearchText, setBuildingSearchText] = useState("");
// const [buildingList, setBuildingList] = useState<BuildingInfo[]>([]);
// // 전체 목록
// const [partValue, setPartValue] = useState<string>("A");
// const [sidoValue, setSidoValue] = useState<string>("0");
// const [sigunValue, setSigunValue] = useState<string>("0");
// const [regionValue, setRegionValue] = useState<string>("0");
// const [untitWaterShedValue, setUntitWaterShedValue] = useState<string>("0");
// const [middleRegionValue, setMiddleRegionValue] = useState<string>("0");
// const [envPartValue, setEnvPartValue] = useState<string>("0");
// const [resetTrigger, setResetTrigger] = useState(false);
// const [sidoText, setSidoText] = useState<string>("0");
// const [sigunText, setSigunText] = useState<string>("0");
// // 공급처 후보지 조회 필터 목록
// const [selectedSido, setSelectedSido] = useState<SelectDataType>({ text: "전체", val: '0' });
// const [selectedSigun, setSelectedSigun] = useState<SelectDataType>({ text: "전체", val: '0' });
// const [selectedFclt, setSelectedFclt] = useState<SelectedDataTypeWithSggNm>({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태
// // 전체 시설
// let allFclt: SelectedDataTypeWithSggNm[] = [{ text: "전체", val: '0', sggNm: '전체' }];
// const [selectedDong, setSelectedDong] = useState<SelectedDataTypeWithSggNm>({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태 // 행정동
// const filteredSigunData = useMemo(() => {
// if (!selectedSido || selectedSido.val === '0' || !selectedSido.val) return [{ text: "전체", val: '0' }];
// return [
// { text: "전체", val: '0' },
// ...code.sggCd.filter((item: { val: string; }) => item.val.substring(0, 2) === selectedSido.val.substring(0, 2))
// ];
// }, [selectedSido]);
// const filteredFcltData = useMemo(() => {
// if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }];
// return [
// { text: "전체", val: '0', sggNm: '전체' },
// ...allFclt.filter(item => item.sggNm === selectedSido.text)
// ];
// }, [selectedSigun]);
// const filteredDong = useMemo(() => {
// if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }];
// return [
// { text: "전체", val: '0', sggNm: '전체' },
// // ...code.dong.filter(item => item.sggNm === selectedSido.text)
// ];
// }, [selectedSigun]);
// // 조회 함수
// const queryVal = () => {
// // 46 : 하수처리시설
// // 47 : 하수재이용시설
// // 48 : 빗물이용시설
// // 49 : 중수도시설
// // 50 : 온배수시설
// console.log("조회버튼 클릭: ", checkedLayers);
// if (checkedLayers && checkedLayers.includes('48')) {
// // searchBuildings
// }
// }
// // 초기화 함수
// const initVal = () => {
// setPartValue("A");
// setSidoValue("0");
// setSigunValue("0");
// setRegionValue("0");
// setUntitWaterShedValue("0");
// setMiddleRegionValue("0");
// setEnvPartValue("0");
// setSidoText("전체");
// setSigunText("전체");
// setSelectedSido({ text: "전체", val: '0' });
// setSelectedSigun({ text: "전체", val: '0' });
// setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' });
// setSelectedDong({ text: "전체", val: '0', sggNm: '전체' });
// setResetTrigger(true);
// };
// // 적용 버튼
// const applyVal = () => {
// onFeatureSelect();
// };
// useEffect(() => {
// if (resetTrigger) {
// setResetTrigger(false);
// }
// }, [resetTrigger]);
// // 시설 조회
// useEffect(() => {
// const fetchData = async () => {
// setIsLoading(true);
// if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) {
// allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]);
// setIsLoading(false);
// return;
// }
// try {
// const queryParamsFacility = new URLSearchParams({
// lyrTypeNm: 'tb_il_swage_prcs_fclt',
// page: '0',
// size: '100000',
// sort: 'string',
// });
// const cqlFiltersFacility: string[] = [];
// if (selectedSigun.text && selectedSigun.val !== '0') {
// cqlFiltersFacility.push(`sgg_nm ILIKE '%${selectedSigun.text}%'`);
// }
// if (cqlFiltersFacility.length > 0) {
// queryParamsFacility.append('cqlFiter', cqlFiltersFacility.join(' and '));
// }
// console.log("BaseLayout API URL for Facilities:", `v1/fclts?${queryParamsFacility.toString()}`);
// const facilityRes = await fetch(`${API_URL}/v1/fclts?${queryParamsFacility.toString()}`, {
// method: "GET",
// headers: { accept: "application/json" }
// }).then(res => res.json());
// const facilities = (facilityRes.data || []).map((item: any) => ({
// text: item.swtrmtFcltNm,
// val: item.fid,
// sggNm: item.sggNm
// }));
// allFclt = (facilities);
// } catch (error) {
// console.error("BaseLayout: 지역/시설 데이터 조회 중 오류 발생:", error);
// allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]);
// } finally {
// setIsLoading(false);
// }
// };
// fetchData();
// }, [selectedSigun]);
// useEffect(() => {
// if (ref && ref.current) {
// const customRef = ref.current;
// customRef.partValue = partValue;
// customRef.sidoValue = sidoValue;
// customRef.sigunValue = sigunValue;
// customRef.regionValue = regionValue;
// customRef.unitWaterShedValue = untitWaterShedValue;
// customRef.middleRegionValue = middleRegionValue;
// customRef.envPartValue = envPartValue;
// customRef.sidoText = selectedSido.text;
// customRef.sigunText = selectedSigun.text;
// }
// }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, ref]);
// // buildingSearchText가 변경될 때 API 호출
// useEffect(() => {
// if (buildingSearchText && buildingSearchText.length > 1) {
// if (checkedLayers && checkedLayers.length > 0) {
// // 다중 레이어 검색
// // buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", buildingSearchText);
// buildingNmSearch("RNB", selectedSigun.val, buildingSearchText);
// } else {
// // 단일 레이어 검색
// // buildingNmSearch(checkedLayers[0], selectedSigun.val, buildingSearchText);
// }
// } else {
// // 검색 텍스트가 짧으면 리스트 초기화
// if (checkedLayers && checkedLayers.length > 0) {
// // buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", "");
// } else {
// buildingNmSearch("RNB", selectedSigun.val || "", "");
// }
// }
// }, [buildingSearchText]);
// return (
// <div className="absolute left-1/2 -translate-x-1/2 bg-white flex items-center justify-center p-4 rounded-md shadow-lg w-auto min-w-fit">
// <div className={leftClassName ? leftClassName : `flex items-center justify-center space-x-2 `}>
// <div className="flex gap-8 items-center">
// {searchType == "공급처 후보지 조회" && (
// <>
// <SelectBox
// className="flex items-center"
// label={'시도'}
// selectArray={code.cityCd}
// onSelectValue={(val) => {
// const selected = code.cityCd.find((item: { val: string | number; }) => (item.val === val));
// setSelectedSido(selected || { text: "전체", val: '0' });
// setSelectedSigun({ text: "전체", val: '0' });
// }}
// value={selectedSido.val}
// selectClass={'w-32'}
// />
// <SelectBox
// className="flex items-center"
// label={'시군구'}
// selectArray={filteredSigunData}
// onSelectValue={(val) => {
// const selected = filteredSigunData.find(item => (item.val === val));
// setSelectedSigun(selected || { text: "전체", val: '0' });
// setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' });
// }}
// value={selectedSigun.val}
// selectClass={'w-32'}
// />
// <div className="flex items-center">
// <Label className="w-20 text-xl text-gray-600">시설명</Label>
// <div className="w-64">
// <SearchInputText
// label="시설명"
// initValue={buildingSearchText}
// setValue={(searchNm?: string) => {
// setBuildingSearchText(searchNm || "");
// }}
// setRtnData={function (rtnData: any): void {
// // 선택된 건물 데이터 처리
// // if (rtnData && rtnData.bdstInfoPk) {
// // setSelectedBuilding(rtnData);
// // setBuildingSearchText(rtnData.bdstNm || "");
// // }
// }}
// searchList={buildingSearchRes || []}
// />
// </div>
// </div>
// </>
// )}
// {searchType == "우리동네가뭄지도보기" && (
// <>
// <SelectBox
// className="flex items-center"
// label={'시도'}
// selectArray={code.cityCd}
// onSelectValue={(val) => {
// const selected = code.cityCd.find((item: { val: string | number; }) => (item.val === val));
// setSelectedSido(selected || { text: "전체", val: '0' });
// setSelectedSigun({ text: "전체", val: '0' });
// }}
// value={selectedSido.val}
// selectClass={'w-44'}
// />
// <SelectBox
// className="flex items-center"
// label={'시군구'}
// selectArray={filteredSigunData}
// onSelectValue={(val) => {
// const selected = filteredSigunData.find(item => (item.val === val));
// setSelectedSigun(selected || { text: "전체", val: '0' });
// setSelectedDong({ text: "전체", val: '0', sggNm: '전체' });
// }}
// value={selectedSigun.val}
// selectClass={'w-32'}
// />
// <SelectBox
// className="flex items-center mr-8"
// label={'행정동'}
// selectArray={filteredDong}
// onSelectValue={(val) => {
// const selected = filteredDong.find(item => (item.val === val));
// setSelectedDong(selected || { text: "전체", val: '0', sggNm: '전체' });
// }}
// value={selectedDong.val}
// selectClass={'w-32'}
// />
// </>
// )}
// {searchType == "지도보기" && (
// <div className="flex items-center gap-2 w-[800px]">
// <div className="flex min-w-0"> {/* SearchFormLeft 래퍼 */}
// <MapSearchFormLeft
// isShowPart={true}
// selectSidoData={code.cityCd}
// selectSigunData={filteredSigunData}
// selectRegionData={code.rvbsnCd}
// selectUnitWaterShedData={selectUnitWaterShedData}
// selectMiddleRegionData={selectMiddleRegionData}
// selectEnvPartData={selectEnvPartData}
// setRtnPartValue={setPartValue}
// setRtnSidoValue={setSidoValue}
// setRtnSigunValue={setSigunValue}
// setRtnRegionValue={setRegionValue}
// setRtnUnitWaterShedValue={setUntitWaterShedValue}
// setRtnMiddleRegionValue={setMiddleRegionValue}
// setRtnEnvPartValue={setEnvPartValue}
// setRtnEnvPartSidoValue={setSidoValue}
// setRtnEnvPartSigunValue={setSigunValue}
// setRtnSidoText={setSidoText}
// setRtnSigunText={setSigunText}
// resetTrigger={resetTrigger}
// isAdmin={isAdmin}
// children={undefined}
// />
// </div>
// <Label className="w-auto text-xl text-gray-600 whitespace-nowrap">시설명</Label>
// <div className="w-44">
// <Input className="mr-4" />
// </div>
// </div>
// )}
// </div>
// {/* 버튼 부분 */}
// <div className="flex items-center justify-center gap-4">
// {showQueryButton && <Button className={btnClass} onClick={queryVal}>조회</Button>}
// {showInitButton && <Button className={btnClass} onClick={initVal}>초기화</Button>}
// {showApplyButton && <Button className={btnClass} onClick={applyVal}>적용</Button>}
// </div>
// </div>
// </div>
// )
// }
apps/wr/app/map/mapSearchForm.tsx
-340
View File
@@ -1,340 +0,0 @@
// "use client"
// import React, { useEffect, useState } from 'react';
// import type { SelectDataType } from '@common/business_components/ui/search_input_select';
// import { SelectBox } from '@common/business_components/ui/select';
// /**
// * 검색 폼 왼쪽 컴포넌트 타입
// *
// * @param isShowPart 구분 조회 여부
// * @param children 자식 컴포넌트
// * @param selectSidoData 시도 데이터
// * @param selectSigunData 시군구 데이터
// * @param selectRegionData 유역 데이터
// * @param selectUnitWaterShedData 단위유역 데이터
// * @param selectMiddleRegionData 중권역 데이터
// * @param selectEnvPartData 환경청 데이터
// * @param selectEnvPartSidoData 환경청 시도 데이터
// * @param selectEnvPartSigunData 환경청 시군구 데이터
// * @param setRtnPartValue 부분 값 변경 핸들러
// */
// type SearchFormLeftProps = {
// isShowPart?: boolean | undefined;
// children: React.ReactNode;
// selectSidoData?: SelectDataType[] | [];
// selectSigunData?: SelectDataType[] | [];
// selectRegionData?: SelectDataType[] | [];
// selectUnitWaterShedData?: SelectDataType[] | [];
// selectMiddleRegionData?: SelectDataType[] | [];
// selectEnvPartData?: EnvPartSelectDataType[] | [];
// selectEnvPartSidoData?: SelectDataType[] | [];
// selectEnvPartSigunData?: SelectDataType[] | [];
// setRtnPartValue?: (value: string) => void;
// setRtnSidoValue?: (value: string) => void;
// setRtnSigunValue?: (value: string) => void;
// setRtnRegionValue?: (value: string) => void;
// setRtnUnitWaterShedValue?: (value: string) => void;
// setRtnMiddleRegionValue?: (value: string) => void;
// setRtnEnvPartValue?: (value: string) => void;
// setRtnEnvPartSidoValue?: (value: string) => void;
// setRtnEnvPartSigunValue?: (value: string) => void;
// setRtnSidoText?: (value: string) => void;
// setRtnSigunText?: (value: string) => void;
// resetTrigger?: boolean;
// isAdmin?: boolean;
// }
// export type EnvPartSelectDataType = SelectDataType & {
// adstDliStrCd: string,
// }
// const selectPartData: SelectDataType[] = [
// { text: "행정별", val: 'A' },
// { text: "유역별", val: 'R' },
// { text: "환경청별", val: 'G' },
// ];
// function MapSearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSidoText, setRtnSigunValue, setRtnSigunText, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false, isAdmin = false }: SearchFormLeftProps) {
// /******************선택된 데이터******************/
// const [partValue, setPartValue] = useState<string>('A');
// //행정별 시도 시군구
// const [sidoValue, setSidoValue] = useState<string>('0');
// const [sigunValue, setSigunValue] = useState<string>('0');
// const [sidoText, setSidoText] = useState<string>('');
// const [sigunText, setSigunText] = useState<string>('');
// //유역별
// const [regionValue, setRegionValue] = useState<string>('0');
// const [unitWaterShedValue, setUnitWaterShedValue] = useState<string>('0');
// const [middleRegionValue, setMiddleRegionValue] = useState<string>('0');
// //환경청별 시도 시군구
// const [envPartValue, setEnvPartValue] = useState<string>('0');
// // 환경청
// const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]);
// /****************** 셀렉트 리스트 데이터. ******************/
// // 조회된 조건에 맞는 시도 시군 유역
// const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
// const [filteredUnitWaterShedData, setFilteredUnitWaterShedData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
// const [filteredMiddleRegionData, setFilteredMiddleRegionData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
// // 조회된 조건에 맞는 환경청 시도 시군
// const [filteredEnvPartData, setFilteredEnvPartData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd: '' }]);
// const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd: '' }]);
// const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
// // 시군구 세팅
// const initializeSigunData = (sidoCd: string) => {
// if (sidoCd === '0') {
// setSigunValue('0');
// setFilteredSigunData([{ text: "전체", val: '0' }]);
// } else {
// const newFilteredData = [
// { text: "전체", val: '0' },
// ...selectSigunData.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd)
// ];
// setSigunValue('0');
// setFilteredSigunData(newFilteredData);
// }
// }
// // 단위유역 세팅
// const initializeUnitWaterShedData = (regionCd: string) => {
// if (regionCd === '0') {
// setUnitWaterShedValue('0');
// setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
// } else {
// const newFilteredData = [
// { text: "전체", val: '0' },
// ...selectUnitWaterShedData.filter((item: SelectDataType) => item.val.substring(0, 1) === regionCd)
// ];
// setUnitWaterShedValue('0');
// setFilteredUnitWaterShedData(newFilteredData);
// }
// }
// // 중권역 세팅
// const initializeMiddleRegionData = (unitWaterShedCd: string) => {
// if (unitWaterShedCd === '0') {
// setMiddleRegionValue('0');
// setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
// } else {
// const newFilteredData = [
// { text: "전체", val: '0' },
// ...selectMiddleRegionData.filter((item: SelectDataType) => item.val.substring(0, 2) === unitWaterShedCd)
// ];
// setMiddleRegionValue('0');
// setFilteredMiddleRegionData(newFilteredData);
// }
// }
// // 환경청 세팅 - 시도
// const initializeCityDataByEnvPartSido = (envPartCd: string) => {
// const foundEnvPart = selectEnvPartData.find((item: EnvPartSelectDataType) => item.val === envPartCd);
// const cityArray = foundEnvPart?.adstDliStrCd.toString().split('|').join('').split(',');
// // 시군구 데이터
// const envSigunData = selectSigunData.filter((item: SelectDataType) => cityArray?.includes(item.val));
// // 환경청 시도 데이터
// const sidoArray = [...new Set(envSigunData.map((item: SelectDataType) => item.val.substring(0, 2)))];
// const envSidoData = selectSidoData.filter((item: SelectDataType) => sidoArray?.includes(item.val));
// setFilteredEnvPartSigunDataSelected(envSigunData);
// setFilteredEnvPartSidoData([
// { text: "전체", val: '0', adstDliStrCd: '' },
// ...envSidoData.map((item: SelectDataType) => ({ text: item.text, val: item.val, adstDliStrCd: '' }))
// ]);
// }
// // 환경청 세팅 - 시군구
// const initializeCityDataByEnvPartSigun = (sidoCd: string) => {
// const envSigunData = filteredEnvPartSigunDataSelected.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd);
// setFilteredEnvPartSigunData([
// { text: "전체", val: '0' },
// ...envSigunData.map((item: SelectDataType) => ({ text: item.text, val: item.val }))
// ]);
// }
// const onSelectValue = (val: string, type: string) => {
// let selectedSido;
// let selectedSigun;
// let selectedEnvPartSido;
// let selectedEnvPartSigun;
// switch (type) {
// case 'part':
// setPartValue(val);
// if (setRtnPartValue) {
// setRtnPartValue(val);
// }
// // 구분
// if (val == 'R') {
// initializeMiddleRegionData('0');
// initializeUnitWaterShedData('0');
// } else if (val == 'G') {
// setFilteredEnvPartData([
// { text: "전체", val: '0', adstDliStrCd: '' },
// ...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '')
// ]);
// setEnvPartValue('0');
// initializeCityDataByEnvPartSido('0');
// } else {
// initializeSigunData('0');
// onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
// }
// // 다른 selectbox 전체로 초기화
// onSelectValue(selectSidoData[0]?.val || '0', 'sido');
// onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
// break;
// case 'sido':
// setSidoValue(val);
// selectedSido = selectSidoData.find(item => item.val === val);
// setSidoText(selectedSido?.text || '');
// if (setRtnSidoValue) {
// setRtnSidoValue(val);
// }
// if (setRtnSidoText) {
// setRtnSidoText(selectedSido?.text || '');
// }
// initializeSigunData(val);
// onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
// break;
// case 'sigun':
// if (setRtnSigunValue) {
// setRtnSigunValue(val);
// }
// setSigunValue(val);
// selectedSigun = filteredSigunData.find(item => item.val === val);
// if (setRtnSigunText) {
// setRtnSigunText(selectedSigun?.text || '');
// }
// setSigunText(selectedSigun?.text || '');
// break;
// // 유역 세팅
// case 'region':
// setRegionValue(val);
// if (setRtnRegionValue) {
// setRtnRegionValue(val);
// }
// initializeUnitWaterShedData(val);
// onSelectValue(selectUnitWaterShedData[0]?.val || '0', 'unitWaterShed');
// break;
// case 'unitWaterShed':
// setUnitWaterShedValue(val);
// if (setRtnUnitWaterShedValue) {
// setRtnUnitWaterShedValue(val);
// }
// initializeMiddleRegionData(val);
// onSelectValue(selectMiddleRegionData[0]?.val || '0', 'middleRegion');
// break;
// case 'middleRegion':
// setMiddleRegionValue(val);
// if (setRtnMiddleRegionValue) {
// setRtnMiddleRegionValue(val);
// }
// break;
// // 환경청 세팅
// case 'envPart':
// setEnvPartValue(val);
// if (setRtnEnvPartValue) {
// setRtnEnvPartValue(val);
// }
// initializeCityDataByEnvPartSido(val);
// onSelectValue(filteredEnvPartSidoData[0]?.val || '0', 'envPartSido');
// break;
// case 'envPartSido':
// setSidoValue(val);
// selectedEnvPartSido = filteredEnvPartSidoData.find(item => item.val === val);
// setSidoText(selectedEnvPartSido?.text || '');
// if (setRtnEnvPartSidoValue) {
// setRtnEnvPartSidoValue(val);
// }
// initializeCityDataByEnvPartSigun(val);
// onSelectValue(filteredEnvPartSigunData[0]?.val || '0', 'envPartSigun');
// break;
// case 'envPartSigun':
// setSigunValue(val);
// selectedEnvPartSigun = filteredEnvPartSigunData.find(item => item.val === val);
// setSigunText(selectedEnvPartSigun?.text || '');
// if (setRtnEnvPartSigunValue) {
// setRtnEnvPartSigunValue(val);
// }
// break;
// }
// }
// // 리셋 함수
// const resetAllValues = () => {
// setPartValue('A');
// setSidoValue('0');
// setSigunValue('0');
// setRegionValue('0');
// setUnitWaterShedValue('0');
// setMiddleRegionValue('0');
// setEnvPartValue('0');
// setFilteredSigunData([{ text: "전체", val: '0' }]);
// setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
// setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
// setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
// setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
// setFilteredEnvPartSigunData([{ text: "전체", val: '0' }]);
// if (setRtnPartValue) setRtnPartValue('A');
// if (setRtnSidoValue) setRtnSidoValue('0');
// if (setRtnSigunValue) setRtnSigunValue('0');
// if (setRtnRegionValue) setRtnRegionValue('0');
// if (setRtnUnitWaterShedValue) setRtnUnitWaterShedValue('0');
// if (setRtnMiddleRegionValue) setRtnMiddleRegionValue('0');
// if (setRtnEnvPartValue) setRtnEnvPartValue('0');
// if (setRtnEnvPartSidoValue) setRtnEnvPartSidoValue('0');
// if (setRtnEnvPartSigunValue) setRtnEnvPartSigunValue('0');
// };
// // 리셋 트리거 변경 감지
// useEffect(() => {
// if (resetTrigger) {
// resetAllValues();
// // 리셋 후 트리거를 false로 설정
// if (setRtnPartValue) {
// setRtnPartValue('0');
// }
// }
// }, [resetTrigger]);
// return (
// isShowPart ? (
// <div className="flex gap-5">
// <SelectBox className="w-auto whitespace-nowrap" label={'구분'} selectArray={isAdmin ? selectPartData.slice(0, 1) : selectPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'part')} value={partValue} selectClass={'w-32'} />
// {partValue === 'R' ? (
// <>
// <SelectBox className="w-auto whitespace-nowrap" label={'유역'} selectArray={selectRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={'w-44'} />
// <SelectBox className="w-auto whitespace-nowrap" label={'단위유역'} selectArray={filteredUnitWaterShedData} onSelectValue={(val) => onSelectValue(val.toString(), 'unitWaterShed')} value={unitWaterShedValue} selectClass={'w-44'} />
// <SelectBox className="w-auto whitespace-nowrap" label={'중권역'} selectArray={filteredMiddleRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'middleRegion')} value={middleRegionValue} selectClass={'w-44'} />
// </>
// ) : partValue === 'G' ? (
// <>
// <SelectBox className="w-auto whitespace-nowrap" label={'환경청'} selectArray={filteredEnvPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={'w-44'} />
// <SelectBox className="w-auto whitespace-nowrap" label={'시도'} selectArray={filteredEnvPartSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')} value={sidoValue} selectClass={'w-44'} />
// <SelectBox className="w-auto whitespace-nowrap" label={'시군구'} selectArray={filteredEnvPartSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')} value={sigunValue} selectClass={'w-44'} />
// </>
// ) : (
// <>
// <SelectBox className="w-auto whitespace-nowrap" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={'w-44'} />
// <SelectBox className="w-auto whitespace-nowrap" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={'w-44'} />
// </>
// )}
// </div>
// ) : (
// <div className="grid grid-cols-12 gap-5 w-11/12 m-4">
// {children}
// </div>
// )
// )
// }
// export { MapSearchFormLeft };
apps/wr/app/map/newWindowPopup.tsx
+110 -99
View File
@@ -6,7 +6,7 @@ import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
import { fetchType, getFetch, postFectch } from "@/components/lib/api";
import { excelDownload, tableData } from "@/components/lib/func/commom";
import { tableData } from "@/components/lib/func/commom";
import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
import { Title, UITab, UiTable } from '@common/business_components';
@@ -55,34 +55,37 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
const { rainSttn, rainSttnSearch, rainSttnInit } = useWrStore(
(state) => state
);
let { rainSttnRes, rainSttnResCount } = rainSttn;
const { rainSttnRes, rainSttnResCount } = rainSttn;
const [rainTable, setRainTable] = useState<customRainBdst[]>();
const [rainPage, setRainPage] = useState(1)
const [rainDetailModal, setRainDetailModal] = useState<{ isOpen: boolean, data: customRainBdst | undefined }>({ data: undefined, isOpen: false });
const [rainList, setRainList] = useState<customRainBdst[]>(rainSttnRes || []);
// 중수도시설 변수
const { rswtSttn, rswtSttnSearch, rswtSttnInit } = useWrStore(
(state) => state
);
let { rswtSttnRes, rswtSttnResCount } = rswtSttn;
const { rswtSttnRes, rswtSttnResCount } = rswtSttn;
const [rswtrTable, setRswtrTable] = useState<customRswtBdst[]>();
const [rswtrDetailModal, setRswtrDetailModal] = useState<{ isOpen: boolean, data: customRswtBdst | undefined }>({ data: undefined, isOpen: false });
const [rswtrPage, setRswtrPage] = useState(1);
const [rswtrList, setRswtrList] = useState<customRswtBdst[]>(rswtSttnRes || []);
// 온배수시설 변수
const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
let { htdflSttnRes, htdflSttnResCount } = htdflSttn;
const { htdflSttnRes,htdflSttnResCount } = htdflSttn;
const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false });
const [htdflPage, setHtdflPage] = useState(1)
const [htdflList, setHtdflList] = useState<customHtdflBdst[]>(htdflSttnRes || []);
//하수처리시설 변수
const {
pbnst,
pubHasuInit,
} = useWrStore((state) => state);
let { pubFacHeadList, pbnstHasuRes } = pbnst;
const { pubFacHeadList, pbnstHasuRes } = pbnst;
const [hasuList, setHasuList] = useState<pubHasuType[]>(pbnstHasuRes || []);
const [isRuseReg, setIsRuseReg] = useState<{
data: any | undefined;
}>({ data: undefined });
@@ -93,7 +96,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
const getSelectedLayers = () => {
let result = null;
const layers = gisMap ? gisMap.getLayers().getArray().filter((l: any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기
let featureLayer: { get: (key: string) => any }; // 피처가 속한 레이어를 찾기 위한 변수
let featureLayer: { get: (key: string) => any } = {get:()=> null};
layers.forEach((layer: any) => {
const source = layer.getSource();
if (source && source.hasFeature && featureData
@@ -105,8 +108,61 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
return result;
};
useEffect(() => {
const layerId = getSelectedLayers();
const fetchpbnstDetail = async (featureCd: string) => {
try {
const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`);
// 중복 데이터 추가 방지
setTabDataFunc(response, featureCd);
} catch (error) {
console.error("Error fetching data:", error);
}
};
const fetchHasuDetail = async (featureCd: string, data: string) => {
try {
const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON)
setHasuList(
rainRes.data.map((item: any) => {
return {
...item,
fctCpc: Number(item.fctCpc) || 0,
ruse: item.ruse === false ? "N" : "Y",
};
})
)
} catch (error) {
console.error("Error fetching data:", error);
}
};
const detainSttn = async (featureCd: string, layerNm: string) => {
if (layerNm == '빗물이용시설') {
const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`)
setRainList(res)
}
else if(layerNm == '중수도시설'){
const res = await getFetch(fetchType.WR,`/reuseFc/waterreuseFc/1/20/0/${featureCd}`)
setRswtrList(res)
}
else{
const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`)
setHtdflList(res)
setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
}
}
// 상세 목록 데이터 상태 처리
useEffect(()=>{
if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] });
},[hasuList])
useEffect(()=>{
if (rainList.length > 0) setRainDetailModal({ isOpen: true, data: rainList[0] });
},[rainList])
useEffect(()=>{
if (rswtrList.length > 0) setRswtrDetailModal({ isOpen: true, data: rswtrList[0] });
},[rswtrList])
useEffect(()=>{
if (htdflList.length > 0) setHtdflDetailModal({ isOpen: true, data: htdflList[0] });
},[htdflList])
const layerId = getSelectedLayers();
if (featureData && typeof featureData.getProperties === "function") {
const selectedVal = featureData.getProperties();
let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' || layerId == '온배수시설' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? selectedVal?.swtrmt_fclt_nm : null;
@@ -125,12 +181,13 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
else {
featureCd = selectedVal?.bdst_nm;
setFcltPk(featureCd)
detainSttn(featureCd, layerId)
if (layerId) {
detainSttn(featureCd, layerId);
}
}
setViewMode("detail")
}
} else if (layerId === null && seletectedLayerNm) { setViewMode("list") }
}, [featureData]);
///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
///////////////////////////////////////////// 하수재이용시설 //////////////////////////////////////////////////
@@ -152,8 +209,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
if (!pbnstSttn.isInit) {
getFlcts()
}
}, [seletectedLayerNm, pbnstSttn.isInit]);
useEffect(() => {
}, [seletectedLayerNm, pbnstSttn.isInit, getFlcts]);
useEffect(()=>{
pbnSttnInit("1", "15", {
partValue: "A",
sidoValue: '0',
@@ -180,15 +237,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
});
}
// 재이용시설 조회
const fetchpbnstDetail = async (featureCd: string) => {
try {
const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`);
// 중복 데이터 추가 방지
setTabDataFunc(response, featureCd);
} catch (error) {
console.error("Error fetching data:", error);
}
};
// 재이용시설 페이징처리 관련 함수
const onPageChangeHandler = useCallback((page: number) => {
pbnstSttnSearch(
@@ -210,18 +258,18 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
String(new Date().getFullYear()), fclts
);
}, []);
const excelClick = useCallback(() => {
// if (codeData) pbnstSttnSearch(1, "10000", codeData);
excelDownload(
[[]],
"하수재이용시설 현황",
"sample_pbnstSttn.xlsx",
"A1:U2"
);
}, [pbnstSttnSearch]);
// FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제.
// const excelClick = useCallback(() => {
// // if (codeData) pbnstSttnSearch(1, "10000", codeData);
// excelDownload(
// [[]],
// "하수재이용시설 현황",
// "sample_pbnstSttn.xlsx",
// "A1:U2"
// );
// }, [pbnstSttnSearch]);
///////////////////////////////////////////// 하수재이용시설 //////////////////////////////////////////////////
///////////////////////////////////////////// 빗물 재이용 //////////////////////////////////////////////////
// 빗물재이용시설 cellClick 이벤트 (상세정보)
const rainCellClick = (index: number | undefined, headId: string) => {
@@ -235,24 +283,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
onClose();
}
}
const detainSttn = async (featureCd: string, layerNm: string) => {
if (layerNm == '빗물이용시설') {
const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`)
rainSttnRes = res
setRainDetailModal({ isOpen: true, data: rainSttnRes[0] });
}
else if (layerNm == '중수도시설') {
const res = await getFetch(fetchType.WR, `/reuseFc/waterreuseFc/1/20/0/${featureCd}`)
rswtSttnRes = res
console.log('중수도', res, featureCd)
setRswtrDetailModal({ isOpen: true, data: rswtSttnRes[0] })
}
else {
const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`)
htdflSttnRes = res
setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
}
}
useEffect(() => {
if (!rainSttn.isInit) {
@@ -304,10 +335,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
// setViewMode('detail')
onFeatureSelect(rswtrTable[index]);
onClose();
} else if (headId === 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
if (rswtrTable[index] && rswtrTable[index]?.chBuildingYn === 'Y') {
setRswtrBdstChgProps({ isOpen: true, chBuilding: rswtrTable[index].chgBuilding });
}
}
}
useEffect(() => {
@@ -336,18 +363,18 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
);
setRswtrTable(chData);
}, [code, rswtSttnRes]);
// 엑셀 관련
const rswtSttnExcelDownload = useCallback(() => {
if (rswtSttn.excelList.length > 0) {
if (rswtSttn.excelList.length === 0) return;
excelDownload(
rswtSttn.excelList,
"중수도시설 현황",
"sample_rswtSttn.xlsx",
"A1:W3",
);
}
}, [rswtSttn.excelList])
// FIXME: 윤선화 차장님 요구사항으로 엑셀 다운로드 삭제.
// const rswtSttnExcelDownload = useCallback(() => {
// if (rswtSttn.excelList.length > 0) {
// if (rswtSttn.excelList.length === 0) return;
// excelDownload(
// rswtSttn.excelList,
// "중수도시설 현황",
// "sample_rswtSttn.xlsx",
// "A1:W3",
// );
// }
// }, [rswtSttn.excelList])
useEffect(() => {
rswtSttnSearch(false, rswtrPage, "20", '', '', code.cityCd, code.sggCd);
@@ -400,24 +427,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
useEffect(() => {
pubHasuInit(String(hasuPage), "0");
}, [hasuPage]);
const fetchHasuDetail = async (featureCd: string, data: string) => {
try {
const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON);
const hasuList = rainRes.data.map((item: any) => {
return {
...item,
fctCpc: Number(item.fctCpc) || 0,
ruse: item.ruse === false ? "N" : "Y",
};
});
pbnstHasuRes = hasuList
if (pbnstHasuRes.length > 0) setIsRuseReg({ data: [pbnstHasuRes[0]] });
} catch (error) {
console.error("Error fetching data:", error);
}
};
const hasuCellClick = (index: number | undefined, headId: string) => {
const hasuCellClick = (index: number | undefined) => {
if (index !== undefined && pbnstHasuRes !== undefined) {
onFeatureSelect(pbnstHasuRes[index]);
onClose();
@@ -458,7 +469,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
headName={""}
cellClick={hasuCellClick}
onPageChange={setHasuPage}
children={undefined}
/>
</>
)
@@ -473,21 +483,19 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
tableData={isRuseReg?.data || []}
headlist={pubFacHeadList.slice(0, 4)}
pageSize={1}
total={null}
total={0}
headName={"위치정보"}
cellClick={() => { }}
onPageChange={() => { }}
children={undefined}
/>
<UiTable
tableData={isRuseReg?.data || []}
headlist={pubFacHeadList.slice(4)}
pageSize={1}
total={null}
total={0}
headName={"기본정보"}
cellClick={() => { }}
onPageChange={() => { }}
children={undefined}
/>
</>
)
@@ -509,7 +517,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
label: tab.name,
onClick: () => setActiveTab(tab.id),
}))}
children={undefined}
/>
</div>
<PbnstSttnModal
@@ -533,15 +540,16 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
<UiTable
headName={[]}
tableData={bdstTable || []}
children={<HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />}
headlist={pbnstSttn.pbnstSttHeadList}
pageSize={20}
total={pbnstSttnResCount || 0}
cellClick={(index: number | undefined, headId: string) => {
cellClick={(index: number | undefined) => {
pbnstCellClick(index);
}}
onPageChange={onPageChangeHandler}
/>
>
<HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />
</UiTable>
</>
);
}
@@ -568,7 +576,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
<UiTable
headName={[]}
tableData={rainTable || []}
children={<HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />}
headlist={rainSttn.rainSttHeadList}
pageSize={20}
total={rainSttnResCount}
@@ -576,7 +583,9 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
rainCellClick(index ?? undefined, headId);
}}
onPageChange={setRainPage}
/>
>
<HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />
</UiTable>
</>
);
}
@@ -603,7 +612,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
<UiTable
headName={[]}
tableData={rswtrTable || []}
children={<HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />}
headlist={rswtSttn.rswtSttHeadList}
pageSize={20}
total={rswtSttnResCount}
@@ -611,7 +619,9 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
rswtCellClick(index, headId);
}}
onPageChange={setRswtrPage}
/>
>
<HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />
</UiTable>
</>
);
}
@@ -638,7 +648,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
<UiTable
headName={[]}
tableData={htdflTable || []}
children={<HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />}
headlist={htdflSttn.htdflSttHeadList}
pageSize={20}
total={htdflSttnResCount || 0}
@@ -646,7 +655,9 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
htdflCellClick(index ?? undefined, headId);
}}
onPageChange={setHtdflPage}
/>
>
<HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />
</UiTable>
</>
);
}