[st] feat: IMR 이상치 데이터 그리드 컬럼 필터링 적용

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<string>("");
@@ -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 = () => {
                             </div>
                         ) : (
                             <DataGrid
-                                columnInfo={imrDetailGridColumnInfo}
+                                columnInfo={imrDetailColumnInfo}
                                 rowData={gridRowData}
                                 setRowData={setGridRowData}
                                 idFieldName="rsltSn"