From d2bad5373e7e88840486716bc4bde9097868631a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=97=B0=EC=A7=84?= <kyj0719@gmail.com>
Date: Sat, 16 Aug 2025 17:05:56 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=201=EC=B0=A8=20?=
 =?UTF-8?q?=EC=9E=A1=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dateCourseSearchFilterOption.tsx          |  6 +++--
 src/pages/dateCourse/CoursePage.tsx           |  8 ++++++-
 src/pages/dateCourse/FindDateCourse.tsx       | 24 ++++++++++++-------
 src/types/dateCourse/dateCourse.ts            |  2 +-
 4 files changed, 28 insertions(+), 12 deletions(-)

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({
             <div className="flex w-full gap-[16px] flex-wrap sm:justify-start justify-center">
                 {type === 'choice' &&
                     items?.map(({ label, value: apiValue }, idx) => {
+                        const isSelected = value === apiValue; // 단일 선택 비교
                         return (
                             <DateCourseOptionButton
                                 key={idx}
                                 option={label}
-                                isSelected={value === apiValue}
+                                isSelected={isSelected}
                                 onClick={() => {
-                                    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 ?? '회원님의'} 님만의 데이트 코스
                         </div>
                         <div className="flex gap-[12px] justify-center items-center sm:justify-end flex-col sm:flex-row">
+                            <div
+                                className="hover:cursor-pointer select-none px-[16px] py-[8px] gap-[4px] text-body2 rounding-16 flex rounding-16 w-fit border-[1px] border-default-gray-700  text-default-gray-700"
+                                onClick={() => reset()}
+                            >
+                                필터 초기화
+                            </div>
                             <div
                                 className="hover:cursor-pointer select-none px-[16px] py-[8px] gap-[4px] text-body2 rounding-16 flex rounding-16 w-fit border-[1px] border-default-gray-700  text-default-gray-700"
                                 onClick={() => 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() {
                 <div className="flex flex-col shadow-default rounding-16 px-[40px] py-[24px]">
                     <div className="flex w-full gap-[16px] flex-col items-center py-[24px] sm:flex-row sm:justify-between sm:items-center">
                         <div className="font-heading3 select-none flex">직접 데이트 코스 찾아보기</div>
-                        <div
-                            className="w-fit ml-auto px-[16px] flex-nowrap select-none py-[8px] rounding-16 flex rounding-16 border-[1px] border-default-gray-700 text-default-gray-700"
-                            onClick={() => openModal({ modalType: MODAL_TYPES.DateCourseSearchFilterModal })}
-                        >
-                            <Filter stroke="#616161" />
-                            검색 필터
+                        <div className="flex gap-2">
+                            <div
+                                className="hover:cursor-pointer select-none px-[16px] py-[8px] gap-[4px] text-body2 rounding-16 flex rounding-16 w-fit border-[1px] border-default-gray-700  text-default-gray-700"
+                                onClick={() => reset()}
+                            >
+                                필터 초기화
+                            </div>
+                            <div
+                                className="w-fit ml-auto px-[16px] flex-nowrap select-none py-[8px] rounding-16 flex rounding-16 border-[1px] border-default-gray-700 text-default-gray-700"
+                                onClick={() => openModal({ modalType: MODAL_TYPES.DateCourseSearchFilterModal })}
+                            >
+                                <Filter stroke="#616161" />
+                                검색 필터
+                            </div>
                         </div>
                     </div>
                     {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';