refactor(member): 회비 페이지 UI 개선 (#78)

apps/member/src/components/support/SupportHistorySection/SupportHistorySection.tsx

@@ -6,6 +6,7 @@ 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';
+import { TABLE_HEAD } from '@constants/head';
 
 const SupportHistorySection = () => {
   const { openModal } = useModal();
@@ -22,12 +23,11 @@ const SupportHistorySection = () => {
 
   return (
     <Section>
-      <Section.Header title="신청 내역" />
+      <Section.Header title="신청 내역">
+        최근에 신청된 회비 신청 내역이에요
+      </Section.Header>
       <Section.Body>
-        <Table
-          className="w-full"
-          head={['번호', '상태', '구분', '요청자', '신청일']}
-        >
+        <Table head={TABLE_HEAD.SUPPORT_HISTORY}>
           {data.items.map((membership) => (
             <Table.Row
               key={membership.id}

apps/member/src/components/support/SupportProcedureSection/SupportProcedureSection.tsx

@@ -0,0 +1,55 @@
+import Section from '@components/common/Section/Section';
+import {
+  FcSurvey,
+  FcReading,
+  FcMoneyTransfer,
+  FcFilingCabinet,
+} from 'react-icons/fc';
+
+const stepContents = [
+  {
+    image: <FcSurvey size={32} />,
+    title: '신청서 작성',
+    description:
+      '회비 사용과 관련된 정보를 입력하여 제출해 주세요. 누락된 정보가 있을 경우 승인이 반려될 수 있어요.',
+  },
+  {
+    image: <FcReading size={32} />,
+    title: '운영진 검토',
+    description:
+      '운영진이 신청서를 면밀히 검토하여 승인 여부를 결정해요. 24시간 이내에 처리가 되지 않는다면 별도로 문의해 주세요.',
+  },
+  {
+    image: <FcMoneyTransfer size={32} />,
+    title: '직접 결제',
+    description:
+      '승인이 되면 결제 대금을 이체 받아요. 이체 받은 결제 대금을 사용하여 직접 결제를 진행해 주세요.',
+  },
+  {
+    image: <FcFilingCabinet size={32} />,
+    title: '사용 후 반납',
+    description:
+      '대여기간이 지나면 운영진이 사용 내역을 확인하고 반납 여부를 확인해요.',
+  },
+];
+
+const SupportProcedureSection = () => {
+  return (
+    <Section>
+      <Section.Header title="회비 사용 절차는 이렇게 진행돼요" />
+      <Section.Body className="grid grid-cols-2 gap-4 md:grid-cols-4 break-keep">
+        {stepContents.map((stepContent, index) => (
+          <div key={index}>
+            <div className="p-2 mb-2 bg-gray-100 rounded-full w-fit">
+              {stepContent.image}
+            </div>
+            <p className="font-semibold">{stepContent.title}</p>
+            <p className="text-sm text-gray-500">{stepContent.description}</p>
+          </div>
+        ))}
+      </Section.Body>
+    </Section>
+  );
+};
+
+export default SupportProcedureSection;

apps/member/src/constants/head.ts

@@ -1,4 +1,5 @@
 export const TABLE_HEAD = {
   ACTIVITY_GROUP_PARTICIPANTS: ['번호', '학번', '이름'],
   ACTIVITY_GROUP_APPLIES: ['번호', '학번', '이름', '상태', '기능'],
-};
+  SUPPORT_HISTORY: ['번호', '상태', '구분', '요청자', '신청일'],
+} as const;

apps/member/src/pages/SupportPage/SupportPage.tsx

@@ -1,76 +1,20 @@
-import SupportIcons from '@assets/support/SupportIcons';
-import Content from '@components/common/Content/Content';
+import { Suspense } from 'react';
 import Header from '@components/common/Header/Header';
-import Linker from '@components/common/Linker/Linker';
-import Section from '@components/common/Section/Section';
-import SupportRequestForm from '@components/support/SupportRequestForm/SupportRequestForm';
+import Content from '@components/common/Content/Content';
+import SupportProcedureSection from '@components/support/SupportProcedureSection/SupportProcedureSection';
+import SupportRequestSection from '@components/support/SupportRequestSection/SupportRequestSection';
 import SupportHistorySection from '@components/support/SupportHistorySection/SupportHistorySection';
-import { PATH } from '@constants/path';
-
-const stepContents = [
-  {
-    id: 1,
-    image: <SupportIcons.Check />,
-    description: '회비 사용과 관련된 정보를 기입하여 제출해주세요.',
-  },
-  {
-    id: 2,
-    image: <SupportIcons.Next />,
-    description: '',
-  },
-  {
-    id: 3,
-    image: <SupportIcons.Checking />,
-    description: '운영진이 신청서를 검토해요.',
-  },
-  {
-    id: 4,
-    image: <SupportIcons.Next />,
-    description: '',
-  },
-  {
-    id: 5,
-    image: <SupportIcons.Document />,
-    description: '승인 또는 거절의 결과를 안내해요.',
-  },
-];
+import SupportHistorySectionSkeleton from '@components/support/SupportHistorySection/SupportHistorySectionSkeleton';
 
 const SupportPage = () => {
   return (
     <Content>
       <Header title="회비" />
-      <Section>
-        <Section.Header title="회비 신청 절차" />
-        <Section.Body className="grid grid-cols-5 text-center">
-          {stepContents.map(({ id, image, description }) => (
-            <div
-              key={id}
-              className="flex flex-col items-center justify-center gap-4"
-            >
-              <SupportIcons
-                className={id === 2 || id === 4 ? 'w-4 col-span-2' : 'w-10'}
-              >
-                {image}
-              </SupportIcons>
-              {description && <p className="grow break-keep">{description}</p>}
-            </div>
-          ))}
-        </Section.Body>
-        <div className="mt-10 text-center">
-          <p className="text-2xl font-bold">혹시 도서 신청을 원하시나요?</p>
-          <div className="text-lg">
-            <span>이미 보유중인 책일수도 있어요! </span>
-            <Linker
-              to={PATH.LIBRARY}
-              className="text-gray-500 decoration-pink-500 hover:text-black"
-            >
-              확인하러 가기
-            </Linker>
-          </div>
-        </div>
-      </Section>
-      <SupportRequestForm />
-      <SupportHistorySection />
+      <SupportProcedureSection />
+      <SupportRequestSection />
+      <Suspense fallback={<SupportHistorySectionSkeleton />}>
+        <SupportHistorySection />
+      </Suspense>
     </Content>
   );
 };