diff --git a/apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx b/apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx index 3b294626c..a43b8942b 100644 --- a/apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx +++ b/apps/st/src/components/statistics/verification/ImrVerificationHistory.tsx @@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from "react"; import { Line } from "react-chartjs-2"; -import { useQuery } from "@tanstack/react-query"; +import { keepPreviousData, useQuery } from "@tanstack/react-query"; import { getCoreRowModel, getPaginationRowModel, @@ -31,15 +31,17 @@ import type { StAnlsRsltResponse, } from "@/entities/statistics"; import { + IMR_DETAIL_VISIBLE_COLUMNS_BY_STATS_CD, + IMR_DETAIL_VISIBLE_COLUMNS_DEFAULT, imrDetailGridColumnInfo, imrVerificationHistoryColumns, } from "@/entities/statistics"; -import { stAnlsMstApi } from "@/entities/statistics/api/statistics-analysis-master-api"; import { imrApi } from "@/entities/statistics/api/imr-api"; import { useStAnlsSidoCombo, useStAnlsSigunguCombo, } from "@/entities/statistics/api/queries"; +import { stAnlsMstApi } from "@/entities/statistics/api/statistics-analysis-master-api"; import { stAnlsRsltApi } from "@/entities/statistics/api/statistics-analysis-result-api"; import { Button, @@ -55,6 +57,7 @@ import { } from "@common/components"; import DataGrid from "@/components/module/DataGrid"; +import type { ColumnInfo } from "@/components/type/DataGrid.type"; ChartJS.register( CategoryScale, @@ -74,6 +77,19 @@ type DateRangeValue = { const EMPTY_DATA: never[] = []; const EMPTY_ADST_LIST: AdstZoneResponseDto[] = []; +function getImrDetailGridColumnInfo(statsCd: string): ColumnInfo { + const visible = + IMR_DETAIL_VISIBLE_COLUMNS_BY_STATS_CD[statsCd] ?? + IMR_DETAIL_VISIBLE_COLUMNS_DEFAULT; + const visibleSet = new Set(visible); + return { + columns: imrDetailGridColumnInfo.columns.map((col) => + visibleSet.has(col.name) ? col : { ...col, visible: false }, + ), + columnLayout: imrDetailGridColumnInfo.columnLayout, + }; +} + const ImrVerificationHistory = () => { // Area A Search States const [searchSido, setSearchSido] = useState(""); @@ -114,6 +130,11 @@ const ImrVerificationHistory = () => { const sidoOptions = sidoData ?? EMPTY_ADST_LIST; const sigunguOptions = sigunguData ?? EMPTY_ADST_LIST; + const imrDetailColumnInfo = useMemo( + () => getImrDetailGridColumnInfo(selectedHistory?.statsCd ?? ""), + [selectedHistory?.statsCd], + ); + // Area A Data Fetching const { data: historyData } = useQuery({ queryKey: [ @@ -128,6 +149,7 @@ const ImrVerificationHistory = () => { page: historyPagination.pageIndex, size: historyPagination.pageSize, }), + placeholderData: keepPreviousData, }); const historyTable = useReactTable({ @@ -482,7 +504,7 @@ const ImrVerificationHistory = () => { ) : ( = { + ST00020003: [...IMR_VISIBLE_REGION_AND_PIPE_SE_COLUMNS], + ST00020005: [...IMR_VISIBLE_REGION_AND_PIPE_SE_COLUMNS], + ST00060001: [...IMR_VISIBLE_FACILITY_FULL_COLUMNS], + ST00100001: [...IMR_VISIBLE_FACILITY_FULL_COLUMNS], + ST00040001: [...IMR_VISIBLE_FACILITY_NAME_ADDR_COLUMNS], + ST00040002: [...IMR_VISIBLE_FACILITY_NAME_ADDR_COLUMNS], + ST00050001: [...IMR_VISIBLE_FACILITY_NAME_ADDR_COLUMNS], + ST00070001: [...IMR_VISIBLE_FACILITY_NAME_ADDR_COLUMNS], +}; + +/** 그 외 statsCd: 시도·구군·행정구역만 표시 */ +export const IMR_DETAIL_VISIBLE_COLUMNS_DEFAULT: readonly string[] = + IMR_VISIBLE_REGION_COLUMNS; + export const imrDetailGridColumnInfo: ColumnInfo = { columns: [ { @@ -44,7 +90,7 @@ export const imrDetailGridColumnInfo: ColumnInfo = { { name: "pipeSeNm", fieldName: "pipeSeNm", - header: { text: "관로구분" }, + header: { text: "관종구분" }, width: 80, }, {