diff --git a/src/features/animes/hooks/useAnimes.ts b/src/features/animes/hooks/useAnimes.ts index ee5a8c31..49e6d355 100644 --- a/src/features/animes/hooks/useAnimes.ts +++ b/src/features/animes/hooks/useAnimes.ts @@ -30,7 +30,13 @@ export default function useAnimes({ }), getNextPageParam: (lastPage) => lastPage.cursor || undefined, select: (data) => ({ - pages: data.pages.flatMap((page) => page.items), + pages: + // 별점순 정렬인 경우, 별점이 내림차순 되도록 정렬 + queryParams.sort === "SCORE" + ? data.pages + .flatMap((page) => page.items) + .sort((a, b) => b.starScoreAvg - a.starScoreAvg) + : data.pages.flatMap((page) => page.items), pageParams: data.pageParams, }), enabled: autoFetch, diff --git a/src/features/animes/hooks/useFilterAnimes.ts b/src/features/animes/hooks/useFilterAnimes.ts index e3cfdf62..3c9703d1 100644 --- a/src/features/animes/hooks/useFilterAnimes.ts +++ b/src/features/animes/hooks/useFilterAnimes.ts @@ -58,6 +58,18 @@ export default function useFilterAnimes() { }); // 요청 필터 const animesQuery = useAnimes({ autoFetch: true, queryParams: filterParams }); + /** + * 서버에서 잘못된 데이터가 넘어오는 중. + * 중복된 데이터 제거 + */ + const uniqueAnimesQueryData = { + ...animesQuery.data, + pages: [ + ...new Set(animesQuery.data?.pages.map((page) => JSON.stringify(page))), + ] // + .map((page) => JSON.parse(page)), + }; + /** 상단 Tab 최신순, 리뷰순, 평점순 */ const changeSort = (sort: AnimeSort) => { const queryParams = filterToQueryParams(selectedFilters); @@ -159,6 +171,7 @@ export default function useFilterAnimes() { return { animesQuery, + uniqueAnimesQueryData, filterOptions, selectedFilters, changeSort, diff --git a/src/features/animes/routes/List/index.tsx b/src/features/animes/routes/List/index.tsx index 82342f7e..d9c288b6 100644 --- a/src/features/animes/routes/List/index.tsx +++ b/src/features/animes/routes/List/index.tsx @@ -38,6 +38,7 @@ const DEFAULT_TAB_ID = "LATEST"; export default function AnimeList() { const { animesQuery, + uniqueAnimesQueryData, bottomSheetVisible, bottomSheetOpen, bottomSheetClose, @@ -50,14 +51,6 @@ export default function AnimeList() { applyFilters, } = useFilterAnimes(); - /** 중복된 데이터 제거 */ - const uniqueAnimesQuery = { - ...animesQuery.data, - pages: [ - ...new Set(animesQuery.data?.pages.map((page) => JSON.stringify(page))), - ].map((page) => JSON.parse(page)), - }; - const observeRef = useRef(null); const navigate = useNavigate(); @@ -100,13 +93,13 @@ export default function AnimeList() { ))} - {uniqueAnimesQuery.pages.length === 0 && ( + {uniqueAnimesQueryData.pages.length === 0 && ( )} {animesQuery.data && ( <> - {uniqueAnimesQuery.pages.map((item) => ( + {uniqueAnimesQueryData.pages.map((item) => (