Merge pull request #225 from Kernel360/page-feature-favorite-filter

페이지 기능: 즐겨찾기 페이지 필터 기능 추가

src/app/favorite/page.tsx

@@ -8,6 +8,7 @@ import InfiniteScroll from 'react-infinite-scroll-component';
 import classNames from 'classnames/bind';
 
 import { SEARCH_FILTER_MAP, SearchFilterType } from '@constants/searchByMap';
+import withAuth from '@hooks/withAuth';
 import useFavoriteList from '@remote/queries/favorite/useFavoriteList';
 import BottomNav from '@shared/bottom-nav/BottomNav';
 import Dropdown from '@shared/dropdown/Dropdown';
@@ -22,22 +23,20 @@ import styles from './page.module.scss';
 const cx = classNames.bind(styles);
 
 const options = [
-  { label: '조회순', value: 'view' },
-  { label: '위반제품순', value: 'violations' },
-  { label: '최신순', value: 'latest' },
-  { label: '추천순', value: 'recommended' },
+  { label: '조회순', value: 'viewCnt-order' },
+  { label: '위반제품순', value: 'violation-products' },
+  { label: '최신순', value: 'recent-order' },
+  { label: '추천순', value: 'recommend-order' },
 ];
 
 function FavoritePage() {
   const { register, watch } = useForm({
     defaultValues: {
-      filter: 'view',
+      filter: 'viewCnt-order',
     },
   });
 
-  const { favoriteList, hasNextPage, loadMore } = useFavoriteList();
-
-  // TODO: 저장한 제품이 없을 경우 디자인 필요
+  const { favoriteList, hasNextPage, loadMore } = useFavoriteList(watch('filter') as SearchFilterType);
 
   return (
     <>
@@ -82,4 +81,4 @@ function FavoritePage() {
   );
 }
 
-export default FavoritePage;
+export default withAuth(FavoritePage);

src/hooks/withAuth.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ComponentType, useEffect } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { useAppSelector } from '@stores/hooks';
+
+function withAuth<Props = Record<string, never>>(
+  WrappedComponent: ComponentType<Props>,
+) {
+  return function AuthenticatedComponent(props: Props) {
+    const router = useRouter();
+    const userId = useAppSelector(
+      (state) => { return state.user.id; },
+      (prev, curr) => { return prev === curr; },
+    );
+
+    useEffect(() => {
+      if (userId == null) {
+        router.push('/login');
+      }
+    }, [userId, router]);
+
+    if (userId == null) {
+      return null;
+    }
+
+    return <WrappedComponent {...(props as any)} />;
+  };
+}
+
+export default withAuth;

src/remote/api/requests/favorite/favorite.get.api.ts

@@ -1,9 +1,15 @@
+import { SearchFilterType } from '@/constants/searchByMap';
+
 import { ProductListInfoType } from '../../types/home';
 import { getRequest } from '../requests.api';
 
 /* ----- like 제품 목록 api ----- */
-export const getFavoriteList = async (pageNum: number, size: number) => {
-  const response = await getRequest<ProductListInfoType>(`/likes?&page=${pageNum}&size=${size}`);
+export const getFavoriteList = async (
+  pageNum: number,
+  size: number,
+  sortType: SearchFilterType,
+) => {
+  const response = await getRequest<ProductListInfoType>(`/likes?&sortType=${sortType}&page=${pageNum}&size=${size}`);
 
   return response;
 };

src/remote/queries/favorite/useFavoriteList.ts

@@ -2,20 +2,22 @@ import { useCallback } from 'react';
 
 import { useInfiniteQuery } from '@tanstack/react-query';
 
+import { SearchFilterType } from '@constants/searchByMap';
 import { getFavoriteList } from '@remote/api/requests/favorite/favorite.get.api';
 import { ProductListInfoType } from '@remote/api/types/home';
 
 const PAGE_SIZE = 10;
 
-function useFavoriteList() {
+function useFavoriteList(sortType: SearchFilterType = 'recent-order') {
   const {
     data, isLoading, fetchNextPage, isFetching, hasNextPage = false,
   } = useInfiniteQuery<ProductListInfoType>({
-    queryKey: ['FavoriteProductList'],
+    queryKey: ['FavoriteProductList', sortType],
     queryFn: ({ pageParam = 0 }) => {
       return getFavoriteList(
         Number(pageParam),
         PAGE_SIZE,
+        sortType,
       );
     },
     getNextPageParam: (lastPage) => {