From 6d967497baee02789dc209923e85f14a181687ce Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Sun, 20 Jul 2025 23:15:36 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EA=B2=8C=EC=8B=9C=20=EA=B8=B0?=
 =?UTF-8?q?=EA=B0=84=20=EC=84=A0=ED=83=9D=20=EB=A1=9C=EC=A7=81=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/apilog/ui/apilog-page.tsx   | 14 ++++++++--
 .../src/pages/loginlog/ui/loginlog-page.tsx   | 18 +++++++++----
 .../pages/privacylog/ui/privacylog-page.tsx   | 14 ++++++++--
 apps/cs/src/pages/recent/ui/recent-page.tsx   | 27 +++++++++++++------
 apps/cs/src/pages/users/ui/users-page.tsx     | 17 ++++++++++--
 5 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/apps/cs/src/pages/apilog/ui/apilog-page.tsx b/apps/cs/src/pages/apilog/ui/apilog-page.tsx
index 532752840..e82e72b8d 100644
--- a/apps/cs/src/pages/apilog/ui/apilog-page.tsx
+++ b/apps/cs/src/pages/apilog/ui/apilog-page.tsx
@@ -35,6 +35,7 @@ function ApiLogPage() {
     pageIndex: 0,
     pageSize: 10,
   });
+  const [presetDateRange, setPresetDateRange] = useState("");
   const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
   const [userId, setUserId] = useState("");
   const [apiHttpPmhd, setApiHttpPmhd] = useState("");
@@ -126,9 +127,15 @@ function ApiLogPage() {
       default:
         presetDateRange = undefined;
     }
+    setPresetDateRange(value);
     setDateRange(presetDateRange || defaultDateRange);
   };
 
+  const handleDateRangeChange = (date: DateRange | undefined) => {
+    setDateRange(date || defaultDateRange);
+    setPresetDateRange("");
+  };
+
   return (
     <div className="flex-1">
       <div className="card card-border">
@@ -136,10 +143,13 @@ function ApiLogPage() {
           <Label className="mr-2">조회기간</Label>
           <DateRangePicker
             value={dateRange}
-            onValueChange={(value) => setDateRange(value || defaultDateRange)}
+            onValueChange={handleDateRangeChange}
           >
             <div className="card card-border flex items-center gap-2">
-              <Select onValueChange={handlePresetDateRange}>
+              <Select
+                value={presetDateRange}
+                onValueChange={handlePresetDateRange}
+              >
                 <SelectTrigger>
                   <SelectValue placeholder="기간 선택" className="w-[24rem]" />
                 </SelectTrigger>
diff --git a/apps/cs/src/pages/loginlog/ui/loginlog-page.tsx b/apps/cs/src/pages/loginlog/ui/loginlog-page.tsx
index 4bad7cba6..45d25690b 100644
--- a/apps/cs/src/pages/loginlog/ui/loginlog-page.tsx
+++ b/apps/cs/src/pages/loginlog/ui/loginlog-page.tsx
@@ -32,13 +32,12 @@ function LoginlogPage() {
     to: dayjs().toDate(),
   };
 
-  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
-  const [isManualLoading, setIsManualLoading] = useState(false);
-
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 10,
   });
+  const [presetDateRange, setPresetDateRange] = useState("");
+  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
   const [userId, setUserId] = useState("");
   const [errOcrnYn, setErrOcrnYn] = useState("N");
   const [searchParams, setSearchParams] = useState<LoginlogParams>({
@@ -48,6 +47,7 @@ function LoginlogPage() {
     searchDateTo: dayjs().format("YYYY-MM-DD"),
     sort: "lgnDt,desc",
   });
+  const [isManualLoading, setIsManualLoading] = useState(false);
 
   const query = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.LOGINLOG, searchParams, pagination],
@@ -133,9 +133,14 @@ function LoginlogPage() {
       default:
         presetDateRange = undefined;
     }
+    setPresetDateRange(value);
     setDateRange(presetDateRange || defaultDateRange);
   };
 
+  const handleDateRangeChange = (date: DateRange | undefined) => {
+    setDateRange(date || defaultDateRange);
+    setPresetDateRange("");
+  };
   return (
     <div className="flex-1">
       <div className="card card-border">
@@ -143,10 +148,13 @@ function LoginlogPage() {
           <Label className="mr-2">조회기간</Label>
           <DateRangePicker
             value={dateRange}
-            onValueChange={(value) => setDateRange(value || defaultDateRange)}
+            onValueChange={handleDateRangeChange}
           >
             <div className="card card-border flex items-center gap-2">
-              <Select onValueChange={handlePresetDateRange}>
+              <Select
+                value={presetDateRange}
+                onValueChange={handlePresetDateRange}
+              >
                 <SelectTrigger>
                   <SelectValue placeholder="기간 선택" className="w-[24rem]" />
                 </SelectTrigger>
diff --git a/apps/cs/src/pages/privacylog/ui/privacylog-page.tsx b/apps/cs/src/pages/privacylog/ui/privacylog-page.tsx
index c063fb683..24cfd4b36 100644
--- a/apps/cs/src/pages/privacylog/ui/privacylog-page.tsx
+++ b/apps/cs/src/pages/privacylog/ui/privacylog-page.tsx
@@ -38,6 +38,7 @@ function PrivacyLogPage() {
     pageIndex: 0,
     pageSize: 10,
   });
+  const [presetDateRange, setPresetDateRange] = useState("");
   const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
   const [inqInfoKeyword, setInqInfoKeyword] = useState("");
   const [searchParams, setSearchParams] = useState<PrivacyLogParams>({
@@ -125,9 +126,15 @@ function PrivacyLogPage() {
       default:
         presetDateRange = undefined;
     }
+    setPresetDateRange(value);
     setDateRange(presetDateRange || defaultDateRange);
   };
 
+  const handleDateRangeChange = (date: DateRange | undefined) => {
+    setDateRange(date || defaultDateRange);
+    setPresetDateRange("");
+  };
+
   return (
     <div className="flex-1">
       <div className="card card-border">
@@ -135,10 +142,13 @@ function PrivacyLogPage() {
           <Label className="mr-2">조회기간</Label>
           <DateRangePicker
             value={dateRange}
-            onValueChange={(value) => setDateRange(value || defaultDateRange)}
+            onValueChange={handleDateRangeChange}
           >
             <div className="card card-border flex items-center gap-2">
-              <Select onValueChange={handlePresetDateRange}>
+              <Select
+                value={presetDateRange}
+                onValueChange={handlePresetDateRange}
+              >
                 <SelectTrigger>
                   <SelectValue placeholder="기간 선택" className="w-[24rem]" />
                 </SelectTrigger>
diff --git a/apps/cs/src/pages/recent/ui/recent-page.tsx b/apps/cs/src/pages/recent/ui/recent-page.tsx
index 8f188eced..234e0a5f6 100644
--- a/apps/cs/src/pages/recent/ui/recent-page.tsx
+++ b/apps/cs/src/pages/recent/ui/recent-page.tsx
@@ -51,22 +51,21 @@ function RecentPage() {
   const { confirm } = useConfirm();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const [dateRange, setDateRange] = useState<DateRange | undefined>({
-    from: undefined,
-    to: undefined,
-  });
   const [tableSort, setTableSort] = useState("regDt,desc");
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 10,
   });
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-
+  const [presetDateRange, setPresetDateRange] = useState("");
+  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+    from: undefined,
+    to: undefined,
+  });
   const [keywordType, setKeywordType] = useState("");
   const [keyword, setKeyword] = useState("");
   const [bbsId, setBbsId] = useState<string | null>(null);
   const [delYn, setDelYn] = useState("N");
-
   const [searchParams, setSearchParams] = useState<RecentPostParams>({
     keywordType: "",
     keyword: "",
@@ -193,9 +192,15 @@ function RecentPage() {
       default:
         presetDateRange = undefined;
     }
+    setPresetDateRange(value);
     setDateRange(presetDateRange);
   };
 
+  const handleDateRangeChange = (date: DateRange | undefined) => {
+    setDateRange(date);
+    setPresetDateRange("");
+  };
+
   const onSoftDeletePost = async () => {
     const { resolved, value: delRsn } =
       await prompt("삭제 사유를 입력해주세요.");
@@ -250,9 +255,15 @@ function RecentPage() {
       <div className="card card-border">
         <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
           <Label className="mr-2">날짜</Label>
-          <DateRangePicker value={dateRange} onValueChange={setDateRange}>
+          <DateRangePicker
+            value={dateRange}
+            onValueChange={handleDateRangeChange}
+          >
             <div className="card card-border flex items-center gap-2">
-              <Select onValueChange={handlePresetDateRange}>
+              <Select
+                value={presetDateRange}
+                onValueChange={handlePresetDateRange}
+              >
                 <SelectTrigger>
                   <SelectValue placeholder="기간 선택" className="w-[24rem]" />
                 </SelectTrigger>
diff --git a/apps/cs/src/pages/users/ui/users-page.tsx b/apps/cs/src/pages/users/ui/users-page.tsx
index cee94f2b3..cd59aa4a3 100644
--- a/apps/cs/src/pages/users/ui/users-page.tsx
+++ b/apps/cs/src/pages/users/ui/users-page.tsx
@@ -39,6 +39,7 @@ function UsersPage() {
     pageIndex: 0,
     pageSize: 10,
   });
+  const [presetDateRange, setPresetDateRange] = useState("");
   const [dateRange, setDateRange] = useState<DateRange | undefined>({
     from: undefined,
     to: undefined,
@@ -167,9 +168,15 @@ function UsersPage() {
       default:
         presetDateRange = undefined;
     }
+    setPresetDateRange(value);
     setDateRange(presetDateRange);
   };
 
+  const handleDateRangeChange = (date: DateRange | undefined) => {
+    setDateRange(date);
+    setPresetDateRange("");
+  };
+
   const getUserSttsStatsCnt = (code: string): number => {
     if (!Array.isArray(userSttsStats)) return 0;
     return userSttsStats.find((item) => item.sttsCd === code)?.cnt ?? 0;
@@ -277,9 +284,15 @@ function UsersPage() {
             </div>
             <div className="flex items-center gap-2">
               <Label className="mr-2 text-label">기간</Label>
-              <DateRangePicker value={dateRange} onValueChange={setDateRange}>
+              <DateRangePicker
+                value={dateRange}
+                onValueChange={handleDateRangeChange}
+              >
                 <div className="card card-border flex items-center gap-2">
-                  <Select onValueChange={handlePresetDateRange}>
+                  <Select
+                    value={presetDateRange}
+                    onValueChange={handlePresetDateRange}
+                  >
                     <SelectTrigger>
                       <SelectValue
                         placeholder="기간 선택"