From 1c4edd6c5569973c2a67d2b3521ea8e0838da26d Mon Sep 17 00:00:00 2001
From: YINGMEI <j.yeongmee@gmail.com>
Date: Fri, 31 Jan 2025 04:19:46 +0900
Subject: [PATCH] fix: update funding progress toast section

---
 ...ReasonToast.tsx => ApproveReasonToast.tsx} | 26 +++----
 .../common/components/RejectReasonToast.tsx   |  4 +-
 packages/web/src/constants/tableTagList.ts    |  2 +-
 .../components/FundingStatusSection.tsx       | 69 +++++++++++++++++++
 .../detail/frames/FundingDetailFrame.tsx      | 46 ++-----------
 .../funding/services/useGetFunding.ts         | 22 +++++-
 6 files changed, 113 insertions(+), 56 deletions(-)
 rename packages/web/src/common/components/{PartialApproveReasonToast.tsx => ApproveReasonToast.tsx} (78%)
 create mode 100644 packages/web/src/features/manage-club/funding/detail/components/FundingStatusSection.tsx

diff --git a/packages/web/src/common/components/PartialApproveReasonToast.tsx b/packages/web/src/common/components/ApproveReasonToast.tsx
similarity index 78%
rename from packages/web/src/common/components/PartialApproveReasonToast.tsx
rename to packages/web/src/common/components/ApproveReasonToast.tsx
index 47046030d..e0fc2e9cc 100644
--- a/packages/web/src/common/components/PartialApproveReasonToast.tsx
+++ b/packages/web/src/common/components/ApproveReasonToast.tsx
@@ -13,9 +13,10 @@ import Typography from "./Typography";
 interface Reason {
   datetime: Date;
   reason: React.ReactNode;
+  status?: string;
 }
 
-interface PartialApproveReasonToastProps {
+interface ApproveReasonToastProps {
   title: string;
   reasons: Reason[];
 }
@@ -31,7 +32,7 @@ const ForceBorderRadius = styled.div`
   z-index: ${({ theme }) => theme.zIndices.toast};
 `;
 
-const PartialApproveReasonToastInner = styled.div`
+const ApproveReasonToastInner = styled.div`
   color: ${({ theme }) => theme.colors.BLACK};
   display: flex;
   flex-direction: column;
@@ -41,7 +42,7 @@ const PartialApproveReasonToastInner = styled.div`
   max-height: 300px;
   overflow-y: auto;
 
-  .PartialApproveReasonToast-title {
+  .ApproveReasonToast-title {
     padding: 12px 16px 0 16px;
 
     position: sticky;
@@ -53,7 +54,7 @@ const PartialApproveReasonToastInner = styled.div`
     z-index: ${({ theme }) => theme.zIndices.toast + 1};
   }
 
-  .PartialApproveReasonToast-reasons {
+  .ApproveReasonToast-reasons {
     display: flex;
     width: 100%;
     padding: 0 16px 12px 44px;
@@ -62,7 +63,7 @@ const PartialApproveReasonToastInner = styled.div`
     flex: 1 0 0;
   }
 
-  .PartialApproveReasonToast-sticky-title {
+  .ApproveReasonToast-sticky-title {
     position: sticky;
     top: 0;
     background: ${({ theme }) => theme.colors.GREEN[100]};
@@ -70,19 +71,19 @@ const PartialApproveReasonToastInner = styled.div`
   }
 `;
 
-const PartialApproveReasonToast: React.FC<PartialApproveReasonToastProps> = ({
+const ApproveReasonToast: React.FC<ApproveReasonToastProps> = ({
   title,
   reasons,
 }) => (
   <ForceBorderRadius>
-    <PartialApproveReasonToastInner>
-      <div className="PartialApproveReasonToast-title">
+    <ApproveReasonToastInner>
+      <div className="ApproveReasonToast-title">
         <Icon type="error" size={20} color={colors.GREEN[600]} />
         <Typography fs={16} lh={24} fw="MEDIUM">
           {title}
         </Typography>
       </div>
-      <div className="PartialApproveReasonToast-reasons">
+      <div className="ApproveReasonToast-reasons">
         {reasons.map(reason => (
           <FlexWrapper
             direction="column"
@@ -90,7 +91,8 @@ const PartialApproveReasonToast: React.FC<PartialApproveReasonToastProps> = ({
             key={formatDotDetailDate(reason.datetime)}
           >
             <Typography fs={14} lh={16} fw="REGULAR" color="GRAY.600">
-              {formatDotDetailDate(reason.datetime)}
+              {formatDotDetailDate(reason.datetime)}{" "}
+              {reason.status && `• ${reason.status}`}
             </Typography>
             <Typography fs={16} lh={24} fw="REGULAR">
               {reason.reason}
@@ -98,8 +100,8 @@ const PartialApproveReasonToast: React.FC<PartialApproveReasonToastProps> = ({
           </FlexWrapper>
         ))}
       </div>
-    </PartialApproveReasonToastInner>
+    </ApproveReasonToastInner>
   </ForceBorderRadius>
 );
 
-export default PartialApproveReasonToast;
+export default ApproveReasonToast;
diff --git a/packages/web/src/common/components/RejectReasonToast.tsx b/packages/web/src/common/components/RejectReasonToast.tsx
index b699e752f..0c3513e80 100644
--- a/packages/web/src/common/components/RejectReasonToast.tsx
+++ b/packages/web/src/common/components/RejectReasonToast.tsx
@@ -13,6 +13,7 @@ import Typography from "./Typography";
 interface Reason {
   datetime: Date;
   reason: React.ReactNode;
+  status?: string;
 }
 
 interface RejectReasonToastProps {
@@ -90,7 +91,8 @@ const RejectReasonToast: React.FC<RejectReasonToastProps> = ({
             key={formatDotDetailDate(reason.datetime)}
           >
             <Typography fs={14} lh={16} fw="REGULAR" color="GRAY.600">
-              {formatDotDetailDate(reason.datetime)}
+              {formatDotDetailDate(reason.datetime)}{" "}
+              {reason.status && `• ${reason.status} 사유`}
             </Typography>
             <Typography fs={16} lh={24} fw="REGULAR">
               {reason.reason}
diff --git a/packages/web/src/constants/tableTagList.ts b/packages/web/src/constants/tableTagList.ts
index de1bd872b..e8dd2a082 100644
--- a/packages/web/src/constants/tableTagList.ts
+++ b/packages/web/src/constants/tableTagList.ts
@@ -99,7 +99,7 @@ const FundingTagList: {
   [FundingStatusEnum.Committee]: { text: "운위", color: "YELLOW" },
   [FundingStatusEnum.Approved]: { text: "승인", color: "GREEN" },
   [FundingStatusEnum.Rejected]: { text: "반려", color: "RED" },
-  [FundingStatusEnum.Partial]: { text: "부분 승인", color: "PURPLE" },
+  [FundingStatusEnum.Partial]: { text: "부분", color: "PURPLE" },
 };
 
 // TODO: interface enum 사용
diff --git a/packages/web/src/features/manage-club/funding/detail/components/FundingStatusSection.tsx b/packages/web/src/features/manage-club/funding/detail/components/FundingStatusSection.tsx
new file mode 100644
index 000000000..fb7165ff7
--- /dev/null
+++ b/packages/web/src/features/manage-club/funding/detail/components/FundingStatusSection.tsx
@@ -0,0 +1,69 @@
+import React, { useMemo } from "react";
+
+import { IFundingCommentResponse } from "@sparcs-clubs/interface/api/funding/type/funding.type";
+import { FundingStatusEnum } from "@sparcs-clubs/interface/common/enum/funding.enum";
+
+import ApproveReasonToast from "@sparcs-clubs/web/common/components/ApproveReasonToast";
+import ProgressStatus from "@sparcs-clubs/web/common/components/ProgressStatus";
+
+import RejectReasonToast from "@sparcs-clubs/web/common/components/RejectReasonToast";
+
+import { FundingTagList } from "@sparcs-clubs/web/constants/tableTagList";
+import { getFundingProgress } from "@sparcs-clubs/web/features/manage-club/funding/constants/fundingProgressStatus";
+import { getTagDetail } from "@sparcs-clubs/web/utils/getTagDetail";
+
+interface FundingStatusSectionProps {
+  status: FundingStatusEnum;
+  editedAt: Date;
+  commentedAt?: Date;
+  comments: IFundingCommentResponse[];
+}
+
+const FundingStatusSection: React.FC<FundingStatusSectionProps> = ({
+  status,
+  editedAt,
+  commentedAt = undefined,
+  comments,
+}) => {
+  const progressStatus = getFundingProgress(status, editedAt, commentedAt);
+
+  const ToastSection = useMemo(() => {
+    if (status === FundingStatusEnum.Rejected) {
+      return (
+        <RejectReasonToast
+          title="코멘트"
+          reasons={comments.map(comment => ({
+            datetime: comment.createdAt,
+            reason: comment.content,
+            status: getTagDetail(comment.fundingStatusEnum, FundingTagList)
+              .text,
+          }))}
+        />
+      );
+    }
+
+    return (
+      <ApproveReasonToast
+        title="코멘트"
+        reasons={comments.map(comment => ({
+          datetime: comment.createdAt,
+          reason: comment.content,
+          status:
+            comment.fundingStatusEnum === FundingStatusEnum.Partial
+              ? `${getTagDetail(comment.fundingStatusEnum, FundingTagList).text}승인`
+              : getTagDetail(comment.fundingStatusEnum, FundingTagList).text,
+        }))}
+      />
+    );
+  }, [comments, status]);
+
+  return (
+    <ProgressStatus
+      labels={progressStatus.labels}
+      progress={progressStatus.progress}
+      optional={comments && comments.length > 0 && ToastSection}
+    />
+  );
+};
+
+export default FundingStatusSection;
diff --git a/packages/web/src/features/manage-club/funding/detail/frames/FundingDetailFrame.tsx b/packages/web/src/features/manage-club/funding/detail/frames/FundingDetailFrame.tsx
index 728689e87..5f73609ec 100644
--- a/packages/web/src/features/manage-club/funding/detail/frames/FundingDetailFrame.tsx
+++ b/packages/web/src/features/manage-club/funding/detail/frames/FundingDetailFrame.tsx
@@ -13,11 +13,7 @@ import Card from "@sparcs-clubs/web/common/components/Card";
 import FlexWrapper from "@sparcs-clubs/web/common/components/FlexWrapper";
 import Modal from "@sparcs-clubs/web/common/components/Modal";
 import CancellableModalContent from "@sparcs-clubs/web/common/components/Modal/CancellableModalContent";
-import PartialApproveReasonToast from "@sparcs-clubs/web/common/components/PartialApproveReasonToast";
-import ProgressStatus from "@sparcs-clubs/web/common/components/ProgressStatus";
-import RejectReasonToast from "@sparcs-clubs/web/common/components/RejectReasonToast";
 
-import { getFundingProgress } from "@sparcs-clubs/web/features/manage-club/funding/constants/fundingProgressStatus";
 import { useDeleteFunding } from "@sparcs-clubs/web/features/manage-club/funding/services/useDeleteFunding";
 import { useGetFunding } from "@sparcs-clubs/web/features/manage-club/funding/services/useGetFunding";
 import useGetFundingDeadline from "@sparcs-clubs/web/features/manage-club/funding/services/useGetFundingDeadline";
@@ -27,6 +23,7 @@ import { isActivityReportUnverifiable } from "@sparcs-clubs/web/features/manage-
 import BasicEvidenceList from "../components/BasicEvidenceList";
 import FixtureEvidenceList from "../components/FixtureEvidenceList";
 import FundingInfoList from "../components/FundingInfoList";
+import FundingStatusSection from "../components/FundingStatusSection";
 import NonCorpEvidenceList from "../components/NonCorpEvidenceList";
 import OtherEvidenceList from "../components/OtherEvidenceList";
 import TransportationEvidenceList from "../components/TransportationEvidenceList";
@@ -136,42 +133,11 @@ const FundingDetailFrame: React.FC<FundingDetailFrameProps> = ({ clubId }) => {
     <FlexWrapper direction="column" gap={40}>
       <Card outline>
         {!isPastFunding && (
-          <ProgressStatus
-            labels={
-              getFundingProgress(
-                funding.fundingStatusEnum,
-                funding.editedAt,
-                funding.commentedAt,
-              ).labels
-            }
-            progress={
-              getFundingProgress(
-                funding.fundingStatusEnum,
-                funding.editedAt,
-                funding.commentedAt,
-              ).progress
-            }
-            optional={
-              funding.comments &&
-              funding.comments.length > 0 &&
-              (funding.fundingStatusEnum === FundingStatusEnum.Partial ? (
-                <PartialApproveReasonToast
-                  title="부분 승인 사유"
-                  reasons={funding.comments.map(comment => ({
-                    datetime: comment.createdAt,
-                    reason: comment.content,
-                  }))}
-                />
-              ) : (
-                <RejectReasonToast
-                  title="반려 사유"
-                  reasons={funding.comments.map(comment => ({
-                    datetime: comment.createdAt,
-                    reason: comment.content,
-                  }))}
-                />
-              ))
-            }
+          <FundingStatusSection
+            status={funding.fundingStatusEnum}
+            editedAt={funding.editedAt}
+            commentedAt={funding.commentedAt}
+            comments={funding.comments.toReversed()}
           />
         )}
         <AsyncBoundary isLoading={isLoading} isError={isError}>
diff --git a/packages/web/src/features/manage-club/funding/services/useGetFunding.ts b/packages/web/src/features/manage-club/funding/services/useGetFunding.ts
index 0df80a372..a06072921 100644
--- a/packages/web/src/features/manage-club/funding/services/useGetFunding.ts
+++ b/packages/web/src/features/manage-club/funding/services/useGetFunding.ts
@@ -27,7 +27,7 @@ export const useGetFunding = (fundingId: number) =>
   });
 
 defineAxiosMock(mock => {
-  const fundingStatus = FundingStatusEnum.Partial;
+  const fundingStatus = FundingStatusEnum.Approved;
   const mockFundingDetail = {
     id: 1,
     club: {
@@ -103,12 +103,30 @@ defineAxiosMock(mock => {
     createdAt: "2025-01-26T18:48:59.000Z",
     updatedAt: "2025-01-29T22:41:08.000Z",
     comments: [
+      {
+        id: 1,
+        funding: { id: 1 },
+        chargedExecutive: { id: 123 },
+        content: "대충 어떤 반려 사유",
+        fundingStatusEnum: FundingStatusEnum.Rejected,
+        approvedAmount: 1230,
+        createdAt: new Date(2024, 11, 10),
+      },
       {
         id: 1,
         funding: { id: 1 },
         chargedExecutive: { id: 123 },
         content: "대충 어떤 부분 승인 사유",
-        fundingStatusEnum: fundingStatus,
+        fundingStatusEnum: FundingStatusEnum.Partial,
+        approvedAmount: 1230,
+        createdAt: new Date(2024, 12, 20),
+      },
+      {
+        id: 1,
+        funding: { id: 1 },
+        chargedExecutive: { id: 123 },
+        content: "대충 어떤 승인 사유",
+        fundingStatusEnum: FundingStatusEnum.Approved,
         approvedAmount: 1230,
         createdAt: new Date(),
       },