diff --git a/apps/cs/src/pages/admin/ui/admin-page.tsx b/apps/cs/src/pages/admin/ui/admin-page.tsx
index a4cd5265d..fb832b01d 100644
--- a/apps/cs/src/pages/admin/ui/admin-page.tsx
+++ b/apps/cs/src/pages/admin/ui/admin-page.tsx
@@ -38,10 +38,14 @@ function AdminPage() {
   const alert = useAlertStore((state) => state.setMessage);
   const { confirm } = useConfirm();
 
-  const [adminQuery, setAdminQuery] = useState<UserSearchParams>({
+  const [keywordType, setKeywordType] = useState("");
+  const [keyword, setKeyword] = useState("");
+  const [grpId, setGrpId] = useState("");
+  const [searchParams, setSearchParams] = useState<UserSearchParams>({
     keywordType: "",
     keyword: "",
     grpId: "",
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -66,10 +70,10 @@ function AdminPage() {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.USERS, pagination],
+    queryKey: [ENDPOINT.USER_SERVICE.USERS, searchParams, pagination],
     queryFn: () =>
       UserApi.findPageAdminUser({
-        ...adminQuery,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -123,7 +127,24 @@ function AdminPage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      keywordType,
+      keyword,
+      grpId,
+    });
+  };
+
+  const handleReset = () => {
+    setKeywordType("");
+    setKeyword("");
+    setGrpId("");
+    setSearchParams({
+      ...searchParams,
+      keywordType: "",
+      keyword: "",
+      grpId: "",
+    });
   };
 
   const handleDeleteAdmins = async () => {
@@ -161,11 +182,7 @@ function AdminPage() {
         <form onSubmit={handleSubmit} className="flex items-center gap-6 p-2">
           <div className="flex items-center gap-2">
             <Label className="mr-2 text-label">관리자구분</Label>
-            <Select
-              onValueChange={(value) =>
-                setAdminQuery({ ...adminQuery, grpId: value })
-              }
-            >
+            <Select value={grpId} onValueChange={(value) => setGrpId(value)}>
               <SelectTrigger className="h-[3.2rem] w-[16rem] !text-[1.3rem]">
                 <SelectValue placeholder="그룹 선택" />
               </SelectTrigger>
@@ -183,9 +200,8 @@ function AdminPage() {
               관리자
             </Label>
             <Select
-              onValueChange={(value) =>
-                setAdminQuery({ ...adminQuery, keywordType: value })
-              }
+              value={keywordType}
+              onValueChange={(value) => setKeywordType(value)}
             >
               <SelectTrigger className="h-[3.2rem] w-[10rem] !text-[1.3rem]">
                 <SelectValue placeholder="선택" />
@@ -197,16 +213,22 @@ function AdminPage() {
             </Select>
             <Input
               className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-              value={adminQuery.keyword}
-              onChange={(e) =>
-                setAdminQuery({ ...adminQuery, keyword: e.target.value })
-              }
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
               placeholder="검색어 입력"
             />
           </div>
           <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">
diff --git a/apps/cs/src/pages/banner/ui/banner-page.tsx b/apps/cs/src/pages/banner/ui/banner-page.tsx
index db5a5cc15..88a47ba67 100644
--- a/apps/cs/src/pages/banner/ui/banner-page.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-page.tsx
@@ -28,17 +28,21 @@ function BannerPage() {
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
-  const [bannerQuery, setBannerQuery] = useState<BannerParams>({ bnrTtl: "" });
+  const [bnrTtl, setBnrTtl] = useState("");
+  const [searchParams, setSearchParams] = useState<BannerParams>({
+    bnrTtl: "",
+    sort: "regDt,desc",
+  });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 5,
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.BANNERS, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.BANNERS, searchParams, pagination],
     queryFn: () =>
       BannerApi.getBannerList({
-        ...bannerQuery,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -46,7 +50,18 @@ function BannerPage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      bnrTtl,
+    });
+  };
+
+  const handleReset = () => {
+    setBnrTtl("");
+    setSearchParams({
+      ...searchParams,
+      bnrTtl: "",
+    });
   };
 
   const handleRowClick = (row: Banner) => {
@@ -107,14 +122,20 @@ function BannerPage() {
           </Label>
           <Input
             className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-            value={bannerQuery.bnrTtl}
-            onChange={(e) =>
-              setBannerQuery({ ...bannerQuery, bnrTtl: e.target.value })
-            }
+            value={bnrTtl}
+            onChange={(e) => setBnrTtl(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">
diff --git a/apps/cs/src/pages/bbs/ui/bbs-page.tsx b/apps/cs/src/pages/bbs/ui/bbs-page.tsx
index 482966fc5..187642a46 100644
--- a/apps/cs/src/pages/bbs/ui/bbs-page.tsx
+++ b/apps/cs/src/pages/bbs/ui/bbs-page.tsx
@@ -29,9 +29,12 @@ function BbsPage() {
   const router = useRouter();
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [boardParams, setBoardParams] = useState<BoardParams>({
+  const [bbsTypeCd, setBbsTypeCd] = useState("");
+  const [bbsNm, setBbsNm] = useState("");
+  const [searchParams, setSearchParams] = useState<BoardParams>({
     bbsTypeCd: "",
     bbsNm: "",
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -39,10 +42,10 @@ function BbsPage() {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.BOARD_SERVICE.BBS, pagination],
+    queryKey: [ENDPOINT.BOARD_SERVICE.BBS, searchParams, pagination],
     queryFn: () =>
       BoardApi.getBoardList({
-        ...boardParams,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -50,7 +53,21 @@ function BbsPage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      bbsTypeCd,
+      bbsNm,
+    });
+  };
+
+  const handleReset = () => {
+    setBbsTypeCd("");
+    setBbsNm("");
+    setSearchParams({
+      ...searchParams,
+      bbsTypeCd: "",
+      bbsNm: "",
+    });
   };
 
   const handleRowClick = (row: Board) => {
@@ -86,10 +103,8 @@ function BbsPage() {
           </Label>
           <CodeSelect
             upCd="BBSTYPE"
-            value={boardParams.bbsTypeCd}
-            onValueChange={(value) =>
-              setBoardParams({ ...boardParams, bbsTypeCd: value })
-            }
+            value={bbsTypeCd}
+            onValueChange={(value) => setBbsTypeCd(value)}
           />
           <Label htmlFor="bbsNm" className="ml-4 mr-2 text-label">
             게시판명
@@ -97,14 +112,20 @@ function BbsPage() {
           <Input
             id="bbsNm"
             className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-            value={boardParams.bbsNm}
-            onChange={(e) =>
-              setBoardParams({ ...boardParams, bbsNm: e.target.value })
-            }
+            value={bbsNm}
+            onChange={(e) => setBbsNm(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">
diff --git a/apps/cs/src/pages/code/ui/lwpocode-section.tsx b/apps/cs/src/pages/code/ui/lwpocode-section.tsx
index b1713fa0f..da37bfb18 100644
--- a/apps/cs/src/pages/code/ui/lwpocode-section.tsx
+++ b/apps/cs/src/pages/code/ui/lwpocode-section.tsx
@@ -15,8 +15,10 @@ type LwpoCodeSectionProps = {
 function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
   const alert = useAlertStore((state) => state.setMessage);
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [lwpoCodeQuery, setLwpoCodeQuery] = useState<LwpoCodeParams>({
+  const [lwpoCdNm, setLwpoCdNm] = useState("");
+  const [searchParams, setSearchParams] = useState<LwpoCodeParams>({
     lwpoCdNm: "",
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -24,10 +26,10 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, upCd, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, upCd, searchParams, pagination],
     queryFn: () =>
       LwpoCodeApi.getLwpoCodeList({
-        ...lwpoCodeQuery,
+        ...searchParams,
         upCd,
         page: pagination.pageIndex,
         size: pagination.pageSize,
@@ -59,7 +61,18 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      lwpoCdNm,
+    });
+  };
+
+  const handleReset = () => {
+    setLwpoCdNm("");
+    setSearchParams({
+      ...searchParams,
+      lwpoCdNm: "",
+    });
   };
 
   useEffect(() => {
@@ -75,17 +88,20 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
           </Label>
           <Input
             className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
-            value={lwpoCodeQuery.lwpoCdNm}
-            onChange={(e) =>
-              setLwpoCodeQuery({
-                ...lwpoCodeQuery,
-                lwpoCdNm: e.target.value,
-              })
-            }
+            value={lwpoCdNm}
+            onChange={(e) => setLwpoCdNm(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">
diff --git a/apps/cs/src/pages/code/ui/upcode-section.tsx b/apps/cs/src/pages/code/ui/upcode-section.tsx
index ffae0f28b..b7202178c 100644
--- a/apps/cs/src/pages/code/ui/upcode-section.tsx
+++ b/apps/cs/src/pages/code/ui/upcode-section.tsx
@@ -14,8 +14,10 @@ type UpCodeSectionProps = {
 
 function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [upCodeQuery, setUpCodeQuery] = useState<UpCodeParams>({
+  const [keyword, setKeyword] = useState("");
+  const [searchParams, setSearchParams] = useState<UpCodeParams>({
     keyword: "",
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -23,10 +25,10 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, searchParams, pagination],
     queryFn: () =>
       UpCodeApi.getUpCodeList({
-        ...upCodeQuery,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -40,7 +42,18 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      keyword,
+    });
+  };
+
+  const handleReset = () => {
+    setKeyword("");
+    setSearchParams({
+      ...searchParams,
+      keyword: "",
+    });
   };
 
   const { tableComponent, tableInstance: table } = useDataTable({
@@ -66,17 +79,20 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
           </Label>
           <Input
             className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
-            value={upCodeQuery.keyword}
-            onChange={(e) =>
-              setUpCodeQuery({
-                ...upCodeQuery,
-                keyword: e.target.value,
-              })
-            }
+            value={keyword}
+            onChange={(e) => setKeyword(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">
diff --git a/apps/cs/src/pages/contents/ui/contents-page.tsx b/apps/cs/src/pages/contents/ui/contents-page.tsx
index 45d9f100e..c2e2704d1 100644
--- a/apps/cs/src/pages/contents/ui/contents-page.tsx
+++ b/apps/cs/src/pages/contents/ui/contents-page.tsx
@@ -17,8 +17,10 @@ import { columns } from "../model/table-columns";
 function ContentsPage() {
   const router = useRouter();
 
-  const [contentsQuery, setContentsQuery] = useState<ContentsParams>({
+  const [contsTtl, setContsTtl] = useState("");
+  const [searchParams, setSearchParams] = useState<ContentsParams>({
     contsTtl: "",
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -26,10 +28,10 @@ function ContentsPage() {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.CONTENTS, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.CONTENTS, searchParams, pagination],
     queryFn: () =>
       ContentsApi.getContentsList({
-        ...contentsQuery,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -38,7 +40,18 @@ function ContentsPage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      contsTtl,
+    });
+  };
+
+  const handleReset = () => {
+    setContsTtl("");
+    setSearchParams({
+      ...searchParams,
+      contsTtl: "",
+    });
   };
 
   const handleRowClick = (row: Contents) => {
@@ -72,12 +85,20 @@ function ContentsPage() {
           </Label>
           <Input
             className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-            value={contentsQuery.contsTtl}
-            onChange={(e) => setContentsQuery({ contsTtl: e.target.value })}
+            value={contsTtl}
+            onChange={(e) => setContsTtl(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">
diff --git a/apps/cs/src/pages/file/ui/file-page.tsx b/apps/cs/src/pages/file/ui/file-page.tsx
index 67a313423..d717461aa 100644
--- a/apps/cs/src/pages/file/ui/file-page.tsx
+++ b/apps/cs/src/pages/file/ui/file-page.tsx
@@ -14,8 +14,10 @@ function FilePage() {
   const { confirm } = useConfirm();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const [attachmentQuery, setAttachmentQuery] = useState<AttachmentParams>({
+  const [orgnlFileNm, setOrgnlFileNm] = useState("");
+  const [searchParams, setSearchParams] = useState<AttachmentParams>({
     orgnlFileNm: "",
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -23,10 +25,10 @@ function FilePage() {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS, pagination],
+    queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS, searchParams, pagination],
     queryFn: () =>
       AttachmentApi.getAttachmentsList({
-        ...attachmentQuery,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -64,14 +66,20 @@ function FilePage() {
     },
   });
 
-  const handleAttachmentQueryChange =
-    (key: keyof AttachmentParams) => (value: string) => {
-      setAttachmentQuery({ ...attachmentQuery, [key]: value });
-    };
-
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      orgnlFileNm,
+    });
+  };
+
+  const handleReset = () => {
+    setOrgnlFileNm("");
+    setSearchParams({
+      ...searchParams,
+      orgnlFileNm: "",
+    });
   };
 
   return (
@@ -86,10 +94,8 @@ function FilePage() {
               <Input
                 id="keyword"
                 className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-                value={attachmentQuery.orgnlFileNm || ""}
-                onChange={(e) =>
-                  handleAttachmentQueryChange("orgnlFileNm")(e.target.value)
-                }
+                value={orgnlFileNm}
+                onChange={(e) => setOrgnlFileNm(e.target.value)}
                 placeholder="파일명을 입력하세요"
               />
             </div>
@@ -97,6 +103,14 @@ function FilePage() {
           <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">
diff --git a/apps/cs/src/pages/image/ui/image-page.tsx b/apps/cs/src/pages/image/ui/image-page.tsx
index 3515cfbef..4b1bcd5cd 100644
--- a/apps/cs/src/pages/image/ui/image-page.tsx
+++ b/apps/cs/src/pages/image/ui/image-page.tsx
@@ -24,22 +24,23 @@ type PostingTarget = {
 function ImagePage() {
   const router = useRouter();
 
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
-  const [imageQuery, setImageQuery] = useState<ImageParams>({
-     keyword: "" ,
-     sort:"regDt,desc"
+  const [keyword, setKeyword] = useState("");
+  const [searchParams, setSearchParams] = useState<ImageParams>({
+    keyword: "",
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 5,
   });
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.IMAGES, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.IMAGES, searchParams, pagination],
     queryFn: () =>
       ImageApi.getImageList({
-        ...imageQuery,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -47,7 +48,18 @@ function ImagePage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      keyword,
+    });
+  };
+
+  const handleReset = () => {
+    setKeyword("");
+    setSearchParams({
+      ...searchParams,
+      keyword: "",
+    });
   };
 
   const handleRowClick = (row: Image) => {
@@ -99,14 +111,20 @@ function ImagePage() {
           </Label>
           <Input
             className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-            value={imageQuery.keyword}
-            onChange={(e) =>
-              setImageQuery({ ...imageQuery, keyword: e.target.value })
-            }
+            value={keyword}
+            onChange={(e) => setKeyword(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">
diff --git a/apps/cs/src/pages/module/ui/module-page.tsx b/apps/cs/src/pages/module/ui/module-page.tsx
index 45524eba5..127aa66de 100644
--- a/apps/cs/src/pages/module/ui/module-page.tsx
+++ b/apps/cs/src/pages/module/ui/module-page.tsx
@@ -18,21 +18,23 @@ import { columns } from "../model/authorizations-table-columns";
 function ModulePage() {
   const router = useRouter();
 
-  const [authorizationQuery, setAuthorizationQuery] =
-    useState<AuthorizationsParams>({
-      authorizationName: "",
-      httpMethodCode: "",
-    });
+  const [authorizationName, setAuthorizationName] = useState("");
+  const [httpMethodCode, setHttpMethodCode] = useState("");
+  const [searchParams, setSearchParams] = useState<AuthorizationsParams>({
+    authorizationName: "",
+    httpMethodCode: "",
+    sort: "regDt,desc",
+  });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 10,
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS, pagination],
+    queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS, searchParams, pagination],
     queryFn: () =>
       AuthorizationsApi.getAuthorizationsList({
-        ...authorizationQuery,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -60,14 +62,23 @@ function ModulePage() {
     },
   });
 
-  const handleAuthorizationQueryChange =
-    (key: keyof AuthorizationsParams) => (value: string) => {
-      setAuthorizationQuery({ ...authorizationQuery, [key]: value });
-    };
-
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      authorizationName,
+      httpMethodCode,
+    });
+  };
+
+  const handleReset = () => {
+    setAuthorizationName("");
+    setHttpMethodCode("");
+    setSearchParams({
+      ...searchParams,
+      authorizationName: "",
+      httpMethodCode: "",
+    });
   };
 
   return (
@@ -81,7 +92,8 @@ function ModulePage() {
               </Label>
               <CodeSelect
                 upCd="HTTPMHD"
-                onValueChange={handleAuthorizationQueryChange("httpMethodCode")}
+                value={httpMethodCode}
+                onValueChange={(value) => setHttpMethodCode(value)}
               />
             </div>
             <div className="flex items-center gap-2">
@@ -91,18 +103,22 @@ function ModulePage() {
               <Input
                 id="keyword"
                 className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-                value={authorizationQuery.authorizationName}
-                onChange={(e) =>
-                  handleAuthorizationQueryChange("authorizationName")(
-                    e.target.value,
-                  )
-                }
+                value={authorizationName}
+                onChange={(e) => setAuthorizationName(e.target.value)}
               />
             </div>
           </div>
           <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">
diff --git a/apps/cs/src/pages/popup/ui/popup-page.tsx b/apps/cs/src/pages/popup/ui/popup-page.tsx
index 475fee821..a8046c57e 100644
--- a/apps/cs/src/pages/popup/ui/popup-page.tsx
+++ b/apps/cs/src/pages/popup/ui/popup-page.tsx
@@ -25,8 +25,10 @@ type PostingTarget = {
 function PopupPage() {
   const router = useRouter();
 
-  const [popupParams, setPopupParams] = useState<PopupParams>({
+  const [keyword, setKeyword] = useState("");
+  const [searchParams, setSearchParams] = useState<PopupParams>({
     keyword: "",
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -36,10 +38,10 @@ function PopupPage() {
   const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.POPUPS, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.POPUPS, searchParams, pagination],
     queryFn: () =>
       PopupApi.getPopupList({
-        ...popupParams,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -48,7 +50,18 @@ function PopupPage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      keyword,
+    });
+  };
+
+  const handleReset = () => {
+    setKeyword("");
+    setSearchParams({
+      ...searchParams,
+      keyword: "",
+    });
   };
 
   const handleRowClick = (row: Popup) => {
@@ -99,14 +112,20 @@ function PopupPage() {
           </Label>
           <Input
             className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
-            value={popupParams.keyword}
-            onChange={(e) =>
-              setPopupParams({ ...popupParams, keyword: e.target.value })
-            }
+            value={keyword}
+            onChange={(e) => setKeyword(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">
diff --git a/apps/cs/src/pages/recent/ui/recent-page.tsx b/apps/cs/src/pages/recent/ui/recent-page.tsx
index 26cf3af85..4e33eab89 100644
--- a/apps/cs/src/pages/recent/ui/recent-page.tsx
+++ b/apps/cs/src/pages/recent/ui/recent-page.tsx
@@ -51,28 +51,43 @@ function RecentPage() {
   const { confirm } = useConfirm();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const [dateRange, setDateRange] = useState<DateRange>();
+  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 [recentPostQuery, setRecentPostQuery] = useState<RecentPostParams>({
+
+  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: "",
     bbsId: null,
     delYn: "N",
     frDateYmd: "",
     toDateYmd: "",
+    sort: "regDt,desc",
   });
   const [isDeletePostData, setIsDeletePostData] = useState(false);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS, pagination, tableSort],
+    queryKey: [
+      ENDPOINT.BOARD_SERVICE.POSTS,
+      searchParams,
+      pagination,
+      tableSort,
+    ],
     queryFn: () =>
       PostApi.getRecentPostList({
-        ...recentPostQuery,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
         sort: tableSort,
@@ -115,14 +130,40 @@ function RecentPage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setIsDeletePostData(recentPostQuery.delYn === "Y");
-    query.refetch();
+    setIsDeletePostData(delYn === "Y");
+    setSearchParams({
+      ...searchParams,
+      keywordType,
+      keyword,
+      bbsId: bbsId ? parseInt(bbsId) : null,
+      delYn,
+      frDateYmd: dateRange?.from
+        ? dayjs(dateRange.from).format("YYYYMMDD")
+        : "",
+      toDateYmd: dateRange?.to ? dayjs(dateRange.to).format("YYYYMMDD") : "",
+    });
   };
 
-  const handleRecentPostParamsChange =
-    (key: keyof RecentPostParams) => (value: unknown) => {
-      setRecentPostQuery({ ...recentPostQuery, [key]: value });
-    };
+  const handleReset = () => {
+    setKeywordType("");
+    setKeyword("");
+    setBbsId(null);
+    setDelYn("N");
+    setDateRange({
+      from: undefined,
+      to: undefined,
+    });
+    setSearchParams({
+      ...searchParams,
+      keywordType: "",
+      keyword: "",
+      bbsId: null,
+      delYn: "N",
+      frDateYmd: "",
+      toDateYmd: "",
+    });
+    setIsDeletePostData(false);
+  };
 
   const handlePresetDateRange = (value: string) => {
     let presetDateRange: DateRange | undefined;
@@ -148,16 +189,7 @@ function RecentPage() {
       default:
         presetDateRange = undefined;
     }
-    handleDateRangeChange(presetDateRange);
-  };
-
-  const handleDateRangeChange = (value: DateRange | undefined) => {
-    setDateRange(value);
-    setRecentPostQuery({
-      ...recentPostQuery,
-      frDateYmd: dayjs(value?.from).format("YYYYMMDD") ?? "",
-      toDateYmd: dayjs(value?.to).format("YYYYMMDD") ?? "",
-    });
+    setDateRange(presetDateRange);
   };
 
   const onSoftDeletePost = async () => {
@@ -214,10 +246,7 @@ 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={handleDateRangeChange}
-          >
+          <DateRangePicker value={dateRange} onValueChange={setDateRange}>
             <div className="card card-border flex items-center gap-2">
               <Select onValueChange={handlePresetDateRange}>
                 <SelectTrigger>
@@ -233,7 +262,10 @@ function RecentPage() {
           </DateRangePicker>
 
           <Label className="ml-4 mr-2 text-label">게시판</Label>
-          <Select onValueChange={handleRecentPostParamsChange("bbsId")}>
+          <Select
+            value={bbsId?.toString() || ""}
+            onValueChange={(value) => setBbsId(value ? value : null)}
+          >
             <SelectTrigger className="w-[12rem]">
               <SelectValue placeholder="선택" />
             </SelectTrigger>
@@ -247,7 +279,7 @@ function RecentPage() {
           </Select>
 
           <Label className="ml-4 mr-2 text-label">상태</Label>
-          <Select onValueChange={handleRecentPostParamsChange("delYn")}>
+          <Select value={delYn} onValueChange={(value) => setDelYn(value)}>
             <SelectTrigger className="w-[10rem]">
               <SelectValue placeholder="선택" />
             </SelectTrigger>
@@ -259,8 +291,8 @@ function RecentPage() {
 
           <Label className="ml-4 mr-2 text-label">검색</Label>
           <Select
-            value={recentPostQuery.keywordType}
-            onValueChange={handleRecentPostParamsChange("keywordType")}
+            value={keywordType}
+            onValueChange={(value) => setKeywordType(value)}
           >
             <SelectTrigger className="h-[3.2rem] w-[10rem]">
               <SelectValue placeholder="선택" />
@@ -272,15 +304,21 @@ function RecentPage() {
             </SelectContent>
           </Select>
           <Input
-            value={recentPostQuery.keyword}
-            onChange={(e) =>
-              handleRecentPostParamsChange("keyword")(e.target.value)
-            }
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value)}
             className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
           />
           <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">
diff --git a/apps/cs/src/pages/role/ui/role-page.tsx b/apps/cs/src/pages/role/ui/role-page.tsx
index 9d864255c..7e20b3715 100644
--- a/apps/cs/src/pages/role/ui/role-page.tsx
+++ b/apps/cs/src/pages/role/ui/role-page.tsx
@@ -13,8 +13,10 @@ import { columns } from "../model/table-columns";
 function RolePage() {
   const router = useRouter();
 
-  const [roleQuery, setRoleQuery] = useState<RoleParams>({
+  const [keyword, setKeyword] = useState("");
+  const [searchParams, setSearchParams] = useState<RoleParams>({
     keyword: "",
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -22,10 +24,10 @@ function RolePage() {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.ROLES, pagination],
+    queryKey: [ENDPOINT.USER_SERVICE.ROLES, searchParams, pagination],
     queryFn: () =>
       RoleApi.getRoles({
-        ...roleQuery,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -54,7 +56,18 @@ function RolePage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      keyword,
+    });
+  };
+
+  const handleReset = () => {
+    setKeyword("");
+    setSearchParams({
+      ...searchParams,
+      keyword: "",
+    });
   };
 
   return (
@@ -66,14 +79,20 @@ function RolePage() {
           </Label>
           <Input
             className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-            value={roleQuery.keyword}
-            onChange={(e) =>
-              setRoleQuery({ ...roleQuery, keyword: e.target.value })
-            }
+            value={keyword}
+            onChange={(e) => setKeyword(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">
diff --git a/apps/cs/src/pages/site/ui/site-page.tsx b/apps/cs/src/pages/site/ui/site-page.tsx
index 734ba7658..046c80142 100644
--- a/apps/cs/src/pages/site/ui/site-page.tsx
+++ b/apps/cs/src/pages/site/ui/site-page.tsx
@@ -14,10 +14,10 @@ import { columns } from "../model/table-columns";
 
 function SitePage() {
   const router = useRouter();
-
-  const [siteQuery, setSiteQuery] = useState<SiteParams>({
+  const [siteNm, setSiteNm] = useState("");
+  const [searchParams, setSearchParams] = useState<SiteParams>({
     siteNm: "",
-    sort:"regDt,desc"
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -25,10 +25,10 @@ function SitePage() {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.SITES, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.SITES, searchParams, pagination],
     queryFn: () =>
       SiteApi.getSiteList({
-        ...siteQuery,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -37,7 +37,18 @@ function SitePage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      siteNm,
+    });
+  };
+
+  const handleReset = () => {
+    setSiteNm("");
+    setSearchParams({
+      ...searchParams,
+      siteNm: "",
+    });
   };
 
   const handleRowClick = (row: Site) => {
@@ -65,17 +76,26 @@ function SitePage() {
     <div className="card card-border !mt-6">
       <div className="card card-border">
         <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
-          <Label htmlFor="" className="mr-2 text-label">
+          <Label htmlFor="siteNm" className="mr-2 text-label">
             사이트명
           </Label>
           <Input
+            name="siteNm"
+            value={siteNm}
+            onChange={(e) => setSiteNm(e.target.value)}
             className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-            value={siteQuery.siteNm}
-            onChange={(e) => setSiteQuery({ siteNm: e.target.value })}
           />
-          <Button className="h-[3.2rem]" type="submit">
+          <Button type="submit" className="h-[3.2rem]">
             조회
           </Button>
+          <Button
+            type="button"
+            color="white"
+            className="h-[3.2rem]"
+            onClick={handleReset}
+          >
+            초기화
+          </Button>
         </form>
       </div>
       <div className="card card-border">
diff --git a/apps/cs/src/pages/survey/ui/survey-page.tsx b/apps/cs/src/pages/survey/ui/survey-page.tsx
index c34a21f6f..ff64014ce 100644
--- a/apps/cs/src/pages/survey/ui/survey-page.tsx
+++ b/apps/cs/src/pages/survey/ui/survey-page.tsx
@@ -25,8 +25,10 @@ type PostingTarget = {
 function SurveyPage() {
   const router = useRouter();
 
-  const [surveyParams, setSurveyParams] = useState<SurveyParams>({
+  const [srvyTtl, setSrvyTtl] = useState("");
+  const [searchParams, setSearchParams] = useState<SurveyParams>({
     srvyTtl: "",
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -36,10 +38,10 @@ function SurveyPage() {
   const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.SURVEY, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.SURVEY, searchParams, pagination],
     queryFn: () =>
       SurveyApi.getSurveyList({
-        ...surveyParams,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -71,7 +73,18 @@ function SurveyPage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      srvyTtl,
+    });
+  };
+
+  const handleReset = () => {
+    setSrvyTtl("");
+    setSearchParams({
+      ...searchParams,
+      srvyTtl: "",
+    });
   };
 
   useEffect(() => {
@@ -99,14 +112,20 @@ function SurveyPage() {
           </Label>
           <Input
             className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
-            value={surveyParams.srvyTtl}
-            onChange={(e) =>
-              setSurveyParams({ ...surveyParams, srvyTtl: e.target.value })
-            }
+            value={srvyTtl}
+            onChange={(e) => setSrvyTtl(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">
diff --git a/apps/cs/src/pages/template/ui/template-page.tsx b/apps/cs/src/pages/template/ui/template-page.tsx
index 59e8c8b01..de3dca8ff 100644
--- a/apps/cs/src/pages/template/ui/template-page.tsx
+++ b/apps/cs/src/pages/template/ui/template-page.tsx
@@ -14,22 +14,23 @@ import type { Template, TemplateParams } from "../model/template-interface";
 
 function TemplatePage() {
   const router = useRouter();
-
-  const [templateQuery, setTemplateQuery] = useState<TemplateParams>({
-    tmpltSeCd: "",
+  const [keyword, setKeyword] = useState("");
+  const [tmpltSeCd, setTmpltSeCd] = useState("");
+  const [searchParams, setSearchParams] = useState<TemplateParams>({
     keyword: "",
-    sort:"regDt,desc"
+    tmpltSeCd: "",
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
-    pageSize: 5,
+    pageSize: 10,
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.TEMPLATE, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.TEMPLATE, searchParams, pagination],
     queryFn: () =>
       TemplateApi.getTemplateList({
-        ...templateQuery,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -38,7 +39,21 @@ function TemplatePage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      keyword,
+      tmpltSeCd,
+    });
+  };
+
+  const handleReset = () => {
+    setKeyword("");
+    setTmpltSeCd("");
+    setSearchParams({
+      ...searchParams,
+      keyword: "",
+      tmpltSeCd: "",
+    });
   };
 
   const handleRowClick = (row: Template) => {
@@ -73,10 +88,8 @@ function TemplatePage() {
               </Label>
               <CodeSelect
                 upCd="TMPLTCLCD"
-                value={templateQuery.tmpltSeCd}
-                onValueChange={(value) =>
-                  setTemplateQuery({ ...templateQuery, tmpltSeCd: value })
-                }
+                value={tmpltSeCd}
+                onValueChange={(value) => setTmpltSeCd(value)}
               />
             </div>
             <div className="flex items-center gap-2">
@@ -85,19 +98,22 @@ function TemplatePage() {
               </Label>
               <Input
                 className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-                value={templateQuery.keyword}
-                onChange={(e) =>
-                  setTemplateQuery({
-                    ...templateQuery,
-                    keyword: e.target.value,
-                  })
-                }
+                value={keyword}
+                onChange={(e) => setKeyword(e.target.value)}
               />
             </div>
           </div>
           <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">
diff --git a/apps/cs/src/pages/terms/ui/terms-page.tsx b/apps/cs/src/pages/terms/ui/terms-page.tsx
index 617d4eff6..31feb29f4 100644
--- a/apps/cs/src/pages/terms/ui/terms-page.tsx
+++ b/apps/cs/src/pages/terms/ui/terms-page.tsx
@@ -15,10 +15,12 @@ import type { TermsParams, Terms } from "../model/terms-interface";
 function TermsPage() {
   const router = useRouter();
 
-  const [termsQuery, setTermsQuery] = useState<TermsParams>({
+  const [keyword, setKeyword] = useState("");
+  const [trmsSeCd, setTrmsSeCd] = useState("");
+  const [searchParams, setSearchParams] = useState<TermsParams>({
+    keyword: "",
     trmsSeCd: "",
-    keyword: "",  
-     sort:"regDt,desc"
+    sort: "regDt,desc",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -26,10 +28,10 @@ function TermsPage() {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.TERMS, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.TERMS, searchParams, pagination],
     queryFn: () =>
       TermsApi.getTermsList({
-        ...termsQuery,
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -38,7 +40,21 @@ function TermsPage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      keyword,
+      trmsSeCd,
+    });
+  };
+
+  const handleReset = () => {
+    setKeyword("");
+    setTrmsSeCd("");
+    setSearchParams({
+      ...searchParams,
+      keyword: "",
+      trmsSeCd: "",
+    });
   };
 
   const handleRowClick = (row: Terms) => {
@@ -73,10 +89,8 @@ function TermsPage() {
               </Label>
               <CodeSelect
                 upCd="TRMSCLCD"
-                value={termsQuery.trmsSeCd}
-                onValueChange={(value) =>
-                  setTermsQuery({ ...termsQuery, trmsSeCd: value })
-                }
+                value={trmsSeCd}
+                onValueChange={(value) => setTrmsSeCd(value)}
               />
             </div>
             <div className="flex items-center gap-2">
@@ -85,19 +99,22 @@ function TermsPage() {
               </Label>
               <Input
                 className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-                value={termsQuery.keyword}
-                onChange={(e) =>
-                  setTermsQuery({
-                    ...termsQuery,
-                    keyword: e.target.value,
-                  })
-                }
+                value={keyword}
+                onChange={(e) => setKeyword(e.target.value)}
               />
             </div>
           </div>
           <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">
diff --git a/apps/cs/src/pages/users/ui/users-page.tsx b/apps/cs/src/pages/users/ui/users-page.tsx
index 2ffe05eb4..c5e71cefd 100644
--- a/apps/cs/src/pages/users/ui/users-page.tsx
+++ b/apps/cs/src/pages/users/ui/users-page.tsx
@@ -2,7 +2,6 @@
 
 import dayjs from "dayjs";
 import { useState } from "react";
-import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
@@ -40,19 +39,25 @@ function UsersPage() {
     pageIndex: 0,
     pageSize: 10,
   });
-  const [dateRange, setDateRange] = useState<DateRange>();
+  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+    from: undefined,
+    to: undefined,
+  });
+  const [keywordType, setKeywordType] = useState("all");
+  const [keyword, setKeyword] = useState("");
+  const [userStateCode, setUserStateCode] = useState("");
+  const [aprvYn, setAprvYn] = useState("");
+  const [grpId, setGrpId] = useState("");
 
-  const { register, watch, setValue, getValues } = useForm<UserSearchParams>({
-    defaultValues: {
-      keywordType: "all",
-      keyword: "",
-      userStateCode: "",
-      aprvYn: "",
-      grpId: "",
-      frDateYmd: "",
-      toDateYmd: "",
-      sort: "regDt,desc"
-    },
+  const [searchParams, setSearchParams] = useState<UserSearchParams>({
+    keywordType: "all",
+    keyword: "",
+    userStateCode: "",
+    aprvYn: "",
+    grpId: "",
+    frDateYmd: "",
+    toDateYmd: "",
+    sort: "regDt,desc",
   });
 
   const { data: userSttsStats } = useQuery({
@@ -61,16 +66,16 @@ function UsersPage() {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.USERS, pagination, watch("sort")],
+    queryKey: [ENDPOINT.USER_SERVICE.USERS, searchParams, pagination],
     queryFn: () =>
       UserApi.findPageUser({
-        ...getValues(),
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
   });
 
-  const { data: userStateCode } = useQuery({
+  const { data: userStateCodes } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.CODE],
     queryFn: () => CodeApi.getCode("USERSTTS"),
   });
@@ -98,7 +103,40 @@ function UsersPage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    query.refetch();
+    setSearchParams({
+      ...searchParams,
+      keywordType,
+      keyword,
+      userStateCode,
+      aprvYn,
+      grpId,
+      frDateYmd: dateRange?.from
+        ? dayjs(dateRange.from).format("YYYYMMDD")
+        : "",
+      toDateYmd: dateRange?.to ? dayjs(dateRange.to).format("YYYYMMDD") : "",
+    });
+  };
+
+  const handleReset = () => {
+    setKeywordType("all");
+    setKeyword("");
+    setUserStateCode("");
+    setAprvYn("");
+    setGrpId("");
+    setDateRange({
+      from: undefined,
+      to: undefined,
+    });
+    setSearchParams({
+      ...searchParams,
+      keywordType: "all",
+      keyword: "",
+      userStateCode: "",
+      aprvYn: "",
+      grpId: "",
+      frDateYmd: "",
+      toDateYmd: "",
+    });
   };
 
   const handlePresetDateRange = (value: string) => {
@@ -126,8 +164,6 @@ function UsersPage() {
         presetDateRange = undefined;
     }
     setDateRange(presetDateRange);
-    setValue("frDateYmd", dayjs(presetDateRange?.from).format("YYYYMMDD"));
-    setValue("toDateYmd", dayjs(presetDateRange?.to).format("YYYYMMDD"));
   };
 
   const getUserSttsStatsCnt = (code: string): number => {
@@ -135,6 +171,21 @@ function UsersPage() {
     return userSttsStats.find((item) => item.sttsCd === code)?.cnt ?? 0;
   };
 
+  const handleUserStateCodeChange = (code: string, checked: boolean) => {
+    let newUserStateCode = userStateCode;
+
+    if (checked) {
+      newUserStateCode = userStateCode ? `${userStateCode},${code}` : code;
+    } else {
+      newUserStateCode = userStateCode
+        .split(",")
+        .filter((c) => c !== code)
+        .join(",");
+    }
+
+    setUserStateCode(newUserStateCode);
+  };
+
   return (
     <div className="card card-border !mt-6">
       <div className="card card-border flex items-center justify-center gap-10 !bg-accent !py-6">
@@ -195,8 +246,8 @@ function UsersPage() {
                 회원정보
               </Label>
               <Select
-                {...register("keywordType")}
-                onValueChange={(value) => setValue("keywordType", value)}
+                value={keywordType}
+                onValueChange={(value) => setKeywordType(value)}
               >
                 <SelectTrigger className="w-[18rem]">
                   <SelectValue placeholder="선택" />
@@ -210,7 +261,8 @@ function UsersPage() {
                 </SelectContent>
               </Select>
               <Input
-                {...register("keyword")}
+                value={keyword}
+                onChange={(e) => setKeyword(e.target.value)}
                 className="!text-[1.3rem]"
                 placeholder="검색어를 입력하세요"
               />
@@ -221,14 +273,7 @@ function UsersPage() {
             </div>
             <div className="flex items-center gap-2">
               <Label className="mr-2 text-label">기간</Label>
-              <DateRangePicker
-                value={dateRange}
-                onValueChange={(value) => {
-                  setDateRange(value);
-                  setValue("frDateYmd", dayjs(value?.from).format("YYYYMMDD"));
-                  setValue("toDateYmd", dayjs(value?.to).format("YYYYMMDD"));
-                }}
-              >
+              <DateRangePicker value={dateRange} onValueChange={setDateRange}>
                 <div className="card card-border flex items-center gap-2">
                   <Select onValueChange={handlePresetDateRange}>
                     <SelectTrigger>
@@ -250,24 +295,14 @@ function UsersPage() {
           <div className="flex items-center gap-2">
             <Label className="mr-2 text-label">회원상태</Label>
             <div className="flex gap-4">
-              {userStateCode?.map((item) => (
+              {userStateCodes?.map((item) => (
                 <div key={item.lwpoCd} className="flex items-center gap-2">
                   <Checkbox
                     id={item.lwpoCd}
                     value={item.lwpoCd}
-                    checked={watch("userStateCode")?.includes(item.lwpoCd)}
+                    checked={userStateCode?.includes(item.lwpoCd)}
                     onCheckedChange={(checked) => {
-                      setValue(
-                        "userStateCode",
-                        checked
-                          ? getValues("userStateCode")
-                            ? `${getValues("userStateCode")},${item.lwpoCd}`
-                            : item.lwpoCd
-                          : getValues("userStateCode")
-                              ?.split(",")
-                              .filter((code) => code !== item.lwpoCd)
-                              .join(","),
-                      );
+                      handleUserStateCodeChange(item.lwpoCd, !!checked);
                     }}
                   />
                   <Label htmlFor={item.lwpoCd}>{item.lwpoCdNm}</Label>
@@ -276,10 +311,20 @@ function UsersPage() {
             </div>
           </div>
           <hr />
-          <Button type="submit" className="mx-auto w-[16rem]">
-            <i className="diveicon di-search" />
-            검색
-          </Button>
+          <div className="flex justify-center gap-2">
+            <Button type="submit" className="w-[16rem]">
+              <i className="diveicon di-search" />
+              검색
+            </Button>
+            <Button
+              type="button"
+              color="white"
+              className="w-[16rem]"
+              onClick={handleReset}
+            >
+              초기화
+            </Button>
+          </div>
         </form>
       </div>
       <div className="card card-border">
@@ -290,7 +335,10 @@ function UsersPage() {
               <Select
                 defaultValue="regDt,desc"
                 onValueChange={(value) => {
-                  setValue("sort", value);
+                  setSearchParams({
+                    ...searchParams,
+                    sort: value,
+                  });
                 }}
               >
                 <SelectTrigger>