- 부가서비스 : 계좌성명조회 목업 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/api/use-extension-account-holder-search-download-excel-mutation.ts
+++ b/src/entities/additional-service/api/use-extension-account-holder-search-download-excel-mutation.ts
@@ -0,0 +1,26 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { ExtensionAccountHolderSearchDownloadExcelParams, ExtensionAccountHolderSearchDownloadExcelResponse } from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionAccountHolderSearchDownloadExcel = (params: ExtensionAccountHolderSearchDownloadExcelParams) => {
+  return resultify(
+    axios.post<ExtensionAccountHolderSearchDownloadExcelResponse>(API_URL_ADDITIONAL_SERVICE.extensionKeyinDownloadExcel(), params),
+  );
+};
+
+export const useExtensionAccountHolderSearchDownloadExcelMutation = (options?: UseMutationOptions<ExtensionAccountHolderSearchDownloadExcelResponse, CBDCAxiosError, ExtensionAccountHolderSearchDownloadExcelParams>) => {
+  const mutation = useMutation<ExtensionAccountHolderSearchDownloadExcelResponse, CBDCAxiosError, ExtensionAccountHolderSearchDownloadExcelParams>({
+    ...options,
+    mutationFn: (params: ExtensionAccountHolderSearchDownloadExcelParams) => extensionAccountHolderSearchDownloadExcel(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/additional-service/api/use-extension-account-holder-search-list-mutation.ts
+++ b/src/entities/additional-service/api/use-extension-account-holder-search-list-mutation.ts
@@ -0,0 +1,28 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import {
+    ExtensionAccountHolderSearchListParams,
+    ExtensionAccountHolderSearchListResponse,
+} from '../model/types';
+import {
+    useMutation,
+    UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionAccountHolderSearchList = (params: ExtensionAccountHolderSearchListParams) => {
+    return resultify(
+        axios.post<ExtensionAccountHolderSearchListResponse>(API_URL_ADDITIONAL_SERVICE.extensionAccountHolderSearchList(), params),
+    );
+};
+
+export const useExtensionAccountHolderSearchListMutation = (options?: UseMutationOptions<ExtensionAccountHolderSearchListResponse, CBDCAxiosError, ExtensionAccountHolderSearchListParams>) => {
+    const mutation = useMutation<ExtensionAccountHolderSearchListResponse, CBDCAxiosError, ExtensionAccountHolderSearchListParams>({
+        ...options,
+        mutationFn: (params: ExtensionAccountHolderSearchListParams) => extensionAccountHolderSearchList(params),
+    });
+    return {
+        ...mutation,
+    };
+}
--- a/src/entities/additional-service/model/types.ts
+++ b/src/entities/additional-service/model/types.ts
--- 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,20 +4,20 @@ 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>
      );
    }
@@ -31,11 +31,11 @@ export const KeyInPaymentList = ({
  return (
    <>
      <div className="transaction-list">
-        { getListDateGroup() }
+        {getListDateGroup()}
        <div className="apply-row">
          <button
            className="btn-50 btn-blue flex-1"
-            onClick={ () => onClickToNavigate() }          
+            onClick={() => onClickToNavigate()}
          >결제 신청</button>
        </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,19 +33,31 @@ 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 = () => {
@@ -57,23 +68,32 @@ export const ListItem = ({
    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>
    </>
  );
--- a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
+++ b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
@@ -5,21 +5,35 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { HeaderType } from '@/entities/common/model/types';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
-import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/account-holder-search-filter';
-import { ProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types';
+import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter';
+import { ProcessResult, AccountHolderSearchType, SortByKeys, AccountHolderSearchListItem, AdditionalServiceCategory } from '@/entities/additional-service/model/types';
 import {
  useSetHeaderTitle,
  useSetHeaderType,
-  useSetFooterMode
+  useSetFooterMode,
+  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { useExtensionAccountHolderSearchListMutation } from '@/entities/additional-service/api/use-extension-account-holder-search-list-mutation';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
+import { useExtensionAccountHolderSearchDownloadExcelMutation } from '@/entities/additional-service/api/use-extension-account-holder-search-download-excel-mutation';
+import { SortOptionsBox } from '@/entities/additional-service/ui/sort-options-box';
+import { AccountHolderSearchList } from '@/entities/additional-service/ui/account-holder-search/account-holder-search-list';

+const resultStatusBtnGroup = [
+  { name: '전체', value: ProcessResult.ALL },
+  { name: '성공', value: ProcessResult.SUCCESS },
+  { name: '실패', value: ProcessResult.FAIL },
+]

 export const AccountHolderSearchPage = () => {
  const { navigate } = useNavigate();

+  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [listItems, setListItems] = useState({});
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [mid, setMid] = useState<string>('nictest001m');
-  const [searchType, setSearchType] = useState<AccountHolderSearchType>(AccountHolderSearchType.ALL)
+  const [searchType, setSearchType] = useState<AccountHolderSearchType>(AccountHolderSearchType.ACCOUNT_NO)
  const [searchKeyword, setSearchKeyword] = useState<string>('');
  const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
  const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
@@ -28,79 +42,86 @@ export const AccountHolderSearchPage = () => {

  useSetHeaderTitle('계좌성명조회');
  useSetHeaderType(HeaderType.LeftArrow);
-  useSetFooterMode(true);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });

-  const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
+  const { mutateAsync: accountHolderSearchList } = useExtensionAccountHolderSearchListMutation();
+  const { mutateAsync: downloadExcel } = useExtensionAccountHolderSearchDownloadExcelMutation();

-  const transactionData = [
-    {
-      id: '1',
-      accountNumber: '10002464******',
-      time: '20:00',
-      bank: '우리은행',
-      status: 'success',
-      statusColor: 'blue',
-      className: 'approved'
-    },
-    {
-      id: '2',
-      accountNumber: '10002464******',
-      time: '20:00',
-      details: '결제완료ㅣ결제성공ㅣ호전환',
-      status: 'success',
-      statusColor: 'gray',
-      className: 'refund'
-    },
-    {
-      id: '3',
-      accountNumber: '10002464******',
-      time: '20:00',
-      details: '결제완료ㅣ결제성공ㅣ호전환',
-      status: 'success',
-      statusColor: 'blue',
-      className: 'approved'
-    },
-    {
-      id: '4',
-      accountNumber: '10002464******',
-      time: '20:00',
-      details: '미결제ㅣ취소완료ㅣSMS',
-      status: 'success',
-      statusColor: 'gray',
-      className: 'refund'
-    },
-    {
-      id: '5',
-      accountNumber: '10002464******',
-      time: '20:00',
-      details: '미결제ㅣ기간만료ㅣSMS',
-      status: 'fail',
-      statusColor: 'blue',
-      className: 'approved'
+  const callList = (option?: {
+    sortBy?: string,
+    val?: string
+  }) => {
+    pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
+    setPageParam(pageParam);
+    let listParams = {
+      mid: mid,
+      searchCl: searchType,
+      searchValue: searchKeyword,
+      fromDate: startDate,
+      toDate: endDate,
+      bankCode: bank,
+      resultStatus: processResult
    }
-  ];
+
+    accountHolderSearchList(listParams).then((rs) => {
+      setListItems(assembleData(rs.content));
+    });
+  }
+
+  const assembleData = (content: Array<AccountHolderSearchListItem>) => {
+    console.log('rs.content:', content)
+    let data: any = {};
+    if (content && content.length > 0) {
+      for (let i = 0; i < content?.length; i++) {
+        let requestDate = content[i]?.requestDate?.substring(0, 8);
+        let groupDate = moment(requestDate).format('YYYYMMDD');
+        if (!!groupDate && !data.hasOwnProperty(groupDate)) {
+          data[groupDate] = [];
+        }
+        if (!!groupDate && data.hasOwnProperty(groupDate)) {
+          data[groupDate].push(content[i]);
+        }
+      }
+    }
+    console.log('Data : ', data)
+    return data;
+  };

  const onClickToOpenFilter = () => {
    setFilterOn(!filterOn);
  };

  const onClickToDownloadExcel = () => {
-    // tid??? 확인 필요
    downloadExcel({
-      // tid: tid
+      mid: mid,
+      searchCl: searchType,
+      searchValue: searchKeyword,
+      fromDate: startDate,
+      toDate: endDate,
+      bankCode: bank,
+      resultStatus: processResult
    }).then((rs) => {

    });
  };

-  const onClickToNavigation = () => {
-    navigate(PATHS.additionalService.accountHolderSearch.request);
+  const onClickToSort = (sort: SortByKeys) => {
+    setSortBy(sort);
+    callList({ sortBy: sort })
  };

-  const onClickToGoDetail = (tid?: string) => {
-    navigate(PATHS.additionalService.accountHolderSearch.detail);
+  const onClickToTransactionStatus = (val: ProcessResult) => {
+    setProcessResult(val);
+    callList({ val: val });
  };

+  useEffect(() => {
+    callList();
+  }, []);
+
  return (
    <>
      <main>
@@ -112,7 +133,7 @@ export const AccountHolderSearchPage = () => {
                  <input
                    className="credit-period"
                    type="text"
-                    value="2025.06.01 ~ 2025.06.30"
+                    value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
                    readOnly={true}
                  />
                  <button
@@ -128,64 +149,40 @@ export const AccountHolderSearchPage = () => {
                </div>
                <button
                  className="download-btn"
-                  aria-label="다운로드"
                >
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
                    alt="다운로드"
+                    onClick={() => onClickToDownloadExcel()}
                  />
                </button>
              </div>
            </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>
+            <div className="filter-section">
+              <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>
+                  {
+                    resultStatusBtnGroup.map((value, index) => (
+                      <span
+                        key={`key-service-code=${index}`}
+                        className={`keyword-tag ${(processResult === value.value) ? 'active' : ''}`}
+                        onClick={() => onClickToTransactionStatus(value.value)}
+                      >{value.name}</span>
+                    ))
+                  }
                </div>
              </div>
-            </section>
-
-            <section className="transaction-list">
-              <div className="date-group">
-                <div className="date-header">25.06.08(일)</div>
-                {transactionData.map((item) => (
-                  <div
-                    key={item.id}
-                    className={`transaction-item ${item.className}`}
-                    onClick={() => onClickToGoDetail(item.id)}
-                  >
-                    <div className="transaction-status">
-                      <div className={`status-dot ${item.statusColor}`}></div>
-                    </div>
-                    <div className="transaction-content">
-                      <div className="transaction-title">{item.accountNumber}</div>
-                      <div className="transaction-details">
-                        <span>
-                          {item.time}ㅣ{item.bank || item.details}
-                        </span>
-                      </div>
-                    </div>
-                    <div className={`status-label ${item.status}`}>
-                      {item.status === 'success' ? '성공' : '실패'}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </section>
-            <div className="apply-row">
-              <button
-                className="btn-50 btn-blue flex-1"
-                onClick={() => onClickToNavigation()}
-              >조회 신청</button>
            </div>
+            <AccountHolderSearchList
+              additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
+              listItems={listItems}
+              mid={mid}
+            ></AccountHolderSearchList>
          </div>
        </div>
      </main>
--- a/src/shared/api/api-url-additional-service.ts
+++ b/src/shared/api/api-url-additional-service.ts
@@ -5,6 +5,18 @@ import {

 /* Extension Management - 부가서비스 API */
 export const API_URL_ADDITIONAL_SERVICE = {
+  extensionAccountHolderSearchList: () => {
+    // POST: 계좌성명조회 목록 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/search-account-name/list`;
+  },
+  extensionAccountHolderSearchDetail: () => {
+    // POST: 계좌성명조회 상세 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/search-account-name/detail`;
+  },
+  extensionAccountHolderSearchDownloadExcel: () => {
+    // POST: 계좌성명조회 엑셀 다운
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/search-account-name/excel`;
+  },
  extensionSmsResend: () => {  
    // POST: SMS 결제 통보 > SMS 재발송
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/sms/resend`;