fo: 처리구역정보

apps/fo/app/pages/(with-layout)/processArea/page.tsx

@@ -6,6 +6,7 @@
 
 "use client"
 import { useFoStore } from "@/app/store";
+import { useShallow } from 'zustand/react/shallow';
 import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -13,19 +14,22 @@ import ProcessFacilityInfoModal from "./modal/page";
 import LoadingOverlay from "@common/business_components/ui/loadingBar";
 
 export default function ProcessArea() {
-  const {Common,
+  const {
+    Common,
     ProcessArea,
     ProcessAreaSearch,
     initializeCommonData,
     searchProcessAreaList
-  } = useFoStore((state) => state) || { 
-    Common: { isInit: false, selectSidoData: [], selectSigunData: [], selectRegionData: [], selectUnitWaterShedData: [], selectMiddleRegionData: [], selectEnvPartData: [], selectSearchYear: [{ val: "0" }], btnClass: "" },
-    ProcessArea: { processAreaList: [], processAreaCount: 0, excelList: [], upHeadList1: [] },
-    ProcessAreaSearch: { processFacilityLabelArray: [] },
-    initializeCommonData: () => {},
-    searchProcessAreaList: () => {}
-  };
-  
+  } = useFoStore(
+    useShallow((state) => ({ // 다른 무관한 상태가 변경되어도 이 컴포넌트는 불필요하게 다시 렌더링 되지 않음.
+      Common: state.Common,
+      ProcessArea: state.ProcessArea,
+      ProcessAreaSearch: state.ProcessAreaSearch,
+      initializeCommonData: state.initializeCommonData,
+      searchProcessAreaList: state.searchProcessAreaList,
+    }))
+  );
+
   const {
     isInit,
     selectSidoData,
@@ -37,7 +41,7 @@ export default function ProcessArea() {
     selectSearchYear,
     btnClass,
   } = Common;
-  
+
   const {
     processFacilityLabelArray,
   } = ProcessAreaSearch;
@@ -54,11 +58,11 @@ export default function ProcessArea() {
   // 그리드 관련
   const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);
 
-   // 모달 상태 추가
+  // 모달 상태 추가
   const [selectedRow, setSelectedRow] = useState<number | null>(null);
   const [fcltyNm, setFcltyNm] = useState<string>("");
   const [fcltyCd, setFcltyCd] = useState<string>("");
-  
+
   const [resetPage, setResetPage] = useState<boolean>(false);
   const [searchYearValue, setSearchYearValue] = useState<string>(selectSearchYear[0]?.val || "0");
 
@@ -74,7 +78,7 @@ export default function ProcessArea() {
     sigunText: '',
   });
 
-  const searchProcessArea = useCallback(({ sidoText, sigunText}: ReturnType, pageNo: number, pageCnt:number=20) => {
+  const searchProcessArea = useCallback(({ sidoText, sigunText }: ReturnType, pageNo: number, pageCnt: number = 20) => {
     searchProcessAreaList(pageNo, pageCnt, sidoText, sigunText, searchYearValue);
   }, [searchProcessAreaList, searchYearValue]);
 
@@ -118,11 +122,11 @@ export default function ProcessArea() {
 
   useEffect(() => {
     if (excelList && excelList.length > 0) {
-      downloadExcel({ 
-        data: excelList as unknown as JSON[], 
-        fileName: '처리구역정보', 
-        sheetNameArray: ['처리구역정보'], 
-        headerRange: 'A1:W1' 
+      downloadExcel({
+        data: excelList as unknown as JSON[],
+        fileName: '처리구역정보',
+        sheetNameArray: ['처리구역정보'],
+        headerRange: 'A1:W1'
       });
     }
   }, [excelList]);
@@ -143,7 +147,7 @@ export default function ProcessArea() {
       <ContentsDiv>
         <SearchBaseForm
           leftChildren={<>
-            <SelectBox className="col-span-3" label={processFacilityLabelArray[6] as string} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYearValue(val.toString())} value={searchYearValue} selectClass={undefined}/>
+            <SelectBox className="col-span-3" label={processFacilityLabelArray[6] as string} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYearValue(val.toString())} value={searchYearValue} selectClass={undefined} />
           </>}
           rightChildren={undefined}
           selectSidoData={selectSidoData}
@@ -169,8 +173,8 @@ export default function ProcessArea() {
         </ListDiv>
       </ContentsDiv>
       {selectedRow !== null && (
-        <UiModal 
-          body={<ProcessFacilityInfoModal fcltyName={fcltyNm} facilityCd={fcltyCd}></ProcessFacilityInfoModal>} 
+        <UiModal
+          body={<ProcessFacilityInfoModal fcltyName={fcltyNm} facilityCd={fcltyCd}></ProcessFacilityInfoModal>}
           bodyClass="sm:max-w-[90vw] w-[1200px] h-[900px]"
           open={selectedRow !== null}
           onOpenChange={(open: boolean) => !open && closeModal()}