관망도 추가가

apps/sn/app/map/page.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import Gis from '@common/business_components/ui/map/Gis';
+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 { useEffect, useState } from "react";
+import { mapService } from "@service";
+
+const Map = () => {
+
+   const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
+
+
+  const fetchData = async () => {    
+    try {
+      const response = await mapService.getLyrStngs();
+      setTreeData(response.data); // API 응답 저장
+    } catch (error) {
+      console.error("데이터 불러오기 실패:", error);
+    }
+  };
+
+  // 컴포넌트 마운트 시 1회 실행
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <div className="bg-container">
+      <Gis treeData={treeData}/>
+    </div>    
+  );
+};
+
+export default Map;

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

@@ -1,5 +1,5 @@
 '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';

apps/sn/app/service/index.ts

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

apps/sn/app/service/map.ts

@@ -0,0 +1,37 @@
+
+import axios from 'axios'
+
+/**
+ * 관망도 API
+ */
+const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}/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: () => {
+    return axios.get(`${API_URL}/lyrStngs`)
+  }
+}

apps/sn/app/service/ppline.ts

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

apps/sn/next.config.ts

@@ -1,6 +1,8 @@
 import type { NextConfig } from "next";
 import webpack from "webpack";
 
+const geoserverUrl = process.env.NEXT_PUBLIC_GEOSERVER_URL?.replace(/\/$/, '') ?? '';
+
 const nextConfig: NextConfig = {
   basePath: "/sn",
   typescript: {
@@ -40,6 +42,14 @@ const nextConfig: NextConfig = {
 
     return config;
   },
+  async rewrites() {
+    return [
+      {
+        source: '/geoserver/:hasudo*',
+        destination: `${geoserverUrl}/:hasudo*`,        
+      },
+    ];
+  },
 };
 
 export default nextConfig;

apps/sn/package.json

@@ -27,7 +27,10 @@
     "react-hook-form": "^7.54.2",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.24.2",
-    "zustand": "^5.0.3"
+    "zustand": "^5.0.3",
+    "ol": "^7.3.0",
+    "ol-ext": "^4.0.11",
+    "proj4": "^2.9.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",