From 9eb0cd428b0317fe6badfa90e8ca0a887fef77d6 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 5 Mar 2026 16:22:30 +0900
Subject: [PATCH] =?UTF-8?q?[st]=20feat:=20=EA=B2=80=EC=A6=9D=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A0=A5=20'=EA=B2=80=EC=A6=9D=EC=9D=BC=EC=8B=9C'=EB=A1=9C=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../verification/HbStatisticsVerification.tsx | 130 ++++++++++++++++--
 .../model/analysis-history-interface.ts       |   2 +
 .../components/src/ui/calendar/index.tsx      |   1 -
 3 files changed, 123 insertions(+), 10 deletions(-)

diff --git a/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx b/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx
index 05db9169a..e89bc81e8 100644
--- a/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx
+++ b/apps/st/src/components/statistics/verification/HbStatisticsVerification.tsx
@@ -1,9 +1,14 @@
 "use client";
 
+import dayjs from "dayjs";
 import { useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import {
+    getCoreRowModel,
+    getPaginationRowModel,
+    useReactTable,
+} from "@tanstack/react-table";
 import {
     Button,
     Checkbox,
@@ -28,6 +33,7 @@ import {
     TableHeader,
     TableRow,
     TableCell,
+    DateRangePicker,
 } from "@common/components";
 import { verificationHistoryColumns } from "@/entities/statistics/model/verification-history-columns";
 import { analysisApi } from "@/entities/statistics/api/analysis-api";
@@ -38,12 +44,18 @@ import type {
 } from "@/entities/statistics/model/analysis-interface";
 import type {
     StAnlsMstResponse,
+    StAnlsMstSearchParams,
     StAnlsOutlierListResponse,
 } from "@/entities/statistics/model/analysis-history-interface";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore } from "@/shared/lib";
 import { CodeApi } from "@/entities/code";
 
+type DateRangeValue = {
+    from?: Date;
+    to?: Date;
+};
+
 type VerifyType = "ALL" | "SELECT";
 
 interface VerificationFormState {
@@ -59,6 +71,12 @@ interface OutlierDialogState {
     anlsSn: number | null;
 }
 
+function getDefaultHistoryDateRange(): DateRangeValue {
+    const to = dayjs().endOf("day").toDate();
+    const from = dayjs().subtract(7, "day").startOf("day").toDate();
+    return { from, to };
+}
+
 function getVerificationYearOptions(): string[] {
     const currentYear = new Date().getFullYear();
     const startYear = 2017;
@@ -99,6 +117,22 @@ const HbStatisticsVerification = () => {
         anlsSn: null,
     });
 
+    const defaultHistoryDateRange = useMemo(
+        () => getDefaultHistoryDateRange(),
+        [],
+    );
+    const [historyDateRange, setHistoryDateRange] = useState<
+        DateRangeValue | undefined
+    >(defaultHistoryDateRange);
+    const [appliedHistoryDateRange, setAppliedHistoryDateRange] = useState<
+        DateRangeValue | undefined
+    >(defaultHistoryDateRange);
+
+    const [historyPagination, setHistoryPagination] = useState({
+        pageIndex: 0,
+        pageSize: 10,
+    });
+
     const { data: statsItemList } = useQuery({
         queryKey: [ENDPOINT.CMS_SERVICE.CODE, "STITEM"],
         queryFn: async () => {
@@ -108,12 +142,31 @@ const HbStatisticsVerification = () => {
     });
 
     const { data: analysisHistory } = useQuery({
-        queryKey: [ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST],
-        queryFn: () =>
-            analysisHistoryApi.getAnalysisHistoryList({
-                page: 0,
-                size: 10,
-            }),
+        queryKey: [
+            ENDPOINT.STATVERIFY_SERVICE.ST_ANLS_MST,
+            historyPagination,
+            appliedHistoryDateRange,
+        ],
+        queryFn: () => {
+            const params: StAnlsMstSearchParams = {
+                page: historyPagination.pageIndex,
+                size: historyPagination.pageSize,
+            };
+
+            if (appliedHistoryDateRange?.from) {
+                params.verifyDtStart = dayjs(
+                    appliedHistoryDateRange.from,
+                ).format("YYYY-MM-DD");
+            }
+
+            if (appliedHistoryDateRange?.to || appliedHistoryDateRange?.from) {
+                const to =
+                    appliedHistoryDateRange.to ?? appliedHistoryDateRange.from!;
+                params.verifyDtEnd = dayjs(to).format("YYYY-MM-DD");
+            }
+
+            return analysisHistoryApi.getAnalysisHistoryList(params);
+        },
         refetchInterval: (query) => {
             const data = query.state.data;
             if (!data?.content?.length) return false;
@@ -131,6 +184,17 @@ const HbStatisticsVerification = () => {
         data: historyRowData,
         columns: verificationHistoryColumns,
         getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        manualPagination: true,
+        pageCount: analysisHistory?.totalPages ?? 0,
+        state: {
+            pagination: historyPagination,
+        },
+        onPaginationChange: (updater) => {
+            setHistoryPagination((prev) =>
+                typeof updater === "function" ? updater(prev) : updater,
+            );
+        },
         meta: {
             onOutlierCellClick: (row: StAnlsMstResponse) => {
                 setOutlierDialog({ open: true, anlsSn: row.anlsSn });
@@ -238,6 +302,24 @@ const HbStatisticsVerification = () => {
         router.push(`/statistics/verification/${anlsSn}`);
     }
 
+    function applyHistoryDateSearch(nextRange: DateRangeValue | undefined) {
+        setAppliedHistoryDateRange(nextRange);
+        setHistoryPagination((prev) => ({
+            ...prev,
+            pageIndex: 0,
+        }));
+    }
+
+    function handleHistoryDateSearch() {
+        applyHistoryDateSearch(historyDateRange);
+    }
+
+    function handleHistoryDateReset() {
+        const resetRange = getDefaultHistoryDateRange();
+        setHistoryDateRange(resetRange);
+        applyHistoryDateSearch(resetRange);
+    }
+
     function closeOutlierDialog() {
         setOutlierDialog({ open: false, anlsSn: null });
     }
@@ -293,7 +375,7 @@ const HbStatisticsVerification = () => {
                     <div className="flex gap-4">
                         {/* 검증 대상 */}
                         <div className="flex-1">
-                            <h4 className="mb-3 rounded bg-gray-100 p-2 text-[1.4rem] font-medium">
+                            <h4 className="mb-3 rounded bg-gray-100 px-4 py-2 text-[1.4rem] font-medium">
                                 검증 대상
                             </h4>
 
@@ -334,7 +416,7 @@ const HbStatisticsVerification = () => {
 
                         {/* 검증 변수 */}
                         <div className="flex-[0.5]">
-                            <h4 className="mb-3 rounded bg-gray-100 p-2 text-[1.4rem] font-medium">
+                            <h4 className="mb-3 rounded bg-gray-100 px-4 py-2 text-[1.4rem] font-medium">
                                 검증 변수
                             </h4>
 
@@ -440,6 +522,36 @@ const HbStatisticsVerification = () => {
                 <h3 className="mb-2 px-2 text-[1.5rem] font-semibold text-title">
                     검증 이력
                 </h3>
+                <div className="mb-4 flex items-center gap-4 px-2">
+                    <span className="text-[1.3rem] font-medium text-label">
+                        검증일시
+                    </span>
+                    <DateRangePicker
+                        value={historyDateRange as any}
+                        defaultValue={defaultHistoryDateRange as any}
+                        onValueChange={(value) =>
+                            setHistoryDateRange((value as any) ?? undefined)
+                        }
+                        className="max-w-[26rem]"
+                    />
+                    <div className="flex gap-2">
+                        <Button
+                            type="button"
+                            className="h-[3.2rem] px-4 text-[1.3rem]"
+                            onClick={handleHistoryDateSearch}
+                        >
+                            조회
+                        </Button>
+                        <Button
+                            type="button"
+                            color="gray"
+                            className="h-[3.2rem] px-4 text-[1.3rem]"
+                            onClick={handleHistoryDateReset}
+                        >
+                            초기화
+                        </Button>
+                    </div>
+                </div>
                 <DataTable
                     table={table}
                     variant="secondary"
diff --git a/apps/st/src/entities/statistics/model/analysis-history-interface.ts b/apps/st/src/entities/statistics/model/analysis-history-interface.ts
index c4aa1e0eb..7e5b95ba8 100644
--- a/apps/st/src/entities/statistics/model/analysis-history-interface.ts
+++ b/apps/st/src/entities/statistics/model/analysis-history-interface.ts
@@ -22,6 +22,8 @@ export interface StAnlsMstSearchParams {
     page?: number;
     size?: number;
     sort?: string;
+    verifyDtStart?: string;
+    verifyDtEnd?: string;
 }
 
 export interface StAnlsOutlierDataResponse {
diff --git a/packages/common/components/src/ui/calendar/index.tsx b/packages/common/components/src/ui/calendar/index.tsx
index f2af829e5..1f4bce7e9 100644
--- a/packages/common/components/src/ui/calendar/index.tsx
+++ b/packages/common/components/src/ui/calendar/index.tsx
@@ -67,7 +67,6 @@ function Calendar({
         ),
         dropdowns: cn(
           "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-xl font-medium",
-          captionLayout === "dropdown" && "flex-row-reverse",
           defaultClassNames.dropdowns,
         ),
         dropdown_root: cn(