Merge commit '9cf8a5355c357adb4e3e995d3c1ab0301943fec3' into iipbs/sn/dev

apps/sn/app/components/ui/verticalTable.tsx

@@ -45,7 +45,7 @@ export function VerticalTable({
             onPageChange(1);
         }
     }, [onPageChange, resetPageNo]);
-    
+
     useEffect(() => {
         if (tableData.length > 0 && tableData[0]) {
             setFormData(tableData[0] as { [key: string]: string | number | boolean });
@@ -85,6 +85,7 @@ export function VerticalTable({
                                     {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 +98,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)}

apps/sn/app/map/components/common/index.ts

@@ -17,7 +17,7 @@ type LayerContentMap = {
 const layerContentMap: LayerContentMap = {
     // TODO: gis데이터 추가되면 추가 작업 필요
     "하수처리시설": {
-        component: SwtrmtFclt,
+        component: StormWaterPump,
     },
     "하수처리구역": { },
     "중점우수토실":{component: Ssc,},

apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx

@@ -2,6 +2,8 @@ import { VerticalTable } from '@/components/ui/verticalTable';
 import React, { useState } from 'react'
 import InputSection from '../InputSection';
 import { handleInputChange } from '../common';
+import { Button } from '@common/components/ui';
+import InfilChart from './chart/infilChart';
 // 하수관로
 // TODO: RDII 버튼인가 그거 팝업 두개 구현 필요
 const inputColumn = [
@@ -15,6 +17,15 @@ const inputColumn = [
 ];
 const SwtrmtFclt = ({ featureData }: { featureData: any }) => {
     console.log("featureData", featureData);
+    const [isModalOpen, setIsModalOpen] = React.useState(false);
+    const [btnTxt, setBtnTxt] = useState<string>("");
+    const openModal = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.currentTarget.textContent && setBtnTxt(e.currentTarget.textContent)
+        setIsModalOpen(true);
+    };
+    const closeModal = () => {
+        setIsModalOpen(false);
+    };
     const [repairData, setRepairData] = useState([
         { year: "2025", type: "개대체" },
         { year: "2025", type: "보수" },
@@ -32,6 +43,20 @@ const SwtrmtFclt = ({ featureData }: { featureData: any }) => {
         cleaning: { data: cleaningData, setData: setCleaningData },
         inspection: { data: inspectionData, setData: setInspectionData },
     };
+    const keysToExtract = [
+        "swtrmt_zone_cd",
+        "mltv_dtdv_nm",
+        "fid",
+        "lyrTypeNm",
+        "reg_dt",
+        "mdfcn_dt",
+        "rgtr",
+        "mdfr",
+    ];
+    // const filteredData = Object.entries(featureData)
+    // .filter(([key]) => keysToExtract.includes(key)) // 필요한 키만 필터링
+    // .map(([key, value]) => ({ key, value: value ?? "N/A" })); // 테이블 데이터 형식으로 변환
+
     return (
         <div>
             <VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
@@ -39,7 +64,23 @@ const SwtrmtFclt = ({ featureData }: { featureData: any }) => {
             }}></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>
+            <InputSection title="점검 및 진단" data={inspectionData} sectionKey="inspection" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} />
+            <div className="absolute bottom-0 left-0 w-full flex justify-start space-x-2 p-4">
+                <Button
+                    className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+                    onClick={openModal}
+                >
+                    Infil
+                </Button>
+                <Button
+                    className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
+                    onClick={openModal}
+                >
+                    RDII
+                </Button>
+            </div>
+            <InfilChart btnTxt={btnTxt} isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal} />
+        </div>
     )
 }
 

apps/sn/app/map/components/popupComponent/chart/infilChart.tsx

@@ -0,0 +1,140 @@
+import React, { useState } from 'react'
+import { type ChartConfig, MainChart, CHART_FORM } from "@common/business_components";
+import Modal from '@/components/ui/modal';
+import { Button } from '@common/components/ui';
+type ModalOpenProp = {
+    isModalOpen: boolean,
+    setIsModalOpen: (open: boolean) => void,
+    closeModal: () => void,
+    btnTxt?: string,
+}
+const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => {
+    const [popupOpen, setPopupOpen] = React.useState(false);
+    const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
+    const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
+    const openPopup = () => {
+        if (buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
+            setPopupPosition({
+                top: rect.bottom + window.scrollY, // 버튼 아래쪽
+                left: rect.left + window.scrollX, // 버튼 왼쪽
+            });
+        }
+    setPopupOpen(true); // 팝업 열기
+    };
+    console.log("btnTxt", btnTxt);
+    const closePopup = () => {setPopupOpen(false);}; // 팝업 닫기
+    const chartForm = CHART_FORM.LINE;
+    const chartData = {
+        chartData1: [
+            { label: "1", val: 20 },
+            { label: "3", val: 40 },
+            { label: "5", val: 60 },
+          ],
+          chartData2: [
+            { label: "1", val: 15 },
+            { label: "3", val: 35 },
+            { label: "5", val: 55 },
+          ],
+        }
+        const chartConfig = Object.values(chartData).flat().reduce((config, element) => {
+            config[element.label] = {
+                label: element.label,
+                color: "hsl(var(--chart-1))",
+            };
+            return config;
+        }, {} as Record<string, { label: string; color: string }>) satisfies ChartConfig;
+    const getCurrentDate = () => {
+        const today = new Date();
+        const year = today.getFullYear();
+        const month = String(today.getMonth() + 1).padStart(2, "0"); // 월은 0부터 시작하므로 +1
+        return `${year}-${month}`;
+    };
+    return (
+        <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}>
+            {/* 분석 입력현황 조회 */}
+            <div className='grid grid-cols-4 gap-4'>
+                <div className="grid grid-rows-4 gap-4 mb-4">
+                    <Button className="bg-white text-white w-[130px] font-bold px-4 mt-2 py-2" onClick={openPopup}>
+                        분석 입력현황 조회
+                    </Button>
+
+                    {/* 침입수량 분석결과 */}
+                    <div className="bg-white text-red-600 font-bold px-4 py-2 ">
+                        침입수량 분석결과
+                        <div className="flex items-center mt-2">
+                            <span className="text-black text-xl font-bold">120</span>
+                            <span className="ml-2 text-black">m³/d</span>
+                        </div>
+                    </div>
+                </div>
+                {/* 차트 */}
+                <div className="w-[500px] h-[300px] bg-white p-4">
+                    <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'관로유량'} />
+                </div>
+            </div>
+            {popupOpen && (
+                <div
+                    className="absolute bg-gray-100 border border-gray-300 w-[320px] shadow-lg p-4 rounded"
+                    style={{
+                        top: popupPosition.top,
+                        left: popupPosition.left,
+                        zIndex: 1000,
+                    }}
+                >
+                    <div className="text-lg font-bold mb-2">분석 입력현황</div>
+                    <div className="grid grid-cols-2 gap-2">
+                        <div>상수사용량 정보:</div>
+                        <div>
+                            <input type='month' defaultValue={getCurrentDate()} className="border border-gray-300 rounded px-2 py-1"/>
+                        </div>
+                        <div>오수 전환율:</div>
+                        <div>
+                            <select className="border border-gray-300 rounded px-2 py-1">
+                                <option>0.85</option>
+                                <option>0.90</option>
+                            </select>
+                        </div>
+                        <div>수용가-맨홀 매칭:</div>
+                        <div>
+                            <select className="border border-gray-300 rounded px-2 py-1">
+                                <option>매칭(양평).shp</option>
+                                <option>매칭(서울).shp</option>
+                            </select>
+                        </div>
+                        <div>관망도 자료:</div>
+                        <div>
+                            <select className="border border-gray-300 rounded px-2 py-1">
+                                <option>양평.inp</option>
+                                <option>서울.inp</option>
+                            </select>
+                        </div>
+                        {btnTxt === 'RDII' ?  <><div>강우 자료:</div>
+                        <div>
+                            <select className="border border-gray-300 rounded px-2 py-1">
+                                <option>R20240815.xlsx</option>
+                            </select>
+                        </div>
+                        <div>RTX 계수 출처:</div>
+                        <div>
+                            <select className="border border-gray-300 rounded px-2 py-1">
+                                <option>2015년 하수도정비기본계획</option>
+                            </select>
+                        </div>
+                        </> : null}
+                    </div>
+                    <div className="flex justify-end mt-4 space-x-2">
+                        <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}>
+                            저장
+                        </button>
+                        <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}>
+                            종료
+                        </button>
+                    </div>
+                </div>
+            )}
+        </Modal>
+    )
+}
+
+export default InfilChart

apps/sn/app/map/components/popupComponent/stormWaterPump.tsx

@@ -1,13 +1,15 @@
 import { VerticalTable } from '@/components/ui/verticalTable';
 import React from 'react'
 const inputColumn = [
-    { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
-    { id: "bungu", title: "배수분구", type: "input" },
+    { id: "swtrmt_zone_cd", title: "처리구역", type: "input" },
+    { id: "mltv_dtdv_nm", title: "배수분구", type: "input" },
 ]
 // 빗물펌프
-const StormWaterPump = ({ featureData }: { featureData: any }) => {
+const StormWaterPump = ({ featureData }: { featureData: Record<string, any> }) => {
+  const validKey = inputColumn.map((item) => item.id);
+  const filteredData = featureData && Object.entries(featureData).filter(([key]) => validKey.includes(key)).reduce((obj: Record<string, any>, [key, value]) => {obj[key] = value; return obj;}, {});
   return (
-    <div><VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={0} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
+    <div><VerticalTable headName='자체 입력정보' tableData={[filteredData]} headlist={inputColumn} pageSize={0} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
           throw new Error('Function not implemented.');
         }} />
         </div>

apps/sn/app/map/featureClickEventPopup.tsx

@@ -4,7 +4,7 @@ import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow }
 import { useEffect, useRef, useState } from "react";
 import { SwtrmtFcltCol, SwtrmtPrcsZoneCol } from "./components/common/table";
 import { useGisContext } from "@common/business_components/ui/map/Gis";
-import { getData } from "@/components/lib/api";
+import { getData, putData } from "@/components/lib/api";
 import { getLayerContentComponent } from "./components/common";
 // TODO:
 const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
@@ -82,21 +82,34 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
         fetchData();
     }, [featureId]);
     //  TODO: api 호출작업 필요(사용자 입력부분)
-    const btnClickEvent = () => {
+    const btnClickEvent = async() => {
+        const bodyData: Record<string, any> = {}
         if (buttonChk && contentRef.current) {
             const inputElements = contentRef.current.querySelectorAll('input');
             const selectElements = contentRef.current.querySelectorAll('select');
             // select 태그의 값 가져오기
-            console.log("Select Elements:", selectElements);
-            console.log("Input Elements:", inputElements);
             selectElements.forEach((select) => {
-                console.log("Select Value:", select.value);
+                bodyData[select.id] = select.value;
             });
-
             // input 태그의 값 가져오기
             inputElements.forEach((input) => {
-                console.log("Input Value:", input.value);
+                bodyData[input.id] = input.value;
             });
+            if (layerNm === '하수관로' || 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'
+            }
+            bodyData['fid'] = featureId
+            const data = await putData(`v1/fclts/${featureId}`, bodyData);
+            if(data){
+                console.log('저장완료', data);
+            }
         }
     }
     const ContentComponent = layerNm ? getLayerContentComponent(layerNm) : null;

apps/sn/app/oper/diag/page.tsx

@@ -1,58 +0,0 @@
-'use client'
-
-import { SearchDiv, SelectBox, UiTable } from '@common/business_components';
-import { Button, TableRow, Input, Label } from '@common/components';
-import { TableHead } from '@common/components';
-import { useSnStore } from '../../store';
-import type { TableUpperProps } from '../../store/table';
-
-const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
-  return  ( <>
-  <TableRow>{
-  upHeadList.map((head: TableUpperProps) => 
-    (!head.upSequnce?<TableHead rowSpan={2}key={head.id}>{head.title}</TableHead>:
-      head.upName === 'upChangeRe'&& head.upSequnce=== 1?<TableHead key={head.id} rowSpan={1} colSpan={3}>{'중축 개축 증축 '}</TableHead>:null))}
-  </TableRow>
-  <TableRow>
-    {upHeadList.map((head: TableUpperProps) =>
-      (head.upName === 'upChangeRe'?<TableHead key={head.id}>{head.title}</TableHead>:null))}
-  </TableRow>
-  </> )
-}
-
-  export  default function PublicReuseFaciltyInsert() {
-    const {  upHeadList, publicReuseFacilityUper} = useSnStore((state) => state);
-    const nodeList= headMakeColSpan(upHeadList);
-    const total = 100; 
-    const headName= ()=>{
-          return(
-            <p className="pl-3 text-xl">점검 및 진단 현황</p>
-          )
-    }
-    return (  <>
-    <div>
-      <p className="pl-3 text-2xl"> 점검 및 진단 조회</p>
-      <SearchDiv>
-        <div className='flex'>
-          <SelectBox label='시설물' selectArray={[{text:'관로', val:'1'}]} selectClass='w-24' className='mr-4' onSelectValue={()=>{}} />
-          <SelectBox label='사용여부' selectArray={[{text:'사용', val:'1'}]} selectClass='w-24' className='mr-4' onSelectValue={()=>{}} />
-          <SelectBox label='경과년도' selectArray={[{text:'10년', val:'1'}]} selectClass='w-24' className='mr-4' onSelectValue={()=>{}} />
-          <SelectBox label='경사' selectArray={[{text:'', val:'1'}]} selectClass='w-24' className='mr-4' onSelectValue={()=>{}} />
-          <SelectBox label='흐름방식' selectArray={[{text:'자연유하', val:'1'}]} selectClass='w-24' className='mr-4' onSelectValue={()=>{}} />
-          <SelectBox label='용도' selectArray={[{text:'오수관', val:'1'}]} selectClass='w-24' className='mr-4' onSelectValue={()=>{}} />
-          <SelectBox label='관종' selectArray={[{text:'PE관관', val:'1'}]} selectClass='w-24' className='mr-4' onSelectValue={()=>{}} />
-          <SelectBox label='관경' selectArray={[{text:'50', val:'1'}]} selectClass='w-24' className='mr-4' onSelectValue={()=>{}} />
-          <Button className='mr-4' size='sm'>조회</Button>
-        </div>
-      </SearchDiv>
-    </div>
-    <div className="grid grid-cols-2 gap-4">
-          <div className="colsapn-1">
-            
-          </div>   
-    </div>          
-    </> )
-}
-
-
-

apps/sn/app/oper/pplines/page.tsx

@@ -1,65 +0,0 @@
-'use client'
-import "@common/assets/styles/grid.css";
-import { useEffect, useState } from "react";
-import { SearchDiv, SelectBox, UiTable, MainDiv, Title, ContentsDiv, SearchFormLeft, SearchFormRight } from '@common/business_components';
-import ListDiv from '@common/business_components/ui/list_div';
-import { Button, Input } from '@common/components';
-import { useRouter } from "next/navigation";
-import { pplinesService } from "@service";
-
-const tableHeadlist = [
-    { id: "ftreSmbol", title: "지형지물부호"},
-    { id: "swageLnkgPplPk", title: "하수연결관로기본키"},
-    { id: "pbadmsEmd", title: "행정읍면동"},
-    { id: "sttyEmd", title: "법정읍면동"}
-];
-
-export default function Pplines() {
-
-  const router = useRouter()
-  const total = 20
-  const pageSize = 20
-
-  const [data, setData] = useState<{ content: any[] }>({ content: [] }); // 초기값을 객체 또는 null로 설정
-
-  const fetchData = async () => {
-    
-    try {
-      const response = await pplinesService.getPplines();
-      setData(response.data); // API 응답 저장
-    } catch (error) {
-      console.error("데이터 불러오기 실패:", error);
-    }
-  };
-
-    // 컴포넌트 마운트 시 1회 실행
-    useEffect(() => {
-      fetchData();
-    }, []);
-
-  return (  
-    <MainDiv>
-      <Title title="관로시설" />
-      <ContentsDiv>
-        <SearchDiv>
-          <SearchFormLeft>
-            <SelectBox label='시설물' selectArray={[{text:'관로', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' />
-            <SelectBox label='사용여부' selectArray={[{text:'사용', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' />
-            <SelectBox label='경과년도' selectArray={[{text:'10년', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' />
-            <SelectBox label='경사' selectArray={[{text:'', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' />
-            <SelectBox label='흐름방식' selectArray={[{text:'자연유하', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' />
-            <SelectBox label='용도' selectArray={[{text:'오수관', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' />
-            <SelectBox label='관종' selectArray={[{text:'PE관관', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' />
-            <SelectBox label='관경' selectArray={[{text:'50', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' />
-          </SearchFormLeft>
-          <SearchFormRight>
-            <Button className="px-4 py2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={fetchData}>조회</Button>
-          </SearchFormRight>
-        </SearchDiv>
-      
-        <ListDiv>
-            <UiTable tableData={data.content} headlist={tableHeadlist} pageSize={pageSize} total={total} children={null} headName="현황정보" cellClick={()=>{}} />
-        </ListDiv>
-      </ContentsDiv>
-    </MainDiv> );
-}

apps/sn/app/oper/soil/page.tsx

@@ -1,126 +0,0 @@
-'use client'
-
-import { SearchDiv, SelectBox, UiTable } from '@common/business_components';
-import { Button } from '@common/components';
-import { useSnStore } from '@store';
-import { type TableUpperProps } from '@/store/table';
-import { StoreZus } from '@/store/store';
-import { useRouter } from "next/navigation";
-
-  const upHeadList: TableUpperProps[] = [
-    { id: "sido", title: "자산ID111"},
-    { id: "sigungo", title: "설비시설"},
-    { id: "facilityName", title: "주소"},
-    { id: "location", title: "자산코드"},
-    { id: "locationgubun", title: "자산명"},
-    { id: "facilityCapacity", title: "용도"},
-    { id: "yn", title: '신설/교체'},
-    { id: "authoDay", title: '처리구역'},
-    { id: "area", title: '내용연수' },
-    { id: "reuse", title: '취득금액' },
-  ]
-
-  const useAStore = StoreZus();
-
-  export default function PublicReuseFaciltyInsert() {
-
-    //const upHeadList = useSnStore((state) => state.upHeadList)
-    //const publicReuseFacilityUper = useSnStore((state) => state.publicReuseFacilityUper)
-
-    //const { upHeadList, publicReuseFacilityUper, setHeadList, setTableData, decrementList, addRow } = useAStore.getState();
-    const upHeadList = useSnStore(useAStore => useAStore.upHeadList);
-    const publicReuseFacilityUper = useSnStore(useAStore => useAStore.publicReuseFacilityUper);
-    const setHeadList = useSnStore(useAStore => useAStore.setHeadList);
-    const setTableData = useSnStore(useAStore => useAStore.setTableData);
-    const addRow = useSnStore(useAStore => useAStore.addRow);
-    const decrementList = useSnStore(useAStore => useAStore.decrementList);
-    
-    
-    //const {  upHeadList, publicReuseFacilityUper} = useSnStore((state) => state)
-
-    //const setHeadList = useSnStore((state) => state.setHeadList)
-    //const setTableData = useSnStore((state) => state.setTableData)
-    //const decrementList = useSnStore((state) => state.decrementList)
-
-    const handleChangeHeader = () => {
-      setHeadList(upHeadList)
-    }
-
-    const add = () => {
-      console.log(11111)
-      addRow({ 
-          sido: "xxxxxxxxxx",
-          sigungo: "bbbbbbbbb",
-          facilityName: "newFacility",
-          location: "S-T-S-000000",
-          locationgubun: "000000",
-          facilityCapacity: "오수관",
-      });      
-    };
-
-    const searchDataList = () => {
-      //if (newFacility.trim() === "") return;
-
-      setTableData([ { 
-          sido: "123456",
-          sigungo: "관로1",
-          facilityName: "newFacility",
-          location: "S-T-S-000000",
-          locationgubun: "000000",
-          facilityCapacity: "오수관",
-      }]);
-
-      
-    };
-
-    const total = 100; 
-    const headName= ()=>{
-          return(
-            <p className="pl-3 text-xl">현황정보</p>
-          )
-    }
-
-    const router = useRouter();
-
-    return (  
-    <div>
-      <p className="pl-3 text-2xl"> 현황정보 조회</p>
-      <SearchDiv >
-        <div className='grid grid-cols-12 gap-1 w-4/5'>
-          <SelectBox label='시설물' selectArray={[{text:'관로', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' />
-          <SelectBox label='사용여부' selectArray={[{text:'사용', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' />
-          <SelectBox label='경과년도' selectArray={[{text:'10년', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' />
-          <SelectBox label='경사' selectArray={[{text:'', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' />
-          <SelectBox label='흐름방식' selectArray={[{text:'자연유하', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' />
-          <SelectBox label='용도' selectArray={[{text:'오수관', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' />
-          <SelectBox label='관종' selectArray={[{text:'PE관관', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' />
-          {/* <SelectBox label='관경' selectArray={[{text:'50', val:'1'}]} className='col-span-3'/> */}
-        </div>
-        <div className='w-1/5 flex justify-end items-center'>
-          <Button className='mr-10 rounded-lg'>조회</Button>
-        </div>
-      </SearchDiv>
-    {/* </div> */}
-    <div className="grid grid-cols-2 gap-4">
-          <div className="col-span-2">
-            
-          </div>   
-    </div>    
-
-    <button onClick={searchDataList} className="mr-3 mt-4 bg-red-500 text-white px-4 py-2 rounded">
-        조회
-    </button>  
-    <button onClick={handleChangeHeader} className="mr-3 mt-4 bg-red-500 text-white px-4 py-2 rounded">
-        헤더 
-    </button>    
-    <button onClick={decrementList} className="mr-3 mt-4 bg-red-500 text-white px-4 py-2 rounded">
-        삭제
-    </button>  
-    <button onClick={() => router.push("/oper/pplines")} className="mr-3 mt-4 bg-red-500 text-white px-4 py-2 rounded">
-      이동
-    </button>    
-  </div> );
-}
-
-
-

apps/sn/app/service/index.ts

@@ -1,2 +1 @@
-export * from './ppline'
 export * from './map'

apps/sn/app/service/ppline.ts

@@ -1,39 +0,0 @@
-
-import axios from 'axios'
-
-/**
- * 하수관로 API
- */
-const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}/v1/pplines`
-const PAGE_NO = 1
-const PAGE_SIZE = 20
-
-export type PplineProps = {
-  ftreSmbol: string
-  swageLnkgPplPk: string
-  pbadmsEmd: string
-  sttyEmd: string
-}
-
-export const pplinesService = {
-  //목록  
-  getPplines: (size: number = PAGE_SIZE, page: number = PAGE_NO) => {
-    return axios.get(`${API_URL}`)
-  },
-  //상세
-  getPpline: (swageLnkgPplPk: string) => {
-    return axios.get(`${API_URL}/${swageLnkgPplPk}`)
-  },
-  //저장
-  savePpline: (swageLnkgPplPk: string) => {
-    return axios.post(`${API_URL}`)
-  },
-  //수정
-  updatePpline: (swageLnkgPplPk: string) => {
-    return axios.put(`${API_URL}/${swageLnkgPplPk}`)
-  },
-  //삭제
-  removePpline: (swageLnkgPplPk: string) => {
-    return axios.delete(`${API_URL}/${swageLnkgPplPk}`)
-  }
-}