Merge pull request #173 from CodeitPart3/FIX-COMPONENT-172-JIN

[fix] 상세 필터 페이지 이동 시에도 유지되는 버그 수정

Author: cozy-ito

src/components/Alert/Alert.tsx

@@ -68,7 +68,6 @@ function Alert({ userId }: AlertProps) {
         ) : (
           <InactiveAlarmIcon className="h-6" />
         )}
-        {/* <AlarmIcon className="h-6" /> */}
       </button>
       {showDropdown && (
         <div

src/components/Dropdown/FilterDropdownContent.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent, useMemo, useState } from "react";
 
 import DatePicker from "react-datepicker";
+import { useLocation, useSearchParams } from "react-router-dom";
 
 import TextField from "../TextField";
 
@@ -23,15 +24,10 @@ function FilterDropdownContent({
   onClose,
   onClickApplyButton,
 }: FilterDropdownContentProps) {
-  const {
-    selectedAreas,
-    startDate,
-    minPay,
-    setAreas,
-    setStartDate,
-    setMinPay,
-    reset,
-  } = useFilterStore();
+  const { pathname } = useLocation();
+  const { selectedAreas, startDate, minPay, setFilters, reset } =
+    useFilterStore();
+  const [, setSearchParams] = useSearchParams();
   const [payFilter, setPayFilter] = useState(minPay);
   const [startDateFilter, setStartDateFilter] = useState(startDate);
   const [areasFilter, setAreasFilter] = useState<string[]>(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 (

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<boolean>(false);
-  const { minPay, selectedAreas, startDate } = useFilterStore();
+  const {
+    pathname: filterPathname,
+    minPay,
+    selectedAreas,
+    startDate,
+    reset,
+  } = useFilterStore();
 
   const buttonRef = useRef<HTMLButtonElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -68,6 +76,12 @@ export default function NoticeSearchResultHeader({
     setShowFilter(false);
   };
 
+  useEffect(() => {
+    if (pathname !== filterPathname) {
+      reset();
+    }
+  }, [pathname, filterPathname, reset]);
+
   return (
     <div>
       <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0 mb-4 ">

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<FilterState>((set, get) => ({
   selectedAreas: [],
   startDate: null,
   minPay: null,
+  pathname: null,
 
   getFilters: () => {
     const { selectedAreas, startDate, minPay } = get();
@@ -43,11 +52,18 @@ export const useFilterStore = create<FilterState>((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,
     }),
 }));