- 부가서비스: 계좌 성명조회 상세정보 목업 데이터 API 연동

src/entities/additional-service/api/use-extension-account-holder-search-detail-mutation.ts

@@ -0,0 +1,52 @@
+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 {
+    DetailResponse,
+    TitleInfo,
+    ExtensionAccountHolderSearchDetailParams,
+    ExtensionAccountHolderSearchDetailResponse,
+    DetailInfo
+} from '../model/types';
+import {
+    useMutation,
+    UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionAccountHolderSearchDetail = async (params: ExtensionAccountHolderSearchDetailParams): Promise<DetailResponse> => {
+    const response = await resultify(
+        axios.post<ExtensionAccountHolderSearchDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionAccountHolderSearchDetail(), params),
+    );
+
+    // ExtensionAccountHolderSearchDetailResponse를 DetailResponse로 변환
+    const detailResponse: DetailResponse = {
+        titleInfo: {
+            accountNo: response.accountNo,
+            bankName: response.bankName,
+            requestDate: response.requestDate
+        } as TitleInfo,
+        detailInfo: {
+            accountName: response.accountName,
+            requestDate: response.requestDate,
+            resultStatus: response.resultStatus,
+            failureReason: response.failReason,
+            bankName: response.bankName,
+            accountNo: response.accountNo,
+            requestWay: response.requestWay
+        } as DetailInfo
+
+    };
+
+    return detailResponse;
+};
+
+export const useExtensionAccountHolderSearchDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, ExtensionAccountHolderSearchDetailParams>) => {
+    const mutation = useMutation<DetailResponse, CBDCAxiosError, ExtensionAccountHolderSearchDetailParams>({
+        ...options,
+        mutationFn: (params: ExtensionAccountHolderSearchDetailParams) => extensionAccountHolderSearchDetail(params),
+    });
+    return {
+        ...mutation,
+    };
+}

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

@@ -30,6 +30,35 @@ export enum AdditionalServiceCategory {
   SettlementAgency = 'SettlementAgency',
 }
 
+// ========================================
+// 상세정보 Interface
+// ========================================
+
+export interface TitleInfo {
+  accountNo?: string,
+  bankName?: string,
+  requestDate?: string
+}
+
+export interface DetailInfo {
+  accountName?: string; // 예금주
+  requestDate?: string; // 조회 일시
+  resultStatus?: string; // 결과
+  bankName?: string; // 은행 명
+  failureReason?: string; // 실패사유
+  accountNo?: string; // 계좌번호
+  requestWay?: string; //요청 구분
+}
+
+// 상세정보 Info Enum
+export enum InfoWrapKeys {
+  Title = 'Title',
+  Transaction = 'Transaction',
+  Payment = 'Payment',
+  Detail = 'Detail'
+};
+
+
 // ========================================
 // 공통 Filter 타입들
 // ========================================
@@ -95,7 +124,6 @@ export interface AccountHolderSearchListItem {
 }
 
 export interface AccountHolderSearchListProps {
-  additionalServiceCategory: AdditionalServiceCategory;
   listItems: Record<string, Array<ListItemProps>>;
   mid: string;
 }
@@ -224,26 +252,20 @@ export interface LinkPaymentPendingSendFilterProps extends FilterProps {
 }
 
 export enum DetailInfoSectionKeys {
+  Title = 'Title',
+  Detail = 'Detail',
   Payment = 'Payment',
   Deets = 'Deets'
 }
 
-export interface DetailPaymentInfoProps {
-
-}
-
-export interface DetailDeetsInfoProps {
-
-}
-
 export interface DetailResponse {
-  paymentInfo?: DetailPaymentInfoProps
+  titleInfo?: TitleInfo //최상단 섹션
-  deetsInfo?: DetailDeetsInfoProps
+  detailInfo?: DetailInfo // '상세 정보' 섹션
 }
 
 export interface DetailInfoSectionProps extends DetailResponse {
+  additionalServiceCategory?: AdditionalServiceCategory
   show?: boolean;
-  tid?: string;
   onClickToShowInfo?: (info: DetailInfoSectionKeys) => void;
 }
 

src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx

@@ -1,10 +1,9 @@
 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'
+import { AccountHolderSearchListProps, AdditionalServiceCategory } from '../../model/types'
 
 export const AccountHolderSearchList = ({
-    additionalServiceCategory,
     listItems,
     mid
 }: AccountHolderSearchListProps) => {
@@ -15,7 +14,7 @@ export const AccountHolderSearchList = ({
         for (const [key, value] of Object.entries(listItems)) {
             rs.push(
                 <ListDateGroup
-                    additionalServiceCategory={additionalServiceCategory}
+                    additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
                     key={key}
                     date={key}
                     items={value}

src/entities/additional-service/ui/info-wrap/detail-info-wrap.tsx

@@ -0,0 +1,47 @@
+import moment from 'moment';
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { DetailInfoSectionProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+
+export const DetailInfoWrap = ({
+    additionalServiceCategory,
+    detailInfo
+}: DetailInfoSectionProps) => {
+
+    return (
+        <>
+            <div className="detail-title">상세 정보</div>
+            <ul className="kv-list">
+                <li className="kv-row">
+                    <span className="k">예금주</span>
+                    <span className="v">{detailInfo?.accountName}</span>
+                </li>
+                <li className="kv-row">
+                    <span className="k">조회 일시</span>
+                    <span className="v">{detailInfo?.requestDate}</span>
+                </li>
+                <li className="kv-row">
+                    <span className="k">결과</span>
+                    <span className="v">{detailInfo?.resultStatus}</span>
+                </li>
+                <li className="kv-row">
+                    <span className="k">실패사유</span>
+                    <span className="v">{detailInfo?.failureReason}</span>
+                </li>
+                <li className="kv-row">
+                    <span className="k">은행</span>
+                    <span className="v">{detailInfo?.bankName}</span>
+                </li>
+                <li className="kv-row">
+                    <span className="k">계좌번호</span>
+                    <span className="v">{detailInfo?.accountNo}</span>
+                </li>
+                <li className="kv-row">
+                    <span className="k">요청 구분</span>
+                    <span className="v">{detailInfo?.requestWay}</span>
+                </li>
+            </ul>
+        </>
+    )
+};

src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx

@@ -0,0 +1,46 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { NumericFormat } from 'react-number-format';
+import { AdditionalServiceCategory, DetailInfoSectionKeys } from '../../model/types';
+import { DetailInfoSectionProps } from '../../model/types';
+
+export const TitleInfoWrap = ({
+  additionalServiceCategory,
+  titleInfo,
+  onClickToShowInfo
+}: DetailInfoSectionProps) => {
+
+  const variants = {
+    hidden: { height: 0, padding: 0, margin: 0, display: 'none' },
+    visible: { height: 'auto', padding: '16px', margin: '10px 0', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if (!!onClickToShowInfo) {
+      onClickToShowInfo(DetailInfoSectionKeys.Title);
+    }
+  };
+
+  let newTitleInfo: Record<string, any> | undefined = titleInfo;
+  console.log("NewTitleInfo Check: ", newTitleInfo)
+
+  const onClickToDownloadConfirmation = () => {
+
+  };
+
+
+
+  return (
+    <>
+      {additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch&& (
+          <>
+            <div className="num-amount">
+              <span className="amount">{titleInfo?.accountNo}</span>
+            </div>
+            <div className="num-store">{titleInfo?.bankName}</div>
+            <div className="num-day">{titleInfo?.requestDate}</div>
+          </>
+        )}
+    </>
+  );
+};

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

@@ -24,6 +24,7 @@ export const ListDateGroup = ({
           <ListItem
             additionalServiceCategory={ additionalServiceCategory }
             key={ key }
+            mid={ mid }
             tid={ items[i]?.tid }
             paymentDate= { items[i]?.paymentDate}
             paymentStatus={ items[i]?.paymentStatus}

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

@@ -68,6 +68,7 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       navigate(PATHS.additionalService.accountHolderSearch.detail, {
         state: {
+          additionalServiceCategory: additionalServiceCategory,
           mid: mid,
           tid: tid
         }
@@ -76,6 +77,7 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
       navigate(PATHS.additionalService.linkPayment.detail, {
         state: {
+          additionalServiceCategory: additionalServiceCategory,
           mid: mid,
           tid: tid
         }
@@ -84,6 +86,7 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
       navigate(PATHS.additionalService.linkPayment.detail, {
         state: {
+          additionalServiceCategory: additionalServiceCategory,
           mid: mid,
           tid: tid
         }

src/pages/additional-service/account-holder-search/account-holder-search-page.tsx

@@ -179,7 +179,6 @@ export const AccountHolderSearchPage = () => {
               </div>
             </div>
             <AccountHolderSearchList
-              additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
               listItems={listItems}
               mid={mid}
             ></AccountHolderSearchList>

src/pages/additional-service/account-holder-search/detail-page.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { IMAGE_ROOT } from '@/shared/constants/common';
 import { HeaderType } from '@/entities/common/model/types';
 import {
     useSetHeaderTitle,
@@ -9,9 +9,20 @@ import {
     useSetFooterMode,
     useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { useExtensionAccountHolderSearchDetailMutation } from '@/entities/additional-service/api/use-extension-account-holder-search-detail-mutation';
+import { AdditionalServiceCategory, DetailInfo, DetailResponse, ExtensionAccountHolderSearchDetailParams, ExtensionAccountHolderSearchDetailResponse, ProcessResult, TitleInfo } from '@/entities/additional-service/model/types';
+import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap';
+import { useLocation } from 'react-router';
+import { DetailInfoWrap } from '@/entities/additional-service/ui/info-wrap/detail-info-wrap';
 
 export const AccountHolderSearchDetailPage = () => {
     const { navigate } = useNavigate();
+    const location = useLocation();
+
+    const { mid, tid } = location.state || {};
+
+    const [titleInfo, setTitleInfo] = useState<TitleInfo>();
+    const [detailInfo, setDetailInfo] = useState<DetailInfo>();
 
     useSetHeaderTitle('계좌성명조회 상세');
     useSetHeaderType(HeaderType.LeftArrow);
@@ -20,51 +31,39 @@ export const AccountHolderSearchDetailPage = () => {
         navigate(PATHS.additionalService.accountHolderSearch.list);
     });
 
+    const { mutateAsync: accountHolderSearchDetail } = useExtensionAccountHolderSearchDetailMutation();
+
+    const callDetail = () => {
+        let accountHolderSearchDetailParams: ExtensionAccountHolderSearchDetailParams = {
+            mid: mid,
+            tid: tid
+        }
+        accountHolderSearchDetail(accountHolderSearchDetailParams).then((rs: DetailResponse) => {
+            console.log("Detail Info: ", rs)
+            setTitleInfo(rs.titleInfo);
+            setDetailInfo(rs.detailInfo);
+        });
+    };
+    useEffect(() => {
+        callDetail();
+    }, []);
     return (
         <>
-            <main className="full-height">
+            <main>
                 <div className="tab-content">
                     <div className="tab-pane sub active">
                         <div className="pay-top">
-                            <div className="num-amount">
+                            <TitleInfoWrap
-                                <span className="amount">10002464******</span>
+                                additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
+                                titleInfo={titleInfo}
+                            ></TitleInfoWrap>
                         </div>
-                            <div className="num-store">기업은행</div>
-                            <div className="num-day">2025.09.12 16:12:37</div>
-                        </div>
-                        <div className="detail-divider"></div>
                         <div className="pay-detail">
-                            <div className="detail-title">상세 정보</div>
+                            <div className="detail-divider"></div>
-                            <ul className="kv-list">
+                            <DetailInfoWrap
-                                <li className="kv-row">
+                                additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
-                                    <span className="k">예금주</span>
+                                detailInfo={detailInfo}
-                                    <span className="v">&nbsp;</span>
+                            ></DetailInfoWrap>
-                                </li>
-                                <li className="kv-row">
-                                    <span className="k">조회 일시</span>
-                                    <span className="v">2025.09.12 16:12:37</span>
-                                </li>
-                                <li className="kv-row">
-                                    <span className="k">결과</span>
-                                    <span className="v">실패</span>
-                                </li>
-                                <li className="kv-row">
-                                    <span className="k">실패사유</span>
-                                    <span className="v">기관미개시</span>
-                                </li>
-                                <li className="kv-row">
-                                    <span className="k">은행</span>
-                                    <span className="v">기업은행</span>
-                                </li>
-                                <li className="kv-row">
-                                    <span className="k">계좌번호</span>
-                                    <span className="v">1002464642587</span>
-                                </li>
-                                <li className="kv-row">
-                                    <span className="k">요청구분</span>
-                                    <span className="v">API</span>
-                                </li>
-                            </ul>
                         </div>
                     </div>
                 </div>

src/pages/additional-service/link-payment/link-payment-detail-page.tsx

@@ -4,7 +4,6 @@ import { useLocation } from 'react-router';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-payment-info-section';
 import { HeaderType } from '@/entities/common/model/types';
-import { DetailInfoSectionProps } from '@/entities/additional-service/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import {
   useSetOnBack,