refactor: basicTab 구분 별로 UI 컴포넌트 분리

apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx

@@ -4,6 +4,11 @@ import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
 import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
 import { SelectBox } from '@common/business_components/ui';
 import { Button, Input, Label } from '@common/components';
+import SwagePpl from './swagePpl';
+import SwagePrcsFclt from './swagePrcsFclt';
+import SwagePrcsZone from './swagePrcsZone';
+import SwageMhl from './swageMhl';
+import SwagePmstn from './swagePmstn';
 
 // 기본정보 '구분' 선택 목록
 export const BASIC_TYPES = [
@@ -92,346 +97,83 @@ const BasicTab: React.FC<BasicTabProps> = ({
       </div>
       {/* 분기처리: 하수관로 */}
       {basicType === "tb_ms_swage_ppl" && (
-        <div className="mb-6">
-          <div className="mb-2 flex items-center">
-            {/* 설치년도 */}
-            <YearRangeSelectBox
-              start={yearFilter.start}
-              end={yearFilter.end}
-              onChange={(range) =>
-                setYearFilter({
-                  ...yearFilter,
-                  start: range.start,
-                  end: range.end,
-                })
-              }
-              startLabel="설치년도"
-              endLabel=""
-            />
-            {/* 용도 */}
-            <SelectBox
-              className="ml-8 w-60 mr-8 z-[102]"
-              selectClass="rounded-lg bg-white text-xl"
-              label="용도"
-              selectArray={MS_SWAGE_PPL_USE_CODES}
-              value={var1}
-              onSelectValue={(val) => {
-                setVar1(String(val));
-              }}
-              selectContentClass="z-[101]"
-            />
-            {/* 재질 */}
-            <SelectBox
-              className="w-60 mr-8 z-[102]"
-              selectClass="rounded-lg bg-white text-xl"
-              label="재질"
-              selectArray={MS_SWAGE_PPL_CODES}
-              value={var2}
-              onSelectValue={(val) => {
-                setVar2(String(val));
-              }}
-              selectContentClass="z-[101]"
-            />
-            {/* 관경 */}
-            <Label className="mr-2 w-auto text-xl text-gray-600">관경(mm)</Label>
-            <Input
-              className="w-[60px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={var1}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setVar1(val);
-              }}
-            />
-            <span className="mx-2 text-xl font-semibold">~</span>
-            <Input
-              className="mr-8 w-[60px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={end1}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setEnd1(val);
-              }}
-            />
-            {/* 연장 */}
-            <Label className="mr-2 w-auto text-xl text-gray-600">연장(m)</Label>
-            <Input
-              className="w-[60px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={start2}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setStart2(val);
-              }}
-            />
-            <span className="mx-2 text-xl font-semibold">~</span>
-            <Input
-              className="mr-8 w-[60px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={end2}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setEnd2(val);
-              }}
-            />
-            {/* 조회 버튼 */}
-            <div className="flex-1 flex justify-end">
-              <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
-            </div>
-          </div>
-        </div>
+        <SwagePpl
+          var1={var1}
+          var2={var2}
+          start1={start1}
+          end1={end1}
+          yearFilter={yearFilter}
+          setVar1={setVar1}
+          setVar2={setVar2}
+          setStart1={setStart1}
+          setEnd1={setEnd1}
+          setYearFilter={setYearFilter}
+          handleSearch={handleSearch}
+        />
       )}
       {/* 분기처리: 하수처리시설 */}
       {basicType === "tb_il_swage_prcs_fclt" && (
-        <div className="mb-3">
-          {/* 가동개시일자 */}
-          <div className="mb-2 flex items-center">
-            <YearRangeSelectBox
-              start={yearFilter.start}
-              end={yearFilter.end}
-              onChange={(range) =>
-                setYearFilter({
-                  ...yearFilter,
-                  start: range.start,
-                  end: range.end,
-                })
-              }
-              startLabel="가동개시일자"
-              endLabel=""
-            />
-            {/* 시설용량 */}
-            <Label className="ml-8 mr-2 w-auto text-xl text-gray-600">시설용량(㎥/d)</Label>
-            <Input
-              className="w-[60px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={start1}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setStart1(val);
-              }}
-            />
-            <span className="mx-2 text-xl font-semibold">~</span>
-            <Input
-              className="mr-8 w-[60px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={end1}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setEnd1(val);
-              }}
-            />
-            {/* 처리구역 면적 */}
-            <Label className="mr-2 w-auto text-xl text-gray-600">처리구역 면적(m²)</Label>
-            <Input
-              className="w-[60px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={start2}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setStart2(val);
-              }}
-            />
-            <span className="mx-2 text-xl font-semibold">~</span>
-            <Input
-              className="mr-8 w-[60px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={end2}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setEnd2(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="입력"
-              value={var1}
-              onChange={(e) => {
-                setVar1(e.target.value);
-              }}
-            />
-            {/* 조회 버튼 */}
-            <div className="flex-1 flex justify-end">
-              <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
-            </div>
-          </div>
-        </div>
+        <SwagePrcsFclt
+          var1={var1}
+          start1={start1}
+          start2={start2}
+          end1={end1}
+          end2={end2}
+          yearFilter={yearFilter}
+          setVar1={setVar1}
+          setStart1={setStart1}
+          setStart2={setStart2}
+          setEnd1={setEnd1}
+          setEnd2={setEnd2}
+          setYearFilter={setYearFilter}
+          handleSearch={handleSearch}
+        />
       )}
       {/* 분기처리: 하수처리구역 */}
       {basicType === "tb_ms_swage_prcs_zone" && (
-        <div className="mb-3">
-          <div className="mb-2 flex items-center">
-            <SidoSigunguSelectBox
-              sido={city}
-              sigungu={sgg}
-              onSidoChange={(sidoId) => {
-                setCity(sidoId);
-                setSgg(0);
-              }}
-              onSigunguChange={setSgg}
-            />
-            <Label className="mr-2 w-auto text-xl text-gray-600">하수처리구역명</Label>
-            <Input
-              className="mr-8 w-[100px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={var1}
-              onChange={(e) => {
-                setVar1(e.target.value);
-              }}
-            />
-            <Label className="mr-2 w-auto text-xl text-gray-600">하수처리시설명</Label>
-            <Input
-              className='!text-xl w-[120px] placeholder:text-center mr-8'
-              placeholder="입력"
-              value={var2}
-              onChange={(e) => {
-                setVar2(e.target.value);
-              }}
-            />
-            {/* 조회 버튼 */}
-            <div className="flex-1 flex justify-end">
-              <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
-            </div>
-          </div>
-        </div>
+        <SwagePrcsZone
+          var1={var1}
+          var2={var2}
+          city={city}
+          sgg={sgg}
+          setVar1={setVar1}
+          setVar2={setVar2}
+          setCity={setCity}
+          setSgg={setSgg}
+          handleSearch={handleSearch}
+        />
       )}
       {/* 분기처리: 하수맨홀 */}
       {basicType === "tb_ms_swage_mhl" && (
-        <div className="mb-3">
-          <div className="mb-2 flex items-center">
-            {/* 설치년도 */}
-            <YearRangeSelectBox
-              start={yearFilter.start}
-              end={yearFilter.end}
-              onChange={(range) =>
-                setYearFilter({
-                  ...yearFilter,
-                  start: range.start,
-                  end: range.end,
-                })
-              }
-              startLabel="설치년도"
-              endLabel=""
-            />
-            {/* 용도 */}
-            <SelectBox
-              className="ml-8 w-60 mr-8 z-[102]"
-              selectClass="rounded-lg bg-white text-xl"
-              label="용도"
-              selectArray={MS_SWAGE_MHL_USE_CODES}
-              value={var1}
-              onSelectValue={(val) => {
-                setVar1(String(val));
-              }}
-              selectContentClass="z-[101]"
-            />
-            {/* 하수맨홀 구경 */}
-            <Label className="mr-2 w-auto text-xl text-gray-600">구경(mm)</Label>
-            <Input
-              className="w-[100px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={start1}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setStart1(val);
-              }}
-            />
-            <span className="mx-2 text-xl font-semibold">~</span>
-            <Input
-              className="mr-8 w-[100px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={end1}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setEnd1(val);
-              }}
-            />
-            {/* 조회 버튼 */}
-            <div className="flex-1 flex justify-end">
-              <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
-            </div>
-          </div>
-        </div>
+        <SwageMhl
+          var1={var1}
+          start1={start1}
+          end1={end1}
+          yearFilter={yearFilter}
+          setVar1={setVar1}
+          setStart1={setStart1}
+          setEnd1={setEnd1}
+          setYearFilter={setYearFilter}
+          handleSearch={handleSearch}
+        />
       )}
       {/* 분기처리: 하수펌프장 */}
       {basicType === "tb_ms_swage_pmstn" && (
-        <div className="mb-3">
-          {/* 설치년도 */}
-          <div className="flex items-center mb-2">
-            <YearRangeSelectBox
-              start={yearFilter.start}
-              end={yearFilter.end}
-              onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
-              startLabel="설치년도"
-              endLabel=""
-            />
-            {/* 일일처리용량 - 오수맨홀 */}
-            <Label className="ml-8 mr-2 w-auto text-xl text-gray-600">일일처리용량(㎥)</Label>
-            <Input
-              className="w-[100px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={start1}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setStart1(val);
-              }}
-            />
-            <span className="mx-2 text-xl font-semibold">~</span>
-            <Input
-              className="mr-8 w-[100px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={end1}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setEnd1(val);
-              }}
-            />
-            {/* 양수능력 - 우수맨홀 */}
-            <Label className="mr-2 w-auto text-xl text-gray-600">
-              양수능력(m²/d)
-            </Label>
-            <Input
-              className="w-[100px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={start2}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setStart2(val);
-              }}
-            />
-            <span className="mx-2 text-xl font-semibold">~</span>
-            <Input
-              className="mr-8 w-[100px] !text-xl placeholder:text-center"
-              placeholder="입력"
-              value={end2}
-              onChange={(e) => {
-                // 숫자만 입력 허용
-                const val = e.target.value.replace(/[^0-9]/g, "");
-                setEnd2(val);
-              }}
-            />
-            {/* 조회 버튼 */}
-            <div className="flex-1 flex justify-end">
-              <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
-            </div>
-          </div>
-        </div>
+        <SwagePmstn
+          start1={start1}
+          start2={start2}
+          end1={end1}
+          end2={end2}
+          yearFilter={yearFilter}
+          setStart1={setStart1}
+          setStart2={setStart2}
+          setEnd1={setEnd1}
+          setEnd2={setEnd2}
+          setYearFilter={setYearFilter}
+          handleSearch={handleSearch}
+        />
       )}
-      {/* 분기처리: 우수토실? 토구?  */}
+      {/* 분기처리: 우수토실 */}
       {basicType === "tb_ms_stofcbr" && (
         <div className="mb-3">
           {/* 설치년도 */}

apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx

@@ -1,19 +1,16 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import axios from 'axios';
-import { UiModal, UiTable, SelectBox, UITab } from '@common/business_components/ui';
-import { Button, Input, Label } from '@common/components';
-import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
-import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
-import { MsSwagePplCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2, MsSwageMhlCol2, ExclnSewagePumpCol2, stofcbrCol2 } from '../components/common/table';
 import LoadingOverlay from '@/components/ui/LoadingBar';
+import { UiModal, UITab, UiTable } from '@common/business_components/ui';
+import axios from 'axios';
+import React, { useEffect, useMemo, useState } from 'react';
+import { ExclnSewagePumpCol2, MsSwageMhlCol2, MsSwagePplCol2, stofcbrCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2 } from '../components/common/table';
 //import {  useDcTree, flattenFolders, useSggCd, useCityCd } 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, MS_SWAGE_MHL_USE_CODES } from '../components/common/table';
+import { type SelectDataType } from '../commonStore';
+import { MS_SWAGE_PPL_CODES, MS_SWAGE_PPL_USE_CODES } from '../components/common/table';
+import { addFileName, flattenFolders, getFileDownload, useCityCd, useDcTree, useSggCd } from '../components/searchModalReportApi';
 // 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, operationTableHeadlist, operationMaintenanceTableHeadlist, operationCleaningTableHeadlist, operationInspectionTableHeadlist } from './operationTab';
+import OperationTab, { BIZ_TY_CD, operationCleaningTableHeadlist, operationInspectionTableHeadlist, operationMaintenanceTableHeadlist, operationTableHeadlist, WORK_TYPES } from './operationTab';
 import ReportTab, { reportTableHeadlist } from './reportTab';
 
 const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`;

apps/sn/app/(map-layout)/map/searchModal/stofcbr.tsx

@@ -0,0 +1,38 @@
+// 우수토실
+
+import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { Button } from '@common/components';
+import React from 'react';
+
+interface StofcbrProps {
+  yearFilter: { start: string; end: string };
+  setYearFilter: (filter: { start: string; end: string }) => void;
+  handleSearch: () => void;
+}
+
+const Stofcbr: React.FC<StofcbrProps> = ({
+  yearFilter,
+  setYearFilter,
+  handleSearch,
+}) => {
+  return (
+    <div className="mb-3">
+      {/* 설치년도 */}
+      <div className="flex items-center mb-2">
+        <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(Stofcbr);

apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx

@@ -0,0 +1,94 @@
+// 하수맨홀
+
+import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { Button, Input, Label } from '@common/components';
+import React from 'react';
+import { MS_SWAGE_MHL_USE_CODES } from '../components/common/table';
+import { SelectBox } from '@common/business_components/ui';
+
+
+interface SwageMhlProps {
+  var1: string;
+  start1: string;
+  end1: string;
+  yearFilter: { start: string; end: string };
+  setVar1: (value: string) => void;
+  setStart1: (value: string) => void;
+  setEnd1: (value: string) => void;
+  setYearFilter: (filter: { start: string; end: string }) => void;
+  handleSearch: () => void;
+}
+
+const SwageMhl: React.FC<SwageMhlProps> = ({
+  var1,
+  start1,
+  end1,
+  yearFilter,
+  setVar1,
+  setStart1,
+  setEnd1,
+  setYearFilter,
+  handleSearch,
+}) => {
+  return (
+    <div className="mb-3">
+      <div className="mb-2 flex items-center">
+        {/* 설치년도 */}
+        <YearRangeSelectBox
+          start={yearFilter.start}
+          end={yearFilter.end}
+          onChange={(range) =>
+            setYearFilter({
+              ...yearFilter,
+              start: range.start,
+              end: range.end,
+            })
+          }
+          startLabel="설치년도"
+          endLabel=""
+        />
+        {/* 용도 */}
+        <SelectBox
+          className="ml-8 w-60 mr-8 z-[102]"
+          selectClass="rounded-lg bg-white text-xl"
+          label="용도"
+          selectArray={MS_SWAGE_MHL_USE_CODES}
+          value={var1}
+          onSelectValue={(val) => {
+            setVar1(String(val));
+          }}
+          selectContentClass="z-[101]"
+        />
+        {/* 하수맨홀 구경 */}
+        <Label className="mr-2 w-auto text-xl text-gray-600">구경(mm)</Label>
+        <Input
+          className="w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={start1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setStart1(val);
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd1(val);
+          }}
+        />
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(SwageMhl);

apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx

@@ -0,0 +1,102 @@
+// 하수펌프장
+
+import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { Button, Input, Label } from '@common/components';
+import React from 'react';
+
+interface SwagePmstnProps {
+  start1: string;
+  start2: string;
+  end1: string;
+  end2: string;
+  yearFilter: { start: string; end: string };
+  setStart1: (value: string) => void;
+  setStart2: (value: string) => void;
+  setEnd1: (value: string) => void;
+  setEnd2: (value: string) => void;
+  setYearFilter: (filter: { start: string; end: string }) => void;
+  handleSearch: () => void;
+}
+
+const SwagePmstn: React.FC<SwagePmstnProps> = ({
+  start1,
+  start2,
+  end1,
+  end2,
+  yearFilter,
+  setStart1,
+  setStart2,
+  setEnd1,
+  setEnd2,
+  setYearFilter,
+  handleSearch,
+}) => {
+  return (
+    <div className="mb-3">
+      <div className="flex items-center mb-2">
+        {/* 설치년도 */}
+        <YearRangeSelectBox
+          start={yearFilter.start}
+          end={yearFilter.end}
+          onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
+          startLabel="설치년도"
+          endLabel=""
+        />
+        {/* 일일처리용량 - 오수맨홀 */}
+        <Label className="ml-8 mr-2 w-auto text-xl text-gray-600">일일처리용량(㎥)</Label>
+        <Input
+          className="w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={start1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setStart1(val);
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd1(val);
+          }}
+        />
+        {/* 양수능력 - 우수맨홀 */}
+        <Label className="mr-2 w-auto text-xl text-gray-600">
+          양수능력(m²/d)
+        </Label>
+        <Input
+          className="w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={start2}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setStart2(val);
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end2}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd2(val);
+          }}
+        />
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(SwagePmstn);

apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx

@@ -0,0 +1,132 @@
+// 하수관로
+
+import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { SelectBox } from '@common/business_components/ui';
+import { Button, Input, Label } from '@common/components';
+import React from 'react';
+import { MS_SWAGE_PPL_CODES, MS_SWAGE_PPL_USE_CODES } from '../components/common/table';
+
+interface SwagePplProps {
+  var1: string;
+  var2: string;
+  start1: string;
+  end1: string;
+  yearFilter: { start: string; end: string };
+  setVar1: (value: string) => void;
+  setVar2: (value: string) => void;
+  setStart1: (value: string) => void;
+  setEnd1: (value: string) => void;
+  setYearFilter: (filter: { start: string; end: string }) => void;
+  handleSearch: () => void;
+}
+
+const SwagePpl: React.FC<SwagePplProps> = ({
+  var1,
+  var2,
+  start1,
+  end1,
+  yearFilter,
+  setVar1,
+  setVar2,
+  setStart1,
+  setEnd1,
+  setYearFilter,
+  handleSearch,
+}) => {
+  return (
+    <div className="mb-6">
+      <div className="mb-2 flex items-center">
+        {/* 설치년도 */}
+        <YearRangeSelectBox
+          start={yearFilter.start}
+          end={yearFilter.end}
+          onChange={(range) =>
+            setYearFilter({
+              ...yearFilter,
+              start: range.start,
+              end: range.end,
+            })
+          }
+          startLabel="설치년도"
+          endLabel=""
+        />
+        {/* 용도 */}
+        <SelectBox
+          className="ml-8 w-60 mr-8 z-[102]"
+          selectClass="rounded-lg bg-white text-xl"
+          label="용도"
+          selectArray={MS_SWAGE_PPL_USE_CODES}
+          value={var1}
+          onSelectValue={(val) => {
+            setVar1(String(val));
+          }}
+          selectContentClass="z-[101]"
+        />
+        {/* 재질 */}
+        <SelectBox
+          className="w-60 mr-8 z-[102]"
+          selectClass="rounded-lg bg-white text-xl"
+          label="재질"
+          selectArray={MS_SWAGE_PPL_CODES}
+          value={var2}
+          onSelectValue={(val) => {
+            setVar2(String(val));
+          }}
+          selectContentClass="z-[101]"
+        />
+        {/* 관경 */}
+        <Label className="mr-2 w-auto text-xl text-gray-600">관경(mm)</Label>
+        <Input
+          className="w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={var1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setVar1(val);
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd1(val);
+          }}
+        />
+        {/* 연장 */}
+        <Label className="mr-2 w-auto text-xl text-gray-600">연장(m)</Label>
+        <Input
+          className="w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={start1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setStart1(val);
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd1(val);
+          }}
+        />
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(SwagePpl);

apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx

@@ -0,0 +1,121 @@
+// 하수처리시설
+
+import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { Button, Input, Label } from '@common/components';
+import React from 'react';
+
+interface SwagePrcsFcltProps {
+  var1: string;
+  start1: string;
+  start2: string;
+  end1: string;
+  end2: string;
+  yearFilter: { start: string; end: string };
+  setVar1: (value: string) => void;
+  setStart1: (value: string) => void;
+  setStart2: (value: string) => void;
+  setEnd1: (value: string) => void;
+  setEnd2: (value: string) => void;
+  setYearFilter: (filter: { start: string; end: string }) => void;
+  handleSearch: () => void;
+}
+
+const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
+  var1,
+  start1,
+  start2,
+  end1,
+  end2,
+  yearFilter,
+  setVar1,
+  setStart1,
+  setStart2,
+  setEnd1,
+  setEnd2,
+  setYearFilter,
+  handleSearch,
+}) => {
+  return (
+    <div className="mb-3">
+      {/* 가동개시일자 */}
+      <div className="mb-2 flex items-center">
+        <Label className="mr-2 w-auto text-xl text-gray-600">가동개시일자</Label>
+        <YearRangeSelectBox
+          start={yearFilter.start}
+          end={yearFilter.end}
+          onChange={(range) =>
+            setYearFilter({
+              ...yearFilter,
+              start: range.start,
+              end: range.end,
+            })
+          }
+          startLabel=""
+          endLabel=""
+        />
+        {/* 시설용량 */}
+        <Label className="ml-8 mr-2 w-auto text-xl text-gray-600">시설용량(㎥/d)</Label>
+        <Input
+          className="w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={start1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setStart1(val);
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end1}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd1(val);
+          }}
+        />
+        {/* 처리구역 면적 */}
+        <Label className="mr-2 w-auto text-xl text-gray-600">처리구역 면적(m²)</Label>
+        <Input
+          className="w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={start2}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setStart2(val);
+          }}
+        />
+        <span className="mx-2 text-xl font-semibold">~</span>
+        <Input
+          className="mr-8 w-[60px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={end2}
+          onChange={(e) => {
+            // 숫자만 입력 허용
+            const val = e.target.value.replace(/[^0-9]/g, "");
+            setEnd2(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="입력"
+          value={var1}
+          onChange={(e) => {
+            setVar1(e.target.value);
+          }}
+        />
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(SwagePrcsFclt);

apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx

@@ -0,0 +1,69 @@
+// 하수처리구역
+
+import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
+import { Button, Input, Label } from '@common/components';
+import React from 'react';
+
+interface swagePrcsZoneProps {
+  var1: string;
+  var2: string;
+  city: number;
+  sgg: number;
+  setVar1: (value: string) => void;
+  setVar2: (value: string) => void;
+  setCity: (value: number) => void;
+  setSgg: (value: number) => void;
+  handleSearch: () => void;
+}
+
+const swagePrcsZone: React.FC<swagePrcsZoneProps> = ({
+  var1,
+  var2,
+  city,
+  sgg,
+  setVar1,
+  setVar2,
+  setCity,
+  setSgg,
+  handleSearch,
+}) => {
+  return (
+    <div className="mb-3">
+      <div className="mb-2 flex items-center">
+        <SidoSigunguSelectBox
+          sido={city}
+          sigungu={sgg}
+          onSidoChange={(sidoId) => {
+            setCity(sidoId);
+            setSgg(0);
+          }}
+          onSigunguChange={setSgg}
+        />
+        <Label className="mr-2 w-auto text-xl text-gray-600">하수처리구역명</Label>
+        <Input
+          className="mr-8 w-[100px] !text-xl placeholder:text-center"
+          placeholder="입력"
+          value={var1}
+          onChange={(e) => {
+            setVar1(e.target.value);
+          }}
+        />
+        <Label className="mr-2 w-auto text-xl text-gray-600">하수처리시설명</Label>
+        <Input
+          className='!text-xl w-[120px] placeholder:text-center mr-8'
+          placeholder="입력"
+          value={var2}
+          onChange={(e) => {
+            setVar2(e.target.value);
+          }}
+        />
+        {/* 조회 버튼 */}
+        <div className="flex-1 flex justify-end">
+          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(swagePrcsZone);