[apps/cs] feat: 검색 초기화 로직 작업 (CS_UT01010101)

2025-07-10 10:02:46 +09:00
parent be6bf1f160
commit 7728717e66
3 changed files with 137 additions and 128 deletions
@@ -26,36 +26,32 @@ type DateRange = {
  to?: Date | undefined;
 };

-function ApiLogPage({}) {
-  // 1주일 전부터 오늘까지 기본 날짜 설정
+function ApiLogPage() {
  const defaultDateRange: DateRange = {
    from: dayjs().subtract(7, "day").toDate(),
    to: dayjs().toDate(),
  };

-  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
-
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });
-
-  const [loginlogPostQuery, setLoginlogPostQuery] = useState<ApiLogParams>({
+  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
+  const [userId, setUserId] = useState("");
+  const [apiHttpPmhd, setApiHttpPmhd] = useState("");
+  const [searchParams, setSearchParams] = useState<ApiLogParams>({
    userId: "",
-    siteId: "",
    apiHttpPmhd: "",
-    dmndUrl: "",
-    ipAddr: "",
    dmndDtStart: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
    dmndDtEnd: dayjs().format("YYYY-MM-DD"),
-    sort: "lgnDt,asc",
+    sort: "regDt,desc",
  });

  const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.APILOG, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.APILOG, searchParams, pagination],
    queryFn: () =>
      ApiLogApi.getApiLogList({
-        ...loginlogPostQuery,
+        ...searchParams,
        page: pagination.pageIndex,
        size: pagination.pageSize,
      }),
@@ -81,13 +77,27 @@ function ApiLogPage({}) {

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      userId,
+      apiHttpPmhd,
+      dmndDtStart: dayjs(dateRange.from).format("YYYY-MM-DD"),
+      dmndDtEnd: dayjs(dateRange.to).format("YYYY-MM-DD"),
+    });
  };

-  const handleLoginlogParamsChange =
-    (key: keyof ApiLogParams) => (value: unknown) => {
-      setLoginlogPostQuery({ ...loginlogPostQuery, [key]: value });
-    };
+  const handleReset = () => {
+    setUserId("");
+    setApiHttpPmhd("");
+    setDateRange(defaultDateRange);
+    setSearchParams({
+      ...searchParams,
+      userId: "",
+      apiHttpPmhd: "",
+      dmndDtStart: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+      dmndDtEnd: dayjs().format("YYYY-MM-DD"),
+    });
+  };

  const handlePresetDateRange = (value: string) => {
    let presetDateRange: DateRange | undefined;
@@ -113,19 +123,7 @@ function ApiLogPage({}) {
      default:
        presetDateRange = undefined;
    }
-    handleDateRangeChange(presetDateRange);
-  };
-
-  const handleDateRangeChange = (value: DateRange | undefined) => {
-    setDateRange(value || defaultDateRange);
-    setLoginlogPostQuery({
-      ...loginlogPostQuery,
-      dmndDtStart:
-        dayjs(value?.from).format("YYYY-MM-DD") ??
-        dayjs().subtract(7, "day").format("YYYY-MM-DD"),
-      dmndDtEnd:
-        dayjs(value?.to).format("YYYY-MM-DD") ?? dayjs().format("YYYY-MM-DD"),
-    });
+    setDateRange(presetDateRange || defaultDateRange);
  };

  return (
@@ -135,7 +133,7 @@ function ApiLogPage({}) {
          <Label className="mr-2">조회기간</Label>
          <DateRangePicker
            value={dateRange}
-            onValueChange={handleDateRangeChange}
+            onValueChange={(value) => setDateRange(value || defaultDateRange)}
          >
            <div className="card card-border flex items-center gap-2">
              <Select onValueChange={handlePresetDateRange}>
@@ -152,14 +150,15 @@ function ApiLogPage({}) {
          </DateRangePicker>
          <Label className="ml-4 mr-2 text-label">사용자ID</Label>
          <Input
+            value={userId}
+            onChange={(e) => setUserId(e.target.value)}
            className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
-            value={loginlogPostQuery.userId}
-            onChange={(e) =>
-              handleLoginlogParamsChange("userId")(e.target.value)
-            }
          />
          <Label className="ml-4 mr-2 text-label">상태</Label>
-          <Select onValueChange={handleLoginlogParamsChange("apiHttpPmhd")}>
+          <Select
+            value={apiHttpPmhd}
+            onValueChange={(value) => setApiHttpPmhd(value)}
+          >
            <SelectTrigger className="w-[10rem]">
              <SelectValue placeholder="선택" />
            </SelectTrigger>
@@ -173,12 +172,20 @@ function ApiLogPage({}) {
          <Button className="h-[3.2rem]" type="submit">
            조회
          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="h-[3.2rem]"
+            onClick={handleReset}
+          >
+            초기화
+          </Button>
        </form>
      </div>
      <div className="card card-border">
        <div className="card-header">
          <div className="flex w-full items-center justify-between">
-            <h3 className="text-2xl font-medium text-label">로그인로그 목록</h3>
+            <h3 className="text-2xl font-medium text-label">작업로그 목록</h3>
            <div className="flex gap-2">
              <Select
                value={table.getState().pagination.pageSize.toString()}
@@ -27,8 +27,7 @@ type DateRange = {
  to?: Date | undefined;
 };

-function LoginlogPage({}) {
-  // 1주일 전부터 오늘까지 기본 날짜 설정
+function LoginlogPage() {
  const defaultDateRange: DateRange = {
    from: dayjs().subtract(7, "day").toDate(),
    to: dayjs().toDate(),
@@ -41,24 +40,21 @@ function LoginlogPage({}) {
    pageIndex: 0,
    pageSize: 10,
  });
-
-  const [loginlogPostQuery, setLoginlogPostQuery] = useState<LoginlogParams>({
+  const [userId, setUserId] = useState("");
+  const [errOcrnYn, setErrOcrnYn] = useState("N");
+  const [searchParams, setSearchParams] = useState<LoginlogParams>({
    userId: "",
-    siteId: "",
    errOcrnYn: "N",
-    remoteIp: "",
-    lgnMthd: "",
-    lgnErrCd: "",
    searchDateFrom: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
    searchDateTo: dayjs().format("YYYY-MM-DD"),
    sort: "lgnDt,desc",
  });

  const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.LOGINLOG, pagination],
+    queryKey: [ENDPOINT.USER_SERVICE.LOGINLOG, searchParams, pagination],
    queryFn: () =>
      LoginlogApi.getLoginlogList({
-        ...loginlogPostQuery,
+        ...searchParams,
        page: pagination.pageIndex,
        size: pagination.pageSize,
      }),
@@ -85,15 +81,30 @@ function LoginlogPage({}) {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsManualLoading(true);
+    setSearchParams({
+      ...searchParams,
+      userId,
+      errOcrnYn,
+      searchDateFrom: dayjs(dateRange.from).format("YYYY-MM-DD"),
+      searchDateTo: dayjs(dateRange.to).format("YYYY-MM-DD"),
+    });
    query.refetch().finally(() => {
      setIsManualLoading(false);
    });
  };

-  const handleLoginlogParamsChange =
-    (key: keyof LoginlogParams) => (value: unknown) => {
-      setLoginlogPostQuery({ ...loginlogPostQuery, [key]: value });
-    };
+  const handleReset = () => {
+    setUserId("");
+    setErrOcrnYn("N");
+    setDateRange(defaultDateRange);
+    setSearchParams({
+      ...searchParams,
+      userId: "",
+      errOcrnYn: "N",
+      searchDateFrom: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+      searchDateTo: dayjs().format("YYYY-MM-DD"),
+    });
+  };

  const handlePresetDateRange = (value: string) => {
    let presetDateRange: DateRange | undefined;
@@ -119,19 +130,7 @@ function LoginlogPage({}) {
      default:
        presetDateRange = undefined;
    }
-    handleDateRangeChange(presetDateRange);
-  };
-
-  const handleDateRangeChange = (value: DateRange | undefined) => {
-    setDateRange(value || defaultDateRange);
-    setLoginlogPostQuery({
-      ...loginlogPostQuery,
-      searchDateFrom:
-        dayjs(value?.from).format("YYYY-MM-DD") ??
-        dayjs().subtract(7, "day").format("YYYY-MM-DD"),
-      searchDateTo:
-        dayjs(value?.to).format("YYYY-MM-DD") ?? dayjs().format("YYYY-MM-DD"),
-    });
+    setDateRange(presetDateRange || defaultDateRange);
  };

  return (
@@ -141,7 +140,7 @@ function LoginlogPage({}) {
          <Label className="mr-2">조회기간</Label>
          <DateRangePicker
            value={dateRange}
-            onValueChange={handleDateRangeChange}
+            onValueChange={(value) => setDateRange(value || defaultDateRange)}
          >
            <div className="card card-border flex items-center gap-2">
              <Select onValueChange={handlePresetDateRange}>
@@ -159,13 +158,14 @@ function LoginlogPage({}) {
          <Label className="ml-4 mr-2 text-label">사용자ID</Label>
          <Input
            className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
-            value={loginlogPostQuery.userId}
-            onChange={(e) =>
-              handleLoginlogParamsChange("userId")(e.target.value)
-            }
+            value={userId}
+            onChange={(e) => setUserId(e.target.value)}
          />
          <Label className="ml-4 mr-2 text-label">상태</Label>
-          <Select onValueChange={handleLoginlogParamsChange("errOcrnYn")}>
+          <Select
+            value={errOcrnYn}
+            onValueChange={(value) => setErrOcrnYn(value)}
+          >
            <SelectTrigger className="w-[10rem]">
              <SelectValue placeholder="선택" />
            </SelectTrigger>
@@ -183,6 +183,14 @@ function LoginlogPage({}) {
              ? "조회 중..."
              : "조회"}
          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="h-[3.2rem]"
+            onClick={handleReset}
+          >
+            초기화
+          </Button>
        </form>
      </div>
      <div className="card card-border">
@@ -3,65 +3,54 @@
 import dayjs from "dayjs";
 import { useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import {
-  getCoreRowModel,
-  type PaginationState,
-} from "@tanstack/react-table";
-import { 
-  Button, 
-  DateRangePicker, 
-  Input, 
+  Button,
+  DateRangePicker,
+  Input,
  Label,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
- } from "@common/components";
+} from "@common/components";
 import { PrivacyLogPrivacy } from "@/entities/privacylog";
-import { type PrivacyLogParams} from "@/entities/privacylog/model/privacylog-interface";
-import { useDataTable } from "@/shared/lib";  
+import type { PrivacyLogParams } from "@/entities/privacylog/model/privacylog-interface";
+import { useDataTable } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import { columns } from "@/pages/privacylog/model/table-columns";

-
-
 type DateRange = {
  from: Date | undefined;
  to?: Date | undefined;
 };

-function PrivacyLogPage({  }) {
-   
-  // 1주일 전부터 오늘까지 기본 날짜 설정
+function PrivacyLogPage() {
  const defaultDateRange: DateRange = {
    from: dayjs().subtract(7, "day").toDate(),
    to: dayjs().toDate(),
  };
-  
-  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);

  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });
-  
-  const [privacylogPostQuery, setprivacylogPostQuery] = useState< PrivacyLogParams>({
-      siteId: "",
-      inqInfoKeywordType: "userName",
-      inqInfoKeyword: "",
-      rqstrIp: "",
-      inqDtStart: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
-      inqDtEnd: dayjs().format("YYYY-MM-DD"),
-      sort:"inqDt,asc"
+  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
+  const [inqInfoKeyword, setInqInfoKeyword] = useState("");
+  const [searchParams, setSearchParams] = useState<PrivacyLogParams>({
+    inqInfoKeywordType: "userName",
+    inqInfoKeyword: "",
+    inqDtStart: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+    inqDtEnd: dayjs().format("YYYY-MM-DD"),
+    sort: "inqDt,asc",
  });
-  
-  
+
  const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.PRIVACYLOG, pagination],
+    queryKey: [ENDPOINT.USER_SERVICE.PRIVACYLOG, searchParams, pagination],
    queryFn: () =>
      PrivacyLogPrivacy.getPrivacyLogList({
-        ...privacylogPostQuery,
+        ...searchParams,
        page: pagination.pageIndex,
        size: pagination.pageSize,
      }),
@@ -87,14 +76,25 @@ function PrivacyLogPage({  }) {

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      inqInfoKeyword,
+      inqDtStart: dayjs(dateRange.from).format("YYYY-MM-DD"),
+      inqDtEnd: dayjs(dateRange.to).format("YYYY-MM-DD"),
+    });
  };

-  const handleprivacylogParamsChange =
-      (key: keyof PrivacyLogParams) => (value: unknown) => {
-     setprivacylogPostQuery({ ...privacylogPostQuery, [key]: value });
+  const handleReset = () => {
+    setInqInfoKeyword("");
+    setDateRange(defaultDateRange);
+    setSearchParams({
+      ...searchParams,
+      inqInfoKeyword: "",
+      inqDtStart: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+      inqDtEnd: dayjs().format("YYYY-MM-DD"),
+    });
  };
-  
+
  const handlePresetDateRange = (value: string) => {
    let presetDateRange: DateRange | undefined;
    switch (value) {
@@ -119,23 +119,9 @@ function PrivacyLogPage({  }) {
      default:
        presetDateRange = undefined;
    }
-    handleDateRangeChange(presetDateRange);
+    setDateRange(presetDateRange || defaultDateRange);
  };

-  
-      
-  const handleDateRangeChange = (value: DateRange | undefined) => {
-    setDateRange(value || defaultDateRange);
-    setprivacylogPostQuery({
-      ...privacylogPostQuery,
-      inqDtStart: dayjs(value?.from).format("YYYY-MM-DD") ?? dayjs().subtract(7, "day").format("YYYY-MM-DD"),
-      inqDtEnd: dayjs(value?.to).format("YYYY-MM-DD") ?? dayjs().format("YYYY-MM-DD"),
-    });
-  };
-
-
-
-
  return (
    <div className="flex-1">
      <div className="card card-border">
@@ -143,7 +129,7 @@ function PrivacyLogPage({  }) {
          <Label className="mr-2">조회기간</Label>
          <DateRangePicker
            value={dateRange}
-            onValueChange={handleDateRangeChange}
+            onValueChange={(value) => setDateRange(value || defaultDateRange)}
          >
            <div className="card card-border flex items-center gap-2">
              <Select onValueChange={handlePresetDateRange}>
@@ -161,21 +147,29 @@ function PrivacyLogPage({  }) {
          <Label className="ml-4 mr-2 text-label">조회자명</Label>
          <Input
            className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
-             value={privacylogPostQuery.inqInfoKeyword}
-            onChange={(e) =>
-              handleprivacylogParamsChange("inqInfoKeyword")(e.target.value)
-            }
+            value={inqInfoKeyword}
+            onChange={(e) => setInqInfoKeyword(e.target.value)}
          />
-          
+
          <Button className="h-[3.2rem]" type="submit">
            조회
          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="h-[3.2rem]"
+            onClick={handleReset}
+          >
+            초기화
+          </Button>
        </form>
      </div>
      <div className="card card-border">
        <div className="card-header">
          <div className="flex w-full items-center justify-between">
-            <h3 className="text-2xl font-medium text-label">로그인로그 목록</h3>
+            <h3 className="text-2xl font-medium text-label">
+              개인정보 조회 로그 목록
+            </h3>
            <div className="flex gap-2">
              <Select
                value={table.getState().pagination.pageSize.toString()}
@@ -196,7 +190,7 @@ function PrivacyLogPage({  }) {
              </Select>
            </div>
          </div>
-        </div>  
+        </div>
        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
      </div>
    </div>