레이어 컴포넌트 추가

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

@@ -3,12 +3,12 @@ import Ssc from "../popupComponent/Ssc";
 import SwtrmtFclt from "../popupComponent/SwtrmtFclt";
 
 // 레이어 이름과 컴포넌트를 매핑
-const layerContentMap: { [key: string]: { component: React.FC<any>; props?: any; } } = {
+const layerContentMap: { [key: string]: { component?: React.FC<any> ; props?: any; } } = {
     // TODO: gis데이터 추가되면 추가 작업 필요
     "하수처리시설": {
         component: SwtrmtFclt,
     },
-    "하수처리구역": { component: Ssc, },
+    "하수처리구역": { },
     "중점우수토실":{component: Ssc,},
     "하수관로":{component: SwtrmtFclt,},
     "하수맨홀":{component: smh,},
@@ -17,8 +17,9 @@ const layerContentMap: { [key: string]: { component: React.FC<any>; props?: any;
 // 동적 컴포넌트 반환 함수
 export const getLayerContentComponent = (layerNm: string): React.FC => {
     const component = layerContentMap[layerNm];
-    if (!component) {
-        throw new Error(`Component not found for layer name: ${layerNm}`);
+    if (!component || !component.component) {
+        // component가 없으면 null 반환
+        return () => null;
     }
     return component.component;
 };

apps/sn/app/map/featureClickEventPopup.tsx

@@ -1,11 +1,10 @@
 'use client'
 import { VerticalTable } from "@/components/ui/verticalTable";
 import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui";
-import { use, useEffect, useState } from "react";
+import { useEffect, 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 InputSection from "./components/InputSection";
 import { getLayerContentComponent } from "./components/common";
 // TODO:
 const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
@@ -14,6 +13,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
     const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
     const [tableData, setTableData] = useState<any>(null); // 피처 데이터 상태
     const [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
+    let [buttonChk,setButtonChk] = useState(true)
     // 피쳐데이터의 현재 레이어 이름 가져오는 함수
     const getSelectedLayers = () => {
         const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기
@@ -36,9 +36,23 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
                 switch (selectedLayerName) {
                     case '하수처리시설':
                         setHeadlist(SwtrmtFcltCol);
+                        setButtonChk(false)
                         break;
                     case '하수처리구역':
                         setHeadlist(SwtrmtPrcsZoneCol)
+                        setButtonChk(false)
+                        break;
+                    case '중점우수토실':
+                        setButtonChk(false)
+                        break;
+                    case '우수토실':
+                        setButtonChk(true)
+                        break;
+                    case '하수관로':
+                        setButtonChk(true)
+                        break;
+                    case '하수맨홀':
+                        setButtonChk(true)
                         break;
                     default:
                         break;
@@ -69,9 +83,9 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
                     throw new Error("Function not implemented.");
                 }}></VerticalTable>
                 <div className="w-full mx-5 flex items-center justify-end space-x-2">
-                <Button className="px-4 mr-5 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700">
+                {buttonChk ? <Button className="px-4 mr-5 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700">
                     저장
-                </Button>
+                </Button> : null}
             </div>
               {ContentComponent && <ContentComponent />}
             </div>