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

apps/common/features/src/widgets/post/ui/post-page.tsx

@@ -44,7 +44,9 @@ function PostPage({ bbsId }: { bbsId: string }) {
   const thumbRefs = useRef<Map<number, string>>(new Map());
 
   const [tableSort, setTableSort] = useState("");
-  const [postParams, setPostParams] = useState<PostParams>({
+  const [keywordType, setKeywordType] = useState("title");
+  const [keyword, setKeyword] = useState("");
+  const [searchParams, setSearchParams] = useState<PostParams>({
     keywordType: "title",
     keyword: "",
   });
@@ -58,7 +60,7 @@ function PostPage({ bbsId }: { bbsId: string }) {
     queryKey: [ENDPOINT.BOARD_SERVICE.POSTS_USER, bbsId, bbsInfo],
     queryFn: () =>
       PostApi.getPostList(parseInt(bbsId), {
-        ...postParams,
+        ...searchParams,
         upndFixYn: bbsInfo?.upndFixUseYn,
       }),
     select: (data) => {
@@ -79,10 +81,16 @@ function PostPage({ bbsId }: { bbsId: string }) {
     isLoading,
     refetch,
   } = useQuery({
-    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS_USER, bbsId, pagination, tableSort],
+    queryKey: [
+      ENDPOINT.BOARD_SERVICE.POSTS_USER,
+      bbsId,
+      searchParams,
+      pagination,
+      tableSort,
+    ],
     queryFn: () =>
       PostApi.getPostList(parseInt(bbsId), {
-        ...postParams,
+        ...searchParams,
         ansUseYn: bbsInfo?.ansUseYn,
         page: pagination.pageIndex,
         size: pagination.pageSize,
@@ -128,7 +136,29 @@ function PostPage({ bbsId }: { bbsId: string }) {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    refetch();
+    setPagination({
+      ...pagination,
+      pageIndex: 0,
+    });
+    setSearchParams({
+      ...searchParams,
+      keywordType,
+      keyword,
+    });
+  };
+
+  const handleReset = () => {
+    setKeywordType("title");
+    setKeyword("");
+    setPagination({
+      ...pagination,
+      pageIndex: 0,
+    });
+    setSearchParams({
+      ...searchParams,
+      keywordType: "title",
+      keyword: "",
+    });
   };
 
   const handleRowClick = (row: Post) => {
@@ -141,12 +171,7 @@ function PostPage({ bbsId }: { bbsId: string }) {
         <div className="card card-border">
           <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
             <Label className="mr-2 text-label">검색</Label>
-            <Select
-              value={postParams.keywordType}
-              onValueChange={(keywordType) => {
-                setPostParams({ ...postParams, keywordType });
-              }}
-            >
+            <Select value={keywordType} onValueChange={setKeywordType}>
               <SelectTrigger className="h-[3.2rem] w-[10rem]">
                 <SelectValue placeholder="선택" />
               </SelectTrigger>
@@ -157,15 +182,21 @@ function PostPage({ bbsId }: { bbsId: string }) {
               </SelectContent>
             </Select>
             <Input
-              value={postParams.keyword}
-              onChange={(e) =>
-                setPostParams({ ...postParams, 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">