Merge pull request #359 from oduck-team/fix/328

fix: 애니 리스트 별점순 탭이 내림차순 정렬 되도록 수정
oduck-team · Mar 4, 2024 · 38486ca · 38486ca
2 parents 511ffa4 + 9a57d49
commit 38486ca
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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<HTMLDivElement>(null);
   const navigate = useNavigate();
 
@@ -100,13 +93,13 @@ export default function AnimeList() {
               <GridAnimeCardSkeleton key={i} />
             ))}
 
-          {uniqueAnimesQuery.pages.length === 0 && (
+          {uniqueAnimesQueryData.pages.length === 0 && (
             <Empty message="애니가 없어요" />
           )}
 
           {animesQuery.data && (
             <>
-              {uniqueAnimesQuery.pages.map((item) => (
+              {uniqueAnimesQueryData.pages.map((item) => (
                 <AnimeCard
                   {...item}
                   key={item.id}