Merge pull request #117 from WithTime12/develop

yeonjin719 · web-flow · commit bc8a580fa5de · 2025-08-16T15:13:47.000+09:00
[Deploy] 배포
diff --git a/src/api/axiosInstance.ts b/src/api/axiosInstance.ts
@@ -20,6 +20,7 @@ axiosInstance.interceptors.response.use(
     async (error) => {
         if (error.status === 401) {
             if (isRedirecting) {
+                window.location.href = '/';
                 return Promise.reject(error);
             }
 
@@ -44,19 +45,23 @@ axiosInstance.interceptors.response.use(
                         console.error('refreshToken이 없습니다. 로그인 페이지로 이동합니다.');
                         void logout();
                         localStorage.clear();
+                        window.location.href = '/';
                     } else if (refreshError.status === 404) {
                         console.error('사용자 정보를 찾지 못했습니다. 로그인 페이지로 이동합니다.');
                         void logout();
                         localStorage.clear();
+                        window.location.href = '/';
                     } else {
                         console.error('알 수 없는 오류가 발생했습니다', errors);
                         void logout();
                         localStorage.clear();
+                        window.location.href = '/';
                     }
                 } else {
                     console.error('알 수 없는 오류가 발생했습니다', errors);
                     void logout();
                     localStorage.clear();
+                    window.location.href = '/';
                 }
 
                 return Promise.reject(errors);
diff --git 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
@@ -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
@@ -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>
