diff --git a/apps/sn/app/(map-layout)/map/SearchModal.tsx b/apps/sn/app/(map-layout)/map/SearchModal.tsx index c9130eb9e..e14b7cb8b 100644 --- a/apps/sn/app/(map-layout)/map/SearchModal.tsx +++ b/apps/sn/app/(map-layout)/map/SearchModal.tsx @@ -12,14 +12,10 @@ import { MsSwagePplCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2, MsSwageMhlCol2, Exc import LoadingOverlay from '@/components/ui/LoadingBar'; //import { useDcTree, flattenFolders, useSggCd, useCityCd } from './components/searchModalReportApi'; import { getDcTree,flattenFolders, useSggCd, useCityCd } from './components/searchModalReportApi'; +import { useCityCdStore, type SelectDataType } from './commonStore'; const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`; -type SelectDataType = { - text: string; - val: string; - sido?: string; // 시도 코드 (선택 사항) -} // 탭 const TABS = [ { val: "basic", text: "기본정보" }, @@ -105,8 +101,8 @@ const SearchModal: React.FC = ({ const [tableCount, setTableCount] = useState(0); const [curPage, setCurPage] = useState(1); const [basicType, setBasicType] = useState(BASIC_TYPES[0]?.val ?? ""); - const [ctpvCd, setCtpvCd] = useState(0); - const [sigungu, setSigungu] = useState(0); + const [ctpvCd, setCtpvCd] = useState('0'); + const [sigungu, setSigungu] = useState('0'); const [swageProcessingZone, set처리구역] = useState(""); // 날짜 상태 선언 const [시작1, set시작1] = useState(""); @@ -130,19 +126,16 @@ const SearchModal: React.FC = ({ const [가동개시_종료_일, set가동개시_종료_일] = useState(''); const [fromDate, setFromDate] = useState(() => { const date = new Date(); date.setDate(date.getDate() - 7); return date }) const [toDate, setToDate] = useState(new Date()) + const [filteredSiguns, setFilteredSiguns] = useState([{ val: '0', text: '전체', sido: '0' }]); // 로딩바 const [isLoading, setIsLoading] = useState(false); // 상세 정보 조회를 위한 상태 추가 const [popupFeature, setPopupFeature] = useState(null); + //const { cityCd: ctpvCd, setCityCd:setCtpvCd, sidos, setSidos, siguns, setSiguns } = useCityCdStore(); const sidos = useCityCd(); const siguns = useSggCd(); - // const reportOriginData = getDcTree('경기도').then(data => { - // console.log('reportOriginData:', data); - // return data; - // }); - //const reportData = flattenFolders(reportOriginData); // 오늘 날짜 구하기 const today = new Date(); @@ -177,7 +170,16 @@ const SearchModal: React.FC = ({ } }; - // 구분(basicType)이 바뀔 때마다 queryParams, filterParams 초기화 + const handleCtpvCdChange = (val: string|number) => { + const sidoOption = sidos.find((n) => n.val === val); + setCtpvCd(String(val)); + if (val !== '0' && sidoOption) { + const filterSiguns = siguns.filter(item => item.sido === sidoOption.text); + filterSiguns.unshift({ val: '0', text: '전체', sido: '0' }); + setFilteredSiguns(filterSiguns); + } + } + useEffect(() => { // filterParams 초기화 // setFilterParams({}); @@ -193,8 +195,8 @@ const SearchModal: React.FC = ({ set가동개시_종료_월(""); set가동개시_시작_일(""); set가동개시_종료_일(""); - setCtpvCd(0); - setSigungu(0); + setCtpvCd('0'); + setSigungu('0'); set처리구역(""); setYearFilter({ 시작: "", @@ -247,9 +249,18 @@ const SearchModal: React.FC = ({ if (activeTab === 'report') { const reportOriginData = await getDcTree('경기도'); const reportData = flattenFolders(reportOriginData); + let filterReportData = reportData; + if (ctpvCd !== "0") { + const sidoOption = sidos.find((n) => n.val === ctpvCd); + filterReportData = filterReportData.filter(item => item.sido === sidoOption?.text); + } + if (sigungu !== "0") { + const sigunguOption = filteredSiguns.find((n) => n.val === sigungu); + filterReportData = filterReportData.filter(item => item.sido === sigunguOption?.text); + } console.log('report count:', reportData.length); - setTableData(reportData || []); - setTableCount(reportData.length || 0); + setTableData(filterReportData || []); + setTableCount(filterReportData.length || 0); } else { console.log('API URL:', `${API_URL}/v1/fclts?${queryParams.toString()}`); const res = await axios.get(`${API_URL}/v1/fclts?${queryParams.toString()}`); @@ -458,23 +469,7 @@ const SearchModal: React.FC = ({ // 설치년도 범위 if (ctpvCd) cqlFilters.push(`ctpv_cd='${ctpvCd}'`); if (sigungu) cqlFilters.push(`sgg_cd='${sigungu}'`); - if (swageProcessingZone) cqlFilters.push(`swageProcessingZone='${swageProcessingZone}'`); - if (변수1) cqlFilters.push(`처리구역코드='${변수1}'`); - const startDate = getDateString( - yearFilter.시작, - 가동개시_시작_월, - 가동개시_시작_일, - "19000101", - ); - const endDate = getDateString( - yearFilter.종료, - 가동개시_종료_월, - 가동개시_종료_일, - `${todayYear}${todayMonth}${todayDate}`, - ); - cqlFilters.push( - `설치시작년도 >= '${startDate}' and 설치시작년도 <= '${endDate}'`, - ); + return cqlFilters; }; @@ -1043,15 +1038,15 @@ const SearchModal: React.FC = ({ label="시도" selectArray={sidos} value={ctpvCd} - onSelectValue={val => setCtpvCd(Number(val))} + onSelectValue={handleCtpvCdChange} /> setSigungu(Number(val))} + onSelectValue={val => setSigungu(String(val))} />
diff --git a/apps/sn/app/(map-layout)/map/commonStore.ts b/apps/sn/app/(map-layout)/map/commonStore.ts new file mode 100644 index 000000000..ff903e1e7 --- /dev/null +++ b/apps/sn/app/(map-layout)/map/commonStore.ts @@ -0,0 +1,25 @@ +import { create } from 'zustand'; + +export type SelectDataType = { + text: string; + val: string; + sido?: string; // 시도 코드 (선택 사항) +} + +interface CityCdStore { + cityCd: string; + setCityCd: (cityCd: string) => void; + sidos: SelectDataType[]; + setSidos: (sidos: SelectDataType[]) => void; + siguns : SelectDataType[]; + setSiguns: (siguns: SelectDataType[]) => void; +} + +export const useCityCdStore = create((set) => ({ + cityCd: '', + setCityCd: (cityCd: string) => set({ cityCd }), + sidos: [], + setSidos: (sidos: SelectDataType[]) => set({ sidos }), + siguns: [], + setSiguns: (siguns: SelectDataType[]) => set({ siguns }), +})); diff --git a/apps/sn/app/(map-layout)/map/components/searchModalReportApi.ts b/apps/sn/app/(map-layout)/map/components/searchModalReportApi.ts index 0f2305ef5..6d1494aab 100644 --- a/apps/sn/app/(map-layout)/map/components/searchModalReportApi.ts +++ b/apps/sn/app/(map-layout)/map/components/searchModalReportApi.ts @@ -80,7 +80,7 @@ export const useCityCd = () => { useEffect(() => { const fetch = async () => { - const result = await getSggCd(); + const result = await getCityCd(); if (result) { setData(result); }