- 부가서비스 : 계좌성명조회 목업 API 연결

- 부가서비스 Types 정리
2025-09-17 18:45:54 +09:00
parent aaf1b3bb40
commit 22bdd45f0a
12 changed files with 884 additions and 577 deletions
--- a/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx
+++ b/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx
@@ -0,0 +1,46 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { ListDateGroup } from '../list-date-group';
+import { AccountHolderSearchListProps } from '../../model/types'
+
+export const AccountHolderSearchList = ({
+    additionalServiceCategory,
+    listItems,
+    mid
+}: AccountHolderSearchListProps) => {
+    const { navigate } = useNavigate();
+
+    const getListDateGroup = () => {
+        let rs = [];
+        for (const [key, value] of Object.entries(listItems)) {
+            rs.push(
+                <ListDateGroup
+                    additionalServiceCategory={additionalServiceCategory}
+                    key={key}
+                    date={key}
+                    items={value}
+                    mid={mid}
+                ></ListDateGroup>
+            );
+        }
+        return rs;
+    };
+
+    const onClickToNavigate = () => {
+        navigate(PATHS.additionalService.accountHolderSearch.request)
+    };
+
+    return (
+        <>
+            <div className="transaction-list">
+                {getListDateGroup()}
+                <div className="apply-row">
+                    <button
+                        className="btn-50 btn-blue flex-1"
+                        onClick={() => onClickToNavigate()}
+                    >조회 신청</button>
+                </div>
+            </div>
+        </>
+    );
+}
--- a/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx
+++ b/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx
@@ -7,7 +7,7 @@ import {
    AccountHolderSearchType,
    AccountHolderSearchFilterProps,
    ProcessResult
-} from '../../model/types';
+} from '../../../model/types';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterDateOptions } from '@/entities/common/model/types';
@@ -66,6 +66,7 @@ export const AccountHolderSearchFilter = ({
        setEndDate(filterEndDate);
        setBank(filterBank);
        setProcessResult(filterProcessResult);
+        onClickToClose();
    };

    let MidOptions = [
@@ -74,19 +75,19 @@ export const AccountHolderSearchFilter = ({
    ];

    let bankOptions = [
-        { name: '우리은행', value: '우리은행'},
-        { name: '토스뱅킹', value: '토스뱅킹'}
+        { name: '우리은행', value: '우리은행' },
+        { name: '토스뱅킹', value: '토스뱅킹' }
    ]

    let searchTypeOption = [
-        { name: '예금주', value: AccountHolderSearchType.ACCOUNT_HOLDER },
-        { name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NUMBER },
+        { name: '예금주', value: AccountHolderSearchType.ACCOUNT_NAME },
+        { name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NO },
    ]

    let processResultBtnGroup = [
        { name: '전체', value: ProcessResult.ALL },
        { name: '성공', value: ProcessResult.SUCCESS },
-        { name: '실패', value: ProcessResult.FAILURE },
+        { name: '실패', value: ProcessResult.FAIL },
    ];

    return (
--- a/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
+++ b/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
@@ -4,22 +4,22 @@ import { KeyInPaymentListProps } from '../../model/types'
 import { ListDateGroup } from '../list-date-group';

 export const KeyInPaymentList = ({
-    additionalServiceCategory,
-    listItems
-}: KeyInPaymentListProps ) => {
-    const { navigate } = useNavigate();
+  additionalServiceCategory,
+  listItems
+}: KeyInPaymentListProps) => {
+  const { navigate } = useNavigate();

  const getListDateGroup = () => {
    let rs = [];
    for (const [key, value] of Object.entries(listItems)) {
      rs.push(
        <ListDateGroup
-          additionalServiceCategory ={ additionalServiceCategory }
-          key={ key }
-          date={ key }
-          items={ value }
+          additionalServiceCategory={additionalServiceCategory}
+          key={key}
+          date={key}
+          items={value}
        ></ListDateGroup>
-      );  
+      );
    }
    return rs;
  };
@@ -27,18 +27,18 @@ export const KeyInPaymentList = ({
  const onClickToNavigate = () => {
    navigate(PATHS.additionalService.keyInPayment.request)
  };
-  
+
  return (
    <>
      <div className="transaction-list">
-        { getListDateGroup() }
+        {getListDateGroup()}
        <div className="apply-row">
-          <button 
+          <button
            className="btn-50 btn-blue flex-1"
-            onClick={ () => onClickToNavigate() }          
+            onClick={() => onClickToNavigate()}
          >결제 신청</button>
        </div>
-      </div>  
+      </div>
    </>
  );
 }
--- a/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx
+++ b/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx
@@ -98,7 +98,7 @@ export const LinkPaymentShippingHistoryFilter = ({
    let processResultOption = [
        { name: '전체', value: ProcessResult.ALL },
        { name: '성공', value: ProcessResult.SUCCESS },
-        { name: '실패', value: ProcessResult.FAILURE },
+        { name: '실패', value: ProcessResult.FAIL },
    ]

        let sendMethodOption = [
--- a/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx
@@ -12,7 +12,7 @@ import { LinkPaymentSearchType, } from "../../model/types";
 const processResultBtnGroup = [
    { name: '전체', value: ProcessResult.ALL },
    { name: '성공', value: ProcessResult.SUCCESS },
-    { name: '실패', value: ProcessResult.FAILURE }
+    { name: '실패', value: ProcessResult.FAIL }
 ]

 export const LinkPaymentShippingHistoryWrap = () => {
--- a/src/entities/additional-service/ui/list-date-group.tsx
+++ b/src/entities/additional-service/ui/list-date-group.tsx
@@ -6,7 +6,8 @@ import { ListItem } from '../ui/list-item';
 export const ListDateGroup = ({
  additionalServiceCategory,
  date,
-  items
+  items,
+  mid
 }: ListDateGroupProps) => {
  moment.locale('ko');
  const getStateDate = () => {
@@ -27,12 +28,10 @@ export const ListDateGroup = ({
            paymentDate= { items[i]?.paymentDate}
            paymentStatus={ items[i]?.paymentStatus}

-            requestId={ items[i]?.requestId }
            requestDate={ items[i]?.requestDate }
-            bank={ items[i]?.bank }
-            accountNumber={ items[i]?.accountNumber }
-            accountHolder={ items[i]?.accountHolder }
-            processResult={ items[i]?.processResult }
+            bankName={ items[i]?.bankName}
+            accountNo={ items[i]?.accountNo }
+            resultStatus={ items[i]?.resultStatus }

            transactionId={ items[i]?.transactionId }
            customerName={ items[i]?.customerName }
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -6,10 +6,9 @@ import moment from 'moment';

 export const ListItem = ({
  additionalServiceCategory,
-  tid, paymentDate, paymentStatus,
+  mid, tid, paymentDate, paymentStatus,

-  requestId, requestDate, bank, accountNumber,
-  accountHolder, processResult,
+  requestDate, bankName, accountNo, resultStatus,

  transactionId, customerName, status, channel,
  amount, sendDate, transactionDate
@@ -34,46 +33,67 @@ export const ListItem = ({

  const getDotClass = (str?: string) => {
    let rs = '';
-    if (paymentStatus === '') {
-      rs = '';
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      if (paymentStatus === '') {
+        rs = '';
+      }
+      else if (paymentStatus === "APPROVAL") {
+        rs = 'blue';
+      }
+      else if (paymentStatus === "ALL_CANCEL") {
+        rs = 'gray';
+      }
+      else if (paymentStatus === 'AFTER_CANCEL') {
+        rs = 'gray';
+      }
+      
    }
-    else if (paymentStatus === "APPROVAL") {
-      rs = 'blue';
-    }
-    else if (paymentStatus === "ALL_CANCEL") {
-      rs = 'gray';
-    }
-    else if (paymentStatus === 'AFTER_CANCEL') {
-      rs = 'gray';
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
+      if (resultStatus === "SUCCESS") {
+        rs = 'blue';
+      }
+      else if (resultStatus === "FAIL") {
+        rs = 'gray';
+      }
    }
    return rs;
+
  };

  const onClickToNavigate = () => {
    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
-      
+
      return;
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      navigate(PATHS.additionalService.accountHolderSearch.detail, {
        state: {
-          requestId: requestId
+          mid: mid,
+          tid: tid
        }
      });
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
      navigate(PATHS.additionalService.linkPayment.detail, {
        state: {
-          transactionId: transactionId
+          mid: mid,
+          tid: tid
        }
      });
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
      navigate(PATHS.additionalService.linkPayment.detail, {
        state: {
-          transactionId: transactionId
+          mid: mid,
+          tid: tid
        }
      });
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundTransfer) {
+
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.SettlementAgency) {
+
    }
    else {
      alert('additionalServiceCategory가 존재하지 않습니다.');
@@ -87,7 +107,8 @@ export const ListItem = ({
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
-      timeStr = moment(requestDate).format('HH:mm');
+      let time = requestDate?.substring(8, 14);
+      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
      timeStr = moment(transactionDate).format('HH:mm');
@@ -104,7 +125,7 @@ export const ListItem = ({
      str = `${tid}(${amount})`;
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
-      str = `${accountHolder}(${accountNumber})`
+      str = `${accountNo}`
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
      str = `${customerName}(${transactionId})`
@@ -131,9 +152,7 @@ export const ListItem = ({
        <div className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
-          <span>{bank}</span>
-          <span className="separator">|</span>
-          <span>{processResult}</span>
+          <span>{bankName}</span>
        </div>
      );
    }
@@ -162,6 +181,30 @@ export const ListItem = ({
    return rs;
  };

+  const getAmount = () => {
+    let rs: any[] = [];
+    if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
+      rs.push(
+        <div className={`status-label ${resultStatus === 'SUCCESS' ? 'success' : 'fail'}`}>
+          {resultStatus === 'SUCCESS' ? '성공' : '실패'}
+        </div>
+      );
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      rs.push(
+        <div className="transaction-amount">
+          <NumericFormat
+            value={amount}
+            thousandSeparator
+            displayType="text"
+            suffix={'원'}
+          ></NumericFormat>
+        </div>
+      );
+    }
+    return rs;
+  }
+
  return (
    <>
      <div
@@ -175,14 +218,7 @@ export const ListItem = ({
          <div className="transaction-title">{getTitle()}</div>
          {getDetail()}
        </div>
-        <div className="transaction-amount">
-          <NumericFormat
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            suffix={'원'}
-          ></NumericFormat>
-        </div>
+        {getAmount()}
      </div>
    </>
  );