diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index 7d8f921..61f3ebf 100644 --- a/src/components/Alert/Alert.tsx +++ b/src/components/Alert/Alert.tsx @@ -68,7 +68,6 @@ function Alert({ userId }: AlertProps) { ) : ( )} - {/* */} {showDropdown && (
(selectedAreas); @@ -66,9 +62,12 @@ function FilterDropdownContent({ }; const applyButtonHandler = () => { - setMinPay(payFilter); - setStartDate(startDateFilter); - setAreas(areasFilter); + setFilters({ + selectedAreas: areasFilter, + startDate: startDateFilter, + minPay: payFilter, + pathname, + }); onClickApplyButton(); }; @@ -78,6 +77,10 @@ function FilterDropdownContent({ setStartDateFilter(null); setAreasFilter([]); refetch(); + setSearchParams((prev) => { + prev.set("page", "1"); + return prev; + }); }; return ( diff --git a/src/components/NoticeSearchResultHeader.tsx b/src/components/NoticeSearchResultHeader.tsx index 4dc08bf..fa2a856 100644 --- a/src/components/NoticeSearchResultHeader.tsx +++ b/src/components/NoticeSearchResultHeader.tsx @@ -1,6 +1,6 @@ -import { useMemo, useRef, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; -import { useSearchParams } from "react-router-dom"; +import { useLocation, useSearchParams } from "react-router-dom"; import Button from "@/components/Button"; import FilterDropdownContent from "@/components/Dropdown/FilterDropdownContent"; @@ -26,9 +26,17 @@ export default function NoticeSearchResultHeader({ onChangeSort, refetch, }: TotalNoticeSectionProps) { + const { pathname } = useLocation(); + const [, setSearchParams] = useSearchParams(); const [showFilter, setShowFilter] = useState(false); - const { minPay, selectedAreas, startDate } = useFilterStore(); + const { + pathname: filterPathname, + minPay, + selectedAreas, + startDate, + reset, + } = useFilterStore(); const buttonRef = useRef(null); const wrapperRef = useRef(null); @@ -68,6 +76,12 @@ export default function NoticeSearchResultHeader({ setShowFilter(false); }; + useEffect(() => { + if (pathname !== filterPathname) { + reset(); + } + }, [pathname, filterPathname, reset]); + return (
diff --git a/src/store/useFilterStore.ts b/src/store/useFilterStore.ts index 18fd669..8d6cd5d 100644 --- a/src/store/useFilterStore.ts +++ b/src/store/useFilterStore.ts @@ -7,11 +7,19 @@ interface FilterState { selectedAreas: string[]; startDate: Date | null; minPay: string | null; + pathname: string | null; getFilters: () => { address?: string[] | null; hourlyPayGte?: number; startsAtGte?: string; + pathname?: string; }; + setFilters: (filters: { + selectedAreas?: string[]; + startDate?: Date | null; + minPay?: string | null; + pathname?: string; + }) => void; setAreas: (areas: string[]) => void; setStartDate: (date: Date | null) => void; setMinPay: (pay: string | null) => void; @@ -22,6 +30,7 @@ export const useFilterStore = create((set, get) => ({ selectedAreas: [], startDate: null, minPay: null, + pathname: null, getFilters: () => { const { selectedAreas, startDate, minPay } = get(); @@ -43,11 +52,18 @@ export const useFilterStore = create((set, get) => ({ setAreas: (areas) => set({ selectedAreas: areas }), setStartDate: (date) => set({ startDate: date }), setMinPay: (pay) => set({ minPay: pay }), + setFilters: (nextFilters) => { + set((filters) => ({ + ...filters, + ...nextFilters, + })); + }, reset: () => set({ selectedAreas: [], startDate: null, minPay: null, + pathname: null, }), }));