From 80b356f66b304ab9946fe77635607ce245a959fa Mon Sep 17 00:00:00 2001 From: hsson Date: Sat, 5 Jul 2025 22:37:03 +0900 Subject: [PATCH] =?UTF-8?q?React.memo=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/popupComponent/MsSwagePpl.tsx | 1 - .../popupComponent/chart/infilChart.tsx | 14 +++--- .../popupComponent/chart/rdiiChart.tsx | 14 +++--- .../popupComponent/chartModalStore.ts | 16 +++++++ .../map/featureClickEventPopup.tsx | 47 +++---------------- 5 files changed, 35 insertions(+), 57 deletions(-) create mode 100644 apps/sn/app/(map-layout)/map/components/popupComponent/chartModalStore.ts diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx index bf018340b..46537a7dd 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx @@ -4,7 +4,6 @@ import React, { useState } from 'react' import InputSection from '../InputSection'; import { handleInputChange } from '../common'; - // 하수관로 const inputColumn = [ { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] }, diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx index 46c94eaf6..ac89a9403 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx @@ -7,16 +7,14 @@ import moment from "moment"; import type { TInftwtAnls, TOilqData } from './aplcnYms'; import * as fn from './aplcnYms'; +import { useInfilChartModalStore } from '../chartModalStore'; // 모달 상태 관리 스토어 type ModalOpenProp = { - isModalOpen: boolean, - setIsModalOpen: (open: boolean) => void, - closeModal: () => void, - btnTxt?: string, pplMngNo?: string, // 관로관리번호 } type DataType = {label: string; val: number}; -const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }: ModalOpenProp) => { +const InfilChart = ({ pplMngNo }: ModalOpenProp) => { + const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useInfilChartModalStore(); // 모달 상태 관리 스토어 const [popupOpen, setPopupOpen] = React.useState(false); // 조회조건팝업 const buttonRef = React.useRef(null); // 버튼 참조 const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치 @@ -130,7 +128,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo <>
침입수분석결과
-
+
{/* 차트 */} -
+
@@ -271,4 +269,4 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo ) } -export default InfilChart \ No newline at end of file +export default React.memo(InfilChart); \ No newline at end of file diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx index ddaffcaf3..653b568b5 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx @@ -7,16 +7,14 @@ import moment from "moment"; import type { TRdiiAnls, TRdiiAnlsRslt, TOilqData } from './aplcnYms'; import * as fn from './aplcnYms'; +import { useRdiiChartModalStore } from '../chartModalStore'; // 모달 상태 관리 스토어 type ModalOpenProp = { - isModalOpen: boolean, - setIsModalOpen: (open: boolean) => void, - closeModal: () => void, - btnTxt?: string, pplMngNo: string, // 관로관리번호 } type DataType = {label: string; val: number}; -const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }: ModalOpenProp) => { +const RdiiChart = ({ pplMngNo }: ModalOpenProp) => { + const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useRdiiChartModalStore(); // 모달 상태 관리 스토어 const [popupOpen, setPopupOpen] = React.useState(false); // 조회조건팝업 const buttonRef = React.useRef(null); // 버튼 참조 const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치 @@ -117,7 +115,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo } <>
RDII분석결과
-
+
{/* 차트 */} -
+
@@ -263,4 +261,4 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo } ) } -export default RdiiChart \ No newline at end of file +export default React.memo(RdiiChart); \ No newline at end of file diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chartModalStore.ts b/apps/sn/app/(map-layout)/map/components/popupComponent/chartModalStore.ts new file mode 100644 index 000000000..c84fa48a7 --- /dev/null +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chartModalStore.ts @@ -0,0 +1,16 @@ +import { create } from 'zustand'; + +interface ModalStore { + isOpen: boolean; + setIsOpen: (open: boolean) => void; +} + +export const useInfilChartModalStore = create((set) => ({ + isOpen: false, + setIsOpen: (open: boolean) => set({ isOpen: open }), +})); + +export const useRdiiChartModalStore = create((set) => ({ + isOpen: false, + setIsOpen: (open: boolean) => set({ isOpen: open }), +})); \ No newline at end of file diff --git a/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx b/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx index a6dac412d..16c4f99a8 100644 --- a/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx +++ b/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx @@ -9,6 +9,7 @@ import { getLayerContentComponent } from "./components/common"; import { SwtrmtFcltCol, SwtrmtPrcsZoneCol, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, SewagePump, MsSwageMhlCol, stofcbrCol } from "./components/common/table"; import InfilChart from './components/popupComponent/chart/infilChart'; import RdiiChart from './components/popupComponent/chart/rdiiChart'; +import { useInfilChartModalStore, useRdiiChartModalStore } from "./components/popupComponent/chartModalStore"; // TODO: const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => { @@ -28,9 +29,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, const [isAdditionalDataLoading, setIsAdditionalDataLoading] = useState(false); const [additionalDataError, setAdditionalDataError] = useState(null); // 🎯 InfilChart 및 RdiiChart 관련 상태 추가 - const [isModalInfil, setIsModalInfil] = useState(false); - const [isModalRdii, setIsModalRdii] = useState(false); - const [btnTxt, setBtnTxt] = useState(""); + const { setIsOpen:setIsModalInfil } = useInfilChartModalStore(); + const { setIsOpen:setIsModalRdii } = useRdiiChartModalStore(); // 🎯 관로관리번호 추출 const pplMngNo = featureData?.values_?.fclt_mng_no || ""; @@ -237,25 +237,6 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, setIsModalOpen(false); // 모달 닫기 }; - // 🎯 모달 열기/닫기 함수들 - const openModalInfil = () => { - setBtnTxt("Infil"); - setIsModalInfil(true); - }; - - const closeModalInfil = () => { - setIsModalInfil(false); - }; - - const openModalRdii = () => { - setBtnTxt("RDII"); - setIsModalRdii(true); - }; - - const closeModalRdii = () => { - setIsModalRdii(false); - }; - const btnClickEvent = async () => { const bodyData: Record = {} if (buttonChk && contentRef.current) { @@ -305,17 +286,15 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, {/* 🎯 하수관로일 때만 Infil/RDII 버튼 표시 */} {layerNm === '하수관로' && ( <> - - @@ -363,20 +342,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
{/* 🎯 InfilChart 및 RdiiChart 컴포넌트 추가 */} - - + +
) }