refactor: 무한스크롤 개선, 태그 검색 결과 페이지 prefetch 제거 (#73)

* refactor: infinite scroll
- remove Masonry component and useIntersect hook (It had a lot of bug)
- add @egjs-infinitegrid
- remove the feature of polling meme data from the cache

* refactor: 사용하지 않는 컬러 제거

* refactor: 변수명 변경

* fix: 태그 검색 결과 페이지 서버에서 데이터 prefetch 제거
- waterfall 로 인한 지연 시간을 제거 하기 위함
- TagBookmarkButton 컴포넌트 Suspense 로 wrapping

* refactor: 변수명 변경

* feat: error boundary fallback 에 홈으로 돌아가기 버튼 추가

* feat: PRD에서만 ga, gtag 활성화

* chore: 주석 추가

mocks/handlers/index.ts

@@ -2,13 +2,11 @@ import * as account from "./account";
 import * as auth from "./auth";
 import * as collection from "./collection";
 import * as meme from "./meme";
-import * as post from "./post";
 import * as search from "./search";
 import * as tags from "./tags";
 
 export const handlers = [
   ...Object.values(auth),
-  ...Object.values(post),
   ...Object.values(tags),
   ...Object.values(meme),
   ...Object.values(search),

package.json

@@ -19,6 +19,7 @@
     "postinstall": "husky install"
   },
   "dependencies": {
+    "@egjs/react-infinitegrid": "^4.11.0",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/serialize": "^1.1.1",

src/api/core/index.ts

@@ -1,5 +1,4 @@
 export * from "./axios";
 export * from "./query-client";
-export * from "./queryKey";
 export * from "./useCoreInfiniteQuery";
 export * from "./useSuspensedQuery";

src/api/core/query-client.tsx

@@ -26,6 +26,7 @@ export const QueryClientProvider = ({ hydrateState, children }: Props) => {
             suspense: true,
             retry: 0,
             refetchOnWindowFocus: false,
+            // FIXME this must be set to true
             useErrorBoundary: false,
             staleTime: 1000 * 20, // 20초
           },

src/api/core/useCoreInfiniteQuery.ts

@@ -45,7 +45,7 @@ export function useCoreInfiniteQuery<
     isFetching,
     isFetchingNextPage,
     isError,
-    fetchNextPage: oldFetchNextPage,
+    fetchNextPage: originalFetchNextPage,
     ...rest
   } = useInfiniteQuery(queryKey, queryFn, {
     getNextPageParam: (lastPage, allPages) => {
@@ -56,7 +56,9 @@ export function useCoreInfiniteQuery<
     },
     ...options,
   });
-  const fetchNextPage = isError ? ((() => {}) as typeof oldFetchNextPage) : oldFetchNextPage;
+  const fetchNextPage = isError
+    ? ((() => {}) as typeof originalFetchNextPage)
+    : originalFetchNextPage;
 
   const flatData = data ? data.pages.flatMap(({ data }) => data) : [];
   const isEmpty = data?.pages[0].data.length === 0;

src/api/meme/useGetMemesByCollectionId.ts

@@ -1,6 +1,6 @@
 import type { QueryFunctionContext } from "@tanstack/react-query";
 
-import { api, CORE_QUERY_KEY, useCoreInfiniteQuery } from "../core";
+import { api, useCoreInfiniteQuery } from "../core";
 
 const PAGE_SIZE = 10;
 
@@ -35,4 +35,4 @@ export const useGetMemesByCollectionId = (collectionId: number) => {
 };
 
 useGetMemesByCollectionId.queryKey = (collectionId: number | null) =>
-  [CORE_QUERY_KEY.infiniteMemeList, "getMemesByCollectionId", collectionId] as const;
+  ["getMemesByCollectionId", collectionId] as const;

src/api/meme/useGetMemesBySort.ts

@@ -1,6 +1,6 @@
 import type { QueryFunctionContext } from "@tanstack/react-query";
 
-import { api, CORE_QUERY_KEY, useCoreInfiniteQuery } from "../core";
+import { api, useCoreInfiniteQuery } from "../core";
 
 const PAGE_SIZE = 10;
 
@@ -28,5 +28,4 @@ export const useGetMemesBySort = (sort: keyof typeof types) => {
 
   return { data, isEmpty, isFetchingNextPage, fetchNextPage };
 };
-useGetMemesBySort.queryKey = (sort: string) =>
-  [CORE_QUERY_KEY.infiniteMemeList, "getMemesBySort", sort] as const;
+useGetMemesBySort.queryKey = (sort: string) => ["getMemesBySort", sort] as const;

src/api/search/useGetMemesByKeyword.ts

@@ -1,6 +1,6 @@
 import type { QueryFunctionContext } from "@tanstack/react-query";
 
-import { api, CORE_QUERY_KEY, useCoreInfiniteQuery } from "../core";
+import { api, useCoreInfiniteQuery } from "../core";
 
 const PAGE_SIZE = 20;
 
@@ -31,5 +31,4 @@ export const useGetMemesByKeyword = (keyword: string) => {
   return { data, isEmpty, isFetchingNextPage, fetchNextPage };
 };
 
-useGetMemesByKeyword.queryKey = (keyword: string) =>
-  [CORE_QUERY_KEY.infiniteMemeList, "getMemesByKeyword", keyword] as const;
+useGetMemesByKeyword.queryKey = (keyword: string) => ["getMemesByKeyword", keyword] as const;

src/api/search/useGetMemesByTag.ts

@@ -1,7 +1,7 @@
 import type { QueryClient, QueryFunctionContext } from "@tanstack/react-query";
 import { useInfiniteQuery } from "@tanstack/react-query";
 
-import { api, CORE_QUERY_KEY } from "../core";
+import { api } from "../core";
 
 const PAGE_SIZE = 20;
 
@@ -13,7 +13,12 @@ const PAGE_SIZE = 20;
  * isEmpty - 밈 검색 결과가 없는 경우 true
  */
 export const useGetMemesByTag = (tag: string) => {
-  const { data, isFetchingNextPage, fetchNextPage } = useInfiniteQuery(
+  const {
+    data,
+    isFetchingNextPage,
+    isError,
+    fetchNextPage: originalFetchNextPage,
+  } = useInfiniteQuery(
     useGetMemesByTag.queryKey(tag),
     ({ pageParam = 0 }: QueryFunctionContext) =>
       api.search.getMemesByTag({ keyword: tag, offset: pageParam, limit: PAGE_SIZE }),
@@ -28,15 +33,17 @@ export const useGetMemesByTag = (tag: string) => {
     },
   );
 
+  const fetchNextPage = isError
+    ? ((() => {}) as typeof originalFetchNextPage)
+    : originalFetchNextPage;
   const memes = data?.pages.flatMap(({ memes }) => memes) || [];
   const totalCount = data?.pages[0].totalCount;
   const isEmpty = !memes.length;
 
   return { data: memes, totalCount, isEmpty, isFetchingNextPage, fetchNextPage };
 };
 
-useGetMemesByTag.queryKey = (tag: string) =>
-  [CORE_QUERY_KEY.infiniteMemeList, "getMemesByTag", tag] as const;
+useGetMemesByTag.queryKey = (tag: string) => ["getMemesByTag", tag] as const;
 
 useGetMemesByTag.fetchInfiniteQuery = (tag: string, queryClient: QueryClient) =>
   queryClient.fetchInfiniteQuery(useGetMemesByTag.queryKey(tag), ({ pageParam = 0 }) =>

src/api/search/useGetMemesFromCollectionByKeyword.ts

@@ -1,6 +1,6 @@
 import type { QueryFunctionContext } from "@tanstack/react-query";
 
-import { api, CORE_QUERY_KEY, useCoreInfiniteQuery } from "../core";
+import { api, useCoreInfiniteQuery } from "../core";
 
 const PAGE_SIZE = 20;
 
@@ -45,9 +45,4 @@ useGetMemesFromCollectionByKeyword.queryKey = ({
 }: {
   keyword: string;
   collectionId: number;
-}) =>
-  [
-    CORE_QUERY_KEY.infiniteMemeList,
-    "getMemesFromCollectionByKeyword",
-    { keyword, collectionId },
-  ] as const;
+}) => ["getMemesFromCollectionByKeyword", { keyword, collectionId }] as const;

src/api/tag/useGetTagInfo.ts

@@ -1,13 +1,12 @@
 import type { QueryClient, UseQueryOptions } from "@tanstack/react-query";
-import { useQuery } from "@tanstack/react-query";
 
-import { api } from "../core";
+import { api, useSuspendedQuery } from "../core";
 
 export const useGetTagInfo = (
   tagId: number,
   options: Pick<UseQueryOptions, "enabled"> = { enabled: true },
 ) => {
-  return useQuery({
+  return useSuspendedQuery({
     queryKey: useGetTagInfo.queryKey(tagId),
     queryFn: () => useGetTagInfo.queryFn(tagId),
     staleTime: 0,

src/common/components/Error/GlobalError.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 import { Navigation } from "../Navigation";
 
 export const GlobalError = () => {
@@ -9,6 +11,9 @@ export const GlobalError = () => {
         <span className="mt-16 text-16-semibold-140 text-gray-600">
           이 페이지를 새로고침 해보세요.
         </span>
+        <Link className="mt-16 text-16-semibold-140 text-primary-800" href="/">
+          홈으로 돌아가기
+        </Link>
       </div>
     </>
   );