diff --git a/src/entities/additional-service/api/use-extension-account-holder-search-detail-mutation.ts b/src/entities/additional-service/api/use-extension-account-holder-search-detail-mutation.ts new file mode 100644 index 0000000..ca2a00e --- /dev/null +++ b/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 => { + const response = await resultify( + axios.post(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) => { + const mutation = useMutation({ + ...options, + mutationFn: (params: ExtensionAccountHolderSearchDetailParams) => extensionAccountHolderSearchDetail(params), + }); + return { + ...mutation, + }; +} \ No newline at end of file diff --git a/src/entities/additional-service/model/types.ts b/src/entities/additional-service/model/types.ts index 36564b6..13d5760 100644 --- a/src/entities/additional-service/model/types.ts +++ b/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>; 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 - deetsInfo?: DetailDeetsInfoProps + titleInfo?: TitleInfo //최상단 섹션 + detailInfo?: DetailInfo // '상세 정보' 섹션 } export interface DetailInfoSectionProps extends DetailResponse { + additionalServiceCategory?: AdditionalServiceCategory show?: boolean; - tid?: string; onClickToShowInfo?: (info: DetailInfoSectionKeys) => void; } diff --git 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 index 3ff0a9c..37c1785 100644 --- 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 @@ -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( { + + return ( + <> +
상세 정보
+
    +
  • + 예금주 + {detailInfo?.accountName} +
    • +
  • + 조회 일시 + {detailInfo?.requestDate} +
    • +
  • + 결과 + {detailInfo?.resultStatus} +
    • +
  • + 실패사유 + {detailInfo?.failureReason} +
    • +
  • + 은행 + {detailInfo?.bankName} +
    • +
  • + 계좌번호 + {detailInfo?.accountNo} +
    • +
  • + 요청 구분 + {detailInfo?.requestWay} +
    • +
+ + ) +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx b/src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx new file mode 100644 index 0000000..02e9f8b --- /dev/null +++ b/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 | undefined = titleInfo; + console.log("NewTitleInfo Check: ", newTitleInfo) + + const onClickToDownloadConfirmation = () => { + + }; + + + + return ( + <> + {additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch&& ( + <> +
+ {titleInfo?.accountNo} +
+
{titleInfo?.bankName}
+
{titleInfo?.requestDate}
+ + )} + + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/list-date-group.tsx b/src/entities/additional-service/ui/list-date-group.tsx index f9f4935..fa7c404 100644 --- a/src/entities/additional-service/ui/list-date-group.tsx +++ b/src/entities/additional-service/ui/list-date-group.tsx @@ -24,6 +24,7 @@ export const ListDateGroup = ({ { diff --git a/src/pages/additional-service/account-holder-search/detail-page.tsx b/src/pages/additional-service/account-holder-search/detail-page.tsx index 1189f8b..8b630b5 100644 --- a/src/pages/additional-service/account-holder-search/detail-page.tsx +++ b/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(); + const [detailInfo, setDetailInfo] = useState(); useSetHeaderTitle('계좌성명조회 상세'); useSetHeaderType(HeaderType.LeftArrow); @@ -20,55 +31,43 @@ 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 ( <> -
+
-
- 10002464****** -
-
기업은행
-
2025.09.12 16:12:37
+
-
-
상세 정보
-
    -
  • - 예금주 -   -
    • -
  • - 조회 일시 - 2025.09.12 16:12:37 -
    • -
  • - 결과 - 실패 -
    • -
  • - 실패사유 - 기관미개시 -
    • -
  • - 은행 - 기업은행 -
    • -
  • - 계좌번호 - 1002464642587 -
    • -
  • - 요청구분 - API -
    • -
+
+
-
+
) } \ No newline at end of file diff --git a/src/pages/additional-service/link-payment/link-payment-detail-page.tsx b/src/pages/additional-service/link-payment/link-payment-detail-page.tsx index 02fd6df..9764e18 100644 --- a/src/pages/additional-service/link-payment/link-payment-detail-page.tsx +++ b/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,