feat(member): 마이페이지 내 회비 신청 내역 API 연동 (#78)

apps/member/src/api/membershipFee.ts

@@ -2,31 +2,46 @@ import { server } from './server';
 import { END_POINT } from '@constants/api';
 import { createCommonPagination } from '@utils/api';
 import { postUploadedFileMembershipFee } from './uploadedFile';
-import type { ArgsWithFiles, BaseResponse, PaginationType } from '@type/api';
+import type {
+  ArgsWithFiles,
+  BaseResponse,
+  PaginationPramsType,
+  PaginationType,
+} from '@type/api';
 import type { MembershipFeeType } from '@type/membershipFee';
 
-interface postMembershipFeeArgs extends ArgsWithFiles {
-  body: MembershipFeeType;
+interface GetMembershipFeeParamsType extends PaginationPramsType {
+  memberId?: string;
+  memberName?: string;
+  category?: string;
 }
 
+interface PostMembershipFeePramsType extends ArgsWithFiles {
+  body: MembershipFeeType;
+}
 /**
- * 회비 신청 정보 조회
+ * 회비 정보 조회
  */
-export const getMembershipFee = async (page: number, size: number) => {
-  const params = { page, size };
+export const getMembershipFee = async ({
+  memberId,
+  memberName,
+  category,
+  page,
+  size,
+}: GetMembershipFeeParamsType) => {
+  const params = { memberId, memberName, category, page, size };
   const { data } = await server.get<PaginationType<MembershipFeeType>>({
     url: createCommonPagination(END_POINT.MEMBERSHIP_FEE, params),
   });
   return data;
 };
-
 /**
  * 회비 신청
  */
 export const postMembershipFee = async ({
   body,
   multipartFile,
-}: postMembershipFeeArgs) => {
+}: PostMembershipFeePramsType) => {
   if (multipartFile) {
     const data = await postUploadedFileMembershipFee({
       storagePeriod: 365,

apps/member/src/components/my/MyMembershipHistorySection/MyMembershipHistorySection.tsx

@@ -0,0 +1,67 @@
+import Image from '@components/common/Image/Image';
+import ListButton from '@components/common/ListButton/ListButton';
+import Section from '@components/common/Section/Section';
+import useModal from '@hooks/common/useModal';
+import { createImageUrl } from '@utils/api';
+import { toYYMMDD } from '@utils/date';
+import { formatWon } from '@utils/string';
+import type { MembershipFeeType } from '@type/membershipFee';
+import { Badge } from '@clab/design-system';
+
+interface MyMembershipFeeProps {
+  data: Array<MembershipFeeType>;
+}
+
+const title = '회비 신청 내역';
+
+const MyMembershipHistorySection = ({ data }: MyMembershipFeeProps) => {
+  const { openModal } = useModal();
+
+  const onClickShow = (membership: MembershipFeeType) => {
+    openModal({
+      title: title,
+      content: (
+        <div className="space-y-2">
+          <Image
+            src={createImageUrl(membership.imageUrl || '')}
+            className="border rounded-lg"
+            alt="증빙자료"
+          />
+          <ul className="space-y-2 text-black">
+            <li className="space-x-2">
+              <Badge color="blue">{membership.category.toUpperCase()}</Badge>
+              <Badge color="yellow">대기</Badge>
+            </li>
+            <li>내용: {membership.content}</li>
+            <li>금액: ₩{formatWon(membership.amount)}</li>
+            <li>신청일: {toYYMMDD(membership.createdAt)}</li>
+          </ul>
+        </div>
+      ),
+    });
+  };
+
+  return (
+    <Section>
+      <Section.Header title={title} />
+      <Section.Body className="text-sm">
+        {data.map((membership) => (
+          <ListButton
+            key={membership.id}
+            onClick={() => onClickShow(membership)}
+          >
+            <p className="pr-4 space-x-2 truncate grow">
+              <Badge color="blue">{membership.category.toUpperCase()}</Badge>
+              <span>{membership.content}</span>
+            </p>
+            <p className="text-clab-main-light">
+              {toYYMMDD(membership.createdAt)}
+            </p>
+          </ListButton>
+        ))}
+      </Section.Body>
+    </Section>
+  );
+};
+
+export default MyMembershipHistorySection;

apps/member/src/hooks/queries/useMembershipFee.ts

@@ -1,10 +1,32 @@
 import { QUERY_KEY } from '@constants/key';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { getMembershipFee } from '@api/membershipFee';
+import { PaginationPramsType } from '@type/api';
 
-export const useMembershipFee = (page = 0, size = 20) => {
+interface UseMembershipFeeParamsType extends PaginationPramsType {
+  memberId?: string;
+  memberName?: string;
+  category?: string;
+}
+/**
+ * 회비 정보를 조회합니다.
+ */
+export const useMembershipFee = ({
+  memberId,
+  memberName,
+  category,
+  page = 0,
+  size = 20,
+}: UseMembershipFeeParamsType) => {
   return useSuspenseQuery({
-    queryKey: [QUERY_KEY.MEMBERSHIP_FEE, page, size],
-    queryFn: () => getMembershipFee(page, size),
+    queryKey: [QUERY_KEY.MEMBERSHIP_FEE],
+    queryFn: () =>
+      getMembershipFee({
+        memberId,
+        memberName,
+        category,
+        page,
+        size,
+      }),
   });
 };

apps/member/src/pages/MyPage/MyPage.tsx

@@ -1,22 +1,31 @@
 import Content from '@components/common/Content/Content';
 import MyHistorySection from '@components/my/MyHistorySection/MyHistorySection';
 import MyProfileSection from '@components/my/MyProfileSection/MyProfileSection';
-import { useMyNotifications, useMyBoards, useMyComments } from '@hooks/queries';
+import {
+  useMyNotifications,
+  useMyBoards,
+  useMyComments,
+  useMembershipFee,
+} from '@hooks/queries';
 import { useMyProfile } from '@hooks/queries/useMyProfile';
 import { Grid } from '@clab/design-system';
+import MyMembershipHistorySection from '@components/my/MyMembershipHistorySection/MyMembershipHistorySection';
 
 const MyPage = () => {
   const { data: myProfile } = useMyProfile();
   const { data: myNotificationsData } = useMyNotifications(0, 10);
   const { data: myBoardsData } = useMyBoards(0, 10);
   const { data: myCommentsData } = useMyComments(0, 10);
+  const { data: myMembershipFee } = useMembershipFee({
+    memberId: myProfile.id,
+  });
 
   return (
     <Content>
       <MyProfileSection data={myProfile} />
       <MyHistorySection title="지난 알림" data={myNotificationsData.items} />
       <Grid col={2} gap="md">
-        <MyHistorySection title="회비 신청 내역" data={[]} />
+        <MyMembershipHistorySection data={myMembershipFee.items} />
         <MyHistorySection title="도서 대출 내역" data={[]} />
       </Grid>
       <MyHistorySection title="나의 활동" data={[]} />

apps/member/src/types/membershipFee.ts

@@ -6,5 +6,5 @@ export interface MembershipFeeType {
   amount: number;
   content: string;
   imageUrl?: string;
-  createdAt?: string;
+  createdAt: string;
 }