From e482ba1400f5eaa43036269c967c19eea938cf14 Mon Sep 17 00:00:00 2001
From: Daseul Kim <seul@interplug.co.kr>
Date: Mon, 26 May 2025 17:09:03 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=EC=A1=B0=EA=B1=B4=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EC=8B=9C=20=EC=84=A0=ED=83=9D=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EC=B4=88=EA=B8=B0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/suitable/Suitable.tsx       | 6 +++---
 src/components/suitable/SuitableButton.tsx | 6 +++---
 src/hooks/useSuitable.ts                   | 9 +++++----
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/suitable/Suitable.tsx b/src/components/suitable/Suitable.tsx
index 35fe94a..56247f9 100644
--- a/src/components/suitable/Suitable.tsx
+++ b/src/components/suitable/Suitable.tsx
@@ -13,7 +13,7 @@ export default function Suitable() {
   const [searchValue, setSearchValue] = useState('')
 
   const { getSuitableCommCode, clearSuitableSearch } = useSuitable()
-  const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword, clearSearchKeyword } = useSuitableStore()
+  const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword } = useSuitableStore()
 
   const handleInputSearch = async () => {
     if (!searchValue.trim()) {
@@ -25,13 +25,13 @@ export default function Suitable() {
 
   const handleInputClear = () => {
     setSearchValue('')
-    clearSearchKeyword()
+    clearSuitableSearch({ items: true, keyword: true})
   }
 
   useEffect(() => {
     getSuitableCommCode()
     return () => {
-      clearSuitableSearch()
+      clearSuitableSearch({ items: true, category: true, keyword: true })
     }
   }, [])
 
diff --git a/src/components/suitable/SuitableButton.tsx b/src/components/suitable/SuitableButton.tsx
index 20191d2..9664f2c 100644
--- a/src/components/suitable/SuitableButton.tsx
+++ b/src/components/suitable/SuitableButton.tsx
@@ -6,8 +6,8 @@ import { useSuitableStore } from '@/store/useSuitableStore'
 
 export default function SuitableButton() {
   const popupController = usePopupController()
-  const { getSuitableIds } = useSuitable()
-  const { selectedItems, addAllSelectedItem, clearSelectedItems } = useSuitableStore()
+  const { getSuitableIds, clearSuitableSearch } = useSuitable()
+  const { selectedItems, addAllSelectedItem } = useSuitableStore()
 
   const handleSelectAll = async () => {
     addAllSelectedItem(await getSuitableIds())
@@ -30,7 +30,7 @@ export default function SuitableButton() {
               全選択<i className="btn-arr"></i>
             </button>
           ) : (
-            <button className="btn-frame n-blue icon" onClick={clearSelectedItems}>
+            <button className="btn-frame n-blue icon" onClick={() => clearSuitableSearch({ items: true })}>
               全て解除<i className="btn-arr"></i>
             </button>
           )}
diff --git a/src/hooks/useSuitable.ts b/src/hooks/useSuitable.ts
index 971f42a..5acad45 100644
--- a/src/hooks/useSuitable.ts
+++ b/src/hooks/useSuitable.ts
@@ -118,6 +118,7 @@ export function useSuitable() {
     queryKey: ['suitables', 'list', selectedCategory, searchKeyword],
     queryFn: async (context) => {
       const pageParam = context.pageParam as number
+      if (pageParam === 1) clearSuitableSearch({ items: true })
       return await getSuitables({
         pageNumber: pageParam,
         ...(selectedCategory && { category: selectedCategory }),
@@ -146,10 +147,10 @@ export function useSuitable() {
     ])
   }
 
-  const clearSuitableSearch = () => {
-    clearSelectedItems()
-    clearSearchKeyword()
-    clearSelectedCategory()
+  const clearSuitableSearch = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
+    if (items) clearSelectedItems()
+    if (category) clearSelectedCategory()
+    if (keyword) clearSearchKeyword()
   }
 
   return {