refactor(member): 마이페이지 도서 대출 내역 API 연동 (#78)

kgu-clab · Mar 27, 2024 · 35b6471 · 35b6471
1 parent 0111249
commit 35b6471
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 15 deletions.
diff --git a/apps/member/src/api/book.ts b/apps/member/src/api/book.ts
@@ -1,7 +1,11 @@
 import { server } from './server';
 import { createCommonPagination } from '@utils/api';
 import { END_POINT } from '@constants/api';
-import type { BookItem, BookLoanRecordItem } from '@type/book';
+import type {
+  BookItem,
+  BookLoanRecordConditionType,
+  BookLoanRecordItem,
+} from '@type/book';
 import type { BaseResponse, PaginationType } from '@type/api';
 
 interface PostBorrowBookArgs extends BookLoanRecordItem {
@@ -89,7 +93,9 @@ export const getBookLoanByMemberId = async (
   size = 20,
 ) => {
   const params = { borrowerId, page, size };
-  const { data } = await server.get<PaginationType<BookLoanRecordItem>>({
+  const { data } = await server.get<
+    PaginationType<BookLoanRecordConditionType>
+  >({
     url: createCommonPagination(END_POINT.BOOK_LOAN_CONDITIONS, params),
   });
 

diff --git a/apps/member/src/components/my/MyHistorySection/MyHistorySection.tsx b/apps/member/src/components/my/MyHistorySection/MyHistorySection.tsx
@@ -1,17 +1,20 @@
+import { useCallback } from 'react';
 import ListButton from '@components/common/ListButton/ListButton';
 import Section from '@components/common/Section/Section';
 import { toYYMMDD } from '@utils/date';
-import type { BoardItem } from '@type/board';
-import type { NotificationItem } from '@type/notification';
 import { CommentItem } from '@type/comment';
 import { PATH_FINDER } from '@constants/path';
 import { titleToCategory } from '@utils/community';
 import useModal from '@hooks/common/useModal';
-import { useCallback } from 'react';
-
+import type { BookLoanRecordConditionType } from '@type/book';
+import type { BoardItem } from '@type/board';
+import type { NotificationItem } from '@type/notification';
+import { Badge } from '@clab/design-system';
 interface MyHistorySectionProps {
   title: string;
-  data: Array<NotificationItem | BoardItem | CommentItem>;
+  data: Array<
+    NotificationItem | BoardItem | CommentItem | BookLoanRecordConditionType
+  >;
 }
 
 const MyHistorySection = ({ title, data }: MyHistorySectionProps) => {
@@ -32,8 +35,10 @@ const MyHistorySection = ({ title, data }: MyHistorySectionProps) => {
       <Section.Header title={title} />
       <Section.Body className="text-sm">
         {data.map((item) => {
+          /**
+           * 나의 댓글
+           */
           if ('boardId' in item) {
-            //  CommentItem
             const { id, boardId, boardCategory, content, createdAt } =
               item as CommentItem;
             return (
@@ -48,17 +53,43 @@ const MyHistorySection = ({ title, data }: MyHistorySectionProps) => {
                 <p className="text-clab-main-light">{toYYMMDD(createdAt)}</p>
               </ListButton>
             );
-          } else if ('content' in item) {
-            // NotificationItem
+          }
+          /**
+           * 도서 대출 내역
+           */
+          if ('bookId' in item) {
+            const { bookId, bookTitle, borrowedAt, returnedAt } =
+              item as BookLoanRecordConditionType;
+            return (
+              <ListButton key={bookId} to={PATH_FINDER.BOOK_DETAIL(bookId)}>
+                <p className="pr-4 space-x-2 truncate grow">
+                  <Badge color={returnedAt ? 'green' : 'yellow'}>
+                    {returnedAt ? '반납완료' : '대출중'}
+                  </Badge>
+                  <span>{bookTitle}</span>
+                </p>
+                <p className="text-clab-main-light">
+                  {toYYMMDD(borrowedAt || '')}
+                </p>
+              </ListButton>
+            );
+          }
+          /**
+           * 지난 알림
+           */
+          if ('content' in item) {
             const { id, content, createdAt } = item as CommentItem;
             return (
               <ListButton key={id} onClick={() => handleAlarmClick(content)}>
                 <p className="pr-4 truncate grow">{content}</p>
                 <p className="text-clab-main-light">{toYYMMDD(createdAt)}</p>
               </ListButton>
             );
-          } else if ('title' in item) {
-            // BoardItem
+          }
+          /**
+           * 나의 게시글
+           */
+          if ('title' in item) {
             const { id, category, title, createdAt } = item as BoardItem;
             return (
               <ListButton

diff --git a/apps/member/src/constants/path.ts b/apps/member/src/constants/path.ts
@@ -44,5 +44,5 @@ export const PATH_FINDER = {
   ACTIVITY_CONFIG: (id: IDType) => createPath(PATH.ACTIVITY, id, 'config'),
   ACTIVITY_ASSIGNMENT: (groupId: IDType, id: IDType) =>
     createPath(PATH.ACTIVITY, groupId, id),
-  BOOK_DETAIL: (id: string) => createPath(PATH.LIBRARY, id),
+  BOOK_DETAIL: (id: number) => createPath(PATH.LIBRARY, id),
 } as const;
diff --git a/apps/member/src/pages/MyPage/MyPage.tsx b/apps/member/src/pages/MyPage/MyPage.tsx
@@ -6,10 +6,13 @@ import {
   useMyBoards,
   useMyComments,
   useMembershipFee,
+  useActivityGroupMemberMy,
 } from '@hooks/queries';
 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';
 
 const MyPage = () => {
   const { data: myProfile } = useMyProfile();
@@ -19,16 +22,21 @@ const MyPage = () => {
   const { data: myMembershipFee } = useMembershipFee({
     memberId: myProfile.id,
   });
+  const { data: myBookLoanRecord } = useBookLoanRecordByMemberId(myProfile.id);
+  const { data: myActivityGroup } = useActivityGroupMemberMy();
 
   return (
     <Content>
       <MyProfileSection data={myProfile} />
       <MyHistorySection title="지난 알림" data={myNotificationsData.items} />
       <Grid col={2} gap="md">
         <MyMembershipHistorySection data={myMembershipFee.items} />
-        <MyHistorySection title="도서 대출 내역" data={[]} />
+        <MyHistorySection
+          title="도서 대출 내역"
+          data={myBookLoanRecord.items}
+        />
       </Grid>
-      <MyHistorySection title="나의 활동" data={[]} />
+      <MyActivityGroupSection data={myActivityGroup.items} />
       <Grid col={2} gap="md">
         <MyHistorySection title="나의 게시글" data={myBoardsData.items} />
         <MyHistorySection title="나의 댓글" data={myCommentsData.items} />

diff --git a/apps/member/src/types/book.ts b/apps/member/src/types/book.ts
@@ -18,3 +18,10 @@ export interface BookLoanRecordItem {
   returnedAt?: string;
   loanExtensionDate?: string;
 }
+
+export interface BookLoanRecordConditionType extends BookLoanRecordItem {
+  bookTitle: string;
+  bookImageUrl: string;
+  dueDate: string | null;
+  loanExtensionCount: number | null;
+}