지급대행

2025-09-22 13:50:32 +09:00
parent 85e85f1f89
commit cc22ae8348
6 changed files with 150 additions and 89 deletions
--- a/src/entities/additional-service/model/payout/types.ts
+++ b/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 {};

--- a/src/entities/additional-service/model/types.ts
+++ b/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
--- a/src/entities/additional-service/ui/filter/payout-filter.tsx
+++ b/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 || '');
--- a/src/entities/additional-service/ui/list-date-group.tsx
+++ b/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>
        )
      }  
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/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;
  }

--- a/src/pages/additional-service/payout/list-page.tsx
+++ b/src/pages/additional-service/payout/list-page.tsx
@@ -3,7 +3,15 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType, SortByKeys } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useExtensionPayoutListMutation } from '@/entities/additional-service/api/payout/use-extension-payout-list-mutation';
-import { ExtensionPayoutExcelParams, ExtensionPayoutExcelResponse, ExtensionPayoutListParams, ExtensionPayoutListResponse, PayoutDisbursementStatus, PayoutSearchCl } from '@/entities/additional-service/model/payout/types';
+import {
+  ExtensionPayoutExcelParams,
+  ExtensionPayoutExcelResponse,
+  ExtensionPayoutListParams,
+  ExtensionPayoutListResponse,
+  PayoutContent,
+  PayoutDisbursementStatus,
+  PayoutSearchCl
+} from '@/entities/additional-service/model/payout/types';
 import { useEffect, useState } from 'react';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { 
@@ -15,12 +23,16 @@ import {
 import moment from 'moment';
 import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
 import { useExtensionPayoutExcelMutation } from '@/entities/additional-service/api/payout/use-extension-payout-excel-mutation';
+import { PayoutFilter } from '@/entities/additional-service/ui/filter/payout-filter';
+import { PayoutDisbursementStatusBtnGroup } from '@/entities/additional-service/model/payout/constant';
+import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
+import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';

 export const PayoutListPage = () => {
  const { navigate } = useNavigate();

-
  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [listItems, setListItems] = useState<Record<string, Array<PayoutContent>>>({});
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
  const [mid, setMid] = useState<string>('nictest001m');
@@ -79,7 +91,7 @@ export const PayoutListPage = () => {
      page: pageParam
    };
    extensionPayoutList(params).then((rs: ExtensionPayoutListResponse) => {
-
+      setListItems(assembleData(rs.content));
    });
  };

@@ -98,6 +110,29 @@ export const PayoutListPage = () => {
    });
  };

+  const assembleData = (content: Array<PayoutContent>) => {
+    let data: any = {};
+    if(content && content.length > 0){
+      for(let i=0;i<content?.length;i++){
+        let date;
+        if(searchCl === PayoutSearchCl.REQUEST_DATE){
+          date = content[i]?.requestDate?.substring(0, 8);
+        }
+        else if(searchCl === PayoutSearchCl.PROXY_DATE){
+          date = content[i]?.settlementDate?.substring(0, 8);
+        }
+        let groupDate = moment(date).format('YYYYMMDD');
+        if(!!groupDate && !data.hasOwnProperty(groupDate)){
+          data[groupDate] = [];
+        }
+        if(!!groupDate && data.hasOwnProperty(groupDate)){
+          data[groupDate].push(content[i]);
+        }
+      }
+    }
+    return data;
+  };
+
  const onClickToDownloadExcel = () => {
    callDownloadExcel();
  };
@@ -108,7 +143,7 @@ export const PayoutListPage = () => {
    setSortBy(sort);
    callExtensionPayoutList({sortBy: sort});
  };
-  const onClickToRequestStatus = (val: PayoutDisbursementStatus) => {
+  const onClickToDisbursementStatus = (val: PayoutDisbursementStatus) => {
    setDisbursementStatus(val);
    callExtensionPayoutList({val: val});
  };
@@ -118,6 +153,23 @@ export const PayoutListPage = () => {
    callExtensionPayoutList();
  }, []);

+  const getPayoutList = () => {
+    let rs = [];
+    if(Object.keys(listItems).length > 0){
+      for (const [key, value] of Object.entries(listItems)) {
+        rs.push(
+          <ListDateGroup
+            additionalServiceCategory={ AdditionalServiceCategory.Payout }
+            key={ key }
+            date={ key }
+            items={ value }
+          ></ListDateGroup>
+        );  
+      }
+    }
+    return rs;
+  }
+
  return (
    <>
      <main>
@@ -173,87 +225,48 @@ export const PayoutListPage = () => {
              ></SortOptionsBox>
              <div className="excrow">
                <div className="full-menu-keywords no-padding">
-                  <span className="keyword-tag active">전체</span>
-                  <span className="keyword-tag">요청</span>
-                  <span className="keyword-tag">성공</span>
-                  <span className="keyword-tag">실패</span>
+                {
+                  PayoutDisbursementStatusBtnGroup.map((value, index) => (
+                    <span 
+                      key={ `key-service-code=${ index }` }
+                      className={ `keyword-tag ${(disbursementStatus === value.value)? 'active': ''}` }
+                      onClick={ () => onClickToDisbursementStatus(value.value) }
+                    >{ value.name }</span>
+                  ))
+                }
                </div>
              </div>
            </section>
-              
-            <section className="transaction-list">
-              <div className="date-header">25.06.08(일)</div>
-              <div
-                className="transaction-item approved"
-                onClick={ () => onClickToGoDetail() }
-              >
-                <div className="transaction-status">
-                  <div className="status-dot blue"></div>
-                </div>
-                <div className="transaction-content">
-                  <div className="transaction-title">카카오스타일</div>
-                  <div className="transaction-details gap-0">
-                    <span>요청</span>
-                    <span className="separator">ㅣ</span>
-                    <span>cruiquis01m</span>
-                  </div>
-                </div>
-                <div className="transaction-amount">5,254,000원</div>
+            <div className="transaction-list">
+              { getPayoutList() }  
+              <div className="apply-row">
+                <button 
+                  className="btn-50 btn-blue flex-1"
+                  onClick={ () => onClickToNavigation() }
+                >지급대행 신청</button>
              </div>
-              <div className="transaction-item approved">
-                <div className="transaction-status">
-                  <div className="status-dot blue"></div>
-                </div>
-                <div className="transaction-content">
-                  <div className="transaction-title">카카오스타일</div>
-                  <div className="transaction-details gap-0">
-                    <span>요청</span>
-                    <span className="separator">ㅣ</span>
-                    <span>cruiquis01m</span>
-                  </div>
-                </div>
-                <div className="transaction-amount">5,254,000원</div>
-              </div>
-
-              <div className="date-header">25.06.08(일)</div>
-              <div className="transaction-item approved">
-                <div className="transaction-status">
-                  <div className="status-dot blue"></div>
-                </div>
-                <div className="transaction-content">
-                  <div className="transaction-title">카카오스타일</div>
-                  <div className="transaction-details gap-0">
-                    <span>요청</span>
-                    <span className="separator">ㅣ</span>
-                    <span>cruiquis01m</span>
-                  </div>
-                </div>
-                <div className="transaction-amount">5,254,000원</div>
-              </div>
-              <div className="transaction-item approved">
-                <div className="transaction-status">
-                  <div className="status-dot blue"></div>
-                </div>
-                <div className="transaction-content">
-                  <div className="transaction-title">카카오스타일</div>
-                  <div className="transaction-details gap-0">
-                    <span>요청</span>
-                    <span className="separator">ㅣ</span>
-                    <span>cruiquis01m</span>
-                  </div>
-                </div>
-                <div className="transaction-amount">5,254,000원</div>
-              </div>
-            </section>
-            <div className="apply-row">
-              <button 
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToNavigation() }
-              >지급대행 신청</button>
            </div>
          </div>
        </div>
      </main>
+      <PayoutFilter
+        filterOn={ filterOn }
+        setFilterOn={ setFilterOn }
+        mid={ mid }
+        searchCl={ searchCl }
+        fromDate={ fromDate }
+        toDate={ toDate }
+        disbursementStatus= { disbursementStatus }
+        minAmount={ minAmount }
+        maxAmount={ maxAmount }
+        setMid={ setMid }
+        setSearchCl={ setSearchCl }
+        setFromDate={ setFromDate }
+        setToDate={ setToDate }
+        setDisbursementStatus={ setDisbursementStatus }
+        setMinAmount={ setMinAmount }
+        setMaxAmount={ setMaxAmount }
+      ></PayoutFilter>
    </>
  );
 };