자금이체 이체신청 필터 까지

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

@@ -1,8 +1,17 @@
-import { FundAccountStatus } from './types';
+import { FundAccountReceiveAccountNameNo, FundAccountStatus } from './types';
 
 export const FundAccountStatusBtnGroup = [
   {name: '전체', value: FundAccountStatus.ALL},
   {name: '성공', value: FundAccountStatus.SUCCESS},
   {name: '실패', value: FundAccountStatus.FAIL},
   {name: '중지', value: FundAccountStatus.PENDING},
-];
+];
+
+export const FundAccountReceiveAccountNameNoOptionsGroup = [
+  {name: '수취인', value: FundAccountReceiveAccountNameNo.ReceiveAccountName },
+  {name: '계좌번호', value: FundAccountReceiveAccountNameNo.ReceiveAccountNo },
+];
+
+export const FundAccountReceiveBankCodeOptionsGroup = [
+  {name: 'KB', value: 'KB'}
+]

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

@@ -9,6 +9,11 @@ export interface FundAccountTabProps {
   activeTab: FundAccountTabKeys;
 }
 
+export enum FundAccountReceiveAccountNameNo {
+  ReceiveAccountNo = 'ReceiveAccountNo',
+  ReceiveAccountName = 'ReceiveAccountName'
+};
+
 
 export interface ExtensionFundAccountTransferRequestParams {
   mid: string;
@@ -147,5 +152,5 @@ export interface ExtensionFundAccountBalanceParams {
   mid: string;
 };
 export interface ExtensionFundAccountBalanceResponse {
-  balalnce: number;
+  balance: number;
 };

src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx

@@ -0,0 +1,168 @@
+import { useEffect, useState } from 'react';
+import { FundAccountReceiveAccountNameNo, FundAccountStatus } from '../../model/fund-account/types';
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FundAccountReceiveAccountNameNoOptionsGroup, FundAccountReceiveBankCodeOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterSelectInput } from '@/shared/ui/filter/select-input';
+
+export interface FundAccountTransactionFilterProps {
+  filterOn: boolean;
+  setFilterOn: (filterOn: boolean) => void;
+  mid: string;
+  receiveAccountName: string;
+  receiveAccountNo: string;
+  fromDate: string;
+  toDate: string;
+  receiveBankCode: string;
+  status: FundAccountStatus;
+  setMid: (mid: string) => void;
+  setReceiveAccountName: (receiveAccountName: string) => void;
+  setReceiveAccountNo: (receiveAccountNo: string) => void;
+  setFromDate: (fromDate: string) => void;
+  setToDate: (toDate: string) => void;
+  setReceiveBankCode: (receiveBankCode: string) => void;
+  setStatus: (status: FundAccountStatus) => void;
+};
+export const FundAccountTransactionFilter = ({
+  filterOn,
+  setFilterOn,
+  mid,
+  receiveAccountName,
+  receiveAccountNo,
+  fromDate,
+  toDate,
+  receiveBankCode,
+  status,
+  setMid,
+  setReceiveAccountName,
+  setReceiveAccountNo,
+  setFromDate,
+  setToDate,
+  setReceiveBankCode,
+  setStatus
+}: FundAccountTransactionFilterProps) => {
+
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterReceiveAccountName, setFilterReceiveAccountName] = useState<string>(receiveAccountName);
+  const [filterReceiveAccountNo, setFilterReceiveAccountNo] = useState<string>(receiveAccountNo);
+  const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
+  const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
+  const [filterReceiveBankCode, setFilterReceiveBankCode] = useState<string>(receiveBankCode);
+  const [filterStatus, setFilterStatus] = useState<FundAccountStatus>(status);
+  const [
+    filterReceiveAccountNameNoSelectValue,
+    setFilterReceiveAccountNameNoSelectValue
+  ] = useState<FundAccountReceiveAccountNameNo>(FundAccountReceiveAccountNameNo.ReceiveAccountName);
+  const [
+    filterReceiveAccountNameNoInputValue, 
+    setFilterReceiveAccountNameNoInputValue
+  ] = useState<string>('');
+
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
+
+  const onClickToSetFilter = () => {
+    setMid(filterMid);
+    if(filterReceiveAccountNameNoSelectValue === FundAccountReceiveAccountNameNo.ReceiveAccountName){
+      setReceiveAccountName(filterReceiveAccountNameNoInputValue);
+      setReceiveAccountNo('');
+    }
+    else if(filterReceiveAccountNameNoSelectValue === FundAccountReceiveAccountNameNo.ReceiveAccountNo){
+      setReceiveAccountName('');
+      setReceiveAccountNo(filterReceiveAccountNameNoInputValue);  
+    }
+    
+    setFromDate(filterFromDate);
+    setToDate(filterToDate);
+    setReceiveBankCode(filterReceiveBankCode);
+    setStatus(filterStatus);
+    onClickToClose();
+  };
+
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+
+  useEffect(() => {
+    setFilterStatus(status);
+  }, [status]);
+
+  return (
+    <>
+      <motion.div 
+        id="fullMenuModal" 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (filterOn)? 'visible': 'hidden' }
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
+      >
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-actions">
+              <button 
+                id="closeFullMenu"
+                className="full-menu-close"
+              >
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                  onClick={ () => onClickToClose() }
+                />
+              </button>
+            </div>
+          </div>
+          <div className="option-list pt-16">
+            <FilterSelect
+              title='가맹점'
+              selectValue={ filterMid }
+              selectSetter={ setFilterMid }
+              selectOptions={ MidOptions }
+            ></FilterSelect>
+            <FilterSelectInput
+              title='수취인/계좌번호'
+              selectValue={ filterReceiveAccountNameNoSelectValue }
+              selectSetter={ setFilterReceiveAccountNameNoSelectValue }
+              selectOptions={ FundAccountReceiveAccountNameNoOptionsGroup }
+              inputValue={ filterReceiveAccountNameNoInputValue }
+              inputSetter={ setFilterReceiveAccountNameNoInputValue }
+            ></FilterSelectInput>
+            <FilterCalendar
+              title='조회기간'
+              startDate={ filterFromDate }
+              endDate={ filterToDate }
+              setStartDate={ setFilterFromDate }
+              setEndDate={ setFilterToDate }
+            ></FilterCalendar>
+            <FilterSelect
+              title='은행'
+              selectValue={ filterReceiveBankCode }
+              selectSetter={ setFilterReceiveBankCode }
+              selectOptions={ FundAccountReceiveBankCodeOptionsGroup }
+            ></FilterSelect>
+            <FilterButtonGroups
+              title='처리 결과'
+              activeValue={ filterStatus }
+              btnGroups={ FundAccountStatusBtnGroup }
+              setter={ setFilterStatus }
+            ></FilterButtonGroups>
+          </div>
+          <div className="apply-row">
+            <button 
+              className="btn-50 btn-blue flex-1"
+              onClick={ () => onClickToSetFilter() }
+            >적용</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};

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

@@ -66,7 +66,6 @@ export const PayoutFilter = ({
   const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
   
-  
   const onClickToClose = () => {
     setFilterOn(false);
   };
@@ -141,7 +140,7 @@ export const PayoutFilter = ({
               title='지급상태'
               activeValue={ filterDisbursementStatus }
               btnGroups={ PayoutDisbursementStatusBtnGroup }
-              setter={ setDisbursementStatus }
+              setter={ setFilterDisbursementStatus }
             ></FilterButtonGroups>
             <FilterRangeAmount
               title='거래금액'

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

@@ -3,6 +3,8 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks';
 import { useEffect, useState } from 'react';
 import { 
+  ExtensionFundAccountBalanceParams,
+  ExtensionFundAccountBalanceResponse,
   ExtensionFundAccountTransferExcelParams, 
   ExtensionFundAccountTransferExcelResponse, 
   ExtensionFundAccountTransferListParams, 
@@ -19,6 +21,9 @@ 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';
+import { useExtensionFundAccountBalanceMutation } from '../../api/fund-account/use-extension-fund-account-balance-mutation';
+import { NumericFormat } from 'react-number-format';
+import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction-filter';
 
 export const FundAccountTransferListWrap = () => {
   const { navigate } = useNavigate();
@@ -28,12 +33,19 @@ export const FundAccountTransferListWrap = () => {
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>('nictest001m');
+  const [receiveAccountName, setReceiveAccountName] = useState<string>('');
+  const [receiveAccountNo, setReceiveAccountNo] = useState<string>('');
   const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
   const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
   const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.ALL);
+  const [receiveBankCode, setReceiveBankCode] = useState<string>('');
+
+  const [balance, setBalance] = useState<number>(0);
 
   const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
   const { mutateAsync: extensionFundAccountTransferExcel } = useExtensionFundAccountTransferExcelMutation();
+  const { mutateAsync: extensionFundAccountBalance } = useExtensionFundAccountBalanceMutation();
+
   const callList = (option?: {
     sortBy?: string, 
     val?: string
@@ -69,6 +81,16 @@ export const FundAccountTransferListWrap = () => {
     });
   };
 
+  const callBalance = () => {
+    let params: ExtensionFundAccountBalanceParams = {
+      mid: mid
+    };
+    extensionFundAccountBalance(params).then((rs: ExtensionFundAccountBalanceResponse) => {
+      console.log(rs);
+      setBalance(rs.balance);
+    });
+  };
+
   const assembleData = (content: Array<FundAccountTransferContent>) => {
     let data: any = {};
     if(content && !!content[0] && content.length > 0){
@@ -79,7 +101,7 @@ export const FundAccountTransferListWrap = () => {
           data[groupDate] = [];
         }
         if(!!groupDate && data.hasOwnProperty(groupDate)){
-          data[groupDate].push(content[i]);
+          data[groupDate].push(items[i]);
         }
       }
     }
@@ -123,6 +145,7 @@ export const FundAccountTransferListWrap = () => {
 
   useEffect(() => {
     callList();
+    callBalance();
   }, []);
 
   return (
@@ -162,7 +185,13 @@ 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">
+                <NumericFormat
+                  value={ balance }
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat><span className="unit">원</span>
+              </span>
             </div>
           </div>
         </div>
@@ -177,6 +206,7 @@ export const FundAccountTransferListWrap = () => {
           onClickToSort={ onClickToSort }
         ></SortOptionsBox>
         <div className="excrow">
+          <div className="full-menu-keywords no-padding">
           {
             FundAccountStatusBtnGroup.map((value, index) => (
               <span 
@@ -186,89 +216,34 @@ export const FundAccountTransferListWrap = () => {
               >{ value.name }</span>
             ))
           }
+          </div>
         </div>
       </section>
     
       <section className="transaction-list">
-        <div className="date-header">25.06.08(일)</div>
+        { getListDateGroup() }
-        <div className="transaction-item approved">
-          <div className="transaction-status">
-            <div className="status-dot blue"></div>
-          </div>
-          <div className="transaction-content">
-            <div className="transaction-title">김*환(7000)</div>
-            <div className="transaction-details">
-              <span>20:00</span>
-              <span className="separator">ㅣ</span>
-              <span>미결제</span>
-              <span className="separator">ㅣ</span>
-              <span>결제대기</span>
-              <span className="separator">ㅣ</span>
-              <span>SMS</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">김*환(7000)</div>
-            <div className="transaction-details">
-              <span>20:00</span>
-              <span className="separator">ㅣ</span>
-              <span>미결제</span>
-              <span className="separator">ㅣ</span>
-              <span>결제대기</span>
-              <span className="separator">ㅣ</span>
-              <span>SMS</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">김*환(7000)</div>
-            <div className="transaction-details">
-              <span>20:00</span>
-              <span className="separator">ㅣ</span>
-              <span>미결제</span>
-              <span className="separator">ㅣ</span>
-              <span>결제대기</span>
-              <span className="separator">ㅣ</span>
-              <span>SMS</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">김*환(7000)</div>
-            <div className="transaction-details">
-              <span>20:00</span>
-              <span className="separator">ㅣ</span>
-              <span>미결제</span>
-              <span className="separator">ㅣ</span>
-              <span>결제대기</span>
-              <span className="separator">ㅣ</span>
-              <span>SMS</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">이체 등록</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 }
+      ></FundAccountTransactionFilter>
+</>
   );
 };

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

@@ -47,6 +47,13 @@ export const ListDateGroup = ({
             companyName={ items[i]?. companyName }
             disbursementStatus={ items[i]?.disbursementStatus }
             disbursementAmount={ items[i]?.disbursementAmount }
+
+            transferAmount={ items[i]?.transferAmount }
+            receiveBankName={ items[i]?.receiveBankName }
+            receiveAccountNo={ items[i]?.receiveAccountNo }
+            receiveAccountName={ items[i]?.receiveAccountName }
+            status={ items[i]?.status }
+            processDate={items[i]?.processDate }
           ></ListItem>
         )
       }  

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

@@ -16,7 +16,11 @@ export const ListItem = ({
   accountName,transferStatus,
 
   submallId, settlementDate, companyName,
-  disbursementStatus, disbursementAmount
+  disbursementStatus, disbursementAmount,
+
+  transferAmount, receiveBankName, 
+  receiveAccountNo, receiveAccountName,
+  status, processDate
 }: ListItemProps) => {
   const { navigate } = useNavigate();
   const getItemClass = () => {
@@ -171,6 +175,9 @@ export const ListItem = ({
       let time = requestDate?.substring(8, 14);
       timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccount) {
+      timeStr = moment(requestDate).format('mm:ss');
+    }
     else {
       return
     }
@@ -200,6 +207,9 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
       str = companyName;
     }
+    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccount){
+      str = `${receiveAccountName}(${receiveAccountNo})`
+    }
 
     return str;
   };
@@ -272,6 +282,15 @@ export const ListItem = ({
         </div>
       );
     }
+    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccount){
+      rs.push(
+        <div className="transaction-details">
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ status }</span>
+        </div>
+      );
+    }
     return rs;
   };
 
@@ -291,7 +310,7 @@ export const ListItem = ({
             value={amount}
             thousandSeparator
             displayType="text"
-            suffix={'원'}
+            suffix='원'
           ></NumericFormat>
         </div>
       );
@@ -312,10 +331,10 @@ export const ListItem = ({
             value={amount}
             thousandSeparator
             displayType="text"
-            suffix={'원'}
+            suffix='원'
           ></NumericFormat>
         </div>
-      )
+      );
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
       rs.push(
@@ -327,10 +346,25 @@ export const ListItem = ({
             value={disbursementAmount}
             thousandSeparator
             displayType="text"
-            suffix={'원'}
+            suffix='원'
           ></NumericFormat>
         </div>
-      )
+      );
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccount) {
+      rs.push(
+        <div
+          key="payout-item-amount"
+          className="transaction-amount"
+        >
+          <NumericFormat
+            value={transferAmount}
+            thousandSeparator
+            displayType="text"
+            suffix='원'
+          ></NumericFormat>
+        </div>
+      );
     }
     return rs;
   }
@@ -345,10 +379,10 @@ export const ListItem = ({
           <div className={`status-dot ${getDotClass()}`}></div>
         </div>
         <div className="transaction-content">
-          <div className="transaction-title">{getTitle()}</div>
+          <div className="transaction-title">{ getTitle() }</div>
-          {getDetail()}
+          { getDetail() }
         </div>
-        {getAmount()}
+        { getAmount() }
       </div>
     </>
   );