diff --git a/src/components/dateCourse/dateCourseSearchFilterOption.tsx b/src/components/dateCourse/dateCourseSearchFilterOption.tsx index 98780a2..018f34a 100644 --- a/src/components/dateCourse/dateCourseSearchFilterOption.tsx +++ b/src/components/dateCourse/dateCourseSearchFilterOption.tsx @@ -85,13 +85,15 @@ export default function DateCourseSearchFilterOption({
{type === 'choice' && items?.map(({ label, value: apiValue }, idx) => { + const isSelected = value === apiValue; // 단일 선택 비교 return ( { - onChange(apiValue!); + // ✅ 이미 선택되어 있으면 해제(null), 아니면 선택 + onChange(isSelected ? null : apiValue!); }} /> ); diff --git a/src/pages/dateCourse/CoursePage.tsx b/src/pages/dateCourse/CoursePage.tsx index 6e20495..d069675 100644 --- a/src/pages/dateCourse/CoursePage.tsx +++ b/src/pages/dateCourse/CoursePage.tsx @@ -18,7 +18,7 @@ export default function Course() { const { openModal } = useModalStore(); const [current, setCurrent] = useState(1); - const { budget, datePlaces, dateDurationTime, startTime, mealTypes, transportation, userPreferredKeywords } = useFilterStore(); + const { budget, datePlaces, dateDurationTime, startTime, mealTypes, transportation, userPreferredKeywords, reset } = useFilterStore(); const { data, isLoading, error } = useGetBookmarkedCourse({ page: current - 1, @@ -62,6 +62,12 @@ export default function Course() { {gradeData?.result.username ?? '회원님의'} 님만의 데이트 코스
+
reset()} + > + 필터 초기화 +
openModal({ modalType: MODAL_TYPES.DateCourseSearchFilterModal })} diff --git a/src/pages/dateCourse/FindDateCourse.tsx b/src/pages/dateCourse/FindDateCourse.tsx index 54b4809..01d9e2f 100644 --- a/src/pages/dateCourse/FindDateCourse.tsx +++ b/src/pages/dateCourse/FindDateCourse.tsx @@ -15,9 +15,9 @@ import useModalStore from '@/store/useModalStore'; function FindDateCourse() { const { openModal } = useModalStore(); - const [current, setCurrent] = useState(0); + const [current, setCurrent] = useState(1); const navigate = useNavigate(); - const { budget, datePlaces, dateDurationTime, startTime, mealTypes, transportation, userPreferredKeywords } = useFilterStore(); + const { budget, datePlaces, dateDurationTime, startTime, mealTypes, transportation, userPreferredKeywords, reset } = useFilterStore(); useEffect(() => { setCurrent(1); }, [budget, datePlaces, dateDurationTime, startTime, mealTypes, transportation, userPreferredKeywords]); @@ -48,12 +48,20 @@ function FindDateCourse() {
직접 데이트 코스 찾아보기
-
openModal({ modalType: MODAL_TYPES.DateCourseSearchFilterModal })} - > - - 검색 필터 +
+
reset()} + > + 필터 초기화 +
+
openModal({ modalType: MODAL_TYPES.DateCourseSearchFilterModal })} + > + + 검색 필터 +
{isLoading ? ( diff --git a/src/types/dateCourse/dateCourse.ts b/src/types/dateCourse/dateCourse.ts index 812dffe..0d1e7a3 100644 --- a/src/types/dateCourse/dateCourse.ts +++ b/src/types/dateCourse/dateCourse.ts @@ -47,7 +47,7 @@ export type TDateCourseOptionButtonProps = { export type TDateCourseSearchFilterOption = { options?: string[] | null; value: string | string[] | null; - onChange: (value: string | string[]) => void; + onChange: (value: string | string[] | null) => void; title: string; subTitle?: string | null; type: 'choice' | 'search' | 'time' | 'choices' | 'keyword';