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

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">

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">