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

시군구 조회 해결

Browse Source
This commit is contained in:
mind-one005
2025-07-10 21:02:29 +09:00
parent 01427314b1
commit 55b3155dbf
3 changed files with 58 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/SearchModal.tsx
+32 -37
View File
@@ -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<SearchModalProps> = ({
const [tableCount, setTableCount] = useState<number>(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<SearchModalProps> = ({
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<SelectDataType[]>([{ val: '0', text: '전체', sido: '0' }]);
// 로딩바
const [isLoading, setIsLoading] = useState(false);
// 상세 정보 조회를 위한 상태 추가
const [popupFeature, setPopupFeature] = useState<any>(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<SearchModalProps> = ({
}
};
// 구분(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<SearchModalProps> = ({
set가동개시_종료_월("");
set가동개시_시작_일("");
set가동개시_종료_일("");
setCtpvCd(0);
setSigungu(0);
setCtpvCd('0');
setSigungu('0');
set처리구역("");
setYearFilter({
시작: "",
@@ -247,9 +249,18 @@ const SearchModal: React.FC<SearchModalProps> = ({
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<SearchModalProps> = ({
// 설치년도 범위
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<SearchModalProps> = ({
label="시도"
selectArray={sidos}
value={ctpvCd}
onSelectValue={val => setCtpvCd(Number(val))}
onSelectValue={handleCtpvCdChange}
/>
<SelectBox2
className="w-48"
selectClass="w-48 rounded-lg bg-white truncate"
label="시군구"
selectArray={siguns}
selectArray={filteredSiguns}
value={sigungu}
onSelectValue={val => setSigungu(Number(val))}
onSelectValue={val => setSigungu(String(val))}
/>
</div>
<div className="flex justify-between items-center mb-6">
apps/sn/app/(map-layout)/map/commonStore.ts
+25
View File
@@ -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<CityCdStore>((set) => ({
cityCd: '',
setCityCd: (cityCd: string) => set({ cityCd }),
sidos: [],
setSidos: (sidos: SelectDataType[]) => set({ sidos }),
siguns: [],
setSiguns: (siguns: SelectDataType[]) => set({ siguns }),
}));
apps/sn/app/(map-layout)/map/components/searchModalReportApi.ts
+1 -1
View File
@@ -80,7 +80,7 @@ export const useCityCd = () => {
useEffect(() => {
const fetch = async () => {
const result = await getSggCd();
const result = await getCityCd();
if (result) {
setData(result);
}