feat: 검색조건 변경 시 선택아이템 초기화

This commit is contained in:
Daseul Kim 2025-05-26 17:09:03 +09:00
parent 94ce738a73
commit e482ba1400
3 changed files with 11 additions and 10 deletions

View File

@ -13,7 +13,7 @@ export default function Suitable() {
const [searchValue, setSearchValue] = useState('') const [searchValue, setSearchValue] = useState('')
const { getSuitableCommCode, clearSuitableSearch } = useSuitable() const { getSuitableCommCode, clearSuitableSearch } = useSuitable()
const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword, clearSearchKeyword } = useSuitableStore() const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword } = useSuitableStore()
const handleInputSearch = async () => { const handleInputSearch = async () => {
if (!searchValue.trim()) { if (!searchValue.trim()) {
@ -25,13 +25,13 @@ export default function Suitable() {
const handleInputClear = () => { const handleInputClear = () => {
setSearchValue('') setSearchValue('')
clearSearchKeyword() clearSuitableSearch({ items: true, keyword: true})
} }
useEffect(() => { useEffect(() => {
getSuitableCommCode() getSuitableCommCode()
return () => { return () => {
clearSuitableSearch() clearSuitableSearch({ items: true, category: true, keyword: true })
} }
}, []) }, [])

View File

@ -6,8 +6,8 @@ import { useSuitableStore } from '@/store/useSuitableStore'
export default function SuitableButton() { export default function SuitableButton() {
const popupController = usePopupController() const popupController = usePopupController()
const { getSuitableIds } = useSuitable() const { getSuitableIds, clearSuitableSearch } = useSuitable()
const { selectedItems, addAllSelectedItem, clearSelectedItems } = useSuitableStore() const { selectedItems, addAllSelectedItem } = useSuitableStore()
const handleSelectAll = async () => { const handleSelectAll = async () => {
addAllSelectedItem(await getSuitableIds()) addAllSelectedItem(await getSuitableIds())
@ -30,7 +30,7 @@ export default function SuitableButton() {
<i className="btn-arr"></i> <i className="btn-arr"></i>
</button> </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> <i className="btn-arr"></i>
</button> </button>
)} )}

View File

@ -118,6 +118,7 @@ export function useSuitable() {
queryKey: ['suitables', 'list', selectedCategory, searchKeyword], queryKey: ['suitables', 'list', selectedCategory, searchKeyword],
queryFn: async (context) => { queryFn: async (context) => {
const pageParam = context.pageParam as number const pageParam = context.pageParam as number
if (pageParam === 1) clearSuitableSearch({ items: true })
return await getSuitables({ return await getSuitables({
pageNumber: pageParam, pageNumber: pageParam,
...(selectedCategory && { category: selectedCategory }), ...(selectedCategory && { category: selectedCategory }),
@ -146,10 +147,10 @@ export function useSuitable() {
]) ])
} }
const clearSuitableSearch = () => { const clearSuitableSearch = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
clearSelectedItems() if (items) clearSelectedItems()
clearSearchKeyword() if (category) clearSelectedCategory()
clearSelectedCategory() if (keyword) clearSearchKeyword()
} }
return { return {