diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
index 111b8f1af..542156c2a 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
@@ -162,7 +162,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
● 침입수량 산정결과
침입수량 :
- {inftwtQty}
+ {inftwtQty}
m³/d
@@ -170,7 +170,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
{/* 차트 */}
+ yFieldText2="" yFieldText="유량(m³/h)"/>
{popupOpen && (
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
index 0270b8dec..b788b9cf6 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
@@ -161,17 +161,17 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
● 강우유입수량 분석결과
평균RDII :
- {rdiiQty}
+ {rdiiQty}
m³/d
적용강우량 :
- {rainTotal}
+ {rainTotal}
mm
강우량대비RDII :
- {totalVolume}
+ {totalVolume}
m³/mm
diff --git a/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
index 0459cee1d..48399ac22 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
@@ -1,14 +1,15 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import { Button } from '@common/components';
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
-import { SelectBox } from '@common/business_components/ui';
-import { Button, Input } from '@common/components';
-import React from 'react';
-//import { useDcTree, flattenFolders, useSggCd, useCityCd } from './components/searchModalReportApi';
+import { SelectBox, UiTable } from '@common/business_components/ui';
+import LoadingOverlay from '@/components/ui/LoadingBar';
+
+import { addFileName, flattenFolders, getFileDownload, useCityCd, useDcTree, useSggCd, reportGubuns } from './searchModalReportApi';
import { type SelectDataType } from '../commonStore';
-import { useCityCd, useSggCd } from '../components/searchModalReportApi';
-// import { useBizByFcltStore } from "../../../store/StoreProvider";
-// // 하수도정비 기본계획 보고서
+// 하수도정비 기본계획 보고서
export const reportTableHeadlist = [
{ id: "no", title: "NO" },
{ id: "sido", title: "시도" },
@@ -23,79 +24,180 @@ export const reportTableHeadlist = [
interface BasicTabProps {
open?: boolean;
- gubun: string;
- sidos: SelectDataType[];
- ctpvCd: string | number;
- sigungu: string;
- filteredSiguns: SelectDataType[];
- yearFilter: { start: string; end: string; };
- handleSearch: () => void;
- handleCtpvCdChange: (val: string | number) => void;
- // onOpenChange?: (open: boolean) => void;
- // onFeatureSelect?: (row: any) => void;
- // setTableData?: (data: any[]) => void;
- // setTableCount?: (count: number) => void;
- setYearFilter: (filter: { start: string; end: string }) => void;
- setGubun: (gubun: string) => void;
- setSigungu: (sigungu: string) => void;
}
-const ReportTab: React.FC = ({
- open,
- gubun,
- sidos,
- ctpvCd,
- sigungu,
- filteredSiguns = [{ val: '0', text: '전체', sido: '0' }],
- yearFilter,
- handleSearch,
- handleCtpvCdChange,
- // onOpenChange,
- // onFeatureSelect,
- // setTableData,
- // setTableCount,
- setYearFilter,
- setGubun,
- setSigungu,
-}) => {
+const ReportTab: React.FC = ({ open }) => {
+
+ const [isLoading, setIsLoading] = useState(false);
+ const [isResetPage, setIsResetPage] = useState(false);
+ const [isResetSelection, setIsResetSelection] = useState(false);
+ const [showTable, setShowTable] = useState(false);
+ const [tableData, setTableData] = useState([]);
+ const [tableCount, setTableCount] = useState(0);
+ const [curPage, setCurPage] = useState(1);
+ const [yearFilter, setYearFilter] = useState({ start: "", end: "" });
+ const [ctpvCd, setCtpvCd] = useState('0'); // 하수정비기본계획 report
+ const [sigungu, setSigungu] = useState('0'); // 하수정비기본계획 report
+ const [filteredSiguns, setFilteredSiguns] = useState([{ val: '0', text: '전체', sido: '0' }]);
+ const [gubun, setGubun] = useState(""); // 하수정비기본계획 report
+ const [reportGubun, setReportGubun] = useState("0"); // 하수정비기본계획 report
+
+
+ // 하수정비기본계획 report
+ const sidos = useCityCd();
+ const siguns = useSggCd();
+ const reportOriginData = useDcTree(""); //:Folder[]
+
+ const dynamicHeadlist: { id: string, title: string }[] = reportTableHeadlist;
+
+ useEffect(() => {
+ // filterParams 초기화
+ setCtpvCd('0');
+ setSigungu('0');
+ setReportGubun('0');
+ setYearFilter({ start: "", end: "" });
+ setShowTable(false);
+ setTableData([]);
+ setTableCount(0);
+ setCurPage(1); // 페이지를 1로 초기화
+ setIsResetPage(true); // 페이지를 초기화
+ setIsResetSelection(true); // 선택 초기화
+ }, [open]);
+
+ // 페이지 변경 시마다 데이터 fetch
+ useEffect(() => {
+ // showTable이 true일 때만 fetch (최초 렌더 방지)
+ setIsResetPage(false);
+ setIsResetSelection(true); // 선택 초기화
+ if (showTable) fetchFilteredData();
+ }, [curPage]);
+
+ const handleCtpvCdChange = (val: string | number) => { // 하수도정비기본계획.시도
+ const sidoOption = sidos.find((n) => n.val === val);
+ setCtpvCd(String(val));
+ if (val !== '0') {
+ const filterSiguns = siguns.filter(item => item.sido === sidoOption?.text);
+ filterSiguns.unshift({ val: '0', text: '전체', sido: '0' });
+ setFilteredSiguns(filterSiguns);
+ }
+ setSigungu("0");
+ setGubun("");
+ setYearFilter({ start: "", end: "", });
+ }
+
+
+ // 조회 버튼 클릭 시 1페이지로 이동 및 데이터 초기화
+ const handleSearch = () => {
+ setCurPage(1); // 페이지를 1로 초기화
+ fetchFilteredData();
+ setIsResetPage(true); // 페이지를 초기화
+ setIsResetSelection(false); // 선택 초기화
+ setShowTable(true);
+ };
+
+ // 하수도정비기본계획 테이블 cellClick 핸들러
+ const handleReportCellClick = (index: number | undefined ) => {
+ console.log(index);
+ if (typeof index === "number" && tableData[index]) {
+ const reportData = tableData[index];
+ const fileName = reportData.fileName;
+ const filePath = reportData.filePath;
+ if (reportData.fileSn !== "") {
+ getFileDownload(reportData.fileSn, fileName, filePath);
+ }
+ }
+ };
+
+ // 검색 API 호출 함수
+ const fetchFilteredData = async () => {
+ setIsLoading(true); // 로딩 시작
+ setIsResetSelection(true); // 선택 초기화
+
+ try {
+ //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.sigungu === sigunguOption?.text);
+ }
+ if (reportGubun !== "0") { // 보고서구분검색
+ const reportGubunOption = reportGubuns.find((n) => n.val === reportGubun);
+ filterReportData = filterReportData.filter(item => item.reportGubun === reportGubunOption?.text);
+ }
+
+ if (yearFilter.start != "" && yearFilter.end == "") //승인년도검색
+ filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear >= yearFilter.start + "년" : null);
+ if (yearFilter.start == "" && yearFilter.end != "")
+ filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear <= yearFilter.end + "년" : null);
+ if (yearFilter.start != "" && yearFilter.end != "") {
+ filterReportData = filterReportData.filter(item => {
+ return (item.approvalYear) ? item.approvalYear >= yearFilter.start + "년" && item.approvalYear <= yearFilter.end + "년" : null;
+ });
+ }
+ if (gubun !== "") { // 구분검색
+ filterReportData = filterReportData.filter(item => (item.plantZoneGugun) ? String(item.plantZoneGugun).includes(String(gubun)) : null);
+ }
+ console.log('report count:', filterReportData.length);
+ setTableCount(filterReportData.length || 0);
+ filterReportData = filterReportData.slice((curPage - 1) * 10, curPage * 10); // paging
+ filterReportData = filterReportData?.map((item, index) => ({ ...item, no: (curPage - 1) * 10 + index + 1 }));
+ //const fileList = await getDcFile("CLS20250530000041");
+ addFileName(filterReportData).then(data => {
+ filterReportData = data;
+ setTableData(filterReportData || []);
+ });
+ setTableData(filterReportData || []);
+
+ setShowTable(true);
+ } catch (err) {
+ console.error('API ERROR:', err);
+ setTableData([]);
+ } finally {
+ setIsLoading(false); // 로딩 종료
+ }
+ };
return (
+ <>
-
- setSigungu(String(val))}
+ label="시군구" selectArray={filteredSiguns}
+ value={sigungu} onSelectValue={val => setSigungu(String(val))}
selectContentClass="z-[101]"
/>
-
+ {/*
{ setGubun(e.target.value); }}
+ /> */}
+
setReportGubun(String(val))}
+ selectContentClass="z-[101]" labelClass='whitespace-nowrap text-xl text-gray-600 pr-2'
/>
- setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
- startLabel="승인년도"
- endLabel=""
+ startLabel="승인년도" endLabel=""
/>
{/* 조회 버튼 */}
@@ -103,6 +205,28 @@ const ReportTab: React.FC = ({
+
+
+ {/* 테이블2 영역 (가로/세로 스크롤 가능) */}
+
+
+ {
+ return (<>조회 결과 ({tableCount.toLocaleString('ko-KR')})건);
+ })()
+ }
+ tableData={tableData}
+ headlist={dynamicHeadlist}
+ pageSize={10}
+ total={tableCount}
+ cellClick={handleReportCellClick}
+ onPageChange={setCurPage}
+ resetPageNo={isResetPage}
+ resetSelection={isResetSelection}
+ />
+
+
{/* 테이블2 영역 (가로/세로 스크롤 가능) */}
@@ -706,7 +629,7 @@ const SearchModal: React.FC
= ({
headlist={dynamicHeadlist}
pageSize={10}
total={tableCount}
- cellClick={activeTab === 'report' ? handleReportCellClick : handleBasicCellClick}
+ cellClick={handleBasicCellClick}
onPageChange={setCurPage}
resetPageNo={isResetPage}
resetSelection={isResetSelection}
diff --git a/apps/sn/app/(map-layout)/map/components/searchModalReportApi.ts b/apps/sn/app/(map-layout)/map/searchModal/searchModalReportApi.ts
similarity index 85%
rename from apps/sn/app/(map-layout)/map/components/searchModalReportApi.ts
rename to apps/sn/app/(map-layout)/map/searchModal/searchModalReportApi.ts
index 8cb349056..c12021499 100644
--- a/apps/sn/app/(map-layout)/map/components/searchModalReportApi.ts
+++ b/apps/sn/app/(map-layout)/map/searchModal/searchModalReportApi.ts
@@ -31,6 +31,14 @@ const isYear = (value: string): boolean => {
return /^[0-9]{4}년$/.test(value);
};
+export const reportGubuns = [{val: '0', text: '전체'}, {val: '1', text: '보고서'}
+ , {val: '2', text: '요약보고서'} , {val: '3', text: '부록'}, {val: '4', text: '기타'}];
+
+/**
+ * Flatten a hierarchical folder structure into a flat array.
+ * @param data - The hierarchical folder data to flatten.
+ * @returns An array of flattened folders with their paths and levels.
+ */
export function flattenFolders(data: Folder[]): FlattenedFolder[] {
const result: FlattenedFolder[] = [];
const exceptNodeNm = ["부분","통합","전체"];
@@ -72,15 +80,10 @@ export function flattenFolders(data: Folder[]): FlattenedFolder[] {
}
data.forEach((root) => traverse(root, {}, 0));
- console.log(result.slice(0, 10));
return result;
}
export const getDcTree = async (clsfSystmNm:string) => {
- //const cityName = encodeURIComponent(clsfSystmNm);
- const queryString = 'clsfSystmNm='+clsfSystmNm;
- console.log("getDcTree queryString:", queryString);
- //const result = await getDcData(`/api/v1/dc/clsf${queryString ? `?${queryString}` : ''}`);
const result = await getDcData("/api/v1/dc/clsf?clsfSystmNm=" + clsfSystmNm);
return result;
};
@@ -110,13 +113,8 @@ export const addFileName = async (data:FlattenedFolder[]) => {
data.map(async (item) => {
const filenameArr:ReportDataFile[] = await getDcFile(String(item.clsfSystmSn));
const f = filenameArr[0];
- //console.log("clsfSystmSn:", item.clsfSystmSn, "f:", f);
const result = {...item, fileName:f?.fileTitle, regDate:f?.regDt, fileSn:f?.fileSn, filePath:f?.filePath};
- // if (f !== undefined && f.fileSn !== "") {
- // const fprcs = await getDcFileprcs(f?.fileSn);
- // if (fprcs.length>0)
- // result.filePath = fprcs[0].filePath;
- // }
+
return result;
})
);
@@ -124,7 +122,6 @@ export const addFileName = async (data:FlattenedFolder[]) => {
}
export const getDcFileprcs = async (fileSn:string) => {
const queryString = 'fileSn='+fileSn;
- console.log("getDcTree queryString:", queryString);
const result = await getDcData(`/api/v1/dc/fileprcs${queryString ? `?${queryString}` : ''}`);
return result;
};
@@ -151,9 +148,6 @@ export const fileDownload = (data:Blob, fileName:string) => { // Blob데이터
window.URL.revokeObjectURL(url);
}
export const getFileDownload = async (fileSn:string, fileName:string, filePath:string) => {
- //const fileprcsData = await getDcFileprcs(fileSn); // filePath 조회
- //if (fileprcsData?.length === 0 ) { alert("filePath 조회 오류"); }
- //if (fileprcsData[0].filePath === "") alert("filePath 정보 없으므로 다운로드 불가");
if (filePath === "") alert("filePath 정보 없으므로 다운로드 불가:filesn"+ fileSn);
const blobData = await getDcFileDownload(filePath); // 실제 다운로드 API
fileDownload(blobData, fileName);
@@ -165,12 +159,13 @@ export const getCityCd = async (): Promise => {
if (!response.ok) throw new Error(`시도 데이터 오류: ${response.status}`);
const res = await response.json();
const city = res.data;
- const cityCd = city.map((item: any) => ({
+ let citys:SelectDataType[] = city.map((item: {adstDstrCd:string, sido:string}) => ({
val: item.adstDstrCd,
text: item.sido,
}));
- cityCd.unshift({ val: '0', text: '전체' });
- return cityCd;
+ citys = citys.sort((a:SelectDataType, b:SelectDataType) => a.text.localeCompare(b.text));
+ citys.unshift({ val: '0', text: '전체' });
+ return citys;
} catch (error) {
console.error('시도 데이터를 가져오는데 실패했습니다:', error);
return [{ val: '0', text: '전체', sido: '0' }];
@@ -186,9 +181,9 @@ export const useSggCd = () => {
if (result) {
setData(result);
}
+ console.log("useSggCd호출");
};
fetch();
- console.log("useSggCd호출");
}, []);
return data;
};
@@ -200,7 +195,7 @@ export const getSggCd = async (): Promise => {
if (!response.ok) throw new Error(`시군구 데이터 오류: ${response.status}`);
const res = await response.json();
const sgg = res.data;
- const sggCd = sgg.map((item: any) => ({
+ const sggCd = sgg.map((item: {adstDstrCd:string, sido:string, gugun:string}) => ({
val: item.adstDstrCd,
sido: item.sido,
text: item.gugun,
@@ -222,9 +217,9 @@ export const useCityCd = () => {
if (result) {
setData(result);
}
+ console.log("useCityCd호출");
};
fetch();
- console.log("useCityCd호출");
}, []);
return data;
};
diff --git a/apps/sn/app/components/lib/api/index.ts b/apps/sn/app/components/lib/api/index.ts
index 0c0c88973..ab8936329 100644
--- a/apps/sn/app/components/lib/api/index.ts
+++ b/apps/sn/app/components/lib/api/index.ts
@@ -87,7 +87,6 @@ export const deleteData = async (url: string, data?: object): Promise => {
// RSONE DC API 호출
export const getDcData = async (url: string, data?: object): Promise => {
- console.log(url);
const res = await fetch('/dc-service' + url, {
method: "GET",
});
diff --git a/packages/common/business_components/src/ui/date_month_picker/index.tsx b/packages/common/business_components/src/ui/date_month_picker/index.tsx
index 1b97d9ce1..a8da0ff0e 100644
--- a/packages/common/business_components/src/ui/date_month_picker/index.tsx
+++ b/packages/common/business_components/src/ui/date_month_picker/index.tsx
@@ -18,6 +18,7 @@ type MonthPickerProps = {
selectClass?: string;
readOnly?: boolean;
startYear?: number; // 시작 연도 props 추가
+ yearReadOnly?: boolean;
};
// yyyyMM → Date 객체
@@ -39,6 +40,7 @@ export const DateMonthPicker = ({
selectClass,
readOnly = false,
startYear,
+ yearReadOnly = false,
}: MonthPickerProps) => {
const [open, setOpen] = useState(false);
@@ -78,6 +80,7 @@ export const DateMonthPicker = ({
currentMonth={parsedDate}
onMonthChange={handleSelect}
startYear={startYear}
+ yearReadOnly={yearReadOnly}
/>
diff --git a/packages/common/business_components/src/ui/date_month_picker/mothPicker.tsx b/packages/common/business_components/src/ui/date_month_picker/mothPicker.tsx
index 6afbde5e6..b5bc10ba5 100644
--- a/packages/common/business_components/src/ui/date_month_picker/mothPicker.tsx
+++ b/packages/common/business_components/src/ui/date_month_picker/mothPicker.tsx
@@ -29,9 +29,10 @@ export type MonthPickerProps = {
shouldClosePopover?: boolean
) => void;
startYear?: number;
+ yearReadOnly?: boolean;
};
-export function MonthPicker({ currentMonth, onMonthChange, startYear }: MonthPickerProps) {
+export function MonthPicker({ currentMonth, onMonthChange, startYear, yearReadOnly }: MonthPickerProps) {
const today = startOfToday();
const currentYear = today.getFullYear();
@@ -73,6 +74,7 @@ const selectedYear = parseInt(yearFromProp);