[Fix/#48] 예외처리(토큰 만료, 라우터 결제로 안넘어가게) (#53)

* fix: 에러페이지 라우터 추가, api 토큰 만료 response 처리 * fix: 인기 클래스 이미지 사이즈 수정 * fix: 이전 버튼 클릭 라우터 방지 * fix: 클래스 존재 하지 않은 경우, 데이터 요청 실패 경우
HanaFun · Jul 5, 2024 · a92be32 · a92be32
1 parent 0317895
commit a92be32
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 32 deletions.
diff --git a/src/apis/apiClient.ts b/src/apis/apiClient.ts
@@ -1,12 +1,14 @@
 import axios, { AxiosInstance } from 'axios';
 import { API_BASE_URL } from './url';
-import { getCookie } from '../utils/cookie';
+import { getCookie, removeCookie } from '../utils/cookie';
 import { userApi } from './interfaces/userApi';
 import { accountApi } from './interfaces/accountApi';
 import { hostApi } from './interfaces/hostApi';
 import { categoryApi } from './interfaces/categoryApi';
 import { transactionApi } from './interfaces/transactionApi';
 import { reservationApi } from './interfaces/reservationApi';
+import { useNavigate } from 'react-router-dom';
+import { useModal } from '../context/ModalContext';
 
 export class ApiClient
   implements
@@ -395,6 +397,19 @@ export class ApiClient
       }
     );
 
+    newInstance.interceptors.response.use((response) => {
+      if (response.status === 403) {
+        removeCookie('token');
+        removeCookie('username');
+        location.href = '/';
+      }
+
+      if (response.status === 404) {
+        location.href = '/error';
+      }
+      return response;
+    });
+
     return newInstance;
   };
 }
diff --git a/src/components/molecules/LessonDateChoice.tsx b/src/components/molecules/LessonDateChoice.tsx
@@ -6,11 +6,12 @@ import { Button } from '../common/Button';
 import { useNavigate } from 'react-router-dom';
 
 interface IProps {
+  lessonId: number;
   dateList: LessonDateType[];
   price: number;
 }
 
-export const LessonDateChoice: FC<IProps> = ({ dateList, price }) => {
+export const LessonDateChoice: FC<IProps> = ({ lessonId, dateList, price }) => {
   const navigate = useNavigate();
   const [choiceDate, setChoiceDate] = useState<{
     lessondate_id: number;
@@ -143,6 +144,7 @@ export const LessonDateChoice: FC<IProps> = ({ dateList, price }) => {
         onClick={() =>
           navigate('/pay', {
             state: {
+              lessonId: lessonId,
               payment: count * price,
               lessondate_id: choiceDate?.lessondate_id || 0,
               count: count,

diff --git a/src/components/molecules/PopularLessonItem.tsx b/src/components/molecules/PopularLessonItem.tsx
@@ -14,8 +14,12 @@ export const PopularLessonItem: FC<IProps> = ({ id, img, title }) => {
       className='w-36 flex flex-col justify-center gap-1 cursor-pointer'
       onClick={() => navigate(`/lesson/${id}`)}
     >
-      <div className='w-36 rounded-xl overflow-hidden'>
-        <img src={img} alt='클래스 사진' className='w-full' />
+      <div className='w-36 h-36 rounded-xl overflow-hidden'>
+        <img
+          src={img}
+          alt='클래스 사진'
+          className='w-full h-full object-cover'
+        />
       </div>
       <p className='font-hanaMedium text-sm overflow-hidden whitespace-nowrap text-ellipsis break-all'>
         {title}

diff --git a/src/main.tsx b/src/main.tsx
@@ -23,6 +23,7 @@ import { LessonDetail } from './pages/search/LessonDetail.tsx';
 import { PayLesson } from './pages/search/PayLesson.tsx';
 import { Sales } from './pages/mypage/Sales.tsx';
 import { SalesYear } from './pages/mypage/SalesYear.tsx';
+import { ErrorPage } from './pages/ErrorPage.tsx';
 
 const router = createBrowserRouter([
   {
@@ -58,6 +59,7 @@ const router = createBrowserRouter([
         ],
       },
     ],
+    errorElement: <ErrorPage />,
   },
 ]);
 

diff --git a/src/pages/main/HanaFunMain.tsx b/src/pages/main/HanaFunMain.tsx
@@ -22,14 +22,14 @@ import { Account_Slider_Over3_Settings } from '../../constants/accountSliderOver
 import { Account_Slider_Under2_Settings } from '../../constants/accountSliderUnder2Settings';
 import { IntroCard_Slider_Settings } from '../../constants/introCardSliderSettings';
 import { useModal } from '../../context/ModalContext';
+import { ErrorPage } from '../ErrorPage';
 
 export const HanaFunMain = () => {
   const navigate = useNavigate();
   const [showKeypad, setShowKeypad] = useState<boolean>(false);
   const [showQr, setShowQr] = useState<boolean>(false);
   const [isScan, setIsScan] = useState(false);
   const [active, setActive] = useState<number | null>(null);
-
   const [selectedAccount, setSelectedAccount] = useState<AccountType>({
     accountId: -1,
     accountName: '',
@@ -40,15 +40,23 @@ export const HanaFunMain = () => {
   const username = getCookie('username');
   const token = getCookie('token');
 
-  const { isLoading: isGetAccountList, data: accountList } = useQuery({
+  const {
+    isLoading: isGetAccountList,
+    data: accountList,
+    isError: isGetAccountListError,
+  } = useQuery({
     queryKey: [token, 'accountList'],
     queryFn: () => {
       const res = ApiClient.getInstance().getAccountList();
       return res;
     },
   });
 
-  const { isLoading: isGetPopularLesson, data: popularLessonList } = useQuery({
+  const {
+    isLoading: isGetPopularLesson,
+    data: popularLessonList,
+    isError: isGetPopularLessonError,
+  } = useQuery({
     queryKey: ['popularLessonList'],
     queryFn: () => {
       const res = ApiClient.getInstance().getSearchLessonAll({
@@ -114,7 +122,9 @@ export const HanaFunMain = () => {
     };
   }, [active]);
 
-  if (isGetAccountList && isGetPopularLesson) return <Loading />;
+  if (isGetAccountList || isGetPopularLesson) return <Loading />;
+
+  if (isGetAccountListError || isGetPopularLessonError) return <ErrorPage />;
 
   return (
     <>

diff --git a/src/pages/main/QRPay.tsx b/src/pages/main/QRPay.tsx
@@ -102,19 +102,25 @@ export const QRPay = () => {
           <h3 className='font-hanaBold text-lg'>클래스를 선택해주세요.</h3>
           <div className='w-full'>
             <hr />
-            <div className='max-h-60 overflow-y-auto scrollbar-hide px-6 py-2'>
-              {hostInfo.data?.lessonList.map((lesson, idx) => (
-                <div key={idx}>
-                  <p
-                    className='py-2 font-hanaRegular text-base cursor-pointer pl-1'
-                    onClick={() => onChangeLesson(lesson)}
-                  >
-                    {lesson.title}
-                  </p>
-                  {idx + 1 !== hostInfo.data?.lessonList.length && <hr />}
-                </div>
-              ))}
-            </div>
+            {hostInfo.data.lessonList.length !== 0 ? (
+              <div className='max-h-60 overflow-y-auto scrollbar-hide px-6 py-2'>
+                {hostInfo.data?.lessonList.map((lesson, idx) => (
+                  <div key={idx}>
+                    <p
+                      className='py-2 font-hanaRegular text-base cursor-pointer pl-1'
+                      onClick={() => onChangeLesson(lesson)}
+                    >
+                      {lesson.title}
+                    </p>
+                    {idx + 1 !== hostInfo.data?.lessonList.length && <hr />}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className='font-hanaRegular min-h-20 flex justify-center items-center'>
+                클래스가 없습니다.
+              </div>
+            )}
           </div>
         </ModalBottomContainer>
       )}
@@ -156,7 +162,7 @@ export const QRPay = () => {
         message={!isSend ? '결제' : '완료'}
         isActive={!isSend ? isBtnActive : true}
         onClick={() => {
-          !isSend ? handleSendPayment() : navigate('/');
+          !isSend ? handleSendPayment() : navigate('/', { replace: true });
         }}
       />
     </>

diff --git a/src/pages/openLesson/RegisterHost.tsx b/src/pages/openLesson/RegisterHost.tsx
@@ -87,7 +87,11 @@ export const RegisterHost = () => {
         isActive={true}
         message={!isSend ? '등록' : '클래스 개설하기'}
         onClick={() =>
-          !isSend ? handleRegisterHost() : navigate('/open-lesson/lesson')
+          !isSend
+            ? handleRegisterHost()
+            : navigate('/open-lesson/lesson', {
+                replace: true,
+              })
         }
       />
     </>

diff --git a/src/pages/openLesson/RegisterLesson.tsx b/src/pages/openLesson/RegisterLesson.tsx
@@ -92,7 +92,6 @@ export const RegisterLesson = () => {
   };
 
   const onChangeLessonTime = (lessontime: LessonDateCommonType[]) => {
-    console.log('aaa>', lessonTime);
     setLessonTime(lessontime);
   };
 
@@ -248,7 +247,11 @@ export const RegisterLesson = () => {
         message={!isSend ? '등록' : '완료'}
         isActive={isBtnActive}
         onClick={() => {
-          !isSend ? handlePostAddLesson() : navigate('/mypage/host');
+          !isSend
+            ? handlePostAddLesson()
+            : navigate('/mypage/host', {
+                replace: true,
+              });
         }}
       />
     </>

diff --git a/src/pages/search/LessonDetail.tsx b/src/pages/search/LessonDetail.tsx
@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { Topbar } from '../../components/common/Topbar';
 import { LessonContainer } from '../../components/molecules/LessonContainer';
 import { Button } from '../../components/common/Button';
@@ -13,12 +13,12 @@ import { Loading } from '../Loading';
 
 export const LessonDetail = () => {
   const navigate = useNavigate();
+  const { state } = useLocation();
   const { lessonId } = useParams();
   const [shownotice, setShowNotice] = useState<boolean>(false);
   const [copyLocation, setCopyLocation] = useState<boolean>(false);
   const [materials, setMaterials] = useState<string[]>([]);
   const [choiceModal, setChoiceModal] = useState<boolean>(false);
-
   const { isLoading: isGetLessonLoading, data: lesson } = useQuery({
     queryKey: ['lesson', lessonId],
     queryFn: () => {
@@ -76,7 +76,7 @@ export const LessonDetail = () => {
           onClickShowAlarm={(status: boolean) => setCopyLocation(status)}
         />
       )}
-      {lessonDateList?.data && lesson?.data && choiceModal && (
+      {lessonId && lessonDateList?.data && lesson?.data && choiceModal && (
         <ModalBottomContainer
           color='#FFFFFF'
           onClose={() => setChoiceModal(false)}
@@ -85,12 +85,18 @@ export const LessonDetail = () => {
             하나의 일정을 선택해주세요.
           </div>
           <LessonDateChoice
+            lessonId={+lessonId}
             dateList={lessonDateList?.data}
             price={lesson?.data?.price}
           />
         </ModalBottomContainer>
       )}
-      <Topbar title='원데이 클래스' onClick={() => navigate(-1)} />
+      <Topbar
+        title='원데이 클래스'
+        onClick={() => {
+          state && state.prev === 'pay' ? navigate(-3) : navigate(-1);
+        }}
+      />
       <div className='w-full h-64 overflow-hidden object-fill'>
         <img
           src={lesson?.data?.image}

diff --git a/src/pages/search/PayLesson.tsx b/src/pages/search/PayLesson.tsx
@@ -68,7 +68,10 @@ export const PayLesson = () => {
           openModal(data.data?.message, closeModal);
           if (data.data.message === '계좌 비밀번호가 맞지 않습니다.')
             setShowPwModal(false);
-          else navigate(-1);
+          else
+            navigate(`/lesson/${state.lessonId}`, {
+              state: { prev: 'pay' },
+            });
         }
       }
     },
@@ -188,7 +191,14 @@ export const PayLesson = () => {
           onClose={() => setShowPwModal(false)}
         />
       )}
-      <Topbar title='결제' onClick={() => navigate(-1)} />
+      <Topbar
+        title='결제'
+        onClick={() =>
+          navigate(`/lesson/${state.lessonId}`, {
+            state: { prev: 'pay' },
+          })
+        }
+      />
       {!isSend ? (
         <>
           {accountList?.data && (
@@ -254,7 +264,9 @@ export const PayLesson = () => {
         message={!isSend ? '다음' : '완료'}
         isActive={!isSend ? activeBtn : true}
         onClick={() => {
-          !isSend ? setShowModal(true) : navigate('/mypage/my-lesson-list');
+          !isSend
+            ? setShowModal(true)
+            : navigate('/mypage/my-lesson-list', { replace: true });
         }}
       />
     </>