계좌성명조회

2025-11-04 09:57:54 +09:00
parent 25c282b41d
commit 424c1c3ddb
8 changed files with 226 additions and 90 deletions
--- a/src/entities/additional-service/model/account-holder-search/types.ts
+++ b/src/entities/additional-service/model/account-holder-search/types.ts
@@ -24,6 +24,7 @@ export interface AccountHolderSearchListItem {
 export interface AccountHolderSearchListProps {
  listItems: Array<AccountHolderSearchListItem>;
  mid: string;
+  setDetailData: (detailData: DetailData) => void;
 }

 export interface AccountHolderSearchFilterProps extends FilterProps {
@@ -46,7 +47,7 @@ export interface AccountHolderSearchFilterProps extends FilterProps {
 // 계좌 성명 조회 확장 서비스

 import { DefaulResponsePagination, DefaultRequestPagination } from "@/entities/common/model/types";
-import { ExtensionRequestParams, FilterProps, ListItemProps, ProcessResult } from "../types";
+import { DetailData, ExtensionRequestParams, FilterProps, ListItemProps, ProcessResult } from "../types";

 // ========================================
 export interface ExtensionAccountHolderSearchListParams extends ExtensionRequestParams { // Request
--- a/src/entities/additional-service/model/types.ts
+++ b/src/entities/additional-service/model/types.ts
@@ -148,8 +148,8 @@ export interface DetailInfoSectionProps extends DetailResponse {


 export interface DetailData {
-  tid: string;
-  serviceCode?: string;
+  mid?: string;
+  tid?: string;
  detailOn: boolean;
 }

--- 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
@@ -2,79 +2,81 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListDateGroup } from '../list-date-group';
 import { AdditionalServiceCategory } from '../../model/types'
-import { AccountHolderSearchListItem, AccountHolderSearchListProps } from '../../model/account-holder-search/types';
-import { JSX } from 'react';
+import { AccountHolderSearchListProps } from '../../model/account-holder-search/types';
 import { useTranslation } from 'react-i18next';

 export const AccountHolderSearchList = ({
-    listItems,
-    mid
+	listItems,
+	mid,
+	setDetailData
 }: AccountHolderSearchListProps) => {
-    const { navigate } = useNavigate();
-    const { t } = useTranslation();
+	const { navigate } = useNavigate();
+	const { t } = useTranslation();

-    const getListDateGroup = () => {
-        let rs = [];
-        let date = '';
-        let list = [];
-        for (let i = 0; i < listItems.length; i++) {
-            let items = listItems[i];
-            if (!!items) {
-                let requestDate = items?.requestDate;
-                requestDate = requestDate?.substring(0, 8);
-                if (!!requestDate) {
-                    if (i === 0) {
-                        date = requestDate;
-                    }
-                    if (date !== requestDate) {
-                        if (list.length > 0) {
-                            rs.push(
-                                <ListDateGroup
-                                    additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
-                                    key={date + '-' + i}
-                                    mid={mid}
-                                    date={date}
-                                    items={list}
-                                ></ListDateGroup>
-                            );
-                        }
-                        date = requestDate;
-                        list = [];
-                    }
-                    list.push(items);
-                }
-            }
-        }
-        if (list.length > 0) {
-            rs.push(
-                <ListDateGroup
-                    additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
-                    mid={mid}
-                    key={date + '-last'}
-                    date={date}
-                    items={list}
-                ></ListDateGroup>
-            );
-        }
-        return rs;
-    };
+	const getListDateGroup = () => {
+		let rs = [];
+		let date = '';
+		let list = [];
+		for(let i = 0; i < listItems.length; i++){
+			let items = listItems[i];
+			if (!!items) {
+				let requestDate = items?.requestDate;
+				requestDate = requestDate?.substring(0, 8);
+				if (!!requestDate) {
+					if (i === 0) {
+						date = requestDate;
+					}
+					if(date !== requestDate){
+						if (list.length > 0) {
+							rs.push(
+								<ListDateGroup
+									additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
+									key={date + '-' + i}
+									mid={mid}
+									date={date}
+									items={list}
+									setDetailData={ setDetailData }
+								></ListDateGroup>
+							);
+						}
+						date = requestDate;
+						list = [];
+					}
+					list.push(items);
+				}
+			}
+		}
+		if(list.length > 0){
+			rs.push(
+				<ListDateGroup
+					additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
+					mid={mid}
+					key={date + '-last'}
+					date={date}
+					items={list}
+					setDetailData={ setDetailData }
+				></ListDateGroup>
+			);
+		}
+		return rs;
+	};


-    const onClickToNavigate = () => {
-        navigate(PATHS.additionalService.accountHolderSearch.request)
-    };
+	const onClickToNavigate = () => {
+		navigate(PATHS.additionalService.accountHolderSearch.request)
+	};

-    return (
-        <>
-            <section className="transaction-list">
-                {getListDateGroup()}
-            </section>
-            <div className="apply-row">
-                <button
-                    className="btn-50 btn-blue flex-1"
-                    onClick={() => onClickToNavigate()}
-                >{t('additionalService.accountHolderSearch.searchRequest')}</button>
-            </div>
-        </>
-    );
+	return (
+		<>
+				<section className="transaction-list">
+						{getListDateGroup()}
+				</section>
+				<div className="apply-row">
+						<button
+								className="btn-50 btn-blue flex-1"
+								onClick={() => onClickToNavigate()}
+						>{t('additionalService.accountHolderSearch.searchRequest')}</button>
+				</div>
+		</>
+	);
 }
--- a/src/entities/additional-service/ui/account-holder-search/detail/account-holder-search-detail.tsx
+++ b/src/entities/additional-service/ui/account-holder-search/detail/account-holder-search-detail.tsx
@@ -0,0 +1,120 @@
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { ExtensionAccountHolderSearchDetailParams, ExtensionAccountHolderSearchDetailResponse } from '@/entities/additional-service/model/account-holder-search/types';
+import { useExtensionAccountHolderSearchDetailtMutation } from '@/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation';
+import { getAccountHolderStatusText } from '@/entities/additional-service/model/account-holder-search/constant';
+import { useTranslation } from 'react-i18next';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+
+export interface AccountHolderSearchDetailProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  mid: string;
+  tid: string;
+};
+
+export const AccountHolderSearchDetail = ({
+  detailOn,
+  setDetailOn,
+  mid,
+  tid
+}: AccountHolderSearchDetailProps) => {
+  const { t } = useTranslation();
+  
+  const [detail, setDetail] = useState<ExtensionAccountHolderSearchDetailResponse>();
+  const { mutateAsync: accountHolderSearchDetail } = useExtensionAccountHolderSearchDetailtMutation();
+
+  const callDetail = () => {
+    let accountHolderSearchDetailParams: ExtensionAccountHolderSearchDetailParams = {
+      mid: mid,
+      tid: tid
+    };
+    accountHolderSearchDetail(accountHolderSearchDetailParams).then((rs: ExtensionAccountHolderSearchDetailResponse) => {
+      setDetail(rs);
+    });
+  };
+
+  const getDate = (date?: string) => {
+    return (date) ? moment(date, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '';
+  };
+  const onClickToClose = () => {
+    setDetailOn(false);
+  };
+
+  useEffect(() => {
+    if(!!mid && !!tid){
+      callDetail();
+    }
+  }, [mid, tid]);
+
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        <div className="full-menu-container pdw-16">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">{ t('transaction.detailTitle') }</div>
+            <div className="full-menu-actions">
+              <FullMenuClose
+                addClass="full-menu-close"
+                onClickToCallback={ onClickToClose }
+              ></FullMenuClose>
+            </div>
+          </div>
+          <div className="tab-pane sub active">
+            <div className="pay-top">
+              <div className="num-amount">
+                <span className="amount">{detail?.accountNo}</span>
+              </div>
+              <span className="num-day">{detail?.bankName}</span>
+              <div className="num-day">{getDate(detail?.requestDate)}</div>
+            </div>
+            <div className="detail-divider"></div>
+            <div className="pay-detail">
+              <div className="detail-title">{t('transaction.sections.detailInfo')}</div>
+              <ul className="kv-list">
+                <li className="kv-row">
+                  <span className="k">{t('transaction.fields.accountHolder')}</span>
+                  <span className="v">{detail?.accountName}</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('additionalService.accountHolderAuth.requestDate')}</span>
+                  <span className="v">{getDate(detail?.requestDate)}</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('common.result')}</span>
+                  <span className="v">{getAccountHolderStatusText(t)(detail?.resultStatus)}</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('transaction.fields.failureReason')}</span>
+                  <span className="v">{detail?.failReason ? detail?.failReason : '-' }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('transaction.fields.bank')}</span>
+                  <span className="v">{detail?.bankName}</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('transaction.fields.accountNo')}</span>
+                  <span className="v">{detail?.accountNo}</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('additionalService.accountHolderAuth.requestWay')}</span>
+                  <span className="v">{detail?.requestWay}</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+}
--- a/src/entities/additional-service/ui/list-date-group.tsx
+++ b/src/entities/additional-service/ui/list-date-group.tsx
@@ -10,7 +10,8 @@ export const ListDateGroup = ({
  mid,
  date,
  items,
-  onResendClick
+  onResendClick,
+  setDetailData
 }: ListDateGroupProps) => {
  const { i18n } = useTranslation();

@@ -93,6 +94,7 @@ export const ListDateGroup = ({
            onResendClick={ onResendClick }

            seq= { items[i]?.seq}
+            setDetailData={ setDetailData }
          ></ListItem>
        )
      }  
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -34,7 +34,8 @@ export const ListItem = ({
  smsCl, groupId, userMallId, transType,
  authResult, failReason, requestTime,
  resendEnabled,
-  onResendClick
+  onResendClick,
+  setDetailData
 }: ListItemProps) => {
  const { navigate } = useNavigate();
  const { t, i18n } = useTranslation();
@@ -169,13 +170,14 @@ export const ListItem = ({
      })
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
-      navigate(PATHS.additionalService.accountHolderSearch.detail, {
-        state: {
-          additionalServiceCategory: additionalServiceCategory,
+      if(setDetailData && !!mid && !!tid){
+        setDetailData({
          mid: mid,
-          tid: tid
-        }
-      });
+          tid: tid,
+          detailOn: true
+        });
+      }
+      
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
      navigate(PATHS.additionalService.linkPayment.detail, {
--- a/src/entities/transaction/ui/list-item.tsx
+++ b/src/entities/transaction/ui/list-item.tsx
@@ -85,7 +85,7 @@ export const ListItem = ({

  const onClickToNavigate = () => {
    if(transactionCategory === TransactionCategory.AllTransaction){
-      if(setDetailData && tid){
+      if(setDetailData && !!tid){
        setDetailData({
          tid: tid,
          serviceCode: serviceCode,
@@ -94,7 +94,7 @@ export const ListItem = ({
      }
    }
    else if(transactionCategory === TransactionCategory.CashReceipt){
-      if(setDetailData && tid){
+      if(setDetailData && !!tid){
        setDetailData({
          tid: tid,
          detailOn: true
@@ -102,7 +102,7 @@ export const ListItem = ({
      }
    }
    else if(transactionCategory === TransactionCategory.Escrow){
-      if(setDetailData && tid){
+      if(setDetailData && !!tid){
        setDetailData({
          tid: tid,
          serviceCode: serviceCode,
@@ -111,7 +111,7 @@ export const ListItem = ({
      }
    }
    else if(transactionCategory === TransactionCategory.Billing){
-      if(setDetailData && tid){
+      if(setDetailData && !!tid){
        setDetailData({
          tid: tid,
          detailOn: true
--- 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
@@ -26,6 +26,7 @@ import { useTranslation } from 'react-i18next';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { snackBar } from '@/shared/lib';
+import { AccountHolderSearchDetail } from '@/entities/additional-service/ui/account-holder-search/detail/account-holder-search-detail';

 export const AccountHolderSearchPage = () => {
  const { navigate } = useNavigate();
@@ -52,8 +53,8 @@ export const AccountHolderSearchPage = () => {
  const [resultStatus, setResultStatus] = useState<AccountHolderResultStatus>(AccountHolderResultStatus.ALL);
  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailMid, setDetailMid] = useState<string>('');
  const [detailTid, setDetailTid] = useState<string>('');
-  const [detailServiceCode, setDetailServiceCode] = useState<string>('');

  useSetHeaderTitle(t('additionalService.services.accountHolderSearch'));
  useSetHeaderType(HeaderType.LeftArrow);
@@ -173,11 +174,13 @@ export const AccountHolderSearchPage = () => {
    setResultStatus(val);
  };

-  const setDetailDate = (detailData: DetailData) => {
+  const setDetailData = (detailData: DetailData) => {
    setDetailOn(detailData.detailOn);
-    setDetailTid(detailData.tid);
-    if(detailData?.serviceCode) {
-      setDetailServiceCode(detailData?.serviceCode);
+    if(detailData.mid){
+      setDetailMid(detailData.mid);
+    }
+    if(detailData.tid){
+      setDetailTid(detailData.tid);
    }
  }

@@ -259,8 +262,9 @@ export const AccountHolderSearchPage = () => {
              </div>
            </div>
            <AccountHolderSearchList
-              listItems={listItems}
-              mid={mid}
+              listItems={ listItems }
+              mid={ mid }
+              setDetailData={ setDetailData }
            ></AccountHolderSearchList>
            <div ref={setTarget}></div>
          </div>
@@ -284,7 +288,12 @@ export const AccountHolderSearchPage = () => {
        setBank={setBank}
        setResultStatus={setResultStatus}
      ></AccountHolderSearchFilter>
-
+      <AccountHolderSearchDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        mid={ detailMid }
+        tid={ detailTid }
+      ></AccountHolderSearchDetail>
      <EmailBottomSheet
        bottomSheetOn={emailBottomSheetOn}
        setBottomSheetOn={setEmailBottomSheetOn}