♻️ Refactor : 예약 내역 페이지 로딩 시간 최적화 및 reissue 요청 401 응답 로그아웃 처리

prgrms-web-devcourse-final-project · Jan 13, 2025 · 48f63f2 · 48f63f2
2 parents 7dec5d9 + ce42ddb
commit 48f63f2
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 66 deletions.
diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -36,6 +36,16 @@ const authInstance: AxiosInstance = axios.create({
   withCredentials: true,
 });
 
+// 로그아웃 로직
+const useLogout = () => {
+  const { storeLogout } = useAuthStore();
+  authInstance.post('/logout');
+  removeAuthToken();
+  removeRole();
+  storeLogout();
+  window.location.replace('/');
+};
+
 // response interceptor (토큰 갱신)
 authInstance.interceptors.response.use(
   (response: AxiosResponse) => response,
@@ -45,6 +55,11 @@ authInstance.interceptors.response.use(
       try {
         const response = await authInstance.post('/reissue');
 
+        // reissue 응답으로 다시 401이 오면 로그아웃 처리
+        if (response.status === 401) {
+          useLogout();
+        }
+
         if (response.status === 200) {
           const token = response.headers.authorization;
           setAuthToken(token);
@@ -57,12 +72,7 @@ authInstance.interceptors.response.use(
         }
       } catch (refreshError) {
         // 로그아웃 처리
-        const { storeLogout } = useAuthStore();
-        authInstance.post('/logout');
-        removeAuthToken();
-        removeRole();
-        storeLogout();
-        window.location.replace('/');
+        useLogout();
       }
     }
     return Promise.reject(error);

diff --git a/src/pages/ReservationListPage/components/ReservationList.tsx b/src/pages/ReservationListPage/components/ReservationList.tsx
@@ -1,83 +1,88 @@
-import { useCallback, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { SyncLoader } from 'react-spinners';
 import useGetAllMyReservations from '../hooks/useGetAllMyReservations';
 import ReservationDetailCard from './ReservationDetailCard';
 
 const ReservationList = () => {
+  const [activeTab, setActiveTab] = useState('최근 결제순');
   const { reservationList, isLoading } = useGetAllMyReservations();
-  const [activeSortButton, setActiveSortButton] = useState(false);
 
   // 최근 결제일순으로 정렬
-  const sortedReservationWithPayment = useCallback(() => {
+  const sortedReservationWithPayment = useMemo(() => {
     return [...reservationList].sort(
       (b, a) =>
         +new Date(a.reservationCreatedAt) - +new Date(b.reservationCreatedAt),
     );
   }, [reservationList]);
 
-  const sortedWithPayment = sortedReservationWithPayment();
-
   // 예약일순으로 정렬
-  const sortedReservationWithDate = useCallback(() => {
+  const sortedReservationWithDate = useMemo(() => {
     return [...reservationList].sort(
       (b, a) => +new Date(a.startTime) - +new Date(b.startTime),
     );
   }, [reservationList]);
 
-  const sortedWithDate = sortedReservationWithDate();
+  if (isLoading) {
+    return (
+      <div className='flex h-[300px] w-full items-center justify-center'>
+        <SyncLoader color='#50BEAD' />
+      </div>
+    );
+  }
+
+  if (!reservationList || reservationList.length === 0) {
+    return (
+      <div className='mt-[47px] w-[375px] text-center text-[14px] font-normal text-subfont'>
+        예약 내역이 없습니다.
+      </div>
+    );
+  }
 
   return (
     <>
-      {reservationList && reservationList.length > 0 ? (
-        <div className='mt-[6px] flex w-[375px] flex-col justify-center pb-24'>
-          <div className='mx-auto mt-5 flex w-custom justify-end gap-2 text-[13px]'>
-            <button
-              type='button'
-              className={!activeSortButton ? 'text-focusColor' : 'text-subfont'}
-              onClick={() => setActiveSortButton(!activeSortButton)}
-            >
-              최근 결제순
-            </button>
-            <span>|</span>
-            <button
-              type='button'
-              className={activeSortButton ? 'text-focusColor' : 'text-subfont'}
-              onClick={() => setActiveSortButton(!activeSortButton)}
-            >
-              예약일순
-            </button>
-          </div>
-          {!activeSortButton
-            ? sortedWithPayment.map((item) => {
-                return (
-                  <ReservationDetailCard
-                    key={item.reservationId}
-                    item={item}
-                  />
-                );
-              })
-            : sortedWithDate.map((item) => {
-                return (
-                  <ReservationDetailCard
-                    key={item.reservationId}
-                    item={item}
-                  />
-                );
-              })}
+      <div className='mt-[6px] flex w-[375px] flex-col justify-center pb-24'>
+        <div className='mx-auto mt-5 flex w-custom justify-end gap-2 text-[13px]'>
+          <button
+            type='button'
+            className={
+              activeTab === '최근 결제순' ? 'text-focusColor' : 'text-subfont'
+            }
+            onClick={() => setActiveTab('최근 결제순')}
+          >
+            최근 결제순
+          </button>
+          <span>|</span>
+          <button
+            type='button'
+            className={
+              activeTab === '예약일순' ? 'text-focusColor' : 'text-subfont'
+            }
+            onClick={() => setActiveTab('예약일순')}
+          >
+            예약일순
+          </button>
         </div>
-      ) : (
-        <>
-          {isLoading ? (
-            <div className='flex h-[300px] w-full items-center justify-center'>
-              <SyncLoader color='#50BEAD' />
-            </div>
-          ) : (
-            <div className='mt-[47px] w-[375px] text-center text-[14px] font-normal text-subfont'>
-              예약 내역이 없습니다.
-            </div>
-          )}
-        </>
-      )}
+
+        {activeTab === '최근 결제순' &&
+          sortedReservationWithPayment.map((item) => {
+            return (
+              <ReservationDetailCard
+                key={item.reservationId}
+                item={item}
+              />
+            );
+          })}
+
+        {activeTab === '예약일순' &&
+          sortedReservationWithDate.map((item) => {
+            return (
+              <ReservationDetailCard
+                key={item.reservationId}
+                item={item}
+              />
+            );
+          })}
+      </div>
     </>
   );
 };

diff --git a/src/pages/ReservationListPage/hooks/useGetAllMyReservations.ts b/src/pages/ReservationListPage/hooks/useGetAllMyReservations.ts
@@ -1,17 +1,22 @@
 import { getAllReservation } from '@apis/reservation';
 import { useQuery } from '@tanstack/react-query';
+import { Reservation } from '@typings/types';
 
 // 모든 예약 정보 불러오기
 const useGetAllMyReservations = () => {
   const { data, isLoading } = useQuery({
     queryKey: ['myReservationList'],
     queryFn: async () => {
+      let reservationData: Reservation[] = [];
       const reservationList = await getAllReservation();
-      const filteredReservation = reservationList.filter(
-        (item) => item.state !== 'ON_HOLD' && item.state !== 'PAYMENT_FAIL',
-      );
 
-      return filteredReservation;
+      if (reservationList) {
+        reservationData = reservationList.filter(
+          (item) => item.state !== 'ON_HOLD' && item.state !== 'PAYMENT_FAIL',
+        );
+      }
+
+      return reservationData;
     },
   });