etc: 중간 커밋

2025-06-12 18:57:49 +09:00
parent bde01e8039
commit 66126bbe62
89 changed files with 1584 additions and 192 deletions
@@ -1,4 +1,4 @@
-const BASE_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || '';
+const BASE_URL = 'http://con.mind-one.co.kr:11083/sewerage-service/api';

 export const postData = async (url: string, data: object): Promise<any> => {
    const options: RequestInit = {
@@ -7,20 +7,24 @@ interface ModalProps {
    title?: string;
    children: React.ReactNode;
    closeModal: () => void;
+    saveModal?: () => void
 }

-const Modal: React.FC<ModalProps> = ({ isModalOpen, setIsModalOpen, title, children, closeModal }) => {
+const Modal: React.FC<ModalProps> = ({ isModalOpen, setIsModalOpen, title, children, closeModal,saveModal }) => {
    return (
        <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-            <DialogOverlay className='z-[200]'/>
-            <DialogContent className="w-auto max-w-[1200px] h-auto max-h-[450px] overflow-auto z-[1000]">
+            <DialogOverlay className='z-[200]' />
+            <DialogContent className="w-auto max-w-[1200px] min-w-[400px] min-h-[150px] h-auto max-h-[450px] overflow-auto z-[1000]">
                {title ? <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                </DialogHeader> : null}
                {children}
                <DialogFooter>
                    <DialogClose>
+                        <div className='flex justify-end gap-2'>
+                        {saveModal ? <button className="px-4 py-2 bg-primary text-white rounded" onClick={saveModal}>저장</button> : null}
                        <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closeModal}>닫기</button>
+                        </div>
                    </DialogClose>
                </DialogFooter>
            </DialogContent>
@@ -4,16 +4,29 @@ import { useEffect, useState } from "react";

 type UiTableProps = {
    headName: React.ReactNode | undefined;
+    tableName1?: React.ReactNode | undefined;
    tableData: { [key: string]: string | number | boolean | object }[];
    headlist: UiHeadProps[];
    pageSize: number;
    total: number;
-    children: React.ReactNode | undefined;
+    children: Record<string, React.ReactNode> | undefined;
    cellClick: ((index: number | undefined, headId: string) => void) | undefined;
    onPageChange: (page: number) => void;
    className?: string;
    resetPageNo?: boolean;
    isEditable?: boolean;
+    tableName2?: React.ReactNode | undefined;
+    tableData2?: { [key: string]: string | number | boolean | object }[];
+    headlist2?: UiHeadProps[];
+    pageSize2?: number;
+    total2?: number;
+    children2?: Record<string, React.ReactNode> | undefined;
+    cellClick2?: ((index: number | undefined, headId: string) => void) | undefined;
+    onPageChange2?: (page: number) => void;
+    className2?: string;
+    resetPageNo2?: boolean;
+    isEditable2?: boolean;
+    showSecondTable?: boolean;
 };

 type UiHeadProps = {
@@ -25,17 +38,30 @@ type UiHeadProps = {
 };

 export function VerticalTable({
+    headName,
+    tableName1,
    tableData,
    headlist,
    pageSize,
    total,
    children,
-    headName,
    cellClick,
    onPageChange,
    className = "",
    resetPageNo = false,
    isEditable = false,
+    tableName2,
+    tableData2,
+    headlist2,
+    pageSize2,
+    total2,
+    children2,
+    cellClick2,
+    onPageChange2,
+    className2 = "",
+    resetPageNo2 = false,
+    isEditable2 = false,
+    showSecondTable = false,
 }: UiTableProps) {
    const [cur, setCur] = useState<number>(1);
    const [formData, setFormData] = useState<{ [key: string]: string | number | boolean }>({});
@@ -45,7 +71,7 @@ export function VerticalTable({
            onPageChange(1);
        }
    }, [onPageChange, resetPageNo]);
-    
+
    useEffect(() => {
        if (tableData.length > 0 && tableData[0]) {
            setFormData(tableData[0] as { [key: string]: string | number | boolean });
@@ -72,6 +98,9 @@ export function VerticalTable({
                </div>
            ) : null}
            <div className={`card !m-[1.2rem] !p-0r ${className}`}>
+                {tableName1 && ( // tableName prop이 있으면 표시
+                    <div className="text-xl font-semibold my-2 mx-3">{tableName1}</div>
+                )}
                <Table variant="secondary">
                    <TableBody className="text-center">
                        {headlist?.map((head) => (
@@ -82,9 +111,10 @@ export function VerticalTable({
                                </TableCell>
                                {/* 데이터 값 또는 입력 필드 */}
                                <TableCell className="text-xs">
-                                    {isEditable ? (
+                                    {children && children[head.id] ? children[head.id] : isEditable ? (
                                        head.type === "select" ? (
                                            <select
+                                                id={head.id}
                                                value={formData[head.id] ?? "-"}
                                                onChange={(e) => handleInputChange(head.id, e.target.value)}
                                                className="w-full border border-gray-300 rounded-sm px-2 py-1 text-xl border-radius-0"
@@ -97,6 +127,7 @@ export function VerticalTable({
                                            </select>
                                        ) : head.type === "input" ? (
                                            <input
+                                                id={head.id}
                                                type="text"
                                                value={formData[head.id] ?? ""}
                                                onChange={(e) => handleInputChange(head.id, e.target.value)}
@@ -113,6 +144,54 @@ export function VerticalTable({
                        ))}
                    </TableBody>
                </Table>
+                {tableName2 && ( // tableName prop이 있으면 표시
+                    <div className="text-xl font-semibold mt-8 my-2 mx-3">{tableName2}</div>
+                )}
+                {showSecondTable && (
+                    <Table variant="secondary">
+                        <TableBody className="text-center">
+                            {headlist2?.map((head) => (
+                                <TableRow key={head.id}>
+                                    {/* 컬럼 제목 */}
+                                    <TableCell className="font-bold bg-blue-100 text-xs w-fit whitespace-nowrap">
+                                        {head.title}
+                                    </TableCell>
+                                    {/* 데이터 값 또는 입력 필드 */}
+                                    <TableCell className="text-xs">
+                                        {children && children[head.id] ? children[head.id] : isEditable2 ? (
+                                            head.type === "select" ? (
+                                                <select
+                                                    id={head.id}
+                                                    value={formData[head.id] ?? "-"}
+                                                    onChange={(e) => handleInputChange(head.id, e.target.value)}
+                                                    className="w-full border border-gray-300 rounded-sm px-2 py-1 text-xl border-radius-0"
+                                                >
+                                                    {head.options?.map((option) => (
+                                                        <option key={option} value={option}>
+                                                            {option}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                            ) : head.type === "input" ? (
+                                                <input
+                                                    id={head.id}
+                                                    type="text"
+                                                    value={formData[head.id] ?? ""}
+                                                    onChange={(e) => handleInputChange(head.id, e.target.value)}
+                                                    className="w-full text-xl border-radius-0 border border-gray-300 rounded-sm px-2 py-1"
+                                                />
+                                            ) : (
+                                                <span>{formData[head.id] ?? "-"}</span>
+                                            )
+                                        ) : (
+                                            <span>{formData[head.id] ?? "-"}</span>
+                                        )}
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                )}
                {total > 0 && (
                    <UiPageNations
                        total={total}
@@ -1,27 +1,43 @@
+// import MsSwagePpl from "../popupComponent/MsSwagePpl";
+// import sewagePump from "../popupComponent/sewagePump";
 import smh from "../popupComponent/smh";
 import Ssc from "../popupComponent/Ssc";
+// import StormWaterPump from "../popupComponent/stormWaterPump";
 import SwtrmtFclt from "../popupComponent/SwtrmtFclt";

+type LayerComponentProps = { 
+    featureData: any; 
+    chkMainSsc?: boolean;
+    additionalData?: any;
+};
+type LayerContentMap = {
+    [key: string]: {
+        component?: React.FC<LayerComponentProps>;
+        props?: any;
+    };
+};
 // 레이어 이름과 컴포넌트를 매핑
-const layerContentMap: { [key: string]: { component?: React.FC<any> ; props?: any; } } = {
+// 레이어 선택시 변경되는 팝업 컨텐츠 동적으로 변경하도록 작업
+const layerContentMap: LayerContentMap = {
    // TODO: gis데이터 추가되면 추가 작업 필요
-    "하수처리시설": {
-        component: SwtrmtFclt,
-    },
+    "하수처리시설": { component: SwtrmtFclt, },
    "하수처리구역": { },
-    "중점우수토실":{component: Ssc,},
-    "하수관로":{component: SwtrmtFclt,},
+    "우수토실":{component: Ssc,},
+    "중점우수토실":{component: Ssc, }, // 중점우수토실 여부 설정
+    // "하수관로":{component: MsSwagePpl,},
    "하수맨홀":{component: smh,},
+    // "빗물펌프":{component:StormWaterPump},
+    // "오수펌프":{component:sewagePump},
 };

 // 동적 컴포넌트 반환 함수
-export const getLayerContentComponent = (layerNm: string): React.FC => {
+export const getLayerContentComponent = (layerNm: string): React.FC<LayerComponentProps> | null => {
    const component = layerContentMap[layerNm];
    if (!component || !component.component) {
        // component가 없으면 null 반환
        return () => null;
    }
-    return component.component;
+    return component.component
 };
 // 사용자 입력 필드 (보수 및 갱신, 청소 및 준설, 점검 및 진단)
 export const handleInputChange = (section: string,
@@ -7,11 +7,11 @@ export const SwtrmtFcltCol = [
    { id: 'oprtngStrtYmd', title: '가동개시일자' },
    { id: 'clsgYmd', title: '폐쇄일자' },
    { id: 'prcsMsrcCd', title: '처리공법코드' },
-    { id: 'laeCd', title: '지자체코드' },
+    // { id: 'laeCd', title: '지자체코드' },
    { id: 'laeNm', title: '지자체명' },
    { id: 'ctpvNm', title: '시도명' },
    { id: 'sggNm', title: '시군구명' },
-    { id: 'sareaCd', title: '권역코드' },
+    // { id: 'sareaCd', title: '권역코드' },
    { id: 'sareaNm', title: '권역명' },
    { id: 'lrgeSareaNm', title: '대권역명' },
    { id: 'rvrNm', title: '하천명' },
@@ -26,7 +26,7 @@ export const SwtrmtFcltCol = [
    { id: 'prcsZoneAreaSum', title: '처리구역면적합계' },
    { id: 'xcrd', title: 'X좌표' },
    { id: 'ycrd', title: 'Y좌표' },
-    { id: 'oprtngSttsCd', title: '가동상태코드' },
+    // { id: 'oprtngSttsCd', title: '가동상태코드' },
    { id: 'rprsMsrcCn', title: '대표공법내용' },
    { id: 'sttyCrtrBod', title: '법정기준생물화학적산소요구량' },
    { id: 'sttyCrtrToc', title: '법정기준TOC' },
@@ -35,17 +35,94 @@ export const SwtrmtFcltCol = [
    { id: 'sttyCrtrTph', title: '법정기준총인' },
    { id: 'sttyCrtrClbclCnt', title: '법정기준대장균수' },
    { id: 'bsnNm', title: '유역명' },
-    { id: 'obsrvnSptCd', title: '관측지점코드' },
+    // { id: 'obsrvnSptCd', title: '관측지점코드' },
 ];

 // 하수처리구역
 export const SwtrmtPrcsZoneCol = [
    { id: 'swtrmtZoneSn', title: '하수처리구역 일련번호' },
    { id: 'swtrmtZoneNm', title: '하수처리구역명' },
-    { id: 'swtrmtFcltCd', title: '하수처리시설코드' },
-    { id: 'ctpvCd', title: '시도코드' },
+    // { id: 'swtrmtFcltCd', title: '하수처리시설코드' },
+    // { id: 'ctpvCd', title: '시도코드' },
    { id: 'ctpvNm', title: '시도명' },
-    { id: 'sggCd', title: '시군구코드' },
+    // { id: 'sggCd', title: '시군구코드' },
    { id: 'sggNm', title: '시군구명' },
    { id: 'swtrmtFcltNm', title: '하수처리시설명' },
-]
+];
+
+// 하수맨홀
+export const MsSwageMhlCol = [
+    { id: 'fid', title: 'FID' },
+    { id: 'geom', title: 'geometry' },
+    { id: 'ftreSmblCd', title: '지형지물부호코드' },
+    { id: 'mngNo', title: '관리번호' },
+    // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
+    { id: 'mapshtNo', title: '도엽번호' },
+    // { id: 'mngInstCd', title: '관리기관코드' },
+    { id: 'instlYmd', title: '설치일자' },
+    { id: 'lastDrdgnYmd', title: '최종준설일자' },
+    { id: 'usgCd', title: '용도코드' },
+    // { id: 'fcltyShpCd', title: '시설물형태코드' },
+    { id: 'mhlKndCd', title: '맨홀종류코드' },
+    { id: 'swageMhDiam', title: '하수맨홀구경' },
+    { id: 'wdthLen', title: '가로길이' },
+    { id: 'vrtcLen', title: '세로길이' },
+    // { id: 'mqltCd', title: '재질코드' },
+    { id: 'altdVl', title: '표고값' },
+    { id: 'dpthlVl', title: '심도값' },
+    { id: 'instMngNo', title:'기관관리번호'}
+];
+
+// 중점우수토실 측정지점
+export const untrtSwgRainCol1 = [
+    { id: 'manage_no', title: '관리번호' },
+    { id: 'swr_ppl_eqp_nm', title: '처리구역' },
+    { id: 'swr_ppl_trt_nm', title: '처리분구' },
+    { id: 'addr', title: '인근주소' },
+    { id: 'chmbr_xcnts', title: '토실 위도' },
+    { id: 'chmbr_ydnts', title: '토실 경도' }
+];
+
+// 중점우수토실 측정지점 시설현황
+export const untrtSwgRainCol2 = [
+    { id: 'flwmtr_mesure_tp_etc', title: '구분' },
+    { id: 'discharge_pipe_spec', title: '방류관로 규격' },
+    { id: 'swr_ppl_eqp_ar', title: '배수구역 면적(m²)' },
+    { id: 'swr_trt_popl', title: '하수처리 인구(인)' },
+    { id: 'screen_instl_at', title: '스크린설치 여부' },
+    { id: 'weir_hg', title: '위어 높이(m)' },
+    { id: 'weir_lt', title: '위어 길이(m)' }
+];
+
+// 중점우수토실 강우정보 (id값 틀릴 수 있음)
+export const untrtSwgRainCol3 = [
+    { id: 'rain_begin_dt', title: '강우시작일시' },
+    { id: 'rain_end_dt', title: '강우종료일시' },
+    { id: 'precdng_dry', title: '선행건기(h)' },
+    { id: 'rain_info', title: '강우정보' },
+    { id: 'rain_fall', title: '누적강우량(mm)' },
+    { id: 'cntnc_time', title: '지속시간(h)' },
+    { id: 'rain_in', title: '강우강도(mm/h)' }
+];
+
+// 중점우수토실 측정정보 (id값 틀릴 수 있음)
+export const untrtSwgRainCol4 = [
+    { id: 'mesure_begin_dt', title: '측정시작일시' },
+    { id: 'mesure_end_dt', title: '측정종료일시' },
+    { id: 'mesure_intrvl', title: '측정간격(분)' },
+    { id: 'mesure_mhrls_instl_lc', title: '측정기기 설치위치' },
+    { id: 'flwmtr_combined', title: '유량계 종류 및 모델명' }, // 합쳐진 컬럼
+    { id: 'qltwtr_begin_dt', title: '채수시작일시' },
+    { id: 'qltwtr_end_dt', title: '채수종료일시' },
+    { id: 'qltwtr_co', title: '채수횟수' }
+];
+
+// 중점우수토실 수량/수질측정 정보
+export const untrtSwgRainCol5 = [
+    { id: 'odr', title: '회차' },
+    { id: 'mesureDt', title: '측정일자' },
+    { id: 'mesureQy', title: '수량(m)' },
+    { id: 'mesureBod', title: 'BOD(mg/L)' },
+    { id: 'mesureToc', title: 'TOC(mg/L)' },
+    { id: 'mesureLoad', title: '오염부하량(kg)' }
+];
@@ -1,18 +1,16 @@
 // 우수토실
-import Modal from '@/components/ui/modal';
-import { VerticalTable } from '@/components/ui/verticalTable';
-import { UiTable } from '@common/business_components/ui';
+import { UiModal, UiTable } from '@common/business_components/ui';
 import { Button, TableHead, TableRow } from '@common/components/ui';
-import React from 'react'
-const inputColumn = [
-  { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
-  { id: "mainSscYn", title: "중점우수토실 대상여부", type: "select", options: ['Y', 'N'] },
-];
-const headlist = [
-  { id: 'startrain', title: '강우시작일시' }, { id: 'endrain', title: '강우종료일시' }, { id: '선행건기', title: '선행건기(h)' }, { id: '강우정보', title: '강우정보' }, { id: '누적강우량', title: '누적강우량(mm)' }, { id: '지속시간', title: '지속시간(h)' }, { id: '강우강도', title: '강우강도(mm/h)' },
-]
-const headlist3 = [{ id: 'nm', title: '회차' }, { id: 'date', title: '측정일자' }, { id: 'measure', title: '수량(m)' }, { id: 'bod', title: 'BOD(mg/L)' }, { id: 'toc', title: 'TOC(mg/L)' }, { id: '오염부하량', title: '오염부하량(kg)' }]
-const Ssc = () => {
+import React from 'react';
+import { untrtSwgRainCol3, untrtSwgRainCol4, untrtSwgRainCol5 } from '../common/table';
+
+const Ssc = ({ featureData, chkMainSsc, additionalData }: { 
+  featureData: any, 
+  chkMainSsc?: boolean, 
+  additionalData?: any 
+}) => {
+  console.log('Additional data received:', additionalData); // 추가 데이터 확인용
+
  const [isModalOpen, setIsModalOpen] = React.useState(false);
  const openModal = () => {
    setIsModalOpen(true);
@@ -20,45 +18,120 @@ const Ssc = () => {
  const closeModal = () => {
    setIsModalOpen(false);
  };
+
+  // 데이터 전처리: 합쳐진 필드 추가
+  const preprocessedData = featureData ? [{
+    ...featureData,
+    flwmtr_combined: `${featureData.flwmtr_mesure_tp_etc || '-'} / ${featureData.flwmtr_knd || '-'}`
+  }] : [];
+
+  const renderModalBody = () => (
+    <div className='grid grid-cols-1 gap-4 p-4'>
+      {/* 강우정보 테이블 */}
+      <UiTable
+        headName='강우정보'
+        tableData={preprocessedData}
+        headlist={untrtSwgRainCol3}
+        pageSize={10}
+        total={0}
+        children={undefined}
+        cellClick={undefined}
+        onPageChange={function (page: number): void {
+          console.log('Rain data page change:', page);
+        }}
+      />
+
+      {/* 측정정보 테이블 */}
+      <UiTable
+        headName='측정정보'
+        tableData={preprocessedData}
+        headlist={untrtSwgRainCol4}
+        pageSize={10}
+        total={0}
+        cellClick={undefined}
+        onPageChange={function (page: number): void {
+          console.log('Measure data page change:', page);
+        }}
+      >
+        {/* 커스텀 헤더 */}
+        <TableRow>
+          <TableHead colSpan={5} className="text-center bg-blue-100 font-bold">수량</TableHead>
+          <TableHead colSpan={3} className="text-center bg-blue-100 font-bold">수질</TableHead>
+        </TableRow>
+        <TableRow>
+          <TableHead className="text-center">측정시작일시</TableHead>
+          <TableHead className="text-center">측정종료일시</TableHead>
+          <TableHead className="text-center">측정간격(분)</TableHead>
+          <TableHead className="text-center">측정기기설치위치</TableHead>
+          <TableHead className="text-center">유량계 종류 및 모델명</TableHead>
+          <TableHead className="text-center">채수시작일시</TableHead>
+          <TableHead className="text-center">채수종료일시</TableHead>
+          <TableHead className="text-center">채수횟수</TableHead>
+        </TableRow>
+      </UiTable>
+
+      {/* 수량/수질측정 정보 테이블 */}
+      <UiTable
+        headName='수량/수질측정 정보'
+        tableData={additionalData}
+        headlist={untrtSwgRainCol5}
+        pageSize={10}
+        total={additionalData.length}
+        children={undefined}
+        cellClick={undefined}
+        onPageChange={function (page: number): void {
+          console.log('Quality data page change:', page);
+        }}
+      />
+    </div>
+  );
+
  return (
-    <div><VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={0} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
-      throw new Error('Function not implemented.');
-    }} />
-      <div>
-        <div className="card-header">
-          <h3 className="text-2xl mx-3 font-medium text-label">중점우수토실 운영정보</h3>
+    <div>
+      {/* <VerticalTable
+        headName='자체 입력정보'
+        tableData={[]}
+        headlist={inputColumn}
+        pageSize={0}
+        total={0}
+        children={undefined}
+        cellClick={undefined}
+        isEditable={true}
+        onPageChange={function (page: number): void {
+          throw new Error('Function not implemented.');
+        }}
+      /> */}
+
+      {!chkMainSsc ? null :
+        <div>
+          <div className="card-header">
+            <h3 className="text-2xl mx-3 font-medium text-label">중점우수토실 운영정보</h3>
+          </div>
+          <Button
+            className='mx-auto block w-64 mt-3 py-2 text-white rounded-sm text-sm font-medium hover:bg-blue-700 bg-blue-600'
+            onClick={openModal}
+          >
+            상세보기
+          </Button>
+
+          <UiModal
+            open={isModalOpen}
+            onOpenChange={setIsModalOpen}
+            bodyClass={`
+              h-[100vh]
+              w-[60vw]
+              max-w-none
+              max-h-none
+              overflow-visible
+              z-[101]
+            `}
+            body={renderModalBody()}
+            noHeaderYn='Y'
+            noFooterYn='N'
+            // footerContent={renderFooterContent()}
+          />
        </div>
-        <Button className='mx-auto block w-64 mt-3 py-2 text-white rounded-sm text-sm font-medium hover:bg-blue-700 bg-blue-600' onClick={openModal}>상세보기</Button>
-        <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}>
-          <div className='grid grid-col-3'><UiTable headName='강우정보' tableData={[]} headlist={headlist} pageSize={0} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
-            throw new Error('Function not implemented.');
-          }}></UiTable>
-          <UiTable headName='측정정보' tableData={[]} headlist={[]} pageSize={0} total={0} cellClick={undefined} onPageChange={function (page: number): void {
-            throw new Error('Function not implemented.');
-          }}>  {/* 커스텀 헤더 */}
-          <TableRow>
-            <TableHead colSpan={5} className="text-center bg-blue-100 font-bold">
-              수량
-            </TableHead>
-            <TableHead colSpan={3} className="text-center bg-blue-100 font-bold">
-              수질
-            </TableHead>
-          </TableRow>
-          <TableRow>
-            <TableHead className="text-center">측정시작일시</TableHead>
-            <TableHead className="text-center">측정종료일시</TableHead>
-            <TableHead className="text-center">측정간격(분)</TableHead>
-            <TableHead className="text-center">측정기기설치위치</TableHead>
-            <TableHead className="text-center">유량계 종류 및 모델명</TableHead>
-            <TableHead className="text-center">채수시작일시</TableHead>
-            <TableHead className="text-center">채수종료일시</TableHead>
-            <TableHead className="text-center">채수횟수</TableHead>
-          </TableRow></UiTable>
-          <UiTable headName='수량/수질측정 정보' tableData={[]} headlist={headlist3} pageSize={0} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
-            throw new Error('Function not implemented.');
-          }}></UiTable></div>
-        </Modal>
-      </div>
+      }
    </div>
  )
 }
@@ -1,44 +1,48 @@
-import { VerticalTable } from '@/components/ui/verticalTable';
+import Modal from '../../../components/ui/modal';
+import { VerticalTable } from '../../../components/ui/verticalTable';
+import { UiTable } from '@common/business_components/ui';
+import { Button, TableCell } from '@common/components/ui';
 import React, { useState } from 'react'
-import InputSection from '../InputSection';
-import { handleInputChange } from '../common';
+
 // 하수처리시설
-// TODO: 컬럼에 보고서 엉 ? 이거 버튼누르면 팝업으로 상세화면 띄워주는 건지 확인 필요 
-const inputColumn = [
-    { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
-    { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
-    { id: "basu", title: "배수구역", type: "input" },
-    { id: "bungu", title: "배수분구", type: "input" },
-    { id: "wltjs", title: "지선/간선", type: "select", options: ["지선", "간선"] },
-    { id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] },
-    { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
-];
+const headList = [
+    { id: "title", title: "하수도정비 기본계획보고서" },
+    { id: "cad", title: "하수도대장 평면도" },]
+const modalHeadList = [
+    { id: "no", title: "번호" },
+    { id: "year", title: "승인연도" },
+    { id: "cad", title: '평면도'},
+    { id: "fileNm", title: "파일명" },  
+    { id: "date", title: "입력시간" },  
+]
+
 const SwtrmtFclt = () => {
-    const [repairData, setRepairData] = useState([
-        { year: "2025", type: "개대체" },
-        { year: "2025", type: "보수" },
-    ]);
-    const [cleaningData, setCleaningData] = useState([
-        { year: "2025", type: "청소" },
-        { year: "2025", type: "준설" },
-    ]);
-    const [inspectionData, setInspectionData] = useState([
-        { year: "2025", type: "관로기술진단" },
-        { year: "2025", type: "관로기술진단" },
-    ]);
-    const dataMap = {
-        repair: { data: repairData, setData: setRepairData },
-        cleaning: { data: cleaningData, setData: setCleaningData },
-        inspection: { data: inspectionData, setData: setInspectionData },
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [modalTitle, setModalTitle] = useState<string>('');
+    const openModal = (title:string) => {
+        setIsModalOpen(true);
+        setModalTitle(title)
+    };
+    const closeModal = () => {
+        setIsModalOpen(false);
    };
    return (
        <div>
-            <VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
+            <VerticalTable children={{
+                title: <Button onClick={() => openModal('하수도정비 기본계획보고서')}>보고서</Button>,
+                cad: <Button onClick={() => openModal('하수도대장 평면도')}>평면도</Button>,
+            }} headName='디지털 자료관 연계정보' tableData={[]} headlist={headList} pageSize={20} total={0} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
                throw new Error("Function not implemented.");
            }}></VerticalTable>
-            <InputSection title="보수 및 갱신" data={repairData} sectionKey="repair" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} />
-            <InputSection title="청소 및 준설" data={cleaningData} sectionKey="cleaning" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} />
-            <InputSection title="점검 및 진단" data={inspectionData} sectionKey="inspection" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} /></div>
+            <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}>
+                <div className='grid grid-col-2'>
+                    <UiTable headName={modalTitle} tableData={[]} headlist={modalHeadList} pageSize={20} total={0} cellClick={undefined} children={undefined} onPageChange={function (page: number): void {
+                        throw new Error("Function not implemented.");
+                    }
+                    }></UiTable>
+                </div>
+            </Modal>
+        </div>
    )
 }

@@ -1,5 +1,5 @@
 // 하수맨홀
-import { VerticalTable } from '@/components/ui/verticalTable';
+import { VerticalTable } from '../../../components/ui/verticalTable';
 import React from 'react'
 const inputColumn = [
    { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
@@ -0,0 +1,201 @@
+'use client'
+import { getData, putData } from "../../../sn/app/components/lib/api";
+import Modal from "../../../sn/app/components/ui/modal";
+import { VerticalTable } from "../../../sn/app/components/ui/verticalTable";
+import { useGisContext } from "@common/business_components/ui/map/Gis";
+import { Button } from "@common/components/ui";
+import { useEffect, useRef, useState } from "react";
+import { getLayerContentComponent } from "../../../sn/app/map/components/common";
+// TODO:
+const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
+    const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
+    // const featureId = featureData.getId(); // 피처의 id 가져오기
+    const featureId = typeof featureData.getId === 'function'
+        ? featureData.getId()
+        : featureData.fid;
+    const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
+    const [tableData, setTableData] = useState<any>(null); // 피처 데이터
+    const [mntrngsData, setMntrngsData] = useState(false); // 수량/수질 측정 정보
+    const [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
+    const [headlist2, setHeadlist2] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
+    const [buttonChk, setButtonChk] = useState(true)
+    const [fetchData, setfetchData] = useState<any>(); // api 호출여부
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false); // 모달 열기 상태
+    const [chkMainSsc, setChkMainSsc] = useState(false); // 중점우수토실 여부
+
+    // 피쳐데이터의 현재 레이어 이름 가져오는 함수
+    const getSelectedLayers = () => {
+        let result = null;
+        const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기
+        let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수
+        layers.forEach((layer: any) => {
+            const source = layer.getSource();
+            if (source && source.hasFeature && featureData
+                && typeof featureData.getId === 'function' && source.hasFeature(featureData)) {
+                featureLayer = layer; // 피처가 속한 레이어 찾기
+            }
+        });
+        // SearchModal 클릭 이벤트와 Gis 클릭 이벤트 구분하기
+        if (featureLayer.get('lyrNm') === null) {
+            if (featureData.lyrTypeNm === 'tb_il_swage_prcs_fclt') result = '하수처리시설';
+            else if (featureData.lyrTypeNm === 'tb_ms_swage_prcs_zone') result = '하수처리구역';
+            else if (featureData.lyrTypeNm === 'om_dt_untrt_swg_rain') result = '중점우수토실';
+        }
+        else result = featureLayer.get('lyrNm');
+
+        return result;
+        // return featureLayer.get('lyrNm'); // 레이어 이름 출력
+    };
+
+    useEffect(() => {
+        const fetchData = async () => {
+            if (featureId) {
+                const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기
+                setLayerNm(selectedLayerName); // 상태 업데이트
+                const layerId = featureId.split('.')[0]
+                let data = await getData(`v1/fclts/${featureId}?lyrTypeNm=${layerId}`);
+                setfetchData(data)
+                switch (selectedLayerName) {
+                    case '하수처리시설':
+                        setButtonChk(false)
+                        break;
+                    case '하수처리구역':
+                        setButtonChk(false)
+                        break;
+                    case '중점우수토실':
+                        setButtonChk(false)
+                        setChkMainSsc(true)
+
+                        // 데이터 전처리: 합쳐진 필드 추가
+                        data = data ? {
+                            ...data,
+                            discharge_pipe_spec: `직경: ${data.pipe_diameter || '-'} / 높이: ${data.pipe_hg || '-'} / 길이: ${data.pipe_lt || '-'}`
+                        } : {};
+
+                        // 수량/수질측정 정보 데이터 호출
+                        const additionalResponse = await getData(`v1/onsemiro/swgRain/${data.adst_dstr_cd}/${data.manage_no}/mntrngs`);
+                        setMntrngsData(additionalResponse.content);
+                        break;
+                    case '우수토실':
+                        setButtonChk(true)
+                        break;
+                    case '하수관로':
+                        setButtonChk(true)
+                        break;
+                    case '오수펌프':
+                        setButtonChk(true)
+                        break;
+                    case '빗물펌프':
+                        setButtonChk(true)
+                        break;
+                    case '하수맨홀':
+                        setButtonChk(true)
+                        break;
+                    default:
+                        break;
+                }
+                setTableData(data);
+            };
+        }
+        fetchData();
+    }, [featureId]);
+
+    // 저장 시 모달 띄우기
+    const handleSaveClick = () => {
+        setIsModalOpen(true); // 모달 열기
+    };
+
+    const handleModalSave = () => {
+        setIsModalOpen(false); // 모달 닫기
+        btnClickEvent(); // 저장 이벤트 실행
+    };
+
+    const handleModalClose = () => {
+        setIsModalOpen(false); // 모달 닫기
+    };
+
+    const btnClickEvent = async () => {
+        const bodyData: Record<string, any> = {}
+        if (buttonChk && contentRef.current) {
+            const inputElements = contentRef.current.querySelectorAll('input');
+            const selectElements = contentRef.current.querySelectorAll('select');
+            // 카멜케이스 변환 함수
+            const toCamelCase = (str: string) =>
+                str.replace(/_([a-z])/g, (_, char) => char.toUpperCase());
+            // select 태그의 값 가져오기
+            selectElements.forEach((select) => {
+                const camelCaseId = toCamelCase(select.id);
+                bodyData[camelCaseId] = select.value;
+            });
+            // input 태그의 값 가져오기
+            inputElements.forEach((input) => {
+                const camelCaseId = toCamelCase(input.id);
+                bodyData[camelCaseId] = input.value;
+            });
+            if (layerNm === '하수관로') bodyData['lyrTypeNm'] = 'tb_ms_swage_ppl'
+            else if (layerNm === '우수토실') bodyData['lyrTypeNm'] = 'tb_ms_stofcbr'
+            else if (layerNm === '오수펌프') bodyData['lyrTypeNm'] = 'tb_ms_swage_pmstn'
+            else if (layerNm === '빗물펌프') bodyData['lyrTypeNm'] = 'tb_ms_swage_pmstn'
+            else if (layerNm === '하수맨홀') bodyData['lyrTypeNm'] = 'tb_ms_swage_mnhl'
+            bodyData['fid'] = featureId
+            const data = await putData(`v1/fclts/${featureId}`, bodyData);
+            if (data.status == 200) {
+                alert('저장되었습니다')
+                setTableData(data)
+                setfetchData(data)
+            }
+        }
+    }
+    type ContentComponentProps = {
+        featureData: any;
+        chkMainSsc: boolean;
+        additionalData: any;
+    };
+    const ContentComponent = layerNm ? getLayerContentComponent(layerNm) as React.ComponentType<ContentComponentProps> : null;
+    return (
+        <div id="popup" className="absolute top-0 right-0 w-[350px] h-[calc(100vh-10rem)] bg-white border-r border-gray-300 flex flex-col overflow-hidden transition-all duration-300 z-[102]">
+            <div className="card-header bg-primary flex items-center justify-between p-4">
+                <div className="flex mx-3 flex-col">
+                    <h3 className="text-2xl font-medium text-white text-label">{layerNm} 정보</h3>
+                    <div className="font-medium text-white text-label">(00구 00리 하수관로)</div>
+                </div>
+                <button
+                    onClick={onClose}
+                    className="text-white hover:text-gray-700 focus:outline-none"
+                    aria-label="닫기"
+                >
+                    ✕
+                </button>
+            </div>
+            <div className="overflow-y-auto overflow-x-hidden flex-1" ref={contentRef}>
+                <VerticalTable
+                    headName='LX 연계정보'
+                    tableData={[tableData]}
+                    headlist={headlist}
+                    pageSize={20}
+                    total={0}
+                    children={undefined}
+                    cellClick={undefined}
+                    onPageChange={function (page: number): void {
+                        throw new Error("Function not implemented.");
+                    }}
+                />
+                <div className="w-full mx-5 flex items-center justify-end space-x-2">
+                    {buttonChk ? <Button onClick={handleSaveClick} className="px-4 mr-5 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700">
+                        저장
+                    </Button> : null}
+                </div>
+                <Modal isModalOpen={isModalOpen} title="자체입력정보 저장" setIsModalOpen={setIsModalOpen} closeModal={handleModalClose} saveModal={handleModalSave}><div className="text-lg">정보를 저장하시겠습니까?</div></Modal>
+                {ContentComponent &&
+                    <ContentComponent
+                        featureData={fetchData}
+                        chkMainSsc={chkMainSsc}
+                        additionalData={mntrngsData}
+                    />
+                }
+            </div>
+        </div>
+    )
+}
+export default FeatureClickEventPopup;
@@ -0,0 +1,114 @@
+import { useWrStore } from "@/app/store";
+import { getCityOrSgg } from "@/components/lib/func/commom";
+import {
+  type ReturnType
+} from "@common/business_components/ui";
+import { SelectBox } from '@common/business_components/ui/select';
+import React, { useEffect, useRef, useState } from 'react';
+
+export type comCodeState = {
+  code: {
+    isInit: boolean;
+    chBuCd: SelectDataType[]
+    rainFcltCd: SelectDataType[];
+    bdstUsgCd: SelectDataType[];
+    cityCd: SelectDataType[];
+    sggCd: SelectDataType[];
+    rvbsnCd: SelectDataType[];
+    mdmbsnCd: SelectDataType[];
+    lgbsnCd: SelectDataType[];
+    lclgvrnmntCd: EnvPartSelectDataType[];
+    orgwtKndCd: SelectDataType[];
+    yn: SelectDataType[];
+    buildingType: {
+      RST: string,
+      RNB: string,
+      HTB: string
+    }
+  };
+};
+
+type SelectDataType = {
+  text: string;
+  val: string;
+  sido?: string; // 시도 코드 (선택 사항)
+}
+
+type EnvPartSelectDataType = SelectDataType & {
+  adstDliStrCd: string,
+}
+
+type SearchFormLeftProps = {
+  isShowPart?: boolean | undefined;
+  children: React.ReactNode;
+  selectSidoData?: SelectDataType[] | [];
+  selectSigunData?: SelectDataType[] | [];
+  selectRegionData?: SelectDataType[] | [];
+  selectUnitWaterShedData?: SelectDataType[] | [];
+  selectMiddleRegionData?: SelectDataType[] | [];
+  selectEnvPartData?: EnvPartSelectDataType[] | [];
+  selectEnvPartSidoData?: SelectDataType[] | [];
+  selectEnvPartSigunData?: SelectDataType[] | [];
+
+  setRtnPartValue?: (value: string) => void;
+  setRtnSidoValue?: (value: string) => void;
+  setRtnSigunValue?: (value: string) => void;
+  setRtnRegionValue?: (value: string) => void;
+  setRtnUnitWaterShedValue?: (value: string) => void;
+  setRtnMiddleRegionValue?: (value: string) => void;
+  setRtnEnvPartValue?: (value: string) => void;
+  setRtnEnvPartSidoValue?: (value: string) => void;
+  setRtnEnvPartSigunValue?: (value: { val: string, text: string }) => void; // setRtnEnvPartSigunValue prop 타입을 객체로 변경
+  resetTrigger?: boolean;
+}
+
+
+
+function GovSidoSigunguSearchForm({
+  isShowPart = false,
+  children,
+  selectSidoData = [],
+  selectSigunData = [],
+  selectRegionData = [],
+  selectUnitWaterShedData = [],
+  selectMiddleRegionData = [],
+  selectEnvPartData = [],
+  setRtnPartValue,
+  setRtnSidoValue,
+  setRtnSigunValue,
+  setRtnRegionValue,
+  setRtnUnitWaterShedValue,
+  setRtnMiddleRegionValue,
+  setRtnEnvPartValue,
+  setRtnEnvPartSidoValue,
+  setRtnEnvPartSigunValue,
+  resetTrigger = false
+}: SearchFormLeftProps) {
+  const { code, pbnstSttn, pbnstSttnSearch } = useWrStore((state) => state);
+
+  const ref = useRef<ReturnType>({} as ReturnType);
+  const codeData = getCityOrSgg(ref);
+        //환경청별 시도 시군구
+          const [envPartValue, setEnvPartValue] = useState<string>('0');
+          // 환경청
+          const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]);
+
+  return (
+    isShowPart ? (
+      <div className="grid grid-cols-12 gap-5 w-11/12 m-4">
+        <>
+          <SelectBox className="col-span-2" label={'환경청'} selectArray={code.lclgvrnmntCd} onSelectValue={(val) => onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={'rounded-lg bg-white truncate'} />
+          <SelectBox className="col-span-2" label={'시도'} selectArray={code.cityCd} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')} value={envPartSidoValue} selectClass={'rounded-lg bg-white truncate'} />
+          <SelectBox className="col-span-2" label={'시군구'} selectArray={code.sggCd} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')} value={envPartSigunValue} selectClass={'rounded-lg bg-white truncate'} />
+        </>
+        {children}
+      </div>
+    ) : (
+      <div className="grid grid-cols-12 gap-5 w-11/12 m-4">
+        {children}
+      </div>
+    )
+  )
+}
+
+export { GovSidoSigunguSearchForm };
@@ -0,0 +1,113 @@
+"use client";
+
+import Gis from "@common/business_components/ui/map/Gis";
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import { useEffect, useRef, useState } from "react";
+import SearchModal from "../searchModal";
+import FeatureClickEventPopup from "../featureClickEventPopup";
+import { mapService } from "../service";
+
+const Map = () => {
+  const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
+  const [selectedFeature, setSelectedFeature] = useState(null); // 선택된 피처 상태
+  const gisMaps = useRef(null);
+  const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
+  const [isSearchModalOpen, setIsSearchModalOpen] = useState(true); // SearchModal 열림 상태
+  const [featureData, setFeatureData] = useState(null); // 선택된 피쳐 데이터
+  const fetchData = async () => {
+    try {
+      const response = await mapService.getLyrStngs();
+      setTreeData(response); // API 응답 저장
+    } catch (error) {
+      console.error("데이터 불러오기 실패:", error);
+    }
+  };
+
+  // 컴포넌트 마운트 시 1회 실행
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  // SearchModal, GisContent 등에서 호출
+  // const onFeatureSelect = (data: any) => {
+  //   let map = gisMaps.current;
+  //   if (!map) {
+  //     console.warn("지도가 초기화되지 않았습니다.");
+  //     return;
+  //   }
+
+  //   // 항상 같은 select 객체 사용
+  //   const select = GisApp.Module.select as any;
+  //   if (!select) return;
+
+  //   // 1. 기존 선택 초기화
+  //   select.resetSelectedFeature();
+
+  //   // 2. data가 OpenLayers Feature 인스턴스인지 확인
+  //   let foundFeature = null;
+  //   if (
+  //     data &&
+  //     typeof data.getGeometry === "function" &&
+  //     typeof data.setStyle === "function"
+  //   ) {
+  //     // 이미 Feature 인스턴스라면 그대로 사용
+  //     foundFeature = data;
+  //   } else {
+  //     // 아니면 featureId로 맵에서 Feature 인스턴스를 찾아서 사용
+  //     const featureId = data.fid || data.ftrIdn || data.id;
+  //     map
+  //       .getLayers()
+  //       .getArray()
+  //       .forEach((layer: any) => {
+  //         const source = layer.getSource?.();
+  //         if (source?.getFeatureById) {
+  //           const feature = source.getFeatureById(String(featureId).trim());
+  //           if (feature) foundFeature = feature;
+  //         }
+  //       });
+  //   }
+
+  //   // 3. 피처 선택
+  //   if (foundFeature) {
+  //     let geometry = foundFeature.getGeometry();
+  //     if (geometry) {
+  //       let extent = geometry.getExtent();
+
+  //       map.getView().fit(extent, {
+  //         duration: 300,
+  //         padding: [50, 50, 50, 50],
+  //         maxZoom: 16,
+  //         constrainResolution: true,
+  //         nearest: true,
+  //       });
+  //     }
+  //     select.selectFeature(foundFeature, true);
+  //   } else {
+  //     console.warn("OpenLayers Feature를 찾을 수 없습니다:", data);
+  //   }
+
+  //   setFeatureData(data);
+  //   setIsOpen(true);
+  //   setIsSearchModalOpen(false);
+  // };
+  return (
+    <div className="bg-container">
+      <Gis
+        treeData={treeData}
+        isSearch={true}
+        gisMaps={gisMaps}
+        isMiniMap={true}
+        searchView={SearchModal}
+        detailView={FeatureClickEventPopup}
+        setIsOpen={setIsOpen}
+        setFeatureData={setFeatureData}
+        featureData={featureData}
+        setIsSearchModalOpen={setIsSearchModalOpen}
+        isOpen={isOpen}
+        isSearchModalOpen={isSearchModalOpen}
+      />
+    </div>
+  );
+};
+
+export default Map;
@@ -0,0 +1,154 @@
+"use client"
+
+import { Button } from "@common/components/ui";
+import { useCallback, useEffect, useState } from "react";
+import type { EnvPartSelectDataType } from "@common/business_components/ui/search_form_left";
+import { SearchFormRight } from "@common/business_components/ui/search_form_right";
+import type { SelectDataType } from "@common/business_components/ui/search_input_select";
+import type { ReturnType } from "@common/business_components/ui/search_base_form";
+import { MapSearchForm } from "./mapSearchForm";
+
+type SearchBaseType = {
+  selectSidoData?: SelectDataType[] | [];
+  selectSigunData?: SelectDataType[] | [];
+  selectRegionData?: SelectDataType[] | [];
+  selectUnitWaterShedData?: SelectDataType[] | [];
+  selectMiddleRegionData?: SelectDataType[] | [];
+  selectEnvPartData?: EnvPartSelectDataType[] | [];
+  queryClick: (returnType: ReturnType) => void;
+  excelName?: string;
+  excelClick: (returnType: ReturnType) => void;
+  initClick: () => void;
+  btnClass: string;
+  ref: React.RefObject<ReturnType>;
+  isAdmin: boolean;
+  leftClassName?: string;
+  rightClassName?: string;
+  showQueryButton?: boolean;
+  showInitButton?: boolean;
+  showApplyButton?: boolean;
+}
+
+export function MapSearchBar({
+  selectSidoData,
+  selectSigunData,
+  selectRegionData,
+  selectUnitWaterShedData,
+  selectMiddleRegionData,
+  selectEnvPartData,
+  btnClass,
+  excelName,
+  queryClick,
+  excelClick,
+  initClick,
+  ref,
+  isAdmin = false,
+  leftClassName,
+  rightClassName,
+  showQueryButton = true,
+  showInitButton = true,
+  showApplyButton = false
+}: SearchBaseType) {
+  const [partValue, setPartValue] = useState<string>("A");
+  const [sidoValue, setSidoValue] = useState<string>("0");
+  const [sigunValue, setSigunValue] = useState<string>("0");
+  const [sidoText, setSidoText] = useState<string>("");
+  const [sigunText, setSigunText] = useState<string>("");
+  const [regionValue, setRegionValue] = useState<string>("0");
+  const [untitWaterShedValue, setUntitWaterShedValue] = useState<string>("0");
+  const [middleRegionValue, setMiddleRegionValue] = useState<string>("0");
+  const [envPartValue, setEnvPartValue] = useState<string>("0");
+  const [resetTrigger, setResetTrigger] = useState(false);
+
+  const queryVal = () => {
+    console.log("조회버튼 클릭");
+    queryClick({
+      partValue: partValue,
+      sidoValue: sidoValue,
+      sigunValue: sigunValue,
+      regionValue: regionValue,
+      unitWaterShedValue: untitWaterShedValue,
+      middleRegionValue: middleRegionValue,
+      envPartValue: envPartValue,
+      sidoText: sidoText,
+      sigunText: sigunText,
+    });
+  }
+
+  const initVal = useCallback(() => {
+    setResetTrigger(true);
+    initClick();
+  }, [setResetTrigger, initClick]);
+
+  useEffect(() => {
+    if (resetTrigger) {
+      setResetTrigger(false);
+    }
+  }, [resetTrigger]);
+
+  const excelDownload = () => {
+    excelClick({
+      partValue: partValue,
+      sidoValue: sidoValue,
+      sigunValue: sigunValue,
+      regionValue: regionValue,
+      unitWaterShedValue: untitWaterShedValue,
+      middleRegionValue: middleRegionValue,
+      envPartValue: envPartValue,
+      sidoText: sidoText,
+      sigunText: sigunText,
+    })
+  };
+
+  useEffect(() => {
+    if (ref && ref.current) {
+      const customRef = ref.current;
+      customRef.partValue = partValue;
+      customRef.sidoValue = sidoValue;
+      customRef.sigunValue = sigunValue;
+      customRef.regionValue = regionValue;
+      customRef.unitWaterShedValue = untitWaterShedValue;
+      customRef.middleRegionValue = middleRegionValue;
+      customRef.envPartValue = envPartValue;
+      customRef.sidoText = sidoText;
+      customRef.sigunText = sigunText;
+    }
+  }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, sidoText, sigunText, ref]);
+  
+  return (
+    <div className={leftClassName ? leftClassName : `w-auto min-w-[200px] mx-5 flex items-center justify-center space-x-2 `}>
+      {/* 검색 조건 부분 */}
+      <MapSearchForm
+        isShowPart={true}
+        selectSidoData={selectSidoData}
+        selectSigunData={selectSigunData}
+        selectRegionData={selectRegionData}
+        selectUnitWaterShedData={selectUnitWaterShedData}
+        selectMiddleRegionData={selectMiddleRegionData}
+        selectEnvPartData={selectEnvPartData}
+        setRtnPartValue={setPartValue}
+        setRtnSidoValue={setSidoValue}
+        setRtnSigunValue={setSigunValue}
+        setRtnRegionValue={setRegionValue}
+        setRtnUnitWaterShedValue={setUntitWaterShedValue}
+        setRtnMiddleRegionValue={setMiddleRegionValue}
+        setRtnEnvPartValue={setEnvPartValue}
+        setRtnEnvPartSidoValue={setSidoValue}
+        setRtnEnvPartSigunValue={setSigunValue}
+        setRtnSidoText={setSidoText}
+        setRtnSigunText={setSigunText}
+        resetTrigger={resetTrigger}
+        isAdmin={isAdmin}
+        children={undefined}
+      />
+      {/* 버튼 부분 */}
+      <div className={rightClassName ? rightClassName : `w-1/12 mx-5 flex flex-col items-center justify-center space-x-2 `}>
+        <div className="flex items-center justify-between gap-2">
+          {showQueryButton && <Button className={btnClass} onClick={queryVal}>조회</Button>}
+          {showInitButton && <Button className={btnClass} onClick={initVal}>초기화</Button>}
+          {showApplyButton && <Button className={btnClass} onClick={initVal}>적용</Button>}
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,347 @@
+"use client"
+
+import React, { useEffect, useState } from 'react';
+import type { SelectDataType } from "@common/business_components/ui/search_input_select";
+import { SelectBox } from '@common/business_components/ui/select';
+
+/**
+ * 검색 폼 왼쪽 컴포넌트 타입
+ * 
+ * @param isShowPart 구분 조회 여부
+ * @param children 자식 컴포넌트
+ * @param selectSidoData 시도 데이터
+ * @param selectSigunData 시군구 데이터
+ * @param selectRegionData 유역 데이터
+ * @param selectUnitWaterShedData 단위유역 데이터
+ * @param selectMiddleRegionData 중권역 데이터
+ * @param selectEnvPartData 환경청 데이터
+ * @param selectEnvPartSidoData 환경청 시도 데이터
+ * @param selectEnvPartSigunData 환경청 시군구 데이터
+ * @param setRtnPartValue 부분 값 변경 핸들러
+ */
+type SearchFormLeftProps = {
+  isShowPart?: boolean | undefined;
+  children: React.ReactNode;
+  selectSidoData?: SelectDataType[] | [];
+  selectSigunData?: SelectDataType[] | [];
+  selectRegionData?: SelectDataType[] | [];
+  selectUnitWaterShedData?: SelectDataType[] | [];
+  selectMiddleRegionData?: SelectDataType[] | [];
+  selectEnvPartData?: EnvPartSelectDataType[] | [];
+  selectEnvPartSidoData?: SelectDataType[] | [];
+  selectEnvPartSigunData?: SelectDataType[] | [];
+
+  setRtnPartValue?: (value: string) => void;
+  setRtnSidoValue?: (value: string) => void;
+  setRtnSigunValue?: (value: string) => void;
+  setRtnRegionValue?: (value: string) => void;
+  setRtnUnitWaterShedValue?: (value: string) => void;
+  setRtnMiddleRegionValue?: (value: string) => void;
+  setRtnEnvPartValue?: (value: string) => void;
+  setRtnEnvPartSidoValue?: (value: string) => void;
+  setRtnEnvPartSigunValue?: (value: string) => void;
+  setRtnSidoText?: (value: string) => void;
+  setRtnSigunText?: (value: string) => void;
+  resetTrigger?: boolean;
+  isAdmin?: boolean;
+}
+
+export type EnvPartSelectDataType = SelectDataType & {
+  adstDliStrCd: string,
+}
+
+const selectPartData: SelectDataType[] = [
+  { text: "행정별", val: 'A' },
+  { text: "유역별", val: 'R' },
+  { text: "환경청별", val: 'G' },
+];
+
+const selectType: SelectDataType[] = [
+  { text: "행정별", val: 'A' },
+  { text: "유역별", val: 'R' },
+  { text: "환경청별", val: 'G' },
+];
+
+function MapSearchForm({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSidoText, setRtnSigunValue, setRtnSigunText, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false, isAdmin = false }: SearchFormLeftProps) {
+  /******************선택된 데이터******************/
+  const [partValue, setPartValue] = useState<string>('A');
+  //행정별 시도 시군구
+  const [sidoValue, setSidoValue] = useState<string>('0');
+  const [sigunValue, setSigunValue] = useState<string>('0');
+  const [sidoText, setSidoText] = useState<string>('');
+  const [sigunText, setSigunText] = useState<string>('');
+  //유역별
+  const [regionValue, setRegionValue] = useState<string>('0');
+  const [unitWaterShedValue, setUnitWaterShedValue] = useState<string>('0');
+  const [middleRegionValue, setMiddleRegionValue] = useState<string>('0');
+  //환경청별 시도 시군구
+  const [envPartValue, setEnvPartValue] = useState<string>('0');
+  // 환경청
+  const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]);
+
+  /****************** 셀렉트 리스트 데이터. ******************/
+  // 조회된 조건에 맞는 시도 시군 유역
+  const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
+  const [filteredUnitWaterShedData, setFilteredUnitWaterShedData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
+  const [filteredMiddleRegionData, setFilteredMiddleRegionData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
+  // 조회된 조건에 맞는 환경청 시도 시군
+  const [filteredEnvPartData, setFilteredEnvPartData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd: '' }]);
+  const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd: '' }]);
+  const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
+
+  // 시군구 세팅
+  const initializeSigunData = (sidoCd: string) => {
+    if (sidoCd === '0') {
+      setSigunValue('0');
+      setFilteredSigunData([{ text: "전체", val: '0' }]);
+    } else {
+      const newFilteredData = [
+        { text: "전체", val: '0' },
+        ...selectSigunData.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd)
+      ];
+      setSigunValue('0');
+      setFilteredSigunData(newFilteredData);
+    }
+  }
+
+  // 단위유역 세팅
+  const initializeUnitWaterShedData = (regionCd: string) => {
+    if (regionCd === '0') {
+      setUnitWaterShedValue('0');
+      setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
+    } else {
+      const newFilteredData = [
+        { text: "전체", val: '0' },
+        ...selectUnitWaterShedData.filter((item: SelectDataType) => item.val.substring(0, 1) === regionCd)
+      ];
+      setUnitWaterShedValue('0');
+      setFilteredUnitWaterShedData(newFilteredData);
+    }
+  }
+
+  // 중권역 세팅
+  const initializeMiddleRegionData = (unitWaterShedCd: string) => {
+    if (unitWaterShedCd === '0') {
+      setMiddleRegionValue('0');
+      setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
+    } else {
+      const newFilteredData = [
+        { text: "전체", val: '0' },
+        ...selectMiddleRegionData.filter((item: SelectDataType) => item.val.substring(0, 2) === unitWaterShedCd)
+      ];
+      setMiddleRegionValue('0');
+      setFilteredMiddleRegionData(newFilteredData);
+    }
+  }
+
+  // 환경청 세팅 - 시도
+  const initializeCityDataByEnvPartSido = (envPartCd: string) => {
+    const foundEnvPart = selectEnvPartData.find((item: EnvPartSelectDataType) => item.val === envPartCd);
+    const cityArray = foundEnvPart?.adstDliStrCd.toString().split('|').join('').split(',');
+
+    // 시군구 데이터
+    const envSigunData = selectSigunData.filter((item: SelectDataType) => cityArray?.includes(item.val));
+
+    // 환경청 시도 데이터
+    const sidoArray = [...new Set(envSigunData.map((item: SelectDataType) => item.val.substring(0, 2)))];
+    const envSidoData = selectSidoData.filter((item: SelectDataType) => sidoArray?.includes(item.val));
+    setFilteredEnvPartSigunDataSelected(envSigunData);
+
+    setFilteredEnvPartSidoData([
+      { text: "전체", val: '0', adstDliStrCd: '' },
+      ...envSidoData.map((item: SelectDataType) => ({ text: item.text, val: item.val, adstDliStrCd: '' }))
+    ]);
+  }
+
+  // 환경청 세팅 - 시군구
+  const initializeCityDataByEnvPartSigun = (sidoCd: string) => {
+    const envSigunData = filteredEnvPartSigunDataSelected.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd);
+    setFilteredEnvPartSigunData([
+      { text: "전체", val: '0' },
+      ...envSigunData.map((item: SelectDataType) => ({ text: item.text, val: item.val }))
+    ]);
+  }
+
+  const onSelectValue = (val: string, type: string) => {
+    let selectedSido;
+    let selectedSigun;
+    let selectedEnvPartSido;
+    let selectedEnvPartSigun;
+
+    switch (type) {
+      case 'part':
+        setPartValue(val);
+        if (setRtnPartValue) {
+          setRtnPartValue(val);
+        }
+        // 구분
+        if (val == 'R') {
+          initializeMiddleRegionData('0');
+          initializeUnitWaterShedData('0');
+        } else if (val == 'G') {
+          setFilteredEnvPartData([
+            { text: "전체", val: '0', adstDliStrCd: '' },
+            ...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '')
+          ]);
+          setEnvPartValue('0');
+          initializeCityDataByEnvPartSido('0');
+        } else {
+          initializeSigunData('0');
+          onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
+        }
+
+        // 다른 selectbox 전체로 초기화
+        onSelectValue(selectSidoData[0]?.val || '0', 'sido');
+        onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
+        break;
+      case 'sido':
+        setSidoValue(val);
+        selectedSido = selectSidoData.find(item => item.val === val);
+        setSidoText(selectedSido?.text || '');
+        if (setRtnSidoValue) {
+          setRtnSidoValue(val);
+        }
+        if (setRtnSidoText) {
+          setRtnSidoText(selectedSido?.text || '');
+        }
+        initializeSigunData(val);
+        onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
+        break;
+      case 'sigun':
+        if (setRtnSigunValue) {
+          setRtnSigunValue(val);
+        }
+        setSigunValue(val);
+        selectedSigun = filteredSigunData.find(item => item.val === val);
+        if (setRtnSigunText) {
+          setRtnSigunText(selectedSigun?.text || '');
+        }
+        setSigunText(selectedSigun?.text || '');
+        break;
+
+      // 유역 세팅
+      case 'region':
+        setRegionValue(val);
+        if (setRtnRegionValue) {
+          setRtnRegionValue(val);
+        }
+        initializeUnitWaterShedData(val);
+        onSelectValue(selectUnitWaterShedData[0]?.val || '0', 'unitWaterShed');
+        break;
+      case 'unitWaterShed':
+        setUnitWaterShedValue(val);
+        if (setRtnUnitWaterShedValue) {
+          setRtnUnitWaterShedValue(val);
+        }
+        initializeMiddleRegionData(val);
+        onSelectValue(selectMiddleRegionData[0]?.val || '0', 'middleRegion');
+        break;
+      case 'middleRegion':
+        setMiddleRegionValue(val);
+        if (setRtnMiddleRegionValue) {
+          setRtnMiddleRegionValue(val);
+        }
+        break;
+
+      // 환경청 세팅
+      case 'envPart':
+        setEnvPartValue(val);
+        if (setRtnEnvPartValue) {
+          setRtnEnvPartValue(val);
+        }
+        initializeCityDataByEnvPartSido(val);
+        onSelectValue(filteredEnvPartSidoData[0]?.val || '0', 'envPartSido');
+        break;
+      case 'envPartSido':
+        setSidoValue(val);
+        selectedEnvPartSido = filteredEnvPartSidoData.find(item => item.val === val);
+        setSidoText(selectedEnvPartSido?.text || '');
+        if (setRtnEnvPartSidoValue) {
+          setRtnEnvPartSidoValue(val);
+        }
+        initializeCityDataByEnvPartSigun(val);
+        onSelectValue(filteredEnvPartSigunData[0]?.val || '0', 'envPartSigun');
+        break;
+      case 'envPartSigun':
+        setSigunValue(val);
+        selectedEnvPartSigun = filteredEnvPartSigunData.find(item => item.val === val);
+        setSigunText(selectedEnvPartSigun?.text || '');
+        if (setRtnEnvPartSigunValue) {
+          setRtnEnvPartSigunValue(val);
+        }
+        break;
+    }
+  }
+
+  // 리셋 함수
+  const resetAllValues = () => {
+    setPartValue('A');
+    setSidoValue('0');
+    setSigunValue('0');
+    setRegionValue('0');
+    setUnitWaterShedValue('0');
+    setMiddleRegionValue('0');
+    setEnvPartValue('0');
+
+    setFilteredSigunData([{ text: "전체", val: '0' }]);
+    setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
+    setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
+    setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
+    setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
+    setFilteredEnvPartSigunData([{ text: "전체", val: '0' }]);
+
+    if (setRtnPartValue) setRtnPartValue('A');
+    if (setRtnSidoValue) setRtnSidoValue('0');
+    if (setRtnSigunValue) setRtnSigunValue('0');
+    if (setRtnRegionValue) setRtnRegionValue('0');
+    if (setRtnUnitWaterShedValue) setRtnUnitWaterShedValue('0');
+    if (setRtnMiddleRegionValue) setRtnMiddleRegionValue('0');
+    if (setRtnEnvPartValue) setRtnEnvPartValue('0');
+    if (setRtnEnvPartSidoValue) setRtnEnvPartSidoValue('0');
+    if (setRtnEnvPartSigunValue) setRtnEnvPartSigunValue('0');
+  };
+
+  // 리셋 트리거 변경 감지
+  useEffect(() => {
+    if (resetTrigger) {
+      resetAllValues();
+      // 리셋 후 트리거를 false로 설정
+      if (setRtnPartValue) {
+        setRtnPartValue('0');
+      }
+    }
+  }, [resetTrigger]);
+
+  return (
+    isShowPart ? (
+      <div className="grid grid-cols-12 gap-5 w-11/12 m-4">
+        <SelectBox className="col-span-3" label={'구분'} selectArray={isAdmin ? selectPartData.slice(0, 1) : selectPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'part')} value={partValue} selectClass={undefined} />
+        {partValue === 'R' ? (
+          <>
+            <SelectBox className="col-span-3" label={'유역'} selectArray={selectRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={undefined} />
+            <SelectBox className="col-span-3" label={'단위유역'} selectArray={filteredUnitWaterShedData} onSelectValue={(val) => onSelectValue(val.toString(), 'unitWaterShed')} value={unitWaterShedValue} selectClass={undefined} />
+            <SelectBox className="col-span-3" label={'중권역'} selectArray={filteredMiddleRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'middleRegion')} value={middleRegionValue} selectClass={undefined} />
+          </>
+        ) : partValue === 'G' ? (
+          <>
+            <SelectBox className="col-span-3" label={'환경청'} selectArray={filteredEnvPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={undefined} />
+            <SelectBox className="col-span-3" label={'시도'} selectArray={filteredEnvPartSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')} value={sidoValue} selectClass={undefined} />
+            <SelectBox className="col-span-3" label={'시군구'} selectArray={filteredEnvPartSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')} value={sigunValue} selectClass={undefined} />
+          </>
+        ) : (
+          <>
+            <SelectBox className="col-span-3" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={undefined} />
+            <SelectBox className="col-span-3" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={undefined} />
+          </>
+        )}
+        {children}
+      </div>
+    ) : (
+      <div className="grid grid-cols-12 gap-5 w-11/12 m-4">
+        {children}
+      </div>
+    )
+  )
+}
+
+export { MapSearchForm };
@@ -0,0 +1,82 @@
+"use client"
+
+import { useWrStore } from "@/app/store";
+import { btnClass } from "@/app/store/common/code";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { MapSearchBar, type ReturnType } from "./mapSearchBar";
+import { Button } from "@common/components/ui";
+import { SearchFormLeft, type EnvPartSelectDataType } from "@common/business_components/ui/search_form_left";
+import { SearchFormRight } from "@common/business_components/ui/search_form_right";
+import type { SelectDataType } from "@common/business_components/ui/search_input_select";
+
+const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`;
+
+const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`);
+
+interface SearchModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onFeatureSelect: (row: any) => void;
+}
+
+// 날짜 조합 함수
+const getDateString = (
+    year: string,
+    month: string,
+    day: string,
+    defaultDate: string,
+) => {
+    if (!year && !month && !day) return defaultDate;
+    const y = year || defaultDate.slice(0, 4);
+    const m = month || defaultDate.slice(4, 6);
+    const d = day || defaultDate.slice(6, 8);
+    return `${y}${m}${d}`;
+};
+
+const SearchModal: React.FC<SearchModalProps> = ({
+    open,
+    onOpenChange,
+    onFeatureSelect,
+}) => {
+
+    // 로딩바 
+    const [isLoading, setIsLoading] = useState(false);
+    // 상세 정보 조회를 위한 상태 추가
+    const [popupFeature, setPopupFeature] = useState<any>(null);
+    const { code, pbnstSttn, pbnstSttnSearch } = useWrStore((state) => state);
+    const [isChHead, setIsChHead] = useState(false);
+    const ref = useRef<ReturnType>({} as ReturnType);
+
+    return (
+        <div className="absolute left-1/2 -translate-x-1/2 w-full max-w-7xl bg-white flex items-center justify-center p-4 rounded-md shadow-lg">
+            <MapSearchBar
+                selectSidoData={code.cityCd}
+                selectSigunData={code.sggCd}
+                selectRegionData={code.rvbsnCd}
+                selectUnitWaterShedData={code.lgbsnCd}
+                selectMiddleRegionData={code.mdmbsnCd}
+                selectEnvPartData={code.lclgvrnmntCd}
+                rightChildren={undefined}
+                leftChildren={undefined}
+                queryClick={function (returnType: ReturnType): void {
+                    // '{partValue: 'A', sidoValue: '0', sigunValue: '0', regionValue: '0', unitWaterShedValue: '0', …}'
+                    let con;
+                    if (returnType.sigunValue != "0") {
+                        con = returnType.sigunValue;
+                    } else {
+                        con = returnType.sidoValue;
+                    }
+                    // pbnstSttnSearch(1, "20", con);
+                }}
+                initClick={function (): void { }}
+                btnClass={btnClass}
+                ref={ref} excelClick={function (returnType: ReturnType): void {
+                    throw new Error("Function not implemented.");
+                }}
+                isAdmin={false}
+            />
+        </div>
+    );
+};
+
+export default React.memo(SearchModal);
@@ -0,0 +1 @@
+export * from './map'
@@ -0,0 +1,47 @@
+
+/**
+ * 관망도 API
+ */
+// const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}/v1/map`
+const API_URL = "http://con.mind-one.co.kr:11083/sewerage-service/api/v1/map";
+
+export type LyrStngProps = {
+  lyr_sn: string
+  lyr_nm: string
+  upper_lyr_sn: string  
+  drawOrdr: string
+  flterSql: string
+  gobjTy: string
+  lyrTpNm: string
+  useYn: string
+  minViewSize: string
+  iconNm: string
+  lblAtrbNm: string
+  fontNm: string
+  fontIntnColor: string
+  fontExtnColor: string
+  fontExtnWdth: string
+  lnWdth: string
+  lnColor: string
+  polgnColor: string
+  initEprssYn: string
+  clickPsblYn: string
+}
+
+export const mapService = {
+  //레이어 설정 조회
+  getLyrStngs: async () => {
+    const response = await fetch(`${API_URL}/lyrStngs/WR_NETWORK`, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  }
+}
@@ -136,6 +136,18 @@ export default function Home() {
            </div>
          </div>
        </div>
+
+        {/* 시설 현황(지도) */}
+        <div>
+          <h2 className="text-xl font-semibold mb-4">시설 현황(지도)</h2>
+          <div className="grid grid-cols-12 gap-4">
+            <div className="col-span-2">
+              <Button className="w-full">
+                <Link href="map/htdflSttn">온배수시설 현황(지도)</Link>
+              </Button>
+            </div>
+          </div>
+        </div>
      </div>
    </>
  );
@@ -1,25 +1,38 @@
-import './lib/css/gis.common.css';
-import React, { createContext, useContext, useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { Search } from 'lucide-react';
 import OlMap from 'ol/Map';
 import View from 'ol/View';
 import { defaults as defaultControls, OverviewMap } from 'ol/control';
 import { defaults } from 'ol/interaction';
 import * as olProj from 'ol/proj';
-import proj4 from 'proj4';
 import { register } from 'ol/proj/proj4';
-import GisApp from './lib/gis.core';
-import GisContent from './GisContent';
-import GisTree from './GisTree';
+import proj4 from 'proj4';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import GisLonLat from './GisLonLat';
+import GisMapToggle from './GisMapToggle';
 import GisSelect from './GisSelect';
 import GisToolBar from './GisToolBar';
-import GisMapToggle from './GisMapToggle';
-import { Search } from 'lucide-react';
+import GisTree from './GisTree';
+import './lib/css/gis.common.css';
+import GisApp from './lib/gis.core';
+import GisContent from './GisContent';

 export const GisContext = createContext({ gisCore: null, gisMap: null, treeData: null, checkedLayerIds: null });
 export const useGisContext = () => useContext(GisContext);

-function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = false, isMiniMap = false, setIsOpen, setFeatureData, featureData, searchView : SearchView, detailView: DetailView, onFeatureSelect, setIsSearchModalOpen }) {
+function Gis({ 
+	isOpen , 
+	gisMaps, 
+	isSearchModalOpen, 
+	treeData = [], 
+	isSearch = false, 
+	isMiniMap = false, 
+	setIsOpen, 
+	setFeatureData, 
+	featureData, 
+	searchView : SearchView, 
+	detailView: DetailView, 
+	onFeatureSelect = null, 
+	setIsSearchModalOpen }) {
 	const mapRef = useRef();
 	const [mapObject, setMapObject] = useState({});
 	const [tabVisible, setTabVisible] = useState(true);
@@ -92,6 +105,7 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa
 		setIsSearchModalOpen(false);
 	}, [mapInstanceRef]);

+	// 지도 생성 및 초기화
 	useEffect(() => {
 		if (!mapRef.current) return;
 		if (mapInstanceRef.current) return; // 이미 생성된 맵이 있다면 중단
@@ -105,7 +119,7 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa
 		]);
 		register(proj4);

-		//맵 생성
+		// OpenLayers 지도 객체 생성
 		const map = new OlMap({
 			layers: [gisCore.baseLayers['base'], gisCore.baseLayers['satellite']],
 			renderer: 'webgl',
@@ -133,7 +147,7 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa

 		gisMaps.current = map

-		//미니맵
+		// 미니맵 추가
 		if(isMiniMap){
 			const overviewMap = new OverviewMap({
 				layers: [GisApp.Module.core.baseMiniMapLayers['base']],
@@ -148,6 +162,7 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa
 			map.addControl(overviewMap);
 		}

+		// 스케일 컨트롤 및 베이스 레이어 설정
 		gisCore.__proto__.map = map;
 		gisCore.scaleControl();
 		gisCore.changeBaseLayer('base');
@@ -155,20 +170,25 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa
 		mapInstanceRef.current = map; // 생성 완료 플래그 설정
 	}, []);

+	// treeData 변경 시 레이어 코드 생성
 	useEffect(() => {
 		if (!treeData || treeData.length === 0) return;

+		// 기존 오버레이 및 레이어 모두 삭제
 		gisCore.deleteAllOverlay();
 		gisCore.deleteAllLayer();

+		// 트리 데이터를 레이어 코드 객체로 변환
 		const layerCode = gisCore.convertLayerInfosToLayerCode(treeData, 'lyrSn');
-		GisApp.layerCode = layerCode;
+		GisApp.layerCode = layerCode; // 전역 레이어 코드 설정

 		//setTreeData(data);
+		// 편집 가능한 레이어 목록 생성
 		const layerItems = getLayerItems(layerCode);
 		//setEditLayerItems(prev => [...layerItems])
 	}, [treeData]);

+	// 레이어 코드에서 편집 가능한 레이어만 추출
 	const getLayerItems = (layerCode) => {
 		const layerItems = Object.entries(layerCode)
 			.filter(([key, obj], idx) => obj?.updtPsblYn === 'Y')
@@ -213,12 +233,12 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa
 					<SearchView
 						open={isSearchModalOpen}
 						onOpenChange={setIsSearchModalOpen}
-						onFeatureSelect={onFeatureSelect}
+						onFeatureSelect={handleFeatureSelect}
 					/>
 					<GisLonLat/>
 					<GisToolBar/>
 					<GisMapToggle/>
-					<GisSelect onFeatureSelect={onFeatureSelect} />
+					<GisSelect onFeatureSelect={handleFeatureSelect} />
 				</div>

 				{isSearch && (
@@ -243,4 +263,4 @@ function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = fa
 	);
 }

-export default React.memo(Gis);
+export default React.memo(Gis);
@@ -1,37 +1,42 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
+import { GisContext } from './Gis';
 import GisApp from './lib/gis.core';
 import GisOlSelect from './lib/gis.select';
-import { GisContext } from './Gis';

 export default React.memo(function GisSelect({ onFeatureSelect }) {

 	const { gisMap } = useContext(GisContext);
-	
-	
-	// useEffect(() => {
-	// 	if (!gisMap) return; // 아직 초기화 안 됐으면 아무것도 안 함
-	  
-	// 	const select = new GisOlSelect(gisMap);
-	// 	GisApp.Module.select = select;
-	  
-	// 	select.getSelectedInfo(function (features) {
-	// 		if (features?.[0]) {
-	// 			// onFeatureClick?.(features[0]); // props로 넘긴 함수 실행
-	// 			onFeatureSelect(layer.getProperties()); //피쳐 속성데이터 상위컴포넌트로 전달
-	// 		}
-	// 	});
-	//   }, [gisMap, onFeatureSelect]);

-	const select = new GisOlSelect(gisMap);
-	GisApp.Module.select = select;

-	select.getSelectedInfo(function (features) {
-		//clickFeature(features[0]);
-		if(features.length > 0) {
-			const layer = features[0];
-			onFeatureSelect(layer); //피쳐 속성데이터 상위컴포넌트로 전달
+	useEffect(() => {
+		if (!gisMap) return; // 아직 초기화 안 됐으면 아무것도 안 함
+
+		// 이미 select가 있으면 재생성하지 않음
+		if (!GisApp.Module.select) {
+			const select = new GisOlSelect(gisMap);
+			GisApp.Module.select = select;
+
+			// 피처 선택 시 콜백 등록
+			select.getSelectedInfo(function (features) {
+				if (features?.[0]) {
+					console.log('GisSelect features', features);
+					onFeatureSelect(features[0]);
+				}
+			});
 		}
-	});
+	}, [gisMap, onFeatureSelect]);
+
+	// const select = new GisOlSelect(gisMap);
+	// GisApp.Module.select = select;
+
+	// select.getSelectedInfo(function (features) {
+	// 	//clickFeature(features[0]);
+	// 	if(features.length > 0) {
+	// 		const layer = features[0];
+	// 		// console.log('GisSelect layer', layer);
+	// 		onFeatureSelect(layer); //피쳐 속성데이터 상위컴포넌트로 전달
+	// 	}
+	// });

 	return (
 		<>
@@ -1,21 +1,20 @@
-import GisApp from './lib/gis.core';
-import { util } from './lib/util';
-import React, { useEffect, useState } from 'react';
-import { useGisContext } from './Gis';
-import { DndProvider } from "react-dnd";
 import {
-	Tree,
 	MultiBackend,
+	Tree,
 	getBackendOptions
 } from "@minoru/react-dnd-treeview";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@common/components/ui/tabs";
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { DndProvider } from "react-dnd";
+import { useGisContext } from './Gis';
+import GisApp from './lib/gis.core';

-export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes = () => {} }) {
+export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes = () => { }, visible, setVisible }) {
 	const { gisCore, treeData } = useGisContext();
 	const [checked, setChecked] = useState([]);
 	const [expanded, setExpanded] = useState([]);
 	const [nodes, setNodes] = useState([]);
-	const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+	const [activeTab, setActiveTab] = useState('layers');

 	useEffect(() => {
 		if (treeData && treeData.length > 0) {
@@ -25,19 +24,27 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 		}
 	}, [treeData]);

+	// 트리 노드 체크 시 레이어 표시/숨김
 	useEffect(() => {
 		if (nodes.length > 0) {
+			// 기본으로 체크된 노드들 찾기
 			const defaultChecked = getDefaultCheckedNodes(nodes);
 			setChecked(defaultChecked);
+			console.log('defaultChecked : ', defaultChecked);
+
+			// 기본으로 확장된 노드들 설정
 			const defaultExpanded = Array.from(new Set([
 				...defaultChecked,
 				...defaultChecked.flatMap((id) => getAncestors(id, nodes))
 			]));
 			setExpanded(defaultExpanded);
+
+			// 기본 체크된 레이어들을 지도에 표시
 			gisCore.setLayerOnMap(defaultChecked, true);
 		}
 	}, [nodes]);

+	// 초기 표시 여부가 'Y'인 레이어들 찾기
 	const getDefaultCheckedNodes = (nodes, values = []) => {
 		for (let i = 0; i < nodes.length; i++) {
 			const node = nodes[i];
@@ -115,7 +122,7 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 	};

 	const makeLegendSrc = layerinfo => {
-		if(!layerinfo.gobjTy) return null;
+		if (!layerinfo.gobjTy) return null;

 		let src;
 		if (layerinfo.iconNm) {
@@ -176,34 +183,61 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes

 	return (
 		<>
-			<DndProvider backend={MultiBackend} options={getBackendOptions()}>
-				<Tree
-					tree={nodes}
-					rootId={null}
-					initialOpen={expanded}
-					onOpenChange={setExpanded}
-					render={(node, { depth, isOpen, onToggle }) => (
-					<div
-						className="flex items-center gap-2 py-1 px-2 hover:bg-gray-100 rounded"
-						style={{ marginInlineStart: depth * 16 + (!node.droppable ? 16 : 0) }}
-					>
-						{node.droppable && (
-						<i onClick={onToggle} className={`diveicon di-arrow-forward mr-2 text-base text-label ${isOpen ? 'rotate-90' : ''}`}
-							title={isOpen ? '닫기' : '열기'}>
-						</i>
-						)}
-						<input type="checkbox" checked={checked.includes(node.id)} onChange={() => handleCheck(node.id)} className="cursor-pointer"/>
-						{node.icon && <span>{node.icon}</span>}
-						<span className="text-[1.3rem] font-medium text-label">{node.text}</span>
-					</div>
-					)}
-					sort={(a, b) => {
-					const aOrder = parseInt(a.data?.sortOrdr ?? '0');
-					const bOrder = parseInt(b.data?.sortOrdr ?? '0');
-					return aOrder - bOrder;
-					}}
-				/>
-			</DndProvider>
+			<div
+				className={`absolute top-0 left-0 w-[250px] h-[calc(100vh-10rem)] bg-white border-r border-gray-300 flex flex-col overflow-hidden transition-all duration-300 z-40
+          ${visible ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0 pointer-events-none'}`}
+			>
+				<div
+					className={`grow overflow-y-auto p-2 pt-0 border-none shadow-none ${activeTab === 'layers' ? 'block' : 'hidden'}`}
+				>
+					<h3 className="text-3xl text-gray-600 text-bold font-bold mx-2 my-4 ">레이어</h3>
+					<hr className="mb-4" />
+					<DndProvider backend={MultiBackend} options={getBackendOptions()}>
+						<Tree
+							tree={nodes}
+							rootId={null}
+							initialOpen={expanded}
+							onOpenChange={setExpanded}
+							render={(node, { depth, isOpen, onToggle }) => (
+								<div
+									className="flex items-center gap-2 py-1 px-2 hover:bg-gray-100 rounded"
+									style={{ marginInlineStart: depth * 16 + (!node.droppable ? 16 : 0) }}
+								>
+									{node.droppable && (
+										<i onClick={onToggle} className={`diveicon di-arrow-forward mr-2 text-base text-label ${isOpen ? 'rotate-90' : ''}`}
+											title={isOpen ? '닫기' : '열기'}>
+										</i>
+									)}
+									<input type="checkbox" checked={checked.includes(node.id)} onChange={() => handleCheck(node.id)} className="cursor-pointer" />
+									{node.icon && <span>{node.icon}</span>}
+									<span className="text-[1.3rem] font-medium text-label">{node.text}</span>
+								</div>
+							)}
+							sort={(a, b) => {
+								const aOrder = parseInt(a.data?.sortOrdr ?? '0');
+								const bOrder = parseInt(b.data?.sortOrdr ?? '0');
+								return aOrder - bOrder;
+							}}
+						/>
+					</DndProvider>
+				</div>
+				{/* 접기 버튼 */}
+				<button
+					onClick={() => setVisible(false)}
+					className="absolute top-1/2 right-[-3px] transform -translate-y-1/2 z-50 bg-white border border-l border-gray-300 rounded-l-none rounded-r px-1 py-2 shadow-sm"
+				>
+					<ChevronLeft size={16} />
+				</button>
+			</div>
+			{/* 열기 버튼 */}
+			{!visible && (
+				<button
+					onClick={() => setVisible(true)}
+					className="absolute top-1/2 left-[-3px] transform -translate-y-1/2 z-50 bg-white border border-r border-gray-300 rounded-r px-1 py-2 shadow-sm"
+				>
+					<ChevronRight size={16} />
+				</button>
+			)}
 		</>
 	);
 });
@@ -26,10 +26,13 @@ const GisApp = {};
 //레이어 정보
 GisApp.layerInfos = [];
 //기본정보
-//GisApp.GEOSERVER_URL = 'http://rsone.iptime.org:10010/geoserver/hasudo/ows';
-//GisApp.GEOSERVER_WMS_URL = 'http://rsone.iptime.org:10010/geoserver/hasudo/wms';
-GisApp.GEOSERVER_URL = '/sn/geoserver/hasudo/ows';
-GisApp.GEOSERVER_WMS_URL = '/sn/geoserver/hasudo/wms';
+GisApp.GEOSERVER_URL = 'http://rsone.iptime.org:10010/geoserver/hasudo/ows';
+GisApp.GEOSERVER_WMS_URL = 'http://rsone.iptime.org:10010/geoserver/hasudo/wms';
+// GisApp.GEOSERVER_URL = '/sn/geoserver/hasudo/ows';
+// GisApp.GEOSERVER_WMS_URL = '/sn/geoserver/hasudo/wms';
+// GisApp.GEOSERVER_URL = '/geoserver/hasudo/ows';
+// GisApp.SN_GEOSERVER_URL = '/sewerage-service/api/v1/map/geometry';
+// GisApp.GEOSERVER_WMS_URL = '/geoserver/hasudo/wms';

 //맵 정보
 GisApp.EMAP_URL = '/emap/';
@@ -47,7 +50,8 @@ GisApp.BASE_MAP_TYPES = [];
 GisApp.FROM_PROJ = 'EPSG:4326';
 GisApp.TO_PROJ = 'EPSG:3857';
 GisApp.TO_DATA_PROJ = 'EPSG:4326';
-GisApp.CONTEXT_LAYER_PATH = '/sn/images/map/layericon/';
+// GisApp.CONTEXT_LAYER_PATH = '/sn/images/map/layericon/';
+GisApp.CONTEXT_LAYER_PATH = '/images/map/layericon/';
 GisApp.layerCode = {};
 GisApp.hlLayerId = 'LightFeatureList';
 GisApp.hLayerId = 'highLightFeature';
@@ -507,6 +511,7 @@ GisApp.core.prototype = {
 	 *
 	 * Returns:
 	 */
+	// 레이어를 지도에 표시/숨김
 	setLayerOnMap: function (layerIds, visible, addQurryFlter) {
 		for (let i in layerIds) {
 			let id = layerIds[i];
@@ -517,10 +522,14 @@ GisApp.core.prototype = {
 				const layerCode = GisApp.layerCode[id];
 				const queryFlter = layerCode?.flterSql || '' + ' ' + (addQurryFlter || '');
 				layerCode['flterSql'] = queryFlter;
-				//layer = this.addWmsLayer(layerCode);				
+				//layer = this.addWmsLayer(layerCode);
+
+				// WFS 레이어 생성 및 지도에 추가
 				layer = this.addWfsLayer(layerCode);
 			}
 		}
+
+		// 선택 인터랙션 및 스냅 기능 설정
 		if (GisApp.Module.select) {
 			this.setSelectInteraction();
 		}