Refactor(client): loading error boundary 적용 (#214)

* feat: 바운더리 뷰 제작

* chore: 주석 정리

* refactor: useSuspenseInfiniteQuery로 변경하여 쿼리 최적화

* refactor: MyBookmarkContent 컴포넌트 추가 및 바운더리 적용

* refactor: ArticlesLoadingBoundary 로딩컨포넌트로 변경

Author: jjangminii

apps/client/package.json

@@ -17,6 +17,7 @@
     "framer-motion": "^12.23.12",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-error-boundary": "^6.0.0",
     "react-router-dom": "^7.8.2"
   },
   "devDependencies": {

apps/client/src/assets/chippi_error.svg

@@ -1,28 +1,23 @@
-import { Badge, PopupContainer } from '@pinback/design-system/ui';
-import { useState, useRef } from 'react';
-import {
-  useGetBookmarkArticles,
-  useGetBookmarkUnreadArticles,
-  useGetCategoryBookmarkArticles,
-} from '@pages/myBookmark/apis/queries';
+import { PopupContainer } from '@pinback/design-system/ui';
+import { useState, useRef, Suspense } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { REMIND_MOCK_DATA } from '@pages/remind/constants';
 import CardEditModal from '@shared/components/cardEditModal/CardEditModal';
 import OptionsMenuPortal from '@shared/components/sidebar/OptionsMenuPortal';
 import { useAnchoredMenu } from '@shared/hooks/useAnchoredMenu';
 import { belowOf } from '@shared/utils/anchorPosition';
-import NoArticles from '@pages/myBookmark/components/NoArticles/NoArticles';
 import { Icon } from '@pinback/design-system/icons';
 import { useQueryClient } from '@tanstack/react-query';
 import {
   useGetArticleDetail,
   useDeleteRemindArticle,
   usePutArticleReadStatus,
 } from '@shared/apis/queries';
-import NoUnreadArticles from '@pages/myBookmark/components/noUnreadArticles/NoUnreadArticles';
-import FetchCard from '@pages/myBookmark/components/fetchCard/FetchCard';
-import { useInfiniteScroll } from '@shared/hooks/useInfiniteScroll';
 import Tooltip from '@shared/components/tooltip/Tooltip';
+import ArticlesLoadingBoundary from '@shared/components/articlesLoadingBoundary/ArticlesLoadingBoundary';
+import ArticlesErrorBoundary from '@shared/components/articlesErrorBoundary/ArticlesErrorBoundary';
+import { ErrorBoundary } from 'react-error-boundary';
+import MyBookmarkContent from '@pages/myBookmark/components/myBookmarkContent/MyBookmarkContent';
 
 const MyBookmark = () => {
   const [activeBadge, setActiveBadge] = useState<'all' | 'notRead'>('all');
@@ -32,35 +27,14 @@ const MyBookmark = () => {
 
   const [searchParams] = useSearchParams();
   const queryClient = useQueryClient();
+
   const category = searchParams.get('category');
   const categoryId = searchParams.get('id');
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   const { mutate: updateToReadStatus } = usePutArticleReadStatus();
   const { mutate: deleteArticle } = useDeleteRemindArticle();
-
-  const {
-    data: articlesData,
-    fetchNextPage: fetchNextArticles,
-    hasNextPage: hasNextArticles,
-  } = useGetBookmarkArticles();
-
-  const {
-    data: unreadArticlesData,
-    fetchNextPage: fetchNextUnreadArticles,
-    hasNextPage: hasNextUnreadArticles,
-  } = useGetBookmarkUnreadArticles();
-
-  const {
-    data: categoryArticlesData,
-    fetchNextPage: fetchNextCategoryArticles,
-    hasNextPage: hasNextCategoryArticles,
-  } = useGetCategoryBookmarkArticles(
-    categoryId,
-    activeBadge === 'notRead' ? false : null
-  );
-
   const { mutate: getArticleDetail, data: articleDetail } =
     useGetArticleDetail();
 
@@ -72,34 +46,9 @@ const MyBookmark = () => {
     containerRef,
   } = useAnchoredMenu((anchor) => belowOf(anchor, 8));
 
-  const articlesToDisplay = category
-    ? (categoryArticlesData?.pages.flatMap((page) => page.articles) ?? [])
-    : activeBadge === 'all'
-      ? (articlesData?.pages.flatMap((page) => page.articles) ?? [])
-      : (unreadArticlesData?.pages.flatMap((page) => page.articles) ?? []);
-
-  const hasNextPage = category
-    ? hasNextCategoryArticles
-    : activeBadge === 'all'
-      ? hasNextArticles
-      : hasNextUnreadArticles;
-
-  const fetchNextPage = category
-    ? fetchNextCategoryArticles
-    : activeBadge === 'all'
-      ? fetchNextArticles
-      : fetchNextUnreadArticles;
-
-  const observerRef = useInfiniteScroll({
-    fetchNextPage,
-    hasNextPage,
-    root: scrollContainerRef,
-  });
-
   const handleDeleteArticle = (id: number) => {
     deleteArticle(id, {
       onSuccess: () => {
-        // TODO: 쿼리키 팩토리 패턴 적용
         queryClient.invalidateQueries({ queryKey: ['bookmarkReadArticles'] });
         queryClient.invalidateQueries({ queryKey: ['bookmarkUnreadArticles'] });
         queryClient.invalidateQueries({
@@ -119,31 +68,6 @@ const MyBookmark = () => {
   const getBookmarkTitle = (id: number | null) =>
     id == null ? '' : (REMIND_MOCK_DATA.find((d) => d.id === id)?.title ?? '');
 
-  const handleBadgeClick = (badgeType: 'all' | 'notRead') => {
-    setActiveBadge(badgeType);
-  };
-
-  const EmptyStateComponent = () => {
-    if (articlesToDisplay.length === 0) {
-      const totalArticlesInAllView = articlesData?.pages[0]?.totalArticle;
-      if (totalArticlesInAllView === 0) {
-        return <NoArticles />;
-      }
-      return <NoUnreadArticles />;
-    }
-    return null;
-  };
-
-  const totalArticleCount =
-    (category
-      ? categoryArticlesData?.pages[0]?.totalArticle
-      : articlesData?.pages[0]?.totalArticle) ?? 0;
-
-  const totalUnreadArticleCount =
-    (category
-      ? categoryArticlesData?.pages[0]?.totalUnreadArticle
-      : articlesData?.pages[0]?.totalUnreadArticle) ?? 0;
-
   return (
     <div className="flex h-screen flex-col py-[5.2rem] pl-[8rem] pr-[5rem]">
       <div className="flex items-center gap-[0.4rem]">
@@ -162,63 +86,22 @@ const MyBookmark = () => {
         <p className="head3 text-main500">{category || ''}</p>
       </div>
 
-      <div className="mt-[3rem] flex gap-[2.4rem]">
-        <Badge
-          text="전체보기"
-          countNum={totalArticleCount}
-          onClick={() => handleBadgeClick('all')}
-          isActive={activeBadge === 'all'}
-        />
-        <Badge
-          text="안 읽음"
-          countNum={totalUnreadArticleCount}
-          onClick={() => handleBadgeClick('notRead')}
-          isActive={activeBadge === 'notRead'}
-        />
-      </div>
       <Tooltip />
 
-      {articlesToDisplay.length > 0 ? (
-        <div
-          ref={scrollContainerRef}
-          className="scrollbar-hide mt-[2.6rem] flex h-screen flex-wrap content-start gap-[1.6rem] overflow-y-auto scroll-smooth"
-        >
-          {articlesToDisplay.map((article) => (
-            <FetchCard
-              key={article.articleId}
-              article={article}
-              onClick={() => {
-                window.open(article.url, '_blank');
-                updateToReadStatus(article.articleId, {
-                  onSuccess: () => {
-                    // TODO: 쿼리키 팩토리 패턴 적용
-                    queryClient.invalidateQueries({
-                      queryKey: ['bookmarkReadArticles'],
-                    });
-                    queryClient.invalidateQueries({
-                      queryKey: ['bookmarkUnreadArticles'],
-                    });
-                    queryClient.invalidateQueries({
-                      queryKey: ['categoryBookmarkArticles'],
-                    });
-                    queryClient.invalidateQueries({ queryKey: ['arcons'] });
-                  },
-                  onError: (error) => {
-                    console.error(error);
-                  },
-                });
-              }}
-              onOptionsClick={(e) => {
-                e.stopPropagation();
-                openMenu(article.articleId, e.currentTarget);
-              }}
-            />
-          ))}
-          <div ref={observerRef} style={{ height: '1px', width: '100%' }} />
-        </div>
-      ) : (
-        <EmptyStateComponent />
-      )}
+      <Suspense fallback={<ArticlesLoadingBoundary />}>
+        <ErrorBoundary FallbackComponent={ArticlesErrorBoundary}>
+          <MyBookmarkContent
+            category={category}
+            categoryId={categoryId}
+            activeBadge={activeBadge}
+            onBadgeChange={setActiveBadge}
+            updateToReadStatus={updateToReadStatus}
+            openMenu={openMenu}
+            queryClient={queryClient}
+            scrollContainerRef={scrollContainerRef}
+          />
+        </ErrorBoundary>
+      </Suspense>
 
       <OptionsMenuPortal
         open={menu.open}

apps/client/src/pages/myBookmark/MyBookmark.tsx

@@ -1,53 +1,46 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import {
   getBookmarkArticles,
   getBookmarkUnreadArticles,
   getCategoryBookmarkArticles,
 } from './axios';
 
 export const useGetBookmarkArticles = () => {
-  return useInfiniteQuery({
+  return useSuspenseInfiniteQuery({
     queryKey: ['bookmarkReadArticles'],
     queryFn: ({ pageParam = 0 }) => getBookmarkArticles(pageParam, 20),
     initialPageParam: 0,
-    getNextPageParam: (lastPage, allPages) => {
-      if (lastPage.articles.length === 0) {
-        return undefined;
-      }
-      return allPages.length;
-    },
+    getNextPageParam: (lastPage, allPages) =>
+      lastPage.articles.length === 0 ? undefined : allPages.length,
   });
 };
 
 export const useGetBookmarkUnreadArticles = () => {
-  return useInfiniteQuery({
+  return useSuspenseInfiniteQuery({
     queryKey: ['bookmarkUnreadArticles'],
     queryFn: ({ pageParam = 0 }) => getBookmarkUnreadArticles(pageParam, 20),
     initialPageParam: 0,
-    getNextPageParam: (lastPage, allPages) => {
-      if (lastPage.articles.length === 0) {
-        return undefined;
-      }
-      return allPages.length;
-    },
+    getNextPageParam: (lastPage, allPages) =>
+      lastPage.articles.length === 0 ? undefined : allPages.length,
   });
 };
 
 export const useGetCategoryBookmarkArticles = (
   categoryId: string | null,
   readStatus: boolean | null
 ) => {
-  return useInfiniteQuery({
+  return useSuspenseInfiniteQuery({
     queryKey: ['categoryBookmarkArticles', readStatus, categoryId],
-    queryFn: ({ pageParam = 0 }) =>
-      getCategoryBookmarkArticles(categoryId, readStatus, pageParam, 20),
+
+    queryFn: ({ pageParam = 0 }) => {
+      if (!categoryId) return null;
+      return getCategoryBookmarkArticles(categoryId, readStatus, pageParam, 20);
+    },
+
     initialPageParam: 0,
     getNextPageParam: (lastPage, allPages) => {
-      if (lastPage.articles.length === 0) {
-        return undefined;
-      }
+      if (!lastPage || lastPage.articles.length === 0) return undefined;
       return allPages.length;
     },
-    enabled: !!categoryId,
   });
 };