[#669] [유저 책장] 존재하지 않는 유저 책장 페이지 예외처리 (#671)

* fix: 비로그인 상태에서 꽂은책이 없는 책장에 접근시 발생하는 에러 해결

* fix: 존재하지 않는 유저 책장 페이지 예외처리

* feat: axios interceptor에 isNotFoundError 분기 추가

* feat: 유저 페이지 not-found.tsx 작성

* feat: 유저 프로필 페이지에 ErrorBoundary 추가

* chore: axios에 notFound 분기 제거

Author: harryk-im

src/app/bookshelf/[bookshelfId]/not-found.tsx

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+import Image from 'next/image';
+
+import Button from '@/components/common/Button';
+
+export default function NotFound() {
+  return (
+    <div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center gap-[2rem]">
+      <Image src="/images/loading.gif" width={230} height={160} alt="loading" />
+      <p className="font-heading-bold">
+        <span className="font-bold text-main-900">다독이</span>가 길을 잃었어요.
+      </p>
+      <Link href="/bookarchive">
+        <Button size="large" colorScheme="main" fill={false}>
+          책장 둘러보기
+        </Button>
+      </Link>
+    </div>
+  );
+}

src/app/bookshelf/[bookshelfId]/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { notFound } from 'next/navigation';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
@@ -55,6 +56,10 @@ const BookShelfInfo = ({ bookshelfId }: { bookshelfId: number }) => {
   const { isLiked, likeCount, userId, userNickname, job } = data;
   const hasJobInfo = job.jobGroupKoreanName && job.jobNameKoreanName;
 
+  if (!data.bookshelfId) {
+    notFound();
+  }
+
   const { mutate: mutateBookshelfLike } =
     useMutateBookshelfLikeQuery(bookshelfId);
 
@@ -111,6 +116,9 @@ const BookShelfContent = ({
     isSuccess,
     isFetchingNextPage,
   } = useBookShelfBooksQuery({ bookshelfId });
+  const hasBooks = booksData && booksData.pages[0].books.length !== 0;
+  const isSingleBookshelfRow =
+    booksData && booksData.pages[0].books.length <= 1;
 
   useEffect(() => {
     if (inView && hasNextPage) {
@@ -123,25 +131,30 @@ const BookShelfContent = ({
 
   return isAuthenticated ? (
     <>
-      {booksData.pages.map((page, pageIdx) =>
-        page.books.length > 0 ? (
-          page.books.map((rowBooks, idx) => (
-            <BookShelfRow key={idx} books={rowBooks} />
-          ))
-        ) : (
-          <EmptyBookShelfRow key={pageIdx} />
-        )
+      {hasBooks ? (
+        <>
+          {booksData.pages.map(page =>
+            page.books.map((rowBooks, idx) => (
+              <BookShelfRow key={idx} books={rowBooks} />
+            ))
+          )}
+          {!isFetchingNextPage && <div ref={ref} />}
+        </>
+      ) : (
+        <EmptyBookShelfRow />
       )}
-      {!isFetchingNextPage && <div ref={ref} />}
     </>
   ) : (
     <>
-      <BookShelfRow books={booksData.pages[0].books[0]} />
+      {!isSingleBookshelfRow && (
+        <BookShelfRow books={booksData.pages[0].books[0]} />
+      )}
       <DummyBookShelfRow />
       <BookShelfLoginBox bookshelfId={bookshelfId} />
     </>
   );
 };
+
 const DummyBookShelfRow = () => (
   <div className="pointer-events-none blur-sm">
     <BookShelfRow books={initialBookImageUrl} />

src/app/profile/[userId]/not-found.tsx

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+import Image from 'next/image';
+
+import Button from '@/components/common/Button';
+
+export default function NotFound() {
+  return (
+    <div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center gap-[2rem]">
+      <Image src="/images/loading.gif" width={230} height={160} alt="loading" />
+      <p className="font-heading-bold">
+        <span className="font-bold text-main-900">다독이</span>가 길을 잃었어요.
+      </p>
+      <Link href="/bookarchive">
+        <Button size="large" colorScheme="main" fill={false}>
+          홈으로 가기
+        </Button>
+      </Link>
+    </div>
+  );
+}

src/app/profile/[userId]/page.tsx

@@ -1,6 +1,10 @@
 'use client';
 
-import { APIUser } from '@/types/user';
+import { notFound } from 'next/navigation';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import type { APIUser } from '@/types/user';
+
 import BackButton from '@/components/common/BackButton';
 import ShareButton from '@/components/common/ShareButton';
 import TopNavigation from '@/components/common/TopNavigation';
@@ -13,7 +17,7 @@ const UserProfilePage = ({
   params: { userId: APIUser['userId'] };
 }) => {
   return (
-    <>
+    <ErrorBoundary fallbackRender={notFound}>
       <TopNavigation>
         <TopNavigation.LeftItem>
           <BackButton />
@@ -26,7 +30,7 @@ const UserProfilePage = ({
         <ProfileInfo userId={userId} />
         <ProfileBookShelf userId={userId} />
       </div>
-    </>
+    </ErrorBoundary>
   );
 };