feat:

- '자체 입력정보' -> '입력 정보'로 수정 - 용도 코드, 재질 코드 텍스트로 매핑 (일단 하드코딩)
2025-07-16 11:37:13 +09:00
parent 8de9760099
commit a403113bbc
8 changed files with 69 additions and 76 deletions
@@ -1,7 +1,6 @@
-import FeatureClickEventPopup from './featureClickEventPopup';
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-import { UiModal, UiTable, DatePickerRange } from '@common/business_components/ui';
+import { UiModal, UiTable, DatePickerRange, SelectBox } from '@common/business_components/ui';
 import { Button, Input, Label } from '@common/components';
 import { UiTable2 } from '@common/business_components/ui/table/index-2';
 import { UITab2 } from '@common/business_components/ui/tab/index-2';
@@ -11,8 +10,9 @@ import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
 import { MsSwagePplCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2, MsSwageMhlCol2, ExclnSewagePumpCol2, stofcbrCol2 } from './components/common/table';
 import LoadingOverlay from '@/components/ui/LoadingBar';
 //import {  useDcTree, flattenFolders, useSggCd, useCityCd } from './components/searchModalReportApi';
-import { useDcTree,flattenFolders, useSggCd, useCityCd, addFileName, getFileDownload } from './components/searchModalReportApi';
+import { useDcTree, flattenFolders, useSggCd, useCityCd, addFileName, getFileDownload } from './components/searchModalReportApi';
 import { useCityCdStore, type SelectDataType } from './commonStore';
+import { MS_SWAGE_PPL_USE_CODES, MS_SWAGE_PPL_CODES } from '../map/components/common/table';

 const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`;

@@ -95,8 +95,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 [gubun, setGubun] = useState(""); // 하수정비기본계획 report
  // 날짜 상태 선언
@@ -104,7 +104,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
  const [시작2, set시작2] = useState("");
  const [종료1, set종료1] = useState("");
  const [종료2, set종료2] = useState("");
-  const [변수1, set변수1] = useState("");
+  const [변수1, set변수1] = useState();
  const [변수2, set변수2] = useState("");
  const [변수3, set변수3] = useState("");
  const [변수4, set변수4] = useState("");
@@ -121,7 +121,7 @@ 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 [filteredSiguns, setFilteredSiguns] = useState<SelectDataType[]>([{ val: '0', text: '전체', sido: '0' }]);

  // 로딩바 
  const [isLoading, setIsLoading] = useState(false);
@@ -129,7 +129,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
  const sidos = useCityCd();
  const siguns = useSggCd();
  const reportOriginData = useDcTree(""); //:Folder[]
-  
+
  // 오늘 날짜 구하기
  const today = new Date();
  const todayYear = today.getFullYear().toString();
@@ -162,7 +162,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
  else if (basicType === 'tb_ms_swage_pmstn') dynamicHeadlist = ExclnSewagePumpCol2; // 하수펌프장
  else if (basicType === 'tb_ms_stofcbr') dynamicHeadlist = stofcbrCol2; // 우수토실

-  
+
  // 조회 버튼 클릭 시 1페이지로 이동하도록 수정
  const handleSearch = () => {
    setCurPage(1); // 페이지를 1로 초기화
@@ -187,17 +187,17 @@ const SearchModal: React.FC<SearchModalProps> = ({
    }
  };

-  const handleCtpvCdChange = (val: string|number) => { // 하수도정비기본계획.시도
+  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'  });
+      filterSiguns.unshift({ val: '0', text: '전체', sido: '0' });
      setFilteredSiguns(filterSiguns);
-    } 
+    }
    setSigungu("0");
    setGubun("");
-    setYearFilter({시작: "",종료: "",});
+    setYearFilter({ 시작: "", 종료: "", });
  }

  useEffect(() => {
@@ -237,7 +237,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
    }
  }, [curPage]);

-  
+
  // 검색 API 호출 함수
  const fetchFilteredData = async () => {
    setIsLoading(true); // 로딩 시작
@@ -272,27 +272,27 @@ const SearchModal: React.FC<SearchModalProps> = ({
        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 (yearFilter.시작 != "" && yearFilter.종료 == "") //승인년도검색
-          filterReportData = filterReportData.filter(item => (item.approvalYear)? item.approvalYear >= yearFilter.시작+"년" : null);
-        if (yearFilter.시작 == "" && yearFilter.종료 != "") 
-          filterReportData = filterReportData.filter(item => (item.approvalYear)? item.approvalYear <= yearFilter.종료+"년" : null);
+          filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear >= yearFilter.시작 + "년" : null);
+        if (yearFilter.시작 == "" && yearFilter.종료 != "")
+          filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear <= yearFilter.종료 + "년" : null);
        if (yearFilter.시작 != "" && yearFilter.종료 != "") {
          filterReportData = filterReportData.filter(item => {
-            return (item.approvalYear)? item.approvalYear >= yearFilter.시작+"년" && item.approvalYear <= yearFilter.종료+"년": null;
+            return (item.approvalYear) ? item.approvalYear >= yearFilter.시작 + "년" && item.approvalYear <= yearFilter.종료 + "년" : null;
          });
        }
        if (gubun !== "") { // 구분검색
-          filterReportData = filterReportData.filter(item => (item.plantZoneGugun)? String(item.plantZoneGugun).includes(String(gubun)) : null);
+          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}));
+        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;
@@ -447,7 +447,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
      cqlFilters.push(`daily_prcs_cpct BETWEEN ${시작1} AND ${종료1}`);
    else if (시작1) cqlFilters.push(`daily_prcs_cpct >= ${시작1}`);
    else if (종료1) cqlFilters.push(`daily_prcs_cpct <= ${종료1}`);
-    // 우수양수능력 범위
+    // 양수능력 범위
    if (시작2 && 종료2)
      cqlFilters.push(`excln_wpmp_ablt BETWEEN ${시작2} AND ${종료2}`);
    else if (시작2) cqlFilters.push(`excln_wpmp_ablt >= ${시작2}`);
@@ -514,7 +514,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
    // 설치년도 범위
    if (ctpvCd) cqlFilters.push(`ctpv_cd='${ctpvCd}'`);
    if (sigungu) cqlFilters.push(`sgg_cd='${sigungu}'`);
-    
+
    return cqlFilters;
  };

@@ -583,38 +583,32 @@ const SearchModal: React.FC<SearchModalProps> = ({
                      }}
                    />
                  </div> */}
-                  {/* 용도코드 */}
-                  <Label className="mr-2 w-auto text-xl text-gray-600">
-                    용도코드
-                  </Label>
-                  <Input
-                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
-                    placeholder="입력"
+                  {/* 용도 */}
+                  <SelectBox
+                    className="w-60 mr-8"
+                    selectClass="rounded-lg bg-white text-xl"
+                    label="용도"
+                    selectArray={MS_SWAGE_PPL_USE_CODES}
                    value={변수1}
-                    onChange={(e) => {
-                      // 숫자만 입력 허용
-                      const val = e.target.value.replace(/[^0-9]/g, "");
-                      set변수1(val);
+                    onSelectValue={(val) => {
+                      set변수1(String(val));
                    }}
                  />
-                  {/* 재질코드 */}
-                  <Label className="mr-2 w-auto text-xl text-gray-600">
-                    재질코드
-                  </Label>
-                  <Input
-                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
-                    placeholder="입력"
+                  {/* 재질 */}
+                  <SelectBox
+                    className="w-60 mr-8"
+                    selectClass="rounded-lg bg-white text-xl"
+                    label="재질"
+                    selectArray={MS_SWAGE_PPL_CODES}
                    value={변수2}
-                    onChange={(e) => {
-                      // 숫자만 입력 허용
-                      const val = e.target.value.replace(/[^0-9]/g, "");
-                      set변수2(val);
+                    onSelectValue={(val) => {
+                      set변수2(String(val));
                    }}
                  />
                </div>
                <div className="flex items-center mb-2">
                  {/* 행정읍면동코드 */}
-                  <Label className="mr-2 w-auto text-xl text-gray-600">
+                  {/* <Label className="mr-2 w-auto text-xl text-gray-600">
                    행정읍면동코드
                  </Label>
                  <Input
@@ -626,7 +620,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                      const val = e.target.value.replace(/[^0-9]/g, "");
                      set변수3(val);
                    }}
-                  />
+                  /> */}
                  {/* 관경 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
                    관경(mm)
@@ -899,9 +893,9 @@ const SearchModal: React.FC<SearchModalProps> = ({
                      set종료1(val);
                    }}
                  />
-                  {/* 우수양수능력 - 우수맨홀 */}
+                  {/* 양수능력 - 우수맨홀 */}
                  <Label className="mr-2 w-auto text-xl text-gray-600">
-                    우수양수능력
+                    양수능력
                  </Label>
                  <Input
                    className="w-[100px] !text-xl placeholder:text-center"
@@ -1058,21 +1052,21 @@ const SearchModal: React.FC<SearchModalProps> = ({
            {/* 시도, 시군구, 하수처리구역 한 줄 */}
            <div className="mb-6 flex items-center">
              <SelectBox2
-                  className="w-[150px] mr-8"
-                  selectClass="rounded-lg bg-white"
-                  label="시도"
-                  selectArray={sidos}
-                  value={ctpvCd}
-                  onSelectValue={handleCtpvCdChange}
-                />
-                <SelectBox2
-                  className="w-48"
-                  selectClass="w-48 rounded-lg bg-white truncate"
-                  label="시군구"
-                  selectArray={filteredSiguns}
-                  value={sigungu}
-                  onSelectValue={val => setSigungu(String(val))}
-                />
+                className="w-[150px] mr-8"
+                selectClass="rounded-lg bg-white"
+                label="시도"
+                selectArray={sidos}
+                value={ctpvCd}
+                onSelectValue={handleCtpvCdChange}
+              />
+              <SelectBox2
+                className="w-48"
+                selectClass="w-48 rounded-lg bg-white truncate"
+                label="시군구"
+                selectArray={filteredSiguns}
+                value={sigungu}
+                onSelectValue={val => setSigungu(String(val))}
+              />
            </div>
            <div className="flex justify-between items-center mb-6">
              <div className="flex items-center gap-4">
@@ -1095,7 +1089,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                  endLabel=""
                />
              </div>
-              
+
              {/* 조회 버튼 중앙 정렬 */}
              <div className="absolute bottom-4 right-4 mr-2">
                <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
@@ -1133,7 +1127,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
            pageSize={tableData.length < 10 ? tableData.length : 10}
            total={tableCount}
            children={undefined}
-            cellClick={(activeTab!=='report')?handleCellClick:handleReportCellClick}
+            cellClick={(activeTab !== 'report') ? handleCellClick : handleReportCellClick}
            onPageChange={setCurPage}
            resetPageNo={false}
            cur={curPage}
@@ -6,8 +6,8 @@ export const MsSwagePplCol = [
  { id: 'mapsht_no', title: '도엽번호' },
  { id: 'pdmt', title: '관경(mm)' },
  { id: 'prlg', title: '연장(m)' },
-  { id: 'usg_cd', title: '용도코드' },
-  { id: 'mqlt_cd', title: '재질코드' },
+  { id: 'usg_cd', title: '용도' },
+  { id: 'mqlt_cd', title: '재질' },
  { id: 'avg_grdn', title: '평균구배(m/m)' },
  { id: 'drtw_mltv_area', title: '오수배수면적(m²)' },
  { id: 'excln_mltv_area', title: '우수배수면적(m²)' },
@@ -378,7 +378,7 @@ export const MsSwageMhlCol = [
  // { id: 'fclty_shp_cd', title: '시설물형태코드' },
  // { id: 'mhl_knd_cd', title: '맨홀종류코드' },
  { id: 'swage_mh_diam', title: '하수맨홀구경(mm)' },
-  { id: 'mqlt_cd', title: '재질코드' },
+  { id: 'mqlt_cd', title: '재질' },
  { id: 'wdth_len', title: '가로길이(m)' },
  { id: 'vrtc_len', title: '세로길이(m)' },
  // { id: 'ang_dir', title: '표고' },
@@ -60,12 +60,11 @@ const MsSwagePpl = ({ featureData, onSaveClick }: { featureData: any, onSaveClic
  return (
    <>
      <VerticalTable
-        headName='자체 입력정보'
+        headName='입력정보'
        tableData={featureData ? [formData] : []}
        headlist={inputColumn}
        pageSize={20}
        total={0}
-        children={undefined}
        cellClick={undefined}
        isEditable={true}
        onPageChange={function (page: number): void {
@@ -184,7 +184,7 @@ const Ssc = ({ featureData, isMainSsc, rainMeasureData, onSaveClick }: {
    <div>
      {!isMainSsc && (
        <VerticalTable
-          headName='자체 입력정보'
+          headName='입력정보'
          tableData={featureData ? [formData] : []}
          headlist={inputColumn}
          pageSize={0}
@@ -38,7 +38,7 @@ const sewagePump = ({ featureData, isDrtwSewagePump, onSaveClick }: { featureDat

  return (
    <VerticalTable
-      headName='자체 입력정보'
+      headName='입력정보'
      tableData={featureData ? [formData] : []}
      headlist={isDrtwSewagePump ? drtwInputColumn : exclnInputColumn}
      pageSize={0}
@@ -32,7 +32,7 @@ const Smh = ({ featureData, onSaveClick }: { featureData: any, onSaveClick?: ()

  return (
    <VerticalTable
-      headName='자체 입력정보'
+      headName='입력정보'
      tableData={featureData ? [formData] : []}
      headlist={inputColumn}
      pageSize={20}
@@ -10,7 +10,7 @@ const StormWaterPump = ({ featureData }: { featureData: Record<string, any> }) =
  const filteredData = featureData && Object.entries(featureData).filter(([key]) => validKey.includes(key)).reduce((obj: Record<string, any>, [key, value]) => { obj[key] = value; return obj; }, {});
  return (
    <VerticalTable
-      headName='자체 입력정보'
+      headName='입력정보'
      tableData={[filteredData]}
      headlist={inputColumn}
      pageSize={0}