From 1778c07ef94ecc3107f451a4d1f55cc28fbff2a2 Mon Sep 17 00:00:00 2001 From: swcho Date: Thu, 24 Jul 2025 11:12:12 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20searchModal=20'=ED=95=98=EC=88=98?= =?UTF-8?q?=EB=8F=84=EC=A0=95=EB=B9=84=EA=B8=B0=EB=B3=B8=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EB=B3=B4=EA=B3=A0=EC=84=9C'=20=ED=83=AD=20UI=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/searchModal/operationTab.tsx | 39 +++++ .../map/searchModal/reportTab.tsx | 109 ++++++++++++++ .../map/searchModal/searchModal.tsx | 134 +++--------------- 3 files changed, 165 insertions(+), 117 deletions(-) create mode 100644 apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx diff --git a/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx index 53ba2da45..e119e2407 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx @@ -37,6 +37,45 @@ export const BIZ_TY_CD_SELECT_ARRAY = BIZ_TY_CD.map(item => ({ val: item.lwpoCd, text: item.lwpoCdNm, })); +// 운영정보 - 사업 현황 +export const operationTableHeadlist = [ + { id: "bizNm", title: "사업명" }, + { id: "flfmtBgngYmd", title: "수행시작일자" }, + { id: "flfmtEndYmd", title: "수행종료일자" }, + { id: "flfmtYr", title: "수행년도" }, + { id: "bizTyCd", title: "사업유형" }, + { id: "bizAmt", title: "사업금액" }, +]; +// 운영정보 - 보수 및 갱신 결과표 +export const operationMaintenanceTableHeadlist = [ + { id: "fcltMngNo", title: "관리번호" }, + { id: "usgCd", title: "용도" }, + { id: "mqltCd", title: "재질" }, + { id: "pdmt", title: "관경(mm)" }, + { id: "prlg", title: "연장(m)" }, + { id: "instlYmd", title: "설치일자" }, + // { id: "instlYmd", title: "사업구분" }, +]; +// 운영정보 - 청소 및 준설 결과표 +export const operationCleaningTableHeadlist = [ + { id: "fcltMngNo", title: "관리번호" }, + { id: "usgCd", title: "용도" }, + { id: "mqltCd", title: "재질" }, + { id: "pdmt", title: "관경(mm)" }, + { id: "prlg", title: "연장(m)" }, + { id: "instlYmd", title: "설치일자" }, +]; +// 운영정보 - 점검 및 진단 결과표 +export const operationInspectionTableHeadlist = [ + { id: "fcltMngNo", title: "관리번호" }, + { id: "usgCd", title: "용도" }, + { id: "mqltCd", title: "재질" }, + { id: "pdmt", title: "관경(mm)" }, + { id: "prlg", title: "연장(m)" }, + { id: "instlYmd", title: "설치일자" }, + { id: "strct_stat_grd", title: "구조적 상태등급" }, + { id: "oper_stat_grd", title: "운영적 상태등급" }, +]; interface OperationTabProps { open: boolean; diff --git a/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx new file mode 100644 index 000000000..9dac307e9 --- /dev/null +++ b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx @@ -0,0 +1,109 @@ +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 { 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: "시도" }, + { id: "sigungu", title: "시군구" }, + { id: "approvalYear", title: "승인년도" }, + { id: "plantZoneGugun", title: "구분" }, + { id: "reportGubun", title: "보고서구분" }, + { id: "fileName", title: "파일명" }, + { id: "regDate", title: "등록일자" }, +]; + + +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, +}) => { + + + return ( +
+
+ + setSigungu(String(val))} + selectContentClass="z-[101]" + /> +
+
+ + { setGubun(e.target.value); }} + /> + setYearFilter({ ...yearFilter, start: range.start, end: range.end })} + startLabel="승인년도" + endLabel="" + /> + {/* 조회 버튼 */} +
+ +
+
+
+ ); +}; + +export default React.memo(ReportTab); \ No newline at end of file diff --git a/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx index 9290e5d10..67fad2a41 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx @@ -13,7 +13,8 @@ import { MS_SWAGE_PPL_USE_CODES, MS_SWAGE_PPL_CODES, MS_SWAGE_MHL_USE_CODES } fr // import { useBizByFcltStore } from "../../../store/StoreProvider"; import { getData } from "@/components/lib/api"; import BasicTab, { BASIC_TYPES } from './basicTab'; -import OperationTab, { WORK_TYPES, BIZ_SE_CD, BIZ_TY_CD, BIZ_TY_CD_SELECT_ARRAY } from './operationTab'; +import OperationTab, { WORK_TYPES, BIZ_SE_CD, BIZ_TY_CD, BIZ_TY_CD_SELECT_ARRAY, operationTableHeadlist, operationMaintenanceTableHeadlist, operationCleaningTableHeadlist, operationInspectionTableHeadlist } from './operationTab'; +import ReportTab, { reportTableHeadlist } from './reportTab'; const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`; @@ -24,57 +25,6 @@ const TABS = [ { val: "report", text: "하수도정비기본계획보고서" }, ]; -// 운영정보 - 사업 현황 -const operationTableHeadlist = [ - { id: "bizNm", title: "사업명" }, - { id: "flfmtBgngYmd", title: "수행시작일자" }, - { id: "flfmtEndYmd", title: "수행종료일자" }, - { id: "flfmtYr", title: "수행년도" }, - { id: "bizTyCd", title: "사업유형" }, - { id: "bizAmt", title: "사업금액" }, -]; -// 운영정보 - 보수 및 갱신 결과표 -const operationMaintenanceTableHeadlist = [ - { id: "fcltMngNo", title: "관리번호" }, - { id: "usgCd", title: "용도" }, - { id: "mqltCd", title: "재질" }, - { id: "pdmt", title: "관경(mm)" }, - { id: "prlg", title: "연장(m)" }, - { id: "instlYmd", title: "설치일자" }, - // { id: "instlYmd", title: "사업구분" }, -]; -// 운영정보 - 청소 및 준설 결과표 -const operationCleaningTableHeadlist = [ - { id: "fcltMngNo", title: "관리번호" }, - { id: "usgCd", title: "용도" }, - { id: "mqltCd", title: "재질" }, - { id: "pdmt", title: "관경(mm)" }, - { id: "prlg", title: "연장(m)" }, - { id: "instlYmd", title: "설치일자" }, -]; -// 운영정보 - 점검 및 진단 결과표 -const operationInspectionTableHeadlist = [ - { id: "fcltMngNo", title: "관리번호" }, - { id: "usgCd", title: "용도" }, - { id: "mqltCd", title: "재질" }, - { id: "pdmt", title: "관경(mm)" }, - { id: "prlg", title: "연장(m)" }, - { id: "instlYmd", title: "설치일자" }, - { id: "strct_stat_grd", title: "구조적 상태등급" }, - { id: "oper_stat_grd", title: "운영적 상태등급" }, -]; -// 하수도정비 기본계획 보고서 -const reportTableHeadlist = [ - { id: "no", title: "NO" }, - { id: "sido", title: "시도" }, - { id: "sigungu", title: "시군구" }, - { id: "approvalYear", title: "승인년도" }, - { id: "plantZoneGugun", title: "구분" }, - { id: "reportGubun", title: "보고서구분" }, - { id: "fileName", title: "파일명" }, - { id: "regDate", title: "등록일자" }, -]; - // 날짜 조합 함수 const getDateString = ( @@ -116,9 +66,7 @@ const SearchModal: React.FC = ({ const [sgg, setSgg] = useState(0); const [ctpvCd, setCtpvCd] = useState('0'); const [sigungu, setSigungu] = useState('0'); - //const [swageProcessingZone, set처리구역] = useState(""); const [gubun, setGubun] = useState(""); // 하수정비기본계획 report - // 날짜 상태 선언 const [start1, setStart1] = useState(""); const [start2, setStart2] = useState(""); const [end1, setEnd1] = useState(""); @@ -129,12 +77,7 @@ const SearchModal: React.FC = ({ const [var4, setVar4] = useState(""); // 시작, 종료 const [yearFilter, setYearFilter] = useState({ start: "", end: "" }); - - // 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 [dynamicHeadlist, setDynamicHeadlist] = useState<{ id: string, title: string }[]>([]); - // const [dynamicHeadlist2, setDynamicHeadlist2] = useState<{ id: string, title: string }[]>([]); // 로딩바 const [isLoading, setIsLoading] = useState(false); @@ -150,21 +93,6 @@ const SearchModal: React.FC = ({ const todayMonth = (today.getMonth() + 1).toString().padStart(2, "0"); const todayDate = today.getDate().toString().padStart(2, "0"); - // const isDateInRanges = (date: Date) => { - // const standYear = parseInt(fromDate.getFullYear().toString()); - // const dateRanges = []; - // dateRanges.push({ - // start: new Date(standYear, 0, 1), - // end: new Date(standYear, 11, 31) - // }); - - // return dateRanges.some(range => { - // const start = new Date(range.start); - // const end = new Date(range.end); - // return date >= start && date <= end; - // }); - // }; - const dynamicHeadlist: { id: string, title: string }[] = useMemo(() => { if (activeTab === 'basic') { if (basicType === 'tb_ms_swage_ppl') return MsSwagePplCol2; @@ -182,7 +110,7 @@ const SearchModal: React.FC = ({ return []; }, [activeTab, basicType, workType]); - const dynamicHeadlist2 = useMemo(() => { + const dynamicHeadlist2: { id: string, title: string }[] = useMemo(() => { if (activeTab === 'operation') { if (workType === '200') return operationMaintenanceTableHeadlist; if (workType === '201') return operationMaintenanceTableHeadlist; @@ -687,48 +615,20 @@ const SearchModal: React.FC = ({ )} {/* 하수도정비기본계획보고서 탭 */} {activeTab === 'report' && ( -
-
- - setSigungu(String(val))} - selectContentClass="z-[101]" - /> -
-
- - { setGubun(e.target.value); }} - /> - setYearFilter({ ...yearFilter, start: range.start, end: range.end })} - startLabel="승인년도" - endLabel="" - /> - {/* 조회 버튼 */} -
- -
-
-
+ )} {/* */}