fix(frontend): enhance logic

frontend/src/hooks/useQueryParam.ts

@@ -28,7 +28,7 @@ export const useQueryParam = () => {
         }
       });
 
-      await router.replace(
+      await router.push(
         {
           query: updatedQuery,
         },

frontend/src/hooks/useSearch.ts

@@ -67,23 +67,24 @@ export const useSearch = <T>({
     queryParamValue?.toString() || "",
   );
 
+  useEffect(() => {
+    if (queryParamValue) {
+      setSearchText(queryParamValue.toString() || "");
+    } else {
+      if (searchText && ref.current) {
+        ref.current.value = "";
+      }
+      setSearchText("");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [queryParamValue]);
+
   useEffect(() => {
     if (searchText && ref.current) {
       ref.current.value = searchText;
     }
   }, [searchText]);
 
-  useEffect(() => {
-    if (
-      queryParamKey &&
-      queryParamValue !== searchText &&
-      queryParamValue !== undefined
-    ) {
-      setSearchText(queryParamValue.toString() || "");
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [queryParamValue, queryParamKey]);
-
   const onSearch = debounce(
     async (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string) => {
       const newSearchText = typeof e === "string" ? e : e.target.value;