From 61feb6694ec8226443821f229c58e1c2b3e2a8fc Mon Sep 17 00:00:00 2001 From: gwansikk Date: Fri, 3 May 2024 22:06:57 +0900 Subject: [PATCH 1/9] refactor(member): update Library Section (#117) --- .../LibraryBookList/LibraryBookList.tsx | 18 --------- .../LibraryBooksSection.tsx | 37 +++++++++++++++++++ .../LibraryNewBooksSection.tsx | 25 +++++-------- .../src/pages/LibraryPage/LibraryPage.tsx | 34 ++++------------- 4 files changed, 55 insertions(+), 59 deletions(-) delete mode 100644 apps/member/src/components/library/LibraryBookList/LibraryBookList.tsx create mode 100644 apps/member/src/components/library/LibraryBooksSection/LibraryBooksSection.tsx diff --git a/apps/member/src/components/library/LibraryBookList/LibraryBookList.tsx b/apps/member/src/components/library/LibraryBookList/LibraryBookList.tsx deleted file mode 100644 index 4f82b147..00000000 --- a/apps/member/src/components/library/LibraryBookList/LibraryBookList.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { BookItem } from '@type/book'; - -import BookCard from '../BookCard/BookCard'; - -interface LibraryBookListProps { - data: Array; -} - -const LibraryBookList = ({ data }: LibraryBookListProps) => { - return ( -
- {data.map(({ id, ...rest }) => ( - - ))} -
- ); -}; -export default LibraryBookList; diff --git a/apps/member/src/components/library/LibraryBooksSection/LibraryBooksSection.tsx b/apps/member/src/components/library/LibraryBooksSection/LibraryBooksSection.tsx new file mode 100644 index 00000000..21231b43 --- /dev/null +++ b/apps/member/src/components/library/LibraryBooksSection/LibraryBooksSection.tsx @@ -0,0 +1,37 @@ +import Pagination from '@components/common/Pagination/Pagination'; +import { Section } from '@components/common/Section'; + +import { usePagination } from '@hooks/common/usePagination'; +import { useBooks } from '@hooks/queries/useBooks'; + +import BookCard from '../BookCard/BookCard'; + +const LibraryBooksSection = () => { + const { page, size, handlePageChange } = usePagination(); + + const { data } = useBooks(page, size); + + return ( +
+ + +
+ {data.items.map(({ id, ...rest }) => ( + + ))} +
+ + +
+ ); +}; +export default LibraryBooksSection; diff --git a/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx b/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx index 23bd80ae..ee1301e5 100644 --- a/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx +++ b/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx @@ -4,37 +4,32 @@ import Image from '@components/common/Image/Image'; import Section from '@components/common/Section/Section'; import { PATH_FINDER } from '@constants/path'; +import { useBooks } from '@hooks/queries/useBooks'; -import { BookItem } from '@type/book'; +const LibraryNewBooksSection = () => { + const { data } = useBooks(0, 4); -interface LibraNewBooksSectionProps { - data: BookItem[]; -} - -const LibraryNewBooksSection = ({ data }: LibraNewBooksSectionProps) => { return (
- - {data.map(({ id, imageUrl, title, author, publisher }) => ( + + {data.items.map(({ id, imageUrl, title, author, publisher }) => ( {title} -
-
-

{title}

+
+
+

{title}

{author} | {publisher}

diff --git a/apps/member/src/pages/LibraryPage/LibraryPage.tsx b/apps/member/src/pages/LibraryPage/LibraryPage.tsx index 527d1e3f..9205513e 100644 --- a/apps/member/src/pages/LibraryPage/LibraryPage.tsx +++ b/apps/member/src/pages/LibraryPage/LibraryPage.tsx @@ -1,24 +1,17 @@ +import { Suspense } from 'react'; import { useNavigate } from 'react-router-dom'; import { Button } from '@clab/design-system'; import Content from '@components/common/Content/Content'; import Header from '@components/common/Header/Header'; -import Pagination from '@components/common/Pagination/Pagination'; -import Section from '@components/common/Section/Section'; -import LibraryBookList from '@components/library/LibraryBookList/LibraryBookList'; +import LibraryBooksSection from '@components/library/LibraryBooksSection/LibraryBooksSection'; import LibraryNewBooksSection from '@components/library/LibraryNewBooksSection/LibraryNewBooksSection'; import { PATH } from '@constants/path'; -import { usePagination } from '@hooks/common/usePagination'; -import { useBooks } from '@hooks/queries/useBooks'; const LibraryPage = () => { const navigate = useNavigate(); - const { page, size, handlePageChange } = usePagination(); - - const { data: newBookData } = useBooks(0, 4); - const { data: bookData } = useBooks(page, size); return ( @@ -27,23 +20,12 @@ const LibraryPage = () => { 희망도서 신청하기 - -
- - - - - -
+ + + + + + ); }; From 642af0631b2a127e6206558185de3b95e45f6642 Mon Sep 17 00:00:00 2001 From: gwansikk Date: Fri, 3 May 2024 22:11:53 +0900 Subject: [PATCH 2/9] refactor(member): optimize usePagination hook (#117) --- apps/member/src/hooks/common/usePagination.ts | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/apps/member/src/hooks/common/usePagination.ts b/apps/member/src/hooks/common/usePagination.ts index 0a75ff2e..033e6f26 100644 --- a/apps/member/src/hooks/common/usePagination.ts +++ b/apps/member/src/hooks/common/usePagination.ts @@ -3,29 +3,32 @@ import { useLocation, useNavigate } from 'react-router-dom'; /** * 페이지네이션을 위한 페이지 조작 훅입니다. + * Pagination Component와 같이 사용합니다. */ export const usePagination = (defaultSize: number = 20) => { const navigate = useNavigate(); const location = useLocation(); - const searchParams = new URLSearchParams(location.search); + + const getPage = useCallback(() => { + const searchParams = new URLSearchParams(location.search); + return parseInt(searchParams.get('page') ?? '1', 10) - 1; + }, [location.search]); + const [pagination, setPagination] = useState({ - page: parseInt(searchParams.get('page') ?? '1') - 1, + page: getPage(), size: defaultSize, }); - // 페이지 변경 핸들러 const handlePageChange = useCallback( (page: number) => { - navigate(`?page=${page}`, { replace: false }); + navigate('?page=' + page); }, [navigate], ); useEffect(() => { - const page = parseInt(searchParams.get('page') ?? '1', 10) - 1; - setPagination((prev) => ({ ...prev, page })); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [location.search]); + setPagination((prev) => ({ ...prev, page: getPage() })); + }, [getPage]); - return { page: pagination.page, size: pagination.size, handlePageChange }; + return { ...pagination, handlePageChange }; }; From c44a0b17e28261f53ce79b03699c37c41ec93f0d Mon Sep 17 00:00:00 2001 From: gwansikk Date: Fri, 3 May 2024 22:50:01 +0900 Subject: [PATCH 3/9] refactor(member): improve text overflow handling in `BookCard` (#117) --- .../components/library/BookCard/BookCard.tsx | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/apps/member/src/components/library/BookCard/BookCard.tsx b/apps/member/src/components/library/BookCard/BookCard.tsx index 008bf7fd..a9f316e3 100644 --- a/apps/member/src/components/library/BookCard/BookCard.tsx +++ b/apps/member/src/components/library/BookCard/BookCard.tsx @@ -4,7 +4,7 @@ import Image from '@components/common/Image/Image'; import { PATH_FINDER } from '@constants/path'; import { BOOK_STATE } from '@constants/state'; -import classNames from 'classnames'; +import { cn } from '@utils/string'; import type { BookItem } from '@type/book'; @@ -28,29 +28,31 @@ const BookCard = ({ {title}
-
-

{title}

-

- {author} | {publisher} +

+

+ {title}

+
+

{author}

+

{publisher}

+
{borrowerId ? BOOK_STATE.BORROWED : BOOK_STATE.AVAILABLE} From e80add0abfd406c181973244f2849c07d4bfab06 Mon Sep 17 00:00:00 2001 From: gwansikk Date: Fri, 3 May 2024 22:58:01 +0900 Subject: [PATCH 4/9] chore(member): update BookDetailSection book image size (#117) --- .../BookDetailSection/BookDetailSection.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx b/apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx index 7e590bd0..81b8dce1 100644 --- a/apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx +++ b/apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx @@ -76,10 +76,11 @@ const BookDetailSection = ({ data }: BookDetailSectionProps) => {
{title}
@@ -94,17 +95,16 @@ const BookDetailSection = ({ data }: BookDetailSectionProps) => { - +
+ + +
- +
From 2e91ca7f3a3f8ef5cb598e006cc4b16ee81021ea Mon Sep 17 00:00:00 2001 From: gwansikk Date: Fri, 3 May 2024 23:02:19 +0900 Subject: [PATCH 5/9] refactor(member): update book loan condition status badge text (#117) --- .../BookLoanConditionStatusBadge.tsx | 8 +++++++- apps/member/src/constants/state.ts | 4 +++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/apps/member/src/components/library/BookLoanConditionStatusBadge/BookLoanConditionStatusBadge.tsx b/apps/member/src/components/library/BookLoanConditionStatusBadge/BookLoanConditionStatusBadge.tsx index 750bcb83..12a98887 100644 --- a/apps/member/src/components/library/BookLoanConditionStatusBadge/BookLoanConditionStatusBadge.tsx +++ b/apps/member/src/components/library/BookLoanConditionStatusBadge/BookLoanConditionStatusBadge.tsx @@ -1,5 +1,7 @@ import { Badge, BadgeColorType } from '@clab/design-system'; +import { BOOK_STATE } from '@constants/state'; + import type { BookLoanRecordConditionType } from '@type/book'; interface BookLoanConditionStatusBadgeProps @@ -9,7 +11,11 @@ const BookLoanConditionStatusBadge = ({ borrowedAt, returnedAt, }: BookLoanConditionStatusBadgeProps) => { - const text = !borrowedAt ? '대기' : !returnedAt ? '대여중' : '반납완료'; + const text = !borrowedAt + ? BOOK_STATE.WAIT + : !returnedAt + ? BOOK_STATE.BORROWED + : BOOK_STATE.RETURN; const color: BadgeColorType = !borrowedAt ? 'red' : !returnedAt diff --git a/apps/member/src/constants/state.ts b/apps/member/src/constants/state.ts index e637e63e..e6091583 100644 --- a/apps/member/src/constants/state.ts +++ b/apps/member/src/constants/state.ts @@ -1,6 +1,8 @@ export const BOOK_STATE = { - BORROWED: '대여중', + WAIT: '대기', AVAILABLE: '대여가능', + BORROWED: '대여중', + RETURN: '반납완료', } as const; export const DATE_FORMAT = { From 51c89d90daeee8b5ea7c7221c1c9a6c9c72b61cd Mon Sep 17 00:00:00 2001 From: gwansikk Date: Fri, 3 May 2024 23:11:45 +0900 Subject: [PATCH 6/9] refactor(member): add `StatusBadge` to `MyHistorySection` (#117) --- .../my/MyHistorySection/MyHistorySection.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/apps/member/src/components/my/MyHistorySection/MyHistorySection.tsx b/apps/member/src/components/my/MyHistorySection/MyHistorySection.tsx index b7569ab9..242193ed 100644 --- a/apps/member/src/components/my/MyHistorySection/MyHistorySection.tsx +++ b/apps/member/src/components/my/MyHistorySection/MyHistorySection.tsx @@ -1,10 +1,9 @@ import { useCallback } from 'react'; -import { Badge } from '@clab/design-system'; - import EmptyBox from '@components/common/EmptyBox/EmptyBox'; import ListButton from '@components/common/ListButton/ListButton'; import Section from '@components/common/Section/Section'; +import BookLoanConditionStatusBadge from '@components/library/BookLoanConditionStatusBadge/BookLoanConditionStatusBadge'; import { MY_MESSAGE } from '@constants/message'; import { PATH_FINDER } from '@constants/path'; @@ -67,14 +66,17 @@ const MyHistorySection = ({ title, data }: MyHistorySectionProps) => { return (

- - {returnedAt ? '반납완료' : '대출중'} - + {bookTitle}

-

- {toYYMMDD(borrowedAt ?? '')} -

+ {returnedAt && ( +

+ {toYYMMDD(returnedAt)} +

+ )} ); } From 5becc2923224ac424192ce0c5a493c7a1aaf6a22 Mon Sep 17 00:00:00 2001 From: gwansikk Date: Fri, 3 May 2024 23:14:38 +0900 Subject: [PATCH 7/9] =?UTF-8?q?refactor(member):=20=EB=8F=84=EC=84=9C?= =?UTF-8?q?=EA=B4=80=20=EC=B1=85=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20(#117)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../library/LibraryBooksSection/LibraryBooksSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/member/src/components/library/LibraryBooksSection/LibraryBooksSection.tsx b/apps/member/src/components/library/LibraryBooksSection/LibraryBooksSection.tsx index 21231b43..f9817bfe 100644 --- a/apps/member/src/components/library/LibraryBooksSection/LibraryBooksSection.tsx +++ b/apps/member/src/components/library/LibraryBooksSection/LibraryBooksSection.tsx @@ -7,7 +7,7 @@ import { useBooks } from '@hooks/queries/useBooks'; import BookCard from '../BookCard/BookCard'; const LibraryBooksSection = () => { - const { page, size, handlePageChange } = usePagination(); + const { page, size, handlePageChange } = usePagination(16); const { data } = useBooks(page, size); From 77f59a699702a21f23a6855e87dab4516fcec106 Mon Sep 17 00:00:00 2001 From: gwansikk Date: Fri, 3 May 2024 23:15:18 +0900 Subject: [PATCH 8/9] refactor(member): update useBooks queryKey (#117) --- apps/member/src/hooks/queries/useBooks.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/member/src/hooks/queries/useBooks.ts b/apps/member/src/hooks/queries/useBooks.ts index a3464c58..12f39543 100644 --- a/apps/member/src/hooks/queries/useBooks.ts +++ b/apps/member/src/hooks/queries/useBooks.ts @@ -3,9 +3,12 @@ import { useSuspenseQuery } from '@tanstack/react-query'; import { getBooks } from '@api/book'; import { QUERY_KEY } from '@constants/key'; +/** + * 도서 목록을 조회합니다. + */ export const useBooks = (page = 0, size = 6) => { return useSuspenseQuery({ - queryKey: [QUERY_KEY.BOOK, page, size], + queryKey: [QUERY_KEY.BOOK, { page, size }], queryFn: () => getBooks(page, size), }); }; From 45e1d178734634dc18596a34daf98f26e8cb3997 Mon Sep 17 00:00:00 2001 From: gwansikk Date: Fri, 3 May 2024 23:26:31 +0900 Subject: [PATCH 9/9] =?UTF-8?q?chore(member):=20=EB=8F=84=EC=84=9C?= =?UTF-8?q?=EA=B4=80=20API=20Hooks=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD=20(#117)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../library/LibraryBooksSection/LibraryBooksSection.tsx | 2 +- .../library/LibraryNewBooksSection/LibraryNewBooksSection.tsx | 2 +- apps/member/src/hooks/queries/book/index.ts | 2 ++ apps/member/src/hooks/queries/{ => book}/useBookDetails.ts | 0 apps/member/src/hooks/queries/{ => book}/useBooks.ts | 0 apps/member/src/hooks/queries/index.ts | 1 + apps/member/src/pages/LibraryDetailPage/LibraryDetailPage.tsx | 2 +- 7 files changed, 6 insertions(+), 3 deletions(-) create mode 100644 apps/member/src/hooks/queries/book/index.ts rename apps/member/src/hooks/queries/{ => book}/useBookDetails.ts (100%) rename apps/member/src/hooks/queries/{ => book}/useBooks.ts (100%) diff --git a/apps/member/src/components/library/LibraryBooksSection/LibraryBooksSection.tsx b/apps/member/src/components/library/LibraryBooksSection/LibraryBooksSection.tsx index f9817bfe..4850ac07 100644 --- a/apps/member/src/components/library/LibraryBooksSection/LibraryBooksSection.tsx +++ b/apps/member/src/components/library/LibraryBooksSection/LibraryBooksSection.tsx @@ -2,7 +2,7 @@ import Pagination from '@components/common/Pagination/Pagination'; import { Section } from '@components/common/Section'; import { usePagination } from '@hooks/common/usePagination'; -import { useBooks } from '@hooks/queries/useBooks'; +import { useBooks } from '@hooks/queries/book'; import BookCard from '../BookCard/BookCard'; diff --git a/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx b/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx index ee1301e5..0862bbf5 100644 --- a/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx +++ b/apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx @@ -4,7 +4,7 @@ import Image from '@components/common/Image/Image'; import Section from '@components/common/Section/Section'; import { PATH_FINDER } from '@constants/path'; -import { useBooks } from '@hooks/queries/useBooks'; +import { useBooks } from '@hooks/queries/book'; const LibraryNewBooksSection = () => { const { data } = useBooks(0, 4); diff --git a/apps/member/src/hooks/queries/book/index.ts b/apps/member/src/hooks/queries/book/index.ts new file mode 100644 index 00000000..9ec63b0f --- /dev/null +++ b/apps/member/src/hooks/queries/book/index.ts @@ -0,0 +1,2 @@ +export * from './useBooks'; +export * from './useBookDetails'; diff --git a/apps/member/src/hooks/queries/useBookDetails.ts b/apps/member/src/hooks/queries/book/useBookDetails.ts similarity index 100% rename from apps/member/src/hooks/queries/useBookDetails.ts rename to apps/member/src/hooks/queries/book/useBookDetails.ts diff --git a/apps/member/src/hooks/queries/useBooks.ts b/apps/member/src/hooks/queries/book/useBooks.ts similarity index 100% rename from apps/member/src/hooks/queries/useBooks.ts rename to apps/member/src/hooks/queries/book/useBooks.ts diff --git a/apps/member/src/hooks/queries/index.ts b/apps/member/src/hooks/queries/index.ts index f8c3851c..0d7f7446 100644 --- a/apps/member/src/hooks/queries/index.ts +++ b/apps/member/src/hooks/queries/index.ts @@ -36,3 +36,4 @@ export * from './useScheduleDeleteMutation'; export * from './useUserInfoMutation'; export * from './useActivityGroupMemberMy'; export * from './book-loan-record'; +export * from './book'; diff --git a/apps/member/src/pages/LibraryDetailPage/LibraryDetailPage.tsx b/apps/member/src/pages/LibraryDetailPage/LibraryDetailPage.tsx index afbb7a25..65c9aa05 100644 --- a/apps/member/src/pages/LibraryDetailPage/LibraryDetailPage.tsx +++ b/apps/member/src/pages/LibraryDetailPage/LibraryDetailPage.tsx @@ -7,7 +7,7 @@ import BookLoanHistorySection from '@components/library/BookLoanHistorySection/B import { LIBRARY_MESSAGE } from '@constants/message'; import { PATH } from '@constants/path'; -import { useBookDetails } from '@hooks/queries/useBookDetails'; +import { useBookDetails } from '@hooks/queries/book'; const LibraryDetailPage = () => { const { id } = useParams<{ id: string }>();