ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

React.memo 사용

Browse Source
This commit is contained in:
hsson
2025-07-05 22:37:03 +09:00
parent 970bfc6c82
commit 80b356f66b
5 changed files with 35 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx
-1
View File
@@ -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", "재정사업"] },
apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+6 -8
View File
@@ -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<HTMLButtonElement>(null); // 버튼 참조
const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
@@ -130,7 +128,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo
<>
<div className="text-black text-3xl font-bold mb-5">침입수분석결과</div>
<div className='grid grid-cols-4 gap-4'>
<div className='grid grid-cols-[1fr_3fr] gap-4'>
<div className="grid grid-rows-4 gap-4 mb-4">
<Button className="bg-white text-white w-[130px] font-bold px-4 mt-2 py-2" onClick={openPopup}>
분석 입력현황 조회
@@ -154,7 +152,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo
</div>
</div>
{/* 차트 */}
<div className="w-[560px] h-[320px] bg-white text-2xl">
<div className="bg-white text-3xl">
<MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'관로유량'}
yFieldText2="시간" yFieldText="유량(m³/h)"/>
</div>
@@ -271,4 +269,4 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo
)
}
export default InfilChart
export default React.memo(InfilChart);
apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
+6 -8
View File
@@ -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<HTMLButtonElement>(null); // 버튼 참조
const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
@@ -117,7 +115,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }
<>
<div className="text-black text-3xl font-bold mb-5">RDII분석결과</div>
<div className='grid grid-cols-4 gap-4'>
<div className='grid grid-cols-[1fr_3fr] gap-4'>
<div className="grid grid-rows-4 gap-4 mb-4">
<Button className="bg-white text-white w-[130px] font-bold px-4 mt-2 py-2" onClick={openPopup}>
분석 입력현황 조회
@@ -146,7 +144,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }
</div>
</div>
{/* 차트 */}
<div className="w-[560px] h-[320px] bg-white text-2xl">
<div className="bg-white text-2xl">
<MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'관로유량'}
yFieldText2="시간" yFieldText="유량(m³/h)" />
</div>
@@ -263,4 +261,4 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }
)
}
export default RdiiChart
export default React.memo(RdiiChart);
apps/sn/app/(map-layout)/map/components/popupComponent/chartModalStore.ts
+16
View File
@@ -0,0 +1,16 @@
import { create } from 'zustand';
interface ModalStore {
isOpen: boolean;
setIsOpen: (open: boolean) => void;
}
export const useInfilChartModalStore = create<ModalStore>((set) => ({
isOpen: false,
setIsOpen: (open: boolean) => set({ isOpen: open }),
}));
export const useRdiiChartModalStore = create<ModalStore>((set) => ({
isOpen: false,
setIsOpen: (open: boolean) => set({ isOpen: open }),
}));
apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx
+7 -40
View File
@@ -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<string | null>(null);
// 🎯 InfilChart 및 RdiiChart 관련 상태 추가
const [isModalInfil, setIsModalInfil] = useState(false);
const [isModalRdii, setIsModalRdii] = useState(false);
const [btnTxt, setBtnTxt] = useState<string>("");
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<string, any> = {}
if (buttonChk && contentRef.current) {
@@ -305,17 +286,15 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
{/* 🎯 하수관로일 때만 Infil/RDII 버튼 표시 */}
{layerNm === '하수관로' && (
<>
<Button
<Button onClick={() => setIsModalInfil(true)}
className="px-2 py-1 text-xl text-blue-600 border border-blue-600 rounded hover:bg-gray-700"
color="white"
onClick={openModalInfil}
>
침입수분석
</Button>
<Button
<Button onClick={() => setIsModalRdii(true)}
className="px-2 py-1 text-xl text-gray-600 border border-gray-600 rounded hover:bg-gray-700"
color="white"
onClick={openModalRdii}
>
RDII분석
</Button>
@@ -363,20 +342,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
</div>
{/* 🎯 InfilChart 및 RdiiChart 컴포넌트 추가 */}
<InfilChart
btnTxt={btnTxt}
isModalOpen={isModalInfil}
setIsModalOpen={setIsModalInfil}
closeModal={closeModalInfil}
pplMngNo={pplMngNo}
/>
<RdiiChart
btnTxt={btnTxt}
isModalOpen={isModalRdii}
setIsModalOpen={setIsModalRdii}
closeModal={closeModalRdii}
pplMngNo={pplMngNo}
/>
<InfilChart pplMngNo={pplMngNo} />
<RdiiChart pplMngNo={pplMngNo} />
</div>
)
}