From f2167e69a3789dd922bc115ef9c5a53df788546c Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Wed, 2 Jul 2025 14:25:28 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=96=B4=20=ED=94=BC?= =?UTF-8?q?=EC=B2=98=20=EC=84=A0=ED=83=9D=20=EC=8B=9C=20=ED=95=B4=EB=8B=B9?= =?UTF-8?q?=20=EC=8B=9C=EC=84=A4=EC=9D=98=20=EC=9E=AC=EC=9D=B4=EC=9A=A9?= =?UTF-8?q?=EC=8B=9C=EC=84=A4=20=ED=8C=9D=EC=97=85=20=ED=83=AD=EB=B3=84?= =?UTF-8?q?=EB=A1=9C=20=EB=82=98=EC=98=A4=EB=8F=84=EB=A1=9D=20=EC=9E=91?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/newWindowPopup.tsx | 55 +++++++++++++++++------------- 1 file changed, 32 insertions(+), 23 deletions(-) diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index a9f1f0326..e6438656d 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -2,12 +2,11 @@ import { useWrStore } from "@/app/store"; import { btnClass } from "@/app/store/common/code"; import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; import { excelDownload } from "@/components/lib/func/commom"; -import { Title, UiTable, UITab, ContentsDiv } from '@common/business_components'; +import { Title, UiTable, UITab } from '@common/business_components'; import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan"; import { Button } from "@common/components/ui"; import React, { useCallback, useState, useEffect } from 'react'; import NewWindowPortal from '@/app/map/newWindowPortal'; -import PbnstPrfmncSttnPopup from "@/app/map/pbnstPrfmncSttnPopup"; import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal"; import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type"; import type { chgBuilding, customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; @@ -16,6 +15,7 @@ import RswtrPrfmncsSttnPopup from "@/app/map/rswtrPrfmncSttnPopup"; import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; import HtdflPrfmncSttnPopup from "@/app/map/htdflPrfmncSttnPopup"; import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg"; +import { getFetch } from "@/components/lib/api"; interface NewWindowPopupProps { featureData: any; @@ -24,13 +24,6 @@ interface NewWindowPopupProps { onClose: () => void; } -// 탭 -const TABS = [ - { val: "0", text: "재이용시설1" }, - { val: "1", text: "재이용시설2" }, - { val: "2", text: "재이용시설n" }, -]; - // 데이터의 속성(key)을 사용자에게 보여줄 한글 이름으로 변환하기 위한 맵 // 실제 데이터에 맞게 이 부분을 확장해야 합니다. const propertyNameMap: { [key: string]: string } = { @@ -47,7 +40,8 @@ const NewWindowPopup: React.FC = ({ checkedLayersData = [], onClose }) => { - const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "0"); + const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]); + const [activeTab, setActiveTab] = useState('0'); // swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음 const [showDetailView, setShowDetailView] = useState(true); // 상세정보 화면 표시 상태 추가 @@ -108,9 +102,6 @@ const NewWindowPopup: React.FC = ({ return null; } - // 2. RuseMngTable에 필요한 tableData를 생성합니다. (단일 행 데이터) - // 선택된 피쳐 데이터 속성값 - // 물재이용시설 cellClick 이벤트 (상세정보) const pbnstCellClick = (index: number | undefined) => { if ( @@ -127,17 +118,34 @@ const NewWindowPopup: React.FC = ({ // setBdstTable(pbnstSttn.pbnstSttnRes); // }, [pbnstSttn.pbnstSttnRes]); + // 재이용시설 조회 + const fetchpbnstDetail = async (featureCd: string) => { + try { + const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`); + // 중복 데이터 추가 방지 + setTabData((prev) => { + if (prev.some((tab) => tab.id === featureCd)) { + return prev; // 이미 존재하는 탭이면 추가하지 않음 + } + console.log('탭 idx',prev, prev.length) + return [...prev, { id: featureCd, name: `재이용시설 ${prev.length + 1}`, data: response }]; + }); + } catch (error) { + console.error("Error fetching data:", error); + } + }; useEffect(() => { if (featureData) { const selectedVal = featureData.getProperties(); - const featureCd = selectedVal?.swtrmt_fclt_cd + '1'; - + const featureCd = selectedVal?.swtrmt_fclt_cd; if (featureCd && featureCd !== pbnstRuseFcltPk) { setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장 - getPbnStnDetail(featureCd); + setActiveTab(featureCd) + fetchpbnstDetail(featureCd); // 상세정보 가져오기 } } }, [featureData]); + useEffect(() => { if (pbnstSttn.pbnstDetail) { setPbnDetaileData({ @@ -198,7 +206,8 @@ const NewWindowPopup: React.FC = ({ const hasWaterTreatmentLayer = checkedLayersData.some(layer => layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설') ); - + const actTabData = tabData.find((tab) => tab.id === activeTab); + // swcho : true, false 값 변경하여 시설 변경하여 테스트하였음 // 재이용시설 const isPbnst = true; @@ -223,17 +232,17 @@ const NewWindowPopup: React.FC = ({
({ - value: tab.val, - label: tab.text, - onClick: () => setActiveTab(tab.val), + defaultValue={activeTab} + tabList={tabData.map((tab) => ({ + value: tab.id, + label: tab.name, + onClick: () => setActiveTab(tab.id), }))} children={undefined} />