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

- 부가서비스 Types 정리

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

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

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>
+        </>
+    );
+}

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_NAME },
-        { name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NUMBER },
+        { name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NO },
     ]
 
     let processResultBtnGroup = [
         { name: '전체', value: ProcessResult.ALL },
         { name: '성공', value: ProcessResult.SUCCESS },
-        { name: '실패', value: ProcessResult.FAILURE },
+        { name: '실패', value: ProcessResult.FAIL },
     ];
 
     return (

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,
+  additionalServiceCategory,
-    listItems
+  listItems
-}: KeyInPaymentListProps ) => {
+}: KeyInPaymentListProps) => {
-    const { navigate } = useNavigate();
+  const { navigate } = useNavigate();
 
   const getListDateGroup = () => {
     let rs = [];
     for (const [key, value] of Object.entries(listItems)) {
       rs.push(
         <ListDateGroup
-          additionalServiceCategory ={ additionalServiceCategory }
+          additionalServiceCategory={additionalServiceCategory}
-          key={ key }
+          key={key}
-          date={ key }
+          date={key}
-          items={ value }
+          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>
     </>
   );
 }

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 = [

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 = () => {

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 }
+            bankName={ items[i]?.bankName}
-            accountNumber={ items[i]?.accountNumber }
+            accountNo={ items[i]?.accountNo }
-            accountHolder={ items[i]?.accountHolder }
+            resultStatus={ items[i]?.resultStatus }
-            processResult={ items[i]?.processResult }
 
             transactionId={ items[i]?.transactionId }
             customerName={ items[i]?.customerName }

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,
+  requestDate, bankName, accountNo, resultStatus,
-  accountHolder, processResult,
 
   transactionId, customerName, status, channel,
   amount, sendDate, transactionDate
@@ -34,46 +33,67 @@ export const ListItem = ({
 
   const getDotClass = (str?: string) => {
     let rs = '';
-    if (paymentStatus === '') {
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
-      rs = '';
+      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") {
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
-      rs = 'blue';
+      if (resultStatus === "SUCCESS") {
-    }
+        rs = 'blue';
-    else if (paymentStatus === "ALL_CANCEL") {
+      }
-      rs = 'gray';
+      else if (resultStatus === "FAIL") {
-    }
+        rs = 'gray';
-    else if (paymentStatus === 'AFTER_CANCEL') {
+      }
-      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>{bankName}</span>
-          <span className="separator">|</span>
-          <span>{processResult}</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">
+        {getAmount()}
-          <NumericFormat
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            suffix={'원'}
-          ></NumericFormat>
-        </div>
       </div>
     </>
   );

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 { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter';
-import { ProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types';
+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 = [
+  const callList = (option?: {
-    {
+    sortBy?: string,
-      id: '1',
+    val?: string
-      accountNumber: '10002464******',
+  }) => {
-      time: '20:00',
+    pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
-      bank: '우리은행',
+    setPageParam(pageParam);
-      status: 'success',
+    let listParams = {
-      statusColor: 'blue',
+      mid: mid,
-      className: 'approved'
+      searchCl: searchType,
-    },
+      searchValue: searchKeyword,
-    {
+      fromDate: startDate,
-      id: '2',
+      toDate: endDate,
-      accountNumber: '10002464******',
+      bankCode: bank,
-      time: '20:00',
+      resultStatus: processResult
-      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'
     }
-  ];
+
+    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 = () => {
+  const onClickToSort = (sort: SortByKeys) => {
-    navigate(PATHS.additionalService.accountHolderSearch.request);
+    setSortBy(sort);
+    callList({ sortBy: sort })
   };
 
-  const onClickToGoDetail = (tid?: string) => {
+  const onClickToTransactionStatus = (val: ProcessResult) => {
-    navigate(PATHS.additionalService.accountHolderSearch.detail);
+    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="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>
+                  {
-                  <span className="keyword-tag">성공</span>
+                    resultStatusBtnGroup.map((value, index) => (
-                  <span className="keyword-tag">실패</span>
+                      <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>

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`;