refactor: searchModal '하수도정비기본계획보고서' 탭 UI 컴포넌트 분리

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;

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<BasicTabProps> = ({
+  open,
+  gubun,
+  sidos,
+  ctpvCd,
+  sigungu,
+  filteredSiguns = [{ val: '0', text: '전체', sido: '0' }],
+  yearFilter,
+  handleSearch,
+  handleCtpvCdChange,
+  // onOpenChange,
+  // onFeatureSelect,
+  // setTableData,
+  // setTableCount,
+  setYearFilter,
+  setGubun,
+  setSigungu,
+}) => {
+
+
+  return (
+    <div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[10vh]">
+      <div className="flex items-center mb-3">
+        <SelectBox
+          className="w-[150px] mr-8"
+          selectClass="rounded-lg bg-white"
+          label="시도"
+          selectArray={sidos}
+          value={ctpvCd}
+          onSelectValue={handleCtpvCdChange}
+          selectContentClass="z-[101]"
+        />
+        <SelectBox
+          className="w-48"
+          selectClass="w-48 rounded-lg bg-white truncate"
+          label="시군구"
+          selectArray={filteredSiguns}
+          value={sigungu}
+          onSelectValue={val => setSigungu(String(val))}
+          selectContentClass="z-[101]"
+        />
+      </div>
+      <div className="flex items-center mb-6">
+        <label className="inline-block w-auto whitespace-nowrap text-xl text-gray-600 mr-2">구분</label>
+        <Input
+          className='!text-xl w-[100px] placeholder:text-center mr-8'
+          placeholder="입력"
+          value={gubun}
+          onChange={(e) => { setGubun(e.target.value); }}
+        />
+        <YearRangeSelectBox
+          start={yearFilter.start}
+          end={yearFilter.end}
+          onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
+          startLabel="승인년도"
+          endLabel=""
+        />
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(ReportTab);

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<SearchModalProps> = ({
   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<SearchModalProps> = ({
   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<SelectDataType[]>([{ 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<SearchModalProps> = ({
   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<SearchModalProps> = ({
     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<SearchModalProps> = ({
         )}
         {/* 하수도정비기본계획보고서 탭 */}
         {activeTab === 'report' && (
-          <div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[10vh]">
-            <div className="flex items-center mb-3">
-              <SelectBox
-                className="w-[150px] mr-8"
-                selectClass="rounded-lg bg-white"
-                label="시도"
-                selectArray={sidos}
-                value={ctpvCd}
-                onSelectValue={handleCtpvCdChange}
-                selectContentClass="z-[101]"
-              />
-              <SelectBox
-                className="w-48"
-                selectClass="w-48 rounded-lg bg-white truncate"
-                label="시군구"
-                selectArray={filteredSiguns}
-                value={sigungu}
-                onSelectValue={val => setSigungu(String(val))}
-                selectContentClass="z-[101]"
-              />
-            </div>
-            <div className="flex items-center mb-6">
-              <label className="inline-block w-auto whitespace-nowrap text-xl text-gray-600 mr-2">구분</label>
-              <Input
-                className='!text-xl w-[100px] placeholder:text-center mr-8'
-                placeholder="입력"
-                value={gubun}
-                onChange={(e) => { setGubun(e.target.value); }}
-              />
-              <YearRangeSelectBox
-                start={yearFilter.start}
-                end={yearFilter.end}
-                onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
-                startLabel="승인년도"
-                endLabel=""
-              />
-              {/* 조회 버튼 */}
-              <div className="flex-1 flex justify-end">
-                <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
-              </div>
-            </div>
-          </div>
+          <ReportTab
+            open={open}
+            gubun={gubun}
+            sidos={sidos}
+            ctpvCd={ctpvCd}
+            sigungu={sigungu}
+            filteredSiguns={filteredSiguns}
+            yearFilter={yearFilter}
+            handleSearch={handleSearch}
+            handleCtpvCdChange={handleCtpvCdChange}
+            setYearFilter={setYearFilter}
+            setGubun={setGubun}
+            setSigungu={setSigungu}
+          />
         )}
         {/* </UITab2> */}
       </UITab>