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';