refactor(member): 회비 신청 내역 UI 개선 (#78)

kgu-clab · Mar 30, 2024 · 91a63d2 · 91a63d2
1 parent dfeec19
commit 91a63d2
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/apps/member/src/components/my/MyMembershipHistorySection/MyMembershipHistorySection.tsx b/apps/member/src/components/my/MyMembershipHistorySection/MyMembershipHistorySection.tsx
@@ -2,7 +2,6 @@ import ListButton from '@components/common/ListButton/ListButton';
 import Section from '@components/common/Section/Section';
 import useModal from '@hooks/common/useModal';
 import { toYYMMDD } from '@utils/date';
-import MembershipCategoryBadge from '@components/membership/MembershipCategoryBadge/MembershipCategoryBadge';
 import MembershipStatusBadge from '@components/membership/MembershipStatusBadge/MembershipStatusBadge';
 import type { MembershipFeeType } from '@type/membershipFee';
 import MembershipInfoModal from '@components/membership/MembershipInfoModal/MembershipInfoModal';
@@ -16,7 +15,7 @@ const TITLE = '회비 신청 내역';
 const MyMembershipHistorySection = ({ data }: MyMembershipFeeProps) => {
   const { openModal } = useModal();
   /**
-   * 버튼 클릭 시 모달을 열어서 회비 신청 내역을 보여줍니다.
+   * 회비 상세 내역을 모달을 통해서 보여줍니다.
    */
   const handleButtonClick = (membership: MembershipFeeType) => {
     openModal({
@@ -35,7 +34,6 @@ const MyMembershipHistorySection = ({ data }: MyMembershipFeeProps) => {
             onClick={() => handleButtonClick(membership)}
           >
             <p className="pr-4 space-x-2 truncate grow">
-              <MembershipCategoryBadge category={membership.category} />
               <MembershipStatusBadge status={membership.status} />
               <span>{membership.content}</span>
             </p>

diff --git a/apps/member/src/components/support/SupportHistorySection/SupportHistorySection.tsx b/apps/member/src/components/support/SupportHistorySection/SupportHistorySection.tsx
@@ -1,42 +1,50 @@
-import ListButton from '@components/common/ListButton/ListButton';
 import Section from '@components/common/Section/Section';
 import { useMembershipFee } from '@hooks/queries';
 import { formattedDate } from '@utils/date';
-import MembershipCategoryBadge from '@components/membership/MembershipCategoryBadge/MembershipCategoryBadge';
 import MembershipStatusBadge from '@components/membership/MembershipStatusBadge/MembershipStatusBadge';
 import useModal from '@hooks/common/useModal';
 import MembershipInfoModal from '@components/membership/MembershipInfoModal/MembershipInfoModal';
+import Table from '@components/common/Table/Table';
 import type { MembershipFeeType } from '@type/membershipFee';
 
 const SupportHistorySection = () => {
   const { openModal } = useModal();
   const { data } = useMembershipFee();
-
+  /**
+   * 회비 상세 내역을 모달을 통해서 보여줍니다.
+   */
   const handleButtonClick = (membership: MembershipFeeType) => {
     openModal({
-      title: '회비 요청 내역',
+      title: '회비 상세 내역',
       content: <MembershipInfoModal data={membership} />,
     });
   };
 
   return (
     <Section>
-      <Section.Header title="요청 내역" />
+      <Section.Header title="신청 내역" />
       <Section.Body>
-        {data.items.map((membership) => (
-          <ListButton
-            key={membership.id}
-            className="flex items-center justify-between text-nowrap"
-            onClick={() => handleButtonClick(membership)}
-          >
-            <div className="pr-4 space-x-2 truncate grow">
-              <MembershipCategoryBadge category={membership.category} />
-              <MembershipStatusBadge status={membership.status} />
-              <span>{membership.content}</span>
-            </div>
-            <span>{formattedDate(membership.createdAt)}</span>
-          </ListButton>
-        ))}
+        <Table
+          className="w-full"
+          head={['번호', '상태', '구분', '요청자', '신청일']}
+        >
+          {data.items.map((membership) => (
+            <Table.Row
+              key={membership.id}
+              onClick={() => handleButtonClick(membership)}
+            >
+              <Table.Cell>{membership.id}</Table.Cell>
+              <Table.Cell>
+                <MembershipStatusBadge status={membership.status} />
+              </Table.Cell>
+              <Table.Cell> {membership.category}</Table.Cell>
+              <Table.Cell>
+                {membership.memberName} ({membership.memberId})
+              </Table.Cell>
+              <Table.Cell>{formattedDate(membership.createdAt)}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table>
       </Section.Body>
     </Section>
   );