PageNavigation Index 5 미만 시 발생하는 레이아웃 문제, 쿠키 없을 경우 발생하는 인증인가 문제 해결 (#656

)

* refactor: PageIndex 5 미만시 음수로 내려가는 문제 해결

* refactor: 쿠키 없을 경우 발생하는 로그인문제 수정

frontend/src/api/interceptors.ts

@@ -51,7 +51,8 @@ export const handleTokenError = async (error: AxiosError<ErrorResponseData>) =>
       data.code === ERROR_CODE.EXPIRED_REFRESH_TOKEN ||
       data.code === ERROR_CODE.INVALID_TOKEN_VALIDATE ||
       data.code === ERROR_CODE.NULL_REFRESH_TOKEN ||
-      data.code === ERROR_CODE.UNEXPECTED_TOKEN_ERROR)
+      data.code === ERROR_CODE.UNEXPECTED_TOKEN_ERROR ||
+      data.code === ERROR_CODE.UNAUTHORIZED)
   ) {
     localStorage.removeItem(ACCESS_TOKEN_KEY);
 

frontend/src/hooks/common/usePageIndex.ts

@@ -1,47 +1,55 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import type { CommunityTripsData } from '@type/trips';
 
 import { TRIP_INDEX_UNIT_LENGTH } from '@constants/ui';
 
-export const useTripPageIndex = (data: CommunityTripsData, page: number) => {
+export const useTripPageIndex = (data: CommunityTripsData, page: number, maxIndex: number) => {
+  const countUnit = maxIndex <= TRIP_INDEX_UNIT_LENGTH ? maxIndex : TRIP_INDEX_UNIT_LENGTH;
+
   const [pageIndexDatas, setPageIndexDatas] = useState<number[]>(
-    Array.from({ length: TRIP_INDEX_UNIT_LENGTH }, (_, index) => index)
+    Array.from({ length: countUnit }, (_, index) => index)
   );
 
-  const centerIndex = Math.floor(TRIP_INDEX_UNIT_LENGTH / 2);
+  const centerIndex = Math.floor(countUnit / 2);
   const isCurrentPageAfterCenter = page > centerIndex;
   const isCurrentPageBeforeCenter = page >= data.lastPageIndex - centerIndex;
   const isCurrentPageCenter = page < data.lastPageIndex - centerIndex;
 
-  const changeNavigationDatas = () => {
+  const changeNavigationDatas = useCallback(() => {
     if (isCurrentPageAfterCenter) {
-      setPageIndexDatas(Array.from({ length: TRIP_INDEX_UNIT_LENGTH }, (_, index) => index));
+      setPageIndexDatas(Array.from({ length: countUnit }, (_, index) => index));
     }
 
     if (isCurrentPageBeforeCenter) {
       const lastIndex = data.lastPageIndex;
 
       const refreshedIndexDatas = Array.from(
-        { length: TRIP_INDEX_UNIT_LENGTH },
+        { length: countUnit },
         (_, index) => lastIndex - index
       ).reverse();
 
       setPageIndexDatas(refreshedIndexDatas);
     }
 
     if (isCurrentPageCenter) {
-      const halfLength = Math.floor(TRIP_INDEX_UNIT_LENGTH / 2);
+      const halfLength = Math.floor(countUnit / 2);
       const startPage = Math.max(page - halfLength, 1);
 
       const refreshedIndexDatas = Array.from(
-        { length: TRIP_INDEX_UNIT_LENGTH },
+        { length: countUnit },
         (_, index) => startPage + index
       );
 
       setPageIndexDatas(refreshedIndexDatas);
     }
-  };
+  }, [
+    data.lastPageIndex,
+    isCurrentPageAfterCenter,
+    isCurrentPageBeforeCenter,
+    isCurrentPageCenter,
+    page,
+  ]);
 
   return { pageIndexDatas, changeNavigationDatas };
 };

frontend/src/pages/CommunityPage/CommunityPage.tsx

@@ -24,7 +24,11 @@ const CommunityPage = () => {
   const { tripsData: recommendedTripsData } = useRecommendedTripsQuery(isLoggedIn);
   const { tripsData: communityTripsData } = useCommunityTripsQuery(page, 10, isLoggedIn);
 
-  const { pageIndexDatas, changeNavigationDatas } = useTripPageIndex(communityTripsData, page);
+  const { pageIndexDatas, changeNavigationDatas } = useTripPageIndex(
+    communityTripsData,
+    page,
+    communityTripsData.lastPageIndex
+  );
 
   const handleSetPage = useCallback((page: number) => {
     setPage(page);