[#412] [북카이브] 북카이브 페이지 (회원) (#436)

src/app/bookarchive/page.tsx

@@ -2,36 +2,21 @@
 
 import useMyProfileQuery from '@/queries/user/useMyProfileQuery';
 import { isAuthed } from '@/utils/helpers';
-import { Skeleton, Text, VStack } from '@chakra-ui/react';
 import { Suspense } from 'react';
 import useMounted from '@/hooks/useMounted';
-import { BookArchiveForAuth, BookArchiveForUnAuth } from '@/ui/BookArchive';
+import BookArchiveForAuth from '@/v1/bookArchive/BookArchiveForAuth';
+import BookArchiveForUnAuth from '@/v1/bookArchive/BookArchiveForUnAuth';
+import TopHeader from '@/ui/Base/TopHeader';
 
 export default function BookArchivePage() {
   return (
-    <VStack as="main" width="100%" spacing="2rem">
-      <VStack w="100%">
-        <Text
-          alignSelf="flex-start"
-          fontSize="2rem"
-          fontWeight="800"
-          color="main"
-        >
-          BookArchive
-        </Text>
-      </VStack>
-      <Suspense
-        fallback={
-          <VStack gap="3rem">
-            <Skeleton width="39rem" height="19.6rem" />
-            <Skeleton width="39rem" height="19.6rem" />
-            <Skeleton width="39rem" height="19.6rem" />
-          </VStack>
-        }
-      >
+    <div className="flex w-full flex-col gap-[1rem]">
+      <TopHeader pathname="/bookarchive"></TopHeader>
+      {/* TODO: 스켈레톤 컴포넌트로 교체 */}
+      <Suspense fallback={null}>
         <Contents />
       </Suspense>
-    </VStack>
+    </div>
   );
 }
 

src/stories/bookShelf/BookShelf.stories.tsx → src/stories/bookShelf/BookShelfCard.stories.tsx

@@ -1,4 +1,4 @@
-import BookShelf from '@/v1/bookShelf/BookShelf';
+import BookShelf from '@/v1/bookShelf/BookShelfCard';
 import { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof BookShelf> = {

src/ui/Base/TopHeader.tsx

@@ -24,9 +24,9 @@ const getHeaderLabel = (pathname: string) => {
 const TopHeader = ({ pathname, children }: TopHeaderProps) => {
   return (
     <div className="flex w-full items-center justify-between pb-[0.8rem]">
-      <p className="text-xl font-bold text-main-900">
+      <h1 className="text-xl font-bold text-main-900">
         {getHeaderLabel(pathname)}
-      </p>
+      </h1>
       {children}
     </div>
   );

src/v1/book/BookCover.tsx

@@ -45,7 +45,7 @@ const BookCover = ({ src, title, size = 'medium' }: BookCoverProps) => {
   const sizeClasses = getCoverSizeClasses(size);
 
   return (
-    <span className={`relative ${sizeClasses}`}>
+    <div className={`relative ${sizeClasses}`}>
       <Image
         src={src}
         alt={title}
@@ -54,7 +54,7 @@ const BookCover = ({ src, title, size = 'medium' }: BookCoverProps) => {
         className="object-fit rounded-[0.5rem] shadow-bookcover"
         fill
       />
-    </span>
+    </div>
   );
 };
 

src/v1/bookArchive/BookArchiveForAuth.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import useAuthRecommendedBooks from '@/queries/recommend/useAuthRecommendedBooks';
+import useAuthRecommendedBookshelf from '@/queries/recommend/useAuthRecommendedBookshelf';
+import { APIJobGroup } from '@/types/job';
+import BookCover from '@/v1/book/BookCover';
+import BookShelfCard from '@/v1/bookShelf/BookShelfCard';
+import Link from 'next/link';
+
+const BookArchiveForAuth = ({
+  userJobGroup,
+}: {
+  userJobGroup: APIJobGroup['name'];
+}) => {
+  const {
+    data: bookshelfData,
+    isSuccess: bookshelfIsSuccess,
+    isLoading: bookshelfIsLoading,
+  } = useAuthRecommendedBookshelf(userJobGroup);
+  const {
+    data: booksData,
+    isSuccess: booksIsSuccess,
+    isLoading: booksIsLoading,
+  } = useAuthRecommendedBooks(userJobGroup);
+
+  const isSuccess = bookshelfIsSuccess && booksIsSuccess;
+  const isLoading = bookshelfIsLoading && booksIsLoading;
+
+  if (isLoading) {
+    // TODO: 스켈레톤 컴포넌트로 교체
+    return null;
+  }
+
+  if (!isSuccess) return null;
+  if (!bookshelfData || !booksData) return null;
+
+  return (
+    <div className="flex w-full flex-col gap-[1.5rem] text-md font-bold">
+      <h2>👀 이런 책들이 많이 꽂혔어요</h2>
+      <ul className="flex gap-[1.5rem] overflow-auto">
+        {booksData.books.map(({ bookId, imageUrl, title }) => (
+          <li key={bookId} className="max-w-[9rem]">
+            <Link href={`/book/${bookId}`} className="flex flex-col gap-[1rem]">
+              <BookCover src={imageUrl} title={title} size="large" />
+              <span className="line-clamp-2 break-keep text-center text-xs font-normal leading-tight">
+                {title}
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+      <h2>🔥 인기 책장</h2>
+      {...bookshelfData.bookshelfResponses.map(bookShelf => (
+        <BookShelfCard key={bookShelf.bookshelfId} {...bookShelf} />
+      ))}
+    </div>
+  );
+};
+
+export default BookArchiveForAuth;

src/v1/bookArchive/BookArchiveForUnAuth.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import useUnAuthRecommendedBookshelfQuery from '@/queries/recommend/useUnAuthRecommendedBookshelfQuery';
+import BookShelfCard from '@/v1/bookShelf/BookShelfCard';
+
+const BookArchiveForUnAuth = () => {
+  const { data, isSuccess, isLoading } = useUnAuthRecommendedBookshelfQuery();
+
+  if (isLoading) {
+    // TODO: 스켈레톤 컴포넌트로 교체
+    return null;
+  }
+  if (!isSuccess) return null;
+
+  return (
+    <div className="flex w-full flex-col gap-[1.5rem] text-md font-bold">
+      <h2>🔥 인기 책장</h2>
+      {...data.bookshelfResponses.map(bookShelf => (
+        <BookShelfCard key={bookShelf.bookshelfId} {...bookShelf} />
+      ))}
+    </div>
+  );
+};
+
+export default BookArchiveForUnAuth;

src/v1/bookShelf/Book.tsx → src/v1/bookShelf/BookShelfCard.tsx

@@ -1,10 +1,50 @@
-'use client';
-
-import { APIBook } from '@/types/book';
-import ColorThief from 'colorthief';
-import Image from 'next/image';
+import { APIBookshelf } from '@/types/bookshelf';
+import { IconArrowRight, IconHeart } from '@public/icons';
 import Link from 'next/link';
+import Badge from '@/ui/Base/Badge';
+import Image from 'next/image';
+import { APIBook } from '@/types/book';
 import { useState } from 'react';
+import ColorThief from 'colorthief';
+
+const BookShelf = ({
+  bookshelfId,
+  bookshelfName,
+  books,
+  likeCount,
+}: APIBookshelf) => {
+  return (
+    <div className="relative rounded-[2rem] pb-[2.5rem] pt-[2rem] shadow-[0px_0px_10px_0px_#D1D1D1]">
+      <div className="absolute bottom-0 w-full">
+        <div className="h-[3rem] bg-[#F2ECDF] shadow-[0px_-3px_8px_0px_#F1F1F1_inset]" />
+        <div className="h-[1rem] rounded-b-[2rem] bg-[#F6F3EC] shadow-[0px_-1px_8px_-4.5px_#494949]" />
+      </div>
+      <div className="flex flex-col gap-[2.6rem] bg-white px-[2rem]">
+        <div className="flex flex-col gap-[1rem]">
+          <div className="flex items-center justify-between">
+            <div className="text-md font-bold">{bookshelfName}</div>
+            <Link href={`/bookshelf/${bookshelfId}`}>
+              <IconArrowRight width="1.8rem" height="1.8rem" />
+            </Link>
+          </div>
+          <Badge colorScheme="red" fontWeight="bold" size="small">
+            <div className="flex items-center gap-[0.4rem]">
+              <IconHeart fill="white" height="1.3rem" w="1.3rem" />
+              <div className="bold text-xs">{likeCount}</div>
+            </div>
+          </Badge>
+        </div>
+        <ul className="flex justify-between px-[0.5rem]">
+          {books.map(book => (
+            <li key={book.bookId} className="flex">
+              <Book {...book} />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
 
 const Book = ({
   imageUrl,
@@ -64,4 +104,4 @@ const Book = ({
   );
 };
 
-export default Book;
+export default BookShelf;