From a1f29bcb0ea438448754526d87398efea3d478bf 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 15:10:31 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=EC=B2=98=EB=A6=AC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/dateCourseSearchFilterModal.tsx     | 24 ++++++++-----
 src/pages/dateCourse/CoursePage.tsx           | 35 +++++++++++++------
 src/pages/dateCourse/FindDateCourse.tsx       | 31 +++++++++++-----
 3 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/src/components/modal/dateCourseSearchFilterModal.tsx b/src/components/modal/dateCourseSearchFilterModal.tsx
index 4ccd896..c8b97ea 100644
--- a/src/components/modal/dateCourseSearchFilterModal.tsx
+++ b/src/components/modal/dateCourseSearchFilterModal.tsx
@@ -1,6 +1,6 @@
-// DateCourseSearchFilterModal.tsx
 import { useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router-dom';
+import ClipLoader from 'react-spinners/ClipLoader';
 
 import { DateCourseQuestion } from '@/constants/dateCourseQuestion';
 
@@ -80,12 +80,12 @@ export default function DateCourseSearchFilterModal({ onClose }: TProps) {
         transportation,
         userPreferredKeywords,
         size: 5,
-        page: 1,
+        page: 0,
         isBookmarked,
     };
 
-    const { data: courseData } = useGetCourse(commonParams);
-    const { data: bookmarkedData } = useGetBookmarkedCourse(commonParams);
+    const { data: courseData, isLoading: courseDataLoading, error: courseDataError } = useGetCourse(commonParams);
+    const { data: bookmarkedData, isLoading: bookmarkDataLoading, error: bookmarkDataError } = useGetBookmarkedCourse(commonParams);
 
     const data = isBookmarked ? bookmarkedData : courseData;
 
@@ -162,6 +162,10 @@ export default function DateCourseSearchFilterModal({ onClose }: TProps) {
         }
     };
 
+    if (bookmarkDataError || courseDataError) {
+        return <Navigate to="/error" replace={true} />;
+    }
+
     return (
         <Modal onClose={onClose} title="검색 필터">
             <div className="flex flex-col w-full max-w-[80vw] px-[8%] gap-10 py-10">
@@ -180,9 +184,13 @@ export default function DateCourseSearchFilterModal({ onClose }: TProps) {
                 ))}
 
                 <div className="flex w-full justify-end">
-                    <Button size="big-16" variant="mint" className="w-fit text-center px-[30px] font-body1" onClick={onClose}>
-                        데이트 코스 {data?.result.totalCount ?? 0}개 보기
-                    </Button>
+                    {bookmarkDataLoading || courseDataLoading ? (
+                        <ClipLoader />
+                    ) : (
+                        <Button size="big-16" variant="mint" className="w-fit text-center px-[30px] font-body1" onClick={onClose}>
+                            데이트 코스 {data?.result.totalCount ?? 0}개 보기
+                        </Button>
+                    )}
                 </div>
             </div>
         </Modal>
diff --git a/src/pages/dateCourse/CoursePage.tsx b/src/pages/dateCourse/CoursePage.tsx
index eab7b5b..32837a8 100644
--- a/src/pages/dateCourse/CoursePage.tsx
+++ b/src/pages/dateCourse/CoursePage.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Navigate, useNavigate } from 'react-router-dom';
+import ClipLoader from 'react-spinners/ClipLoader';
 
 import useGetBookmarkedCourse from '@/hooks/course/useGetBookmarkedCourse';
 import { useUserGrade } from '@/hooks/home/useUserGrade';
@@ -15,11 +16,11 @@ import useModalStore from '@/store/useModalStore';
 export default function Course() {
     const navigate = useNavigate();
     const { openModal } = useModalStore();
-    const [current, setCurrent] = useState(1);
+    const [current, setCurrent] = useState(0);
 
     const { budget, datePlaces, dateDurationTime, startTime, mealTypes, transportation, userPreferredKeywords } = useFilterStore();
-    // 수정 예정
-    const { data } = useGetBookmarkedCourse({
+
+    const { data, isLoading, error } = useGetBookmarkedCourse({
         page: current,
         size: 5,
         budget,
@@ -31,7 +32,13 @@ export default function Course() {
         startTime,
         isBookmarked: true,
     });
+
     const { data: gradeData } = useUserGrade();
+
+    if (error) {
+        return <Navigate to="/error" replace={true} />;
+    }
+
     return (
         <div className="flex flex-col justify-center items-center w-full">
             <div className="flex w-[1000px] max-w-[80vw] flex-col py-[24px] gap-[64px]">
@@ -64,12 +71,20 @@ export default function Course() {
                             </div>
                         </div>
                     </div>
-                    <div className="flex flex-col gap-[24px] ">
-                        {data?.result.dateCourseList.map((course, idx) => {
-                            return <DateCourse key={course.dateCourseId ?? idx} {...course} />;
-                        })}
-                    </div>
-                    <Navigator current={current} end={data?.result.totalPages!} onClick={setCurrent} />
+                    {isLoading ? (
+                        <div className="w-full justify-center flex">
+                            <ClipLoader />
+                        </div>
+                    ) : (
+                        <>
+                            <div className="flex flex-col gap-[24px] ">
+                                {data?.result.dateCourseList.map((course, idx) => {
+                                    return <DateCourse key={course.dateCourseId ?? idx} {...course} />;
+                                })}
+                            </div>
+                            <Navigator current={current + 1} end={data?.result.totalPages!} onClick={setCurrent} />
+                        </>
+                    )}
                 </div>
             </div>
         </div>
diff --git a/src/pages/dateCourse/FindDateCourse.tsx b/src/pages/dateCourse/FindDateCourse.tsx
index 6ae4177..64d7c7b 100644
--- a/src/pages/dateCourse/FindDateCourse.tsx
+++ b/src/pages/dateCourse/FindDateCourse.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Navigate, useNavigate } from 'react-router-dom';
+import ClipLoader from 'react-spinners/ClipLoader';
 
 import useGetCourse from '@/hooks/course/useGetCourse';
 
@@ -14,14 +15,14 @@ import useModalStore from '@/store/useModalStore';
 
 function FindDateCourse() {
     const { openModal } = useModalStore();
-    const [current, setCurrent] = useState(1);
+    const [current, setCurrent] = useState(0);
     const navigate = useNavigate();
     const { budget, datePlaces, dateDurationTime, startTime, mealTypes, transportation, userPreferredKeywords } = useFilterStore();
     useEffect(() => {
         setCurrent(1);
     }, [budget, datePlaces, dateDurationTime, startTime, mealTypes, transportation, userPreferredKeywords]);
 
-    const { data: courseData } = useGetCourse({
+    const { data, isLoading, error } = useGetCourse({
         page: current,
         size: 5,
         budget,
@@ -34,6 +35,10 @@ function FindDateCourse() {
         isBookmarked: false,
     });
 
+    if (error) {
+        return <Navigate to="/error" replace={true} />;
+    }
+
     return (
         <div className="w-full flex justify-center items-center flex-col h-fit">
             <div className="flex w-[1000px] max-w-[80vw] flex-col py-[24px] gap-[20px]">
@@ -51,12 +56,20 @@ function FindDateCourse() {
                             검색 필터
                         </div>
                     </div>
-                    <div className="flex flex-col gap-[24px] ">
-                        {courseData?.result.dateCourseList.map((course) => {
-                            return <DateCourse key={course.dateCourseId} {...course} />;
-                        })}
-                    </div>
-                    <Navigator current={current} end={courseData?.result.totalPages!} onClick={setCurrent} />
+                    {isLoading ? (
+                        <div className="w-full justify-center flex">
+                            <ClipLoader />
+                        </div>
+                    ) : (
+                        <>
+                            <div className="flex flex-col gap-[24px] ">
+                                {data?.result?.dateCourseList.map((course, idx) => {
+                                    return <DateCourse key={course.dateCourseId ?? idx} {...course} />;
+                                })}
+                            </div>
+                            <Navigator current={current + 1} end={data?.result?.totalPages!} onClick={setCurrent} />
+                        </>
+                    )}
                 </div>
             </div>
         </div>