diff --git a/apps/member/src/components/library/BookCard/BookCard.tsx b/apps/member/src/components/library/BookCard/BookCard.tsx index 5990ce92..807f1332 100644 --- a/apps/member/src/components/library/BookCard/BookCard.tsx +++ b/apps/member/src/components/library/BookCard/BookCard.tsx @@ -19,7 +19,7 @@ const BookCard = ({ return (
navigate(PATH_FINDER.LIBRARY_DETAIL(id))} > {title} -
+

{title}

diff --git a/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx b/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx new file mode 100644 index 00000000..911e60d0 --- /dev/null +++ b/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 ( +

+ + 최근에 들어온 도서들을 확인해보세요 + + + {data.map(({ id, imageUrl, title, author, publisher }) => ( + +
+ {title} +
+ +
+
+

{title}

+

+ {author} | {publisher} +

+
+ + ))} + +
+ ); +}; + +export default LibraryNewBooksSection; diff --git a/apps/member/src/pages/LibraryPage/LibraryPage.tsx b/apps/member/src/pages/LibraryPage/LibraryPage.tsx index 1abbb51c..08e94e7a 100644 --- a/apps/member/src/pages/LibraryPage/LibraryPage.tsx +++ b/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 = () => { 희망도서 신청하기 +
- - - - -
-
- + + + -
- -