refactor(member): 도서관 UI 개선 (#83)

apps/member/src/components/library/BookCard/BookCard.tsx

@@ -19,18 +19,18 @@ const BookCard = ({
 
   return (
     <div
-      className="flex flex-col group space-y-1 border rounded-lg cursor-pointer"
+      className="flex flex-col space-y-1 overflow-hidden border rounded-lg cursor-pointer group"
       onClick={() => navigate(PATH_FINDER.LIBRARY_DETAIL(id))}
     >
       <Image
         src={imageUrl}
         alt={title}
         width="w-full"
         height="h-[200px]"
-        className="object-cover border-b rounded-t-lg group-hover:scale-125 transition-transform ease-in-out"
+        className="object-cover transition-transform ease-in-out border-b group-hover:scale-110"
         overflow
       />
-      <div className="flex flex-col grow justify-between text-sm p-2">
+      <div className="flex flex-col justify-between p-2 text-sm grow">
         <div>
           <p className="font-semibold group-hover:underline">{title}</p>
           <p className="text-gray-500">

apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx

@@ -0,0 +1,42 @@
+import Section from '@components/common/Section/Section';
+import { BookItem } from '@type/book';
+import Image from '@components/common/Image/Image';
+import { Link } from 'react-router-dom';
+import { PATH_FINDER } from '@constants/path';
+
+interface LibraNewBooksSectionProps {
+  data: BookItem[];
+}
+
+const LibraryNewBooksSection = ({ data }: LibraNewBooksSectionProps) => {
+  return (
+    <Section>
+      <Section.Header title="신규 도서">
+        최근에 들어온 도서들을 확인해보세요
+      </Section.Header>
+      <Section.Body className="flex gap-4">
+        {data.map(({ id, imageUrl, title, author, publisher }) => (
+          <Link
+            key={id}
+            to={PATH_FINDER.BOOK_DETAIL(id)}
+            className="relative flex flex-col gap-2 transition-transform group hover:scale-110"
+          >
+            <div className="overflow-hidden rounded-lg">
+              <Image src={imageUrl} alt={title} className="object-cover " />
+            </div>
+
+            <div className="absolute inset-0 transition-all rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 bg-gradient-to-t from-black/60 via-black/30" />
+            <div className="absolute bottom-0 px-2 text-white transition-all opacity-0 group-hover:-translate-y-5 group-hover:opacity-100">
+              <p className="font-semibold break-keep">{title}</p>
+              <p className="text-sm">
+                {author} | {publisher}
+              </p>
+            </div>
+          </Link>
+        ))}
+      </Section.Body>
+    </Section>
+  );
+};
+
+export default LibraryNewBooksSection;

apps/member/src/pages/LibraryPage/LibraryPage.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import Content from '@components/common/Content/Content';
 import Header from '@components/common/Header/Header';
 import { Button } from '@clab/design-system';
@@ -7,7 +8,7 @@ import { useBooks } from '@hooks/queries/useBooks';
 import Section from '@components/common/Section/Section';
 import LibraryBookList from '@components/library/LibraryBookList/LibraryBookList';
 import Pagination from '@components/common/Pagination/Pagination';
-import { useState } from 'react';
+import LibraryNewBooksSection from '@components/library/LibraryNewBooksSection/LibraryNewBooksSection';
 
 const LibraryPage = () => {
   const navigate = useNavigate();
@@ -30,25 +31,19 @@ const LibraryPage = () => {
           희망도서 신청하기
         </Button>
       </Header>
+      <LibraryNewBooksSection data={newBooks.items} />
       <Section>
-        <Section.Header title="신규" />
-        <Section.Body>
-          <LibraryBookList data={newBooks.items} />
-        </Section.Body>
-      </Section>
-      <Section>
-        <Section.Header title="소장도서" />
+        <Section.Header title="소장 도서 둘러보기">
+          <Pagination
+            totalItems={data.totalItems}
+            pageLimit={5}
+            postLimit={size}
+            setPage={handlePageChange}
+            page={page}
+          />
+        </Section.Header>
         <Section.Body>
           <LibraryBookList data={data.items} />
-          <div className="flex justify-center mt-4">
-            <Pagination
-              totalItems={data.totalItems}
-              pageLimit={5}
-              postLimit={size}
-              setPage={handlePageChange}
-              page={page}
-            />
-          </div>
         </Section.Body>
       </Section>
     </Content>