- 부가서비스 : 자금이체_이체신청 List,필터 재구성

src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx

@@ -1,18 +1,17 @@
 import { SortTypeKeys } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { useEffect, useState } from 'react';
-import { 
+import { JSX, useEffect, useState } from 'react';
+import {
   ExtensionFundAccountBalanceParams,
   ExtensionFundAccountBalanceResponse,
-  ExtensionFundAccountTransferExcelParams, 
-  ExtensionFundAccountTransferExcelResponse, 
-  ExtensionFundAccountTransferListParams, 
-  ExtensionFundAccountTransferListResponse, 
-  FundAccountSearchCl, 
-  FundAccountStatus, 
-  FundAccountTransferContent, 
-  FundAccountTransferContentItem 
+  ExtensionFundAccountTransferExcelParams,
+  ExtensionFundAccountTransferExcelResponse,
+  ExtensionFundAccountTransferListParams,
+  ExtensionFundAccountTransferListResponse,
+  FundAccountSearchCl,
+  FundAccountStatus,
+  FundAccountTransferContentItem
 } from '../../model/fund-account/types';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import moment from 'moment';
@@ -33,18 +32,16 @@ export const FundAccountTransferListWrap = () => {
   const userMid = useStore.getState().UserStore.mid;
 
   const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
-  const [listItems, setListItems] = useState<Record<string, Array<FundAccountTransferContentItem>>>({});
+  const [listItems, setListItems] = useState<Array<FundAccountTransferContentItem>>([]);
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>(userMid);
-  const [receiveAccountName, setReceiveAccountName] = useState<string>('');
-  const [receiveAccountNo, setReceiveAccountNo] = useState<string>('');
   const [searchCl, setSearchCl] = useState<FundAccountSearchCl>(FundAccountSearchCl.ACCOUNT_NAME);
   const [searchValue, setSearchValue] = useState<string>('');
   const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
   const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
-  const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.REQUEST_FAIL);
-  const [receiveBankCode, setReceiveBankCode] = useState<string>('');
+  const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.ALL);
+  const [bankCode, setBankCode] = useState<string>('');
 
   const [balance, setBalance] = useState<number>(0);
 
@@ -53,28 +50,29 @@ export const FundAccountTransferListWrap = () => {
   const { mutateAsync: extensionFundAccountBalance } = useExtensionFundAccountBalanceMutation();
 
   const callList = (option?: {
-    sortType?: SortTypeKeys, 
-    val?: string
+    sortType?: SortTypeKeys,
+    status?: FundAccountStatus
   }) => {
-    
-    pageParam.sortType = (option?.sortType)? option.sortType: sortType;
+    pageParam.sortType = (option?.sortType) ? option.sortType : sortType;
     setPageParam(pageParam);
 
-    let params: ExtensionFundAccountTransferListParams = {
-      mid: mid,
+    let listSummaryParams: ExtensionFundAccountTransferListParams = {
+      mid: "nictest80m",
       searchCl: searchCl,
       searchValue: searchValue,
-      fromDate: fromDate,
-      toDate: toDate,
-      resultStatus: status,
+      bankCode: bankCode,
+      fromDate: "20210101",
+      toDate: "20221231",
+      resultStatus: option?.status ?? status,
       page: pageParam
     };
 
-    extensionFundAccountTransferList(params).then((rs: ExtensionFundAccountTransferListResponse) => {
-      console.log(rs);
-      setListItems(assembleData(rs.content));
+    extensionFundAccountTransferList(listSummaryParams).then((rs: any) => {
+      const content = rs.content || [];
+      setListItems(rs.content);
     });
 
+    callBalance();
   };
 
   const callDownloadExcel = () => {
@@ -99,22 +97,6 @@ export const FundAccountTransferListWrap = () => {
     });
   };
 
-  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(items[i]);
-        }
-      }
-    }
-    return data;
-  };
 
   const onClickToDownloadExcel = () => {
     callDownloadExcel();
@@ -126,37 +108,68 @@ export const FundAccountTransferListWrap = () => {
 
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
-    callList({sortType: sort});
+    callList({ sortType: sort });
   };
   const onClickToStatus = (val: FundAccountStatus) => {
     setStatus(val);
     callList({
-      val: val
+      status: val
     });
   };
 
   const getListDateGroup = () => {
-    let rs = [];
-    if(Object.keys(listItems).length > 0){
-      for (const [key, value] of Object.entries(listItems)) {
-        rs.push(
-          <ListDateGroup
-            additionalServiceCategory={ AdditionalServiceCategory.FundAccountTransfer }
-            mid={ mid }
-            key={ key }
-            date={ key }
-            items={ value }
-          ></ListDateGroup>
-        );  
+    let rs: JSX.Element[] = [];
+    let date = '';
+    let list: FundAccountTransferContentItem[] = [];
+    for (let i = 0; i < listItems.length; i++) {
+      // registDate format: "20211018140420" (YYYYMMDDHHmmss)
+      let registDate = listItems[i]?.registDate || '';
+      let itemDate = registDate.substring(0, 8);
+      if (i === 0) {
+        date = itemDate;
       }
+      if (date !== itemDate) {
+        date = itemDate;
+        if (list.length > 0) {
+          rs.push(
+            <ListDateGroup
+              additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
+              mid={"nictest80m"}
+              key={date + '-' + i}
+              date={date}
+              items={list as any}
+            ></ListDateGroup>
+          );
+        }
+        list = [];
+      }
+      list.push(listItems[i] as any);
+    }
+    if (list.length > 0) {
+      rs.push(
+        <ListDateGroup
+          additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
+          mid={"nictest80m"}
+          key={date + '-last'}
+          date={date}
+          items={list as any}
+        ></ListDateGroup>
+      );
     }
     return rs;
   };
 
   useEffect(() => {
     callList();
-    callBalance();
-  }, []);
+  }, [
+    mid,
+    searchCl,
+    searchValue,
+    fromDate,
+    toDate,
+    bankCode,
+    status
+  ]);
 
   const onClickToNavigate = () => {
     navigate(PATHS.additionalService.fundAccount.transferRequest);
@@ -167,30 +180,30 @@ export const FundAccountTransferListWrap = () => {
       <section className="summary-section pt-30">
         <div className="credit-controls">
           <div>
-            <input 
+            <input
               className="credit-period"
               type="text"
-              value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') } 
-              readOnly={ true }
+              value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
+              readOnly={true}
             />
-            <button 
-              className="filter-btn" 
+            <button
+              className="filter-btn"
               aria-label="필터"
-              onClick={ () => onClickToOpenFilter() }
+              onClick={() => onClickToOpenFilter()}
             >
-              <img 
-                src={ IMAGE_ROOT + '/ico_setting.svg' } 
+              <img
+                src={IMAGE_ROOT + '/ico_setting.svg'}
                 alt="검색옵션"
               />
             </button>
           </div>
-          <button 
-            className="download-btn" 
+          <button
+            className="download-btn"
             aria-label="다운로드"
-            onClick={ () => onClickToDownloadExcel() }
+            onClick={() => onClickToDownloadExcel()}
           >
-            <img 
-              src={ IMAGE_ROOT + '/ico_download.svg' }
+            <img
+              src={IMAGE_ROOT + '/ico_download.svg'}
               alt="다운로드"
             />
           </button>
@@ -201,7 +214,7 @@ export const FundAccountTransferListWrap = () => {
               <span className="label">잔액</span>
               <span className="amount22">
                 <NumericFormat
-                  value={ balance }
+                  value={balance}
                   thousandSeparator
                   displayType="text"
                 ></NumericFormat><span className="unit">원</span>
@@ -216,50 +229,50 @@ export const FundAccountTransferListWrap = () => {
 
       <section className="filter-section">
         <SortTypeBox
-          sortType={ sortType }
-          onClickToSort={ onClickToSort }
+          sortType={sortType}
+          onClickToSort={onClickToSort}
         ></SortTypeBox>
         <div className="excrow mr-0">
           <div className="full-menu-keywords no-padding">
-          {
-            FundAccountStatusBtnGroup.map((value, index) => (
-              <span 
-                key={ `key-service-code=${ index }` }
-                className={ `keyword-tag ${(status === value.value)? 'active': ''}` }
-                onClick={ () => onClickToStatus(value.value) }
-              >{ value.name }</span>
-            ))
-          }
+            {
+              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>
         </div>
       </section>
-    
+
       <section className="transaction-list pb-86">
-        { getListDateGroup() }
+        {getListDateGroup()}
       </section>
       <div className="apply-row">
-        <button 
+        <button
           className="btn-50 btn-blue flex-1"
-          onClick={ onClickToNavigate }
+          onClick={onClickToNavigate}
         >이체 등록</button>
       </div>
       <FundAccountTransactionFilter
-        filterOn={ filterOn }
-        setFilterOn={ setFilterOn }
-        mid={ mid }
-        receiveAccountName={ receiveAccountName }
-        receiveAccountNo={ receiveAccountNo }
-        fromDate={ fromDate }
-        toDate={ toDate }
-        receiveBankCode= { receiveBankCode }
-        status={ status }
-        setMid={ setMid }
-        setReceiveAccountName={ setReceiveAccountName }
-        setReceiveAccountNo={ setReceiveAccountNo }
-        setFromDate={ setFromDate }
-        setToDate={ setToDate }
-        setReceiveBankCode={ setReceiveBankCode }
-        setStatus={ setStatus }
+        filterOn={filterOn}
+        setFilterOn={setFilterOn}
+        mid={mid}
+        searchCl={searchCl}
+        searchValue={searchValue}
+        fromDate={fromDate}
+        toDate={toDate}
+        bankCode={bankCode}
+        status={status}
+        setMid={setMid}
+        setSearchCl={setSearchCl}
+        setSearchValue={setSearchValue}
+        setFromDate={setFromDate}
+        setToDate={setToDate}
+        setBankCode={setBankCode}
+        setStatus={setStatus}
       ></FundAccountTransactionFilter>
     </>
   );