From 4ea72c7ac013472cfe195e18f4217aa52273aa9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EA=B4=80=EC=8B=9D?= <39869096+gwansikk@users.noreply.github.com> Date: Mon, 1 Apr 2024 22:09:58 +0900 Subject: [PATCH 1/7] =?UTF-8?q?fix(member):=20macOS=20Safari=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=B1=85=20=ED=91=9C=EC=A7=80=20overflow=20?= =?UTF-8?q?=ED=98=84=EC=83=81=20(#83)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/library/BookDetailSection/BookDetailSection.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx b/apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx index 0be06ee5..64430e50 100644 --- a/apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx +++ b/apps/member/src/components/library/BookDetailSection/BookDetailSection.tsx @@ -48,12 +48,13 @@ const BookDetailSection = ({ data }: BookDetailSectionProps) => { return (
-
+
{title}
From 28d78815ec4538afd65b2a57e335b7f1f290c70e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EA=B4=80=EC=8B=9D?= <39869096+gwansikk@users.noreply.github.com> Date: Tue, 2 Apr 2024 14:04:01 +0900 Subject: [PATCH 2/7] feat(design-system): add DetailsList Component (#83) --- .../MembershipInfoModal.tsx | 55 +++++-------------- .../src/DetailsList/DetailsList.tsx | 29 ++++++++++ .../src/DetailsList/DetailsList.types.ts | 10 ++++ .../design-system/src/DetailsList/index.ts | 1 + packages/design-system/src/index.ts | 1 + 5 files changed, 55 insertions(+), 41 deletions(-) create mode 100644 packages/design-system/src/DetailsList/DetailsList.tsx create mode 100644 packages/design-system/src/DetailsList/DetailsList.types.ts create mode 100644 packages/design-system/src/DetailsList/index.ts diff --git a/apps/member/src/components/membership/MembershipInfoModal/MembershipInfoModal.tsx b/apps/member/src/components/membership/MembershipInfoModal/MembershipInfoModal.tsx index cf34264b..aeb02128 100644 --- a/apps/member/src/components/membership/MembershipInfoModal/MembershipInfoModal.tsx +++ b/apps/member/src/components/membership/MembershipInfoModal/MembershipInfoModal.tsx @@ -4,22 +4,13 @@ import MembershipCategoryBadge from '../MembershipCategoryBadge/MembershipCatego import MembershipStatusBadge from '../MembershipStatusBadge/MembershipStatusBadge'; import { formatWon } from '@utils/string'; import { formattedDate } from '@utils/date'; +import { DetailsList } from '@clab/design-system'; import type { MembershipFeeType } from '@type/membershipFee'; interface MembershipInfoModalProps { data: MembershipFeeType; } -interface MembershipInfoModalUlProps { - title?: string; - children: React.ReactNode; -} - -interface MembershipInfoModalLiProps { - label: string; - children: React.ReactNode; -} - const MembershipInfoModal = ({ data }: MembershipInfoModalProps) => { const { imageUrl, @@ -39,44 +30,26 @@ const MembershipInfoModal = ({ data }: MembershipInfoModalProps) => {
- - + + - - + + - - {content} - + + {content} + {`₩${formatWon(amount)}`} - - + + {`${memberName} (${memberId})`} - - + + {formattedDate(createdAt)} - - + +
); }; -MembershipInfoModal.Ul = ({ title, children }: MembershipInfoModalUlProps) => { - return ( - - ); -}; - -MembershipInfoModal.Li = ({ label, children }: MembershipInfoModalLiProps) => { - return ( -
  • - {label} - {children} -
  • - ); -}; - export default MembershipInfoModal; diff --git a/packages/design-system/src/DetailsList/DetailsList.tsx b/packages/design-system/src/DetailsList/DetailsList.tsx new file mode 100644 index 00000000..7e96fd1f --- /dev/null +++ b/packages/design-system/src/DetailsList/DetailsList.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import type { + DetailsListItemProps, + DetailsListProps, +} from './DetailsList.types'; + +const DetailsList = ({ title, children }: DetailsListProps) => { + return ( + + ); +}; + +const DetailsListItem = ({ label, children }: DetailsListItemProps) => { + return ( +
  • + {label} + {children} +
  • + ); +}; + +DetailsList.Item = DetailsListItem; + +DetailsList.displayName = 'DetailsList'; + +export default DetailsList; diff --git a/packages/design-system/src/DetailsList/DetailsList.types.ts b/packages/design-system/src/DetailsList/DetailsList.types.ts new file mode 100644 index 00000000..bf656ebb --- /dev/null +++ b/packages/design-system/src/DetailsList/DetailsList.types.ts @@ -0,0 +1,10 @@ +import { PropsWithChildren } from 'react'; + +export interface DetailsListProps extends PropsWithChildren { + title?: string; +} + +export interface DetailsListItemProps { + label: string; + children: React.ReactNode; +} diff --git a/packages/design-system/src/DetailsList/index.ts b/packages/design-system/src/DetailsList/index.ts new file mode 100644 index 00000000..124e4653 --- /dev/null +++ b/packages/design-system/src/DetailsList/index.ts @@ -0,0 +1 @@ +export { default as DetailsList } from './DetailsList'; diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index f2480e9e..6331d253 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -11,3 +11,4 @@ export * from './Badge'; export * from './Checkbox'; export * from './Tabs'; export * from './Table'; +export * from './DetailsList'; From 2369a5333b5a3d42dbdfbed364ae82ba1019e5e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EA=B4=80=EC=8B=9D?= <39869096+gwansikk@users.noreply.github.com> Date: Tue, 2 Apr 2024 15:11:38 +0900 Subject: [PATCH 3/7] =?UTF-8?q?refactor(member):=20=EB=8F=84=EC=84=9C=20?= =?UTF-8?q?=EB=8C=80=EC=B6=9C=20=EB=82=B4=EC=97=AD=20=EC=A1=B0=ED=9A=8C=20?= =?UTF-8?q?API=20=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=20(#83)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/member/src/api/book.ts | 36 ++++++++++++------- .../components/panels/BookPanel/BookPanel.tsx | 6 ++-- apps/member/src/hooks/queries/index.ts | 1 + .../hooks/queries/useBookLoanRecordById.ts | 17 --------- .../queries/useBookLoanRecordConditions.ts | 33 +++++++++++++++++ apps/member/src/pages/MyPage/MyPage.tsx | 6 ++-- 6 files changed, 65 insertions(+), 34 deletions(-) delete mode 100644 apps/member/src/hooks/queries/useBookLoanRecordById.ts create mode 100644 apps/member/src/hooks/queries/useBookLoanRecordConditions.ts diff --git a/apps/member/src/api/book.ts b/apps/member/src/api/book.ts index 95ab853d..0b80556e 100644 --- a/apps/member/src/api/book.ts +++ b/apps/member/src/api/book.ts @@ -6,12 +6,21 @@ import type { BookLoanRecordConditionType, BookLoanRecordItem, } from '@type/book'; -import type { BaseResponse, PaginationType } from '@type/api'; +import type { + BaseResponse, + PaginationPramsType, + PaginationType, +} from '@type/api'; interface PostBorrowBookArgs extends BookLoanRecordItem { memberId: string; } +interface GetBookLoanRecordConditionsPrams extends PaginationPramsType { + bookId?: number; + borrowerId?: string; + isReturned?: boolean; +} /** * 도서 목록 조회 */ @@ -23,7 +32,6 @@ export const getBooks = async (page: number, size: number) => { return data; }; - /** * 도서 상세 조회 */ @@ -34,7 +42,6 @@ export const getBookDetail = async (id: number) => { return data; }; - /** * 나의 대출내역 조회 */ @@ -46,7 +53,6 @@ export const getMyBooks = async (id: string, page: number, size: number) => { return data.items.filter((book) => book.borrowerId === id); }; - /** * 도서 대출 */ @@ -59,7 +65,6 @@ export const postBorrowBook = async (body: PostBorrowBookArgs) => { return { memberId: body.memberId, bookId: body.bookId, data }; }; - /** * 도서 반납 */ @@ -71,7 +76,6 @@ export const postReturnBook = async (body: BookLoanRecordItem) => { return { memberId: body.borrowerId, bookId: body.bookId, data }; }; - /** * 도서 연장 */ @@ -83,20 +87,26 @@ export const postExtendBook = async (body: BookLoanRecordItem) => { return { memberId: body.borrowerId, bookId: data }; }; - /** - * 도서 대출 내역 검색 + * 도서 대출 내역 조회 */ -export const getBookLoanByMemberId = async ( - borrowerId: string, +export const getBookLoanRecordConditions = async ({ + bookId, + borrowerId, + isReturned, page = 0, size = 20, -) => { - const params = { borrowerId, page, size }; +}: GetBookLoanRecordConditionsPrams) => { const { data } = await server.get< PaginationType >({ - url: createCommonPagination(END_POINT.BOOK_LOAN_CONDITIONS, params), + url: createCommonPagination(END_POINT.BOOK_LOAN_CONDITIONS, { + bookId, + borrowerId, + isReturned, + page, + size, + }), }); return data; diff --git a/apps/member/src/components/panels/BookPanel/BookPanel.tsx b/apps/member/src/components/panels/BookPanel/BookPanel.tsx index 0d364f62..bc1d25c8 100644 --- a/apps/member/src/components/panels/BookPanel/BookPanel.tsx +++ b/apps/member/src/components/panels/BookPanel/BookPanel.tsx @@ -7,13 +7,13 @@ import useModal from '@hooks/common/useModal'; import { useBookLoanReturnMutation } from '@hooks/queries/useBookLoanReturnMutation'; import { useBookLoanExtendMutation } from '@hooks/queries/useBookLoanExtendMutation'; import Select from '@components/common/Select/Select'; -import { useBookLoanRecordByMemberId } from '@hooks/queries/useBookLoanRecordById'; import { checkDueDate, checkExtendProgress, checkProgress, now, } from '@utils/date'; +import { useBookLoanRecordConditions } from '@hooks/queries'; interface BookPanelProps { memberId: string; @@ -40,7 +40,9 @@ const ActionButton = ({ const BookPanel = ({ memberId, data }: BookPanelProps) => { const { openModal } = useModal(); - const { data: myLoanBookData } = useBookLoanRecordByMemberId(memberId); + const { data: myLoanBookData } = useBookLoanRecordConditions({ + borrowerId: memberId, + }); const { bookReturnMutate } = useBookLoanReturnMutation(); const { bookExtendMutate } = useBookLoanExtendMutation(); diff --git a/apps/member/src/hooks/queries/index.ts b/apps/member/src/hooks/queries/index.ts index e5544a5e..f1cde51c 100644 --- a/apps/member/src/hooks/queries/index.ts +++ b/apps/member/src/hooks/queries/index.ts @@ -30,3 +30,4 @@ export * from './usePosts'; export * from './useSchedule'; export * from './useUserInfoMutation'; export * from './useActivityGroupMemberMy'; +export * from './useBookLoanRecordConditions'; diff --git a/apps/member/src/hooks/queries/useBookLoanRecordById.ts b/apps/member/src/hooks/queries/useBookLoanRecordById.ts deleted file mode 100644 index 3948057d..00000000 --- a/apps/member/src/hooks/queries/useBookLoanRecordById.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { getBookLoanByMemberId } from '@api/book'; -import { QUERY_KEY } from '@constants/key'; -import { useSuspenseQuery } from '@tanstack/react-query'; - -/** - * 도서를 대출한 회원의 ID를 기준으로 조회합니다. - */ -export const useBookLoanRecordByMemberId = ( - borrowerId: string, - page = 0, - size = 20, -) => { - return useSuspenseQuery({ - queryFn: () => getBookLoanByMemberId(borrowerId, page, size), - queryKey: [QUERY_KEY.BOOK_LOAN_RECORD, borrowerId], - }); -}; diff --git a/apps/member/src/hooks/queries/useBookLoanRecordConditions.ts b/apps/member/src/hooks/queries/useBookLoanRecordConditions.ts new file mode 100644 index 00000000..14f84850 --- /dev/null +++ b/apps/member/src/hooks/queries/useBookLoanRecordConditions.ts @@ -0,0 +1,33 @@ +import { getBookLoanRecordConditions } from '@api/book'; +import { QUERY_KEY } from '@constants/key'; +import { useSuspenseQuery } from '@tanstack/react-query'; +import type { PaginationPramsType } from '@type/api'; + +interface UseBookLoanRecordConditionsPrams extends PaginationPramsType { + bookId?: number; + borrowerId?: string; + isReturned?: boolean; +} + +/** + * 도서 대출 내역을 조회합니다. + */ +export const useBookLoanRecordConditions = ({ + bookId, + borrowerId, + isReturned, + page = 0, + size = 20, +}: UseBookLoanRecordConditionsPrams) => { + return useSuspenseQuery({ + queryFn: () => + getBookLoanRecordConditions({ + bookId, + borrowerId, + isReturned, + page, + size, + }), + queryKey: [QUERY_KEY.BOOK_LOAN_RECORD, borrowerId], + }); +}; diff --git a/apps/member/src/pages/MyPage/MyPage.tsx b/apps/member/src/pages/MyPage/MyPage.tsx index 314aa84e..0bc844b3 100644 --- a/apps/member/src/pages/MyPage/MyPage.tsx +++ b/apps/member/src/pages/MyPage/MyPage.tsx @@ -12,7 +12,7 @@ import { useMyProfile } from '@hooks/queries/useMyProfile'; import { Grid } from '@clab/design-system'; import MyMembershipHistorySection from '@components/my/MyMembershipHistorySection/MyMembershipHistorySection'; import MyActivityGroupSection from '@components/my/MyActivityGroupSection/MyActivityGroupSection'; -import { useBookLoanRecordByMemberId } from '@hooks/queries/useBookLoanRecordById'; +import { useBookLoanRecordConditions } from '@hooks/queries/useBookLoanRecordConditions'; const MyPage = () => { const { data: myProfile } = useMyProfile(); @@ -23,7 +23,9 @@ const MyPage = () => { memberId: myProfile.id, size: 5, }); - const { data: myBookLoanRecord } = useBookLoanRecordByMemberId(myProfile.id); + const { data: myBookLoanRecord } = useBookLoanRecordConditions({ + borrowerId: myProfile.id, + }); const { data: myActivityGroup } = useActivityGroupMemberMy(); return ( From 752921cfc79f2c018e563ff7cbf2d932fa696391 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EA=B4=80=EC=8B=9D?= <39869096+gwansikk@users.noreply.github.com> Date: Tue, 2 Apr 2024 15:29:13 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refactor(design-system):=20tabs=20UI=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0=20(#83)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/design-system/src/Tabs/Tabs.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/design-system/src/Tabs/Tabs.tsx b/packages/design-system/src/Tabs/Tabs.tsx index 529ff24b..f82a3fe7 100644 --- a/packages/design-system/src/Tabs/Tabs.tsx +++ b/packages/design-system/src/Tabs/Tabs.tsx @@ -15,18 +15,16 @@ const Tabs = ({ options, value, onChange }: TabsProps) => { ); return ( -
    +
    {options.map((option, index) => ( handleOptionClick(option.value)} > - - {option.icon} - + {option.icon} {option.value} ))} @@ -39,7 +37,7 @@ const Option = ({ className, children, ...rest }: TabsOptionProps) => { - )} -
    + + {title} +
    +
    +

    {title}

    + + {author} + {publisher} + {category} + + + {borrowerId ? BOOK_STATE.BORROWED : BOOK_STATE.AVAILABLE} + + + +
    +
    -
    +
    ); }; diff --git a/apps/member/src/constants/state.ts b/apps/member/src/constants/state.ts index 822fd9e2..e637e63e 100644 --- a/apps/member/src/constants/state.ts +++ b/apps/member/src/constants/state.ts @@ -1,5 +1,5 @@ export const BOOK_STATE = { - BORROWED: '대출중', + BORROWED: '대여중', AVAILABLE: '대여가능', } as const; From c0da224281a9ecab4f96202e232e611949f4bd6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EA=B4=80=EC=8B=9D?= <39869096+gwansikk@users.noreply.github.com> Date: Tue, 2 Apr 2024 19:33:37 +0900 Subject: [PATCH 7/7] =?UTF-8?q?refactor(member):=20=EB=8F=84=EC=84=9C?= =?UTF-8?q?=EA=B4=80=20UI=20=EA=B0=9C=EC=84=A0=20(#83)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/library/BookCard/BookCard.tsx | 6 +-- .../LibraryNewBooksSection.tsx | 42 +++++++++++++++++++ .../src/pages/LibraryPage/LibraryPage.tsx | 29 ++++++------- 3 files changed, 57 insertions(+), 20 deletions(-) create mode 100644 apps/member/src/components/library/LibraryNewBooksSection/LibraryNewBooksSection.tsx 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 = () => { 희망도서 신청하기 +
    - - - - -
    -
    - + + + -
    - -