자그ㅁㅇㅣㅊ

2025-09-22 19:58:05 +09:00
parent 20a6e33b73
commit 7d473cdc0a
6 changed files with 166 additions and 29 deletions
--- a/src/entities/additional-service/model/fund-account/constant.ts
+++ b/src/entities/additional-service/model/fund-account/constant.ts
@@ -0,0 +1,8 @@
+import { FundAccountStatus } from './types';
+
+export const FundAccountStatusBtnGroup = [
+  {name: '전체', value: FundAccountStatus.ALL},
+  {name: '성공', value: FundAccountStatus.SUCCESS},
+  {name: '실패', value: FundAccountStatus.FAIL},
+  {name: '중지', value: FundAccountStatus.PENDING},
+];
--- a/src/entities/additional-service/model/fund-account/types.ts
+++ b/src/entities/additional-service/model/fund-account/types.ts
@@ -44,14 +44,14 @@ export interface FundAccountTransferContent {
  items: Array<FundAccountTransferContentItem>;
 };
 export interface FundAccountTransferContentItem {
-  tid: string;
-  requestDate: string;
-  transferAmount: number;
-  receiveBankName: string;
-  receiveAccountNo: string;
-  receiveAccountName: string;
-  status: FundAccountStatus;
-  processDate: string;
+  tid?: string;
+  requestDate?: string;
+  transferAmount?: number;
+  receiveBankName?: string;
+  receiveAccountNo?: string;
+  receiveAccountName?: string;
+  status?: FundAccountStatus;
+  processDate?: string;
 };
 export interface ExtensionFundAccountTransferExcelParams {
  mid: string;
--- a/src/entities/additional-service/model/types.ts
+++ b/src/entities/additional-service/model/types.ts
@@ -1,6 +1,7 @@
 import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
 import { PayoutContent } from './payout/types';
 import { P } from 'node_modules/framer-motion/dist/types.d-Cjd591yU';
+import { FundAccountTransferContentItem } from './fund-account/types';

 // ========================================
 // 공통 Enums 및 타입들
@@ -365,8 +366,8 @@ export interface SettlementAgencyBottomAgreeProps {
 export interface ListItemProps extends
  KeyInPaymentListItem, AccountHolderSearchListItem,
  AccountHolderAuthListItem,LinkPaymentHistoryListItem,
-  LinkPaymentWaitListItem,
-  PayoutContent {
+  LinkPaymentWaitListItem, PayoutContent, 
+  FundAccountTransferContentItem {
  additionalServiceCategory?: AdditionalServiceCategory;
  mid?: string
 }
--- a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
@@ -1,6 +1,129 @@
-import { IMAGE_ROOT } from "@/shared/constants/common";
+import { SortByKeys } from '@/entities/common/model/types';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { useNavigate } from '@/shared/lib/hooks';
+import { useEffect, useState } from 'react';
+import { 
+  ExtensionFundAccountTransferExcelParams, 
+  ExtensionFundAccountTransferExcelResponse, 
+  ExtensionFundAccountTransferListParams, 
+  ExtensionFundAccountTransferListResponse, 
+  FundAccountStatus, 
+  FundAccountTransferContent, 
+  FundAccountTransferContentItem 
+} from '../../model/fund-account/types';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
+import moment from 'moment';
+import { useExtensionFundAccountTransferListMutation } from '../../api/fund-account/use-extension-fund-account-transfer-list-mutation';
+import { ListDateGroup } from '../list-date-group';
+import { AdditionalServiceCategory } from '../../model/types';
+import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
+import { useExtensionFundAccountTransferExcelMutation } from '../../api/fund-account/use-extension-fund-account-transfer-excel-mutation';
+import { FundAccountStatusBtnGroup } from '../../model/fund-account/constant';

 export const FundAccountTransferListWrap = () => {
+  const { navigate } = useNavigate();
+
+  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [listItems, setListItems] = useState<Record<string, Array<FundAccountTransferContentItem>>>({});
+  const [filterOn, setFilterOn] = useState<boolean>(false);
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
+  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
+  const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.ALL);
+
+  const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
+  const { mutateAsync: extensionFundAccountTransferExcel } = useExtensionFundAccountTransferExcelMutation();
+  const callList = (option?: {
+    sortBy?: string, 
+    val?: string
+  }) => {
+    
+    pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+    setPageParam(pageParam);
+
+    let params: ExtensionFundAccountTransferListParams = {
+      mid: mid,
+      fromDate: fromDate,
+      toDate: toDate,
+      status: status,
+      pagination: pageParam
+    };
+
+    extensionFundAccountTransferList(params).then((rs: ExtensionFundAccountTransferListResponse) => {
+      console.log(rs);
+      setListItems(assembleData(rs.content));
+    });
+
+  };
+
+  const callDownloadExcel = () => {
+    let params: ExtensionFundAccountTransferExcelParams = {
+      mid: mid,
+      fromDate: fromDate,
+      toDate: toDate,
+      status: status,
+    };
+    extensionFundAccountTransferExcel(params).then((rs: ExtensionFundAccountTransferExcelResponse) => {
+
+    });
+  };
+
+  const assembleData = (content: Array<FundAccountTransferContent>) => {
+    let data: any = {};
+    if(content && !!content[0] && content.length > 0){
+      let items: Array<FundAccountTransferContentItem> = content[0].items;
+      for(let i=0;i<items.length;i++){
+        let groupDate = moment(items[i]?.requestDate).format('YYYYMMDD');
+        if(!!groupDate && !data.hasOwnProperty(groupDate)){
+          data[groupDate] = [];
+        }
+        if(!!groupDate && data.hasOwnProperty(groupDate)){
+          data[groupDate].push(content[i]);
+        }
+      }
+    }
+    return data;
+  };
+
+  const onClickToDownloadExcel = () => {
+    callDownloadExcel();
+  };
+
+  const onClickToOpenFilter = () => {
+    setFilterOn(!filterOn);
+  };
+
+  const onClickToSort = (sort: SortByKeys) => {
+    setSortBy(sort);
+    callList({sortBy: sort});
+  };
+  const onClickToStatus = (val: FundAccountStatus) => {
+    setStatus(val);
+    callList({val: val});
+  };
+
+  const getListDateGroup = () => {
+    let rs = [];
+    if(Object.keys(listItems).length > 0){
+      for (const [key, value] of Object.entries(listItems)) {
+        rs.push(
+          <ListDateGroup
+            additionalServiceCategory={ AdditionalServiceCategory.FundAccount }
+            mid={ mid }
+            key={ key }
+            date={ key }
+            items={ value }
+          ></ListDateGroup>
+        );  
+      }
+    }
+    return rs;
+  };
+
+  useEffect(() => {
+    callList();
+  }, []);

  return (
    <>
@@ -8,14 +131,15 @@ export const FundAccountTransferListWrap = () => {
        <div className="credit-controls">
          <div>
            <input 
-              className="credit-period" 
-              type="text" 
-              value="2025.06.01 ~ 2025.06.30" 
+              className="credit-period"
+              type="text"
+              value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') } 
              readOnly={ true }
            />
            <button 
              className="filter-btn" 
              aria-label="필터"
+              onClick={ () => onClickToOpenFilter() }
            >
              <img 
                src={ IMAGE_ROOT + '/ico_setting.svg' } 
@@ -26,6 +150,7 @@ export const FundAccountTransferListWrap = () => {
          <button 
            className="download-btn" 
            aria-label="다운로드"
+            onClick={ () => onClickToDownloadExcel() }
          >
            <img 
              src={ IMAGE_ROOT + '/ico_download.svg' }
@@ -37,7 +162,7 @@ export const FundAccountTransferListWrap = () => {
          <div className="credit-summary">
            <div className="row">
              <span className="label">잔액</span>
-              <span className="amount22">2,000,000,000원<span className="unit">원</span></span>
+              <span className="amount22">2,000,000,000<span className="unit">원</span></span>
            </div>
          </div>
        </div>
@@ -47,17 +172,20 @@ export const FundAccountTransferListWrap = () => {
      </section>

      <section className="filter-section">
-        <div className="sort-options">
-          <button className="sort-btn active">최신순</button>
-          <span className="sort-divider">|</span>
-          <button className="sort-btn">고액순</button>
-        </div>
+        <SortOptionsBox
+          sortBy={ sortBy }
+          onClickToSort={ onClickToSort }
+        ></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>
-          </div>
+          {
+            FundAccountStatusBtnGroup.map((value, index) => (
+              <span 
+                key={ `key-service-code=${ index }` }
+                className={ `keyword-tag ${(status === value.value)? 'active': ''}` }
+                onClick={ () => onClickToStatus(value.value) }
+              >{ value.name }</span>
+            ))
+          }
        </div>
      </section>