From 6e109e970e6669223423a16cac1f47a8ce255bd7 Mon Sep 17 00:00:00 2001 From: swcho Date: Wed, 10 Sep 2025 15:24:24 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20-=20SearchModal=20=EA=BB=90?= =?UTF-8?q?=EB=8B=A4=20=ED=82=AC=20=EB=95=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EC=A0=95=EB=B3=B4=20=EC=9E=83?= =?UTF-8?q?=EC=96=B4=EB=B2=84=EB=A6=AC=EB=8A=94=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20-=20useSearchModal.ts=20useEffect=20?= =?UTF-8?q?=EC=9D=98=EC=A1=B4=EC=84=B1=20=EB=B0=B0=EC=97=B4=EC=9D=84=20sea?= =?UTF-8?q?rchModal.tsx=20=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20-=20import=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/searchModal/operationTab.tsx | 6 +-- .../map/searchModal/reportFilesModal.tsx | 3 +- .../map/searchModal/searchModal.tsx | 37 +++++++++++++++---- .../(map-layout)/map/searchModal/stofcbr.tsx | 1 - .../(map-layout)/map/searchModal/swageMhl.tsx | 1 - .../map/searchModal/swagePmstn.tsx | 1 - .../(map-layout)/map/searchModal/swagePpl.tsx | 1 - .../map/searchModal/swagePrcsFclt.tsx | 1 - .../map/searchModal/useBasicTab.ts | 6 +-- .../map/searchModal/useOperationTab.ts | 10 ++--- .../map/searchModal/useSearchModal.ts | 32 ++-------------- apps/sn/app/store/useSearchModalStore.ts | 1 - 12 files changed, 43 insertions(+), 57 deletions(-) diff --git a/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx index c77cc58cc..9f1711cf6 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx @@ -1,9 +1,9 @@ -import React, { use } from 'react'; +import React from 'react'; import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox'; import { SelectBox } from '@common/business_components/ui'; import { Button, Input, Label } from '@common/components'; -import useStore from '../../../store/useStore'; -import useSearchModalStore from '../../../store/useSearchModalStore'; +import useStore from '@/store/useStore'; +import useSearchModalStore from '@/store/useSearchModalStore'; import useSearchModal from './useSearchModal'; import useOperationTab from './useOperationTab'; diff --git a/apps/sn/app/(map-layout)/map/searchModal/reportFilesModal.tsx b/apps/sn/app/(map-layout)/map/searchModal/reportFilesModal.tsx index 62c62b811..473c4abcb 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/reportFilesModal.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/reportFilesModal.tsx @@ -1,6 +1,5 @@ 'use client' -import React, { useEffect, useState } from 'react'; - +import React, { useEffect } from 'react'; import LoadingOverlay from '@/components/ui/LoadingBar'; import useReportTab from './useReportTab'; import { useReportTabStore } from '@/store/useReportTabStore'; diff --git a/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx index da1f05169..4b91b869e 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx @@ -1,12 +1,10 @@ import LoadingOverlay from '@/components/ui/LoadingBar'; import { UiModal, UITab, UiTable } from '@common/business_components/ui'; import { Button } from '@common/components/ui'; -import React, { useMemo } from 'react'; +import React, { useEffect, useMemo } from 'react'; import { Toaster } from "react-hot-toast"; -import useSearchModalStore from '../../../store/useSearchModalStore'; -import { - ExclnSewagePumpCol2, MsSwageMhlCol2, MsSwagePplCol2, stofcbrCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2 -} from '../components/common/table'; +import useSearchModalStore from '@/store/useSearchModalStore'; +import { ExclnSewagePumpCol2, MsSwageMhlCol2, MsSwagePplCol2, stofcbrCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2 } from '../components/common/table'; import BasicTab, { BASIC_TYPES } from './basicTab'; import OperationTab from './operationTab'; import ReportTab from './reportTab'; @@ -16,18 +14,24 @@ import useOperationTab from './useOperationTab'; const SearchModal: React.FC = () => { const { + showTable, isSearchModalOpen, setIsSearchModalOpen, activeTab, basicType, workType, tableData, detailTableData, tableCount, detailTableCount, curPage, detailCurPage, + detailBizId, isLoading, isDetailLoading, isResetPage, isResetDetailPage, isResetSelection, isResetDetailSelection, setActiveTab, setCurPage, setDetailCurPage, + setIsResetPage, setIsResetDetailPage, + setDetailBizId, + setIsResetDetailSelection, + resetFilters } = useSearchModalStore(); - const { TABS, viewMultipleFeature } = useSearchModal(); + const { TABS, viewMultipleFeature, fetchFilteredData } = useSearchModal(); const { handleBasicCellClick, basicExcelDownload } = useBasicTab(); const { WORK_TYPES, @@ -39,7 +43,8 @@ const SearchModal: React.FC = () => { handleOperationCellClick, handleOperationResultCellClick, operationExcelDownload, - operationResultExcelDownload + operationResultExcelDownload, + handleOperationPageNation } = useOperationTab(); @@ -69,6 +74,24 @@ const SearchModal: React.FC = () => { return []; }, [activeTab, workType]); + useEffect(() => { + resetFilters(); + }, [activeTab, basicType, workType]); + + // 페이지 변경 시마다 데이터 fetch + useEffect(() => { + setIsResetPage(false); + setIsResetDetailPage(true); + setDetailBizId(0); + if (showTable) fetchFilteredData(); + }, [curPage]); + + // 페이지 변경 시마다 데이터 fetch + useEffect(() => { + setIsResetDetailSelection(false); + if (showTable) handleOperationPageNation(Number(detailBizId)); + }, [detailCurPage]); + const renderBody = () => ( <> diff --git a/apps/sn/app/(map-layout)/map/searchModal/stofcbr.tsx b/apps/sn/app/(map-layout)/map/searchModal/stofcbr.tsx index 11c4c8bfa..4aa510545 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/stofcbr.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/stofcbr.tsx @@ -1,5 +1,4 @@ // 우수토실 - import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox'; import { Button } from '@common/components'; import React from 'react'; diff --git a/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx b/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx index 04ffeb1fa..a16500a34 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx @@ -1,5 +1,4 @@ // 하수맨홀 - import React from 'react'; import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox'; import { Button, Input, Label } from '@common/components'; diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx index f3eef5d66..5e7e7d3d1 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx @@ -1,5 +1,4 @@ // 하수펌프장 - import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox'; import { Button, Input, Label } from '@common/components'; import React from 'react'; diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx index 0a79d8f81..9d9df92cb 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx @@ -1,5 +1,4 @@ // 하수관로 - import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox'; import { SelectBox } from '@common/business_components/ui'; import { Button, Input, Label } from '@common/components'; diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx index 97486e4a3..4b62edde2 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx @@ -1,5 +1,4 @@ // 하수처리시설 - import React from 'react'; import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox'; import { Button, Input, Label } from '@common/components'; diff --git a/apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts b/apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts index 1d49529da..e7e8af8e9 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts +++ b/apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts @@ -186,15 +186,13 @@ export default function useBasicTab() { if (cqlFilters.length > 0) queryParams.append('cqlFiter', cqlFilters.join(' and ')); const res = await getData(`v1/fclts?${queryParams.toString()}`); - // const res = await axios.get(`${API_URL}/v1/fclts?${queryParams.toString()}`); - console.log('onDownload res', res); const mhlUsgCdMap = new Map(MS_SWAGE_MHL_USE_CODES.map(code => [code.val?.trim(), code.text])); const pplUsgCdMap = new Map(MS_SWAGE_PPL_USE_CODES.map(code => [code.val?.trim(), code.text])); const ctpvMap = new Map(ctpv.map(code => [code.val?.trim(), code.text])); const sggMap = new Map(sgg.map(code => [code.val?.trim(), code.text])); - const mappedContent = (res.data.data || []).map((item: any) => { + const mappedContent = (res.data || []).map((item: any) => { const formattedItem = formatDisplayData(item); let ctpvCd = item?.ctpvCd ?? formattedItem?.ctpvCd ?? ''; @@ -306,8 +304,6 @@ export default function useBasicTab() { const label = BASIC_TYPES.find((type) => type.val === basicType)?.text const fileName = `${label} 조회 결과_${todayYear}${todayMonth}${todayDate}`; - console.log(`excelData: ${excelData}, label: ${label}, fileName: ${fileName}`); - await downloadExcelWithKoreanHeaders({ data: excelData as JSON[], fileName: fileName, diff --git a/apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts b/apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts index dd7b8d3cc..d7709af85 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts +++ b/apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts @@ -347,15 +347,13 @@ export default function useOperationTab() { try { const RequestDTO: Record = { - size: '10000', + size: '100', bizId: String(detailBizId), }; - - const apiStartTime = performance.now(); + const res = await getData(`v1/bizInfo/fclts?${new URLSearchParams(RequestDTO).toString()}`); - const apiEndTime = performance.now(); - - const mappingStartTime = performance.now(); + console.log('res', res); + // 헤더 매핑 정의 const headerMapping: { [key: string]: string } = { 'fcltMngNo': '관리번호', diff --git a/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts b/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts index ba376290d..76d1b88ce 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts +++ b/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts @@ -1,4 +1,3 @@ -import { useEffect } from 'react'; import { getData } from "@/components/lib/api"; import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue'; import useStore from '../../../store/useStore'; @@ -9,11 +8,9 @@ import useOperationTab from './useOperationTab'; export default function useSearchModal() { const { - activeTab, basicType, workType, - showTable, + activeTab, workType, tableData, detailTableData, - curPage, detailCurPage, - detailBizId, + curPage, var1, var2, yearFilter, todayYear, todayMonth, todayDate, @@ -25,12 +22,10 @@ export default function useSearchModal() { setIsLoading, setIsResetPage, setIsResetDetailPage, setIsResetSelection, setIsResetDetailSelection, - setDetailBizId, - resetFilters, getDateString } = useSearchModalStore(); const { fetchBasicFilteredData } = useBasicTab(); - const { OPERATION_TABLE_SIZE, handleOperationPageNation } = useOperationTab(); + const { OPERATION_TABLE_SIZE } = useOperationTab(); const { BIZ_TY_CD } = useStore(); const TABS = [ @@ -39,25 +34,6 @@ export default function useSearchModal() { { val: "report", text: "하수도정비기본계획보고서" }, ]; - useEffect(() => { - resetFilters(); - }, [activeTab, basicType, workType]); - - // 페이지 변경 시마다 데이터 fetch - useEffect(() => { - setIsResetPage(false); - setIsResetDetailPage(true); - setDetailBizId(0); - console.log(`curPage: ${curPage}, showTable: ${showTable}`); - if (showTable && curPage > 1) fetchFilteredData(); - }, [curPage]); - - // 페이지 변경 시마다 데이터 fetch - useEffect(() => { - setIsResetDetailSelection(false); - if (showTable) handleOperationPageNation(Number(detailBizId)); - }, [detailCurPage]); - // 검색 API 호출 함수 const fetchFilteredData = async () => { setIsLoading(true); // 로딩 시작 @@ -167,5 +143,5 @@ export default function useSearchModal() { } } - return { TABS, getDateString, handleSearch, viewMultipleFeature }; + return { TABS, getDateString, handleSearch, viewMultipleFeature, fetchFilteredData }; }; diff --git a/apps/sn/app/store/useSearchModalStore.ts b/apps/sn/app/store/useSearchModalStore.ts index acb93969d..a4b99b420 100644 --- a/apps/sn/app/store/useSearchModalStore.ts +++ b/apps/sn/app/store/useSearchModalStore.ts @@ -1,5 +1,4 @@ import { create } from "zustand"; -import { type SelectDataType } from "@common/business_components"; // 날짜 조합 함수