지급대행

src/entities/additional-service/model/payout/types.ts

@@ -31,13 +31,13 @@ export interface ExtensionPayoutListResponse extends DefaulResponsePagination{
   content: Array<PayoutContent>
 };
 export interface PayoutContent {
-  tid: string;
-  submallId: string;
-  requestDate: string;
-  settlementDate: string;
-  companyName: string;
-  disbursementStatus: PayoutDisbursementStatus;
-  disbursementAmount: number;
+  tid?: string;
+  submallId?: string;
+  requestDate?: string;
+  settlementDate?: string;
+  companyName?: string;
+  disbursementStatus?: PayoutDisbursementStatus;
+  disbursementAmount?: number;
 };
 export interface ExtensionPayoutExcelParams extends ExtensionPayoutListParams {};
 

src/entities/additional-service/model/types.ts

@@ -1,4 +1,5 @@
 import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
+import { PayoutContent } from './payout/types';
 
 // ========================================
 // 공통 Enums 및 타입들
@@ -28,6 +29,7 @@ export enum AdditionalServiceCategory {
   LinkPaymentPending = 'LinkPaymentPending',
   FundTransfer = 'FundTransfer',
   SettlementAgency = 'SettlementAgency',
+  Payout = 'Payout',
 }
 
 // ========================================
@@ -319,7 +321,8 @@ export interface SettlementAgencyBottomAgreeProps {
 
 export interface ListItemProps extends 
 KeyInPaymentListItem, AccountHolderSearchListItem, 
-LinkPaymentShippingListItem, LinkPaymentPendingListItem
+LinkPaymentShippingListItem, LinkPaymentPendingListItem,
+PayoutContent
 {
   additionalServiceCategory?: AdditionalServiceCategory;
   mid?: string

src/entities/additional-service/ui/filter/payout-filter.tsx

@@ -18,6 +18,7 @@ import {
   FilterMotionStyle, 
   FilterMotionVariants
 } from '@/entities/common/model/constant';
+import moment from 'moment';
 
 export interface PayoutFilterProps {
   filterOn: boolean;
@@ -59,8 +60,8 @@ export const PayoutFilter = ({
 
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterSearchCl, setFilterSearchCl] = useState<PayoutSearchCl>(searchCl);
-  const [filterFromDate, setFilterFromDate] = useState<string>(fromDate);
-  const [filterToDate, setFilterToDate] = useState<string>(toDate);
+  const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
+  const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
   const [filterDisbursementStatus, setFilterDisbursementStatus] = useState<PayoutDisbursementStatus>(disbursementStatus);
   const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');

src/entities/additional-service/ui/list-date-group.tsx

@@ -40,6 +40,11 @@ export const ListDateGroup = ({
             scheduledSendDate={ items[i]?.scheduledSendDate}
             processStatus={ items[i]?.processStatus}
 
+            submallId={ items[i]?.submallId }
+            settlementDate={ items[i]?.settlementDate }
+            companyName={ items[i]?. companyName }
+            disbursementStatus={ items[i]?.disbursementStatus }
+            disbursementAmount={ items[i]?.disbursementAmount }
           ></ListItem>
         )
       }  

src/entities/additional-service/ui/list-item.tsx

@@ -11,7 +11,10 @@ export const ListItem = ({
 
   requestDate, bankName, accountNo, resultStatus,
   amount, sendDate, sendStatus, sendMethod,
-  scheduledSendDate, processStatus
+  scheduledSendDate, processStatus,
+
+  submallId, settlementDate, companyName,
+  disbursementStatus, disbursementAmount
 }: ListItemProps) => {
   const { navigate } = useNavigate();
   const getItemClass = () => {
@@ -121,6 +124,15 @@ export const ListItem = ({
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.SettlementAgency) {
 
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.Payout){
+      navigate(PATHS.additionalService.payout.detail, {
+        state: {
+          additionalServiceCategory: additionalServiceCategory,
+          mid: mid,
+          tid: tid
+        }
+      });
     }
     else {
       alert('additionalServiceCategory가 존재하지 않습니다.');
@@ -144,7 +156,7 @@ export const ListItem = ({
   };
 
   const getTitle = () => {
-    let str = '';
+    let str: string | undefined = '';
     if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
       str = `${tid}(${amount})`;
     }
@@ -160,6 +172,9 @@ export const ListItem = ({
         str = `${"buyerName"}(${"이메일"})`
       }
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.Payout){
+      str = companyName;
+    }
 
     return str;
   };
@@ -214,6 +229,15 @@ export const ListItem = ({
         </div>
       );
     }
+    else if(additionalServiceCategory === AdditionalServiceCategory.Payout){
+      rs.push(
+        <div className="transaction-details">
+          <span>{ disbursementStatus }</span>
+          <span className="separator">|</span>
+          <span>{ submallId }</span>
+        </div>
+      );
+    }
     return rs;
   };
 
@@ -252,6 +276,21 @@ export const ListItem = ({
         </div>
       )
     }
+    else if(additionalServiceCategory === AdditionalServiceCategory.Payout){
+      rs.push(
+        <div 
+          key="payout-item-amount"
+          className="transaction-amount"
+        >
+          <NumericFormat
+            value={disbursementAmount}
+            thousandSeparator
+            displayType="text"
+            suffix={'원'}
+          ></NumericFormat>
+        </div>
+      )
+    }
     return rs;
   }