자그ㅁㅇㅣㅊ

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},
+];

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

@@ -44,14 +44,14 @@ export interface FundAccountTransferContent {
   items: Array<FundAccountTransferContentItem>;
 };
 export interface FundAccountTransferContentItem {
-  tid: string;
+  tid?: string;
-  requestDate: string;
+  requestDate?: string;
-  transferAmount: number;
+  transferAmount?: number;
-  receiveBankName: string;
+  receiveBankName?: string;
-  receiveAccountNo: string;
+  receiveAccountNo?: string;
-  receiveAccountName: string;
+  receiveAccountName?: string;
-  status: FundAccountStatus;
+  status?: FundAccountStatus;
-  processDate: string;
+  processDate?: string;
 };
 export interface ExtensionFundAccountTransferExcelParams {
   mid: string;

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,
+  LinkPaymentWaitListItem, PayoutContent, 
-  PayoutContent {
+  FundAccountTransferContentItem {
   additionalServiceCategory?: AdditionalServiceCategory;
   mid?: string
 }

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" 
+              className="credit-period"
-              type="text" 
+              type="text"
-              value="2025.06.01 ~ 2025.06.30" 
+              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">
+        <SortOptionsBox
-          <button className="sort-btn active">최신순</button>
+          sortBy={ sortBy }
-          <span className="sort-divider">|</span>
+          onClickToSort={ onClickToSort }
-          <button className="sort-btn">고액순</button>
+        ></SortOptionsBox>
-        </div>
         <div className="excrow">
-          <div className="full-menu-keywords no-padding">
+          {
-            <span className="keyword-tag active">전체</span>
+            FundAccountStatusBtnGroup.map((value, index) => (
-            <span className="keyword-tag">성공</span>
+              <span 
-            <span className="keyword-tag">실패</span>
+                key={ `key-service-code=${ index }` }
-          </div>
+                className={ `keyword-tag ${(status === value.value)? 'active': ''}` }
+                onClick={ () => onClickToStatus(value.value) }
+              >{ value.name }</span>
+            ))
+          }
         </div>
       </section>
     

src/entities/settlement/ui/list-wrap.tsx

@@ -159,7 +159,7 @@ export const ListWrap = ({
     }
     return data;
   };
-  const onCliCkToSort = (sort: SortByKeys) => {
+  const onClickToSort = (sort: SortByKeys) => {
     setSortBy(sort);
     if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
       callSettlementList({sortBy: sort});
@@ -309,7 +309,7 @@ export const ListWrap = ({
       <div className="filter-section">
         <SortOptionsBox
           sortBy={ sortBy }
-          onClickToSort={ onCliCkToSort }
+          onClickToSort={ onClickToSort }
         ></SortOptionsBox>
         <div>
           <div className="full-menu-keywords no-padding">

src/pages/additional-service/payout/list-page.tsx

@@ -188,22 +188,22 @@ export const PayoutListPage = () => {
                   <button 
                     className="filter-btn" 
                     aria-label="필터"
+                    onClick={ () => onClickToOpenFilter() }
                   >
                     <img 
                       src={ IMAGE_ROOT + '/ico_setting.svg' }
                       alt="검색옵션"
-                      onClick={ () => onClickToOpenFilter() }
                     />
                   </button>
                 </div>
                 <button 
                   className="download-btn" 
                   aria-label="다운로드"
+                  onClick={ () => onClickToDownloadExcel() }
                 >
                   <img 
                     src={ IMAGE_ROOT + '/ico_download.svg' } 
                     alt="다운로드"
-                    onClick={ () => onClickToDownloadExcel() }
                   />
                 </button>
               </div>