feat, fix: FeatureClickEventPopup에서 featureID 가져오기 및 레이어 이름 선택 처리 추가, 탭 기능을 위한 UITab2 컴포넌트 추가

apps/sn/app/map/featureClickEventPopup.tsx

@@ -9,27 +9,41 @@ import { getLayerContentComponent } from "./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 = 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 [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
-    let [buttonChk,setButtonChk] = useState(true)
+    let [buttonChk, setButtonChk] = useState(true)
     // 피쳐데이터의 현재 레이어 이름 가져오는 함수
     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 && source.hasFeature(featureData)) {
+            if (source && source.hasFeature && featureData
+                && typeof featureData.getId === 'function' && source.hasFeature(featureData)) {
                 featureLayer = layer; // 피처가 속한 레이어 찾기
             }
         });
-        return featureLayer.get('lyrNm'); // 레이어 이름 출력
+        // SearchMoal 클릭 이벤트와 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 result = featureLayer.get('lyrNm');
+        
+        return result;
+        // return featureLayer.get('lyrNm'); // 레이어 이름 출력
     };
     useEffect(() => {
         const fetchData = async () => {
             if (featureId) {
                 const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기
+                console.log("selectedLayerName", selectedLayerName);
                 setLayerNm(selectedLayerName); // 상태 업데이트
 
                 const data = await getData(`v1/map/features/${featureId}`);
@@ -79,15 +93,15 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
                 </button>
             </div>
             <div className="overflow-y-auto flex-1">
-            <VerticalTable headName='LX 연계정보' tableData={[tableData]} headlist={headlist} pageSize={20} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
+                <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.");
                 }}></VerticalTable>
                 <div className="w-full mx-5 flex items-center justify-end space-x-2">
-                {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> : null}
-            </div>
-              {ContentComponent && <ContentComponent />}
+                    {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> : null}
+                </div>
+                {ContentComponent && <ContentComponent />}
             </div>
         </div>
     )

packages/common/business_components/src/ui/tab/index-2.tsx

@@ -0,0 +1,38 @@
+import { Tabs, TabsList, TabsTrigger } from '@common/components/ui';
+import React from 'react';
+
+interface TabItem {
+  value: string;
+  label: string;
+  onClick?: () => void;
+}
+
+interface UITabProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: string;
+  tabList: TabItem[];
+  children: React.ReactNode;
+}
+
+const UITab2  = React.forwardRef<
+  HTMLDivElement,
+  UITabProps
+>(({defaultValue, tabList, children}, ref)=>{
+    return (
+      <Tabs defaultValue={defaultValue || tabList[0]?.value} className={"w-full space-x-1 border-b border-gray-200"}>
+        <TabsList className="flex space-x-1">
+          {tabList.map((tab) => (
+            <TabsTrigger 
+              key={tab.value}
+              value={tab.value}
+              onClick={tab.onClick}
+              className="py-2 px-4 text-sm font-medium border-b-2 focus:outline-none data-[state=active]:border-blue-500 data-[state=active]:text-blue-600 data-[state=inactive]:border-transparent data-[state=inactive]:text-gray-500 hover:text-gray-700 hover:border-gray-300"
+            >
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {children}
+      </Tabs>
+    )
+})
+export { UITab2 };