- 계좌점유인증 수정

2025-10-23 19:58:25 +09:00
parent 6e8b73bd84
commit fdd565a0de
10 changed files with 167 additions and 109 deletions
--- a/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
+++ b/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
@@ -19,7 +19,7 @@ import { AccountHolderAuthList } from '@/entities/additional-service/ui/account-
 import { useExtensionAccountHolderAuthDownloadExcelMutation } from '@/entities/additional-service/api/account-holder-auth/use-extension-account-holder-auth-download-excel-mutation';
 import { AccountHolderAuthFilter } from '@/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter';
 import { useStore } from '@/shared/model/store';
-import { AccountHolderAuthListItem, AuthAndTransferStatus, ExtensionAccountHolderAuthContentItem, ExtensionAccountHolderAuthDownloadExcelParams, ExtensionAccountHolderAuthDownloadExcelResponse } from '@/entities/additional-service/model/account-holder-auth/types';
+import { AccountHolderAuthListItem, AccountHolderAuthStatus, ExtensionAccountHolderAuthContentItem, ExtensionAccountHolderAuthDownloadExcelParams, ExtensionAccountHolderAuthDownloadExcelResponse } from '@/entities/additional-service/model/account-holder-auth/types';
 import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';

@@ -35,7 +35,7 @@ export const AccountHolderAuthPage = () => {
  const [mid, setMid] = useState<string>(userMid);
  const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
-  const [authStatus, setAuthStatus] = useState<AuthAndTransferStatus>(AuthAndTransferStatus.ALL)
+  const [authStatus, setAuthStatus] = useState<AccountHolderAuthStatus>(AccountHolderAuthStatus.ALL)
  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
  useSetHeaderTitle('계좌점유인증');
  useSetHeaderType(HeaderType.LeftArrow);
@@ -49,7 +49,7 @@ export const AccountHolderAuthPage = () => {

  const callList = (option?: {
    sortType?: SortTypeKeys,
-    status?: AuthAndTransferStatus
+    status?: AccountHolderAuthStatus
  }) => {
    let listParams = {
      mid: mid,
@@ -81,7 +81,7 @@ export const AccountHolderAuthPage = () => {
    });
  };

-  const onClickToAuthStatus = (val: AuthAndTransferStatus) => {
+  const onClickToAuthStatus = (val: AccountHolderAuthStatus) => {
    setAuthStatus(val);
    callList({
      status: val
--- a/src/pages/additional-service/account-holder-auth/detail-page.tsx
+++ b/src/pages/additional-service/account-holder-auth/detail-page.tsx
@@ -13,7 +13,10 @@ import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-
 import { useLocation } from 'react-router';
 import { DetailInfoWrap } from '@/entities/additional-service/ui/info-wrap/detail-info-wrap';
 import { useExtensionAccountHolderAuthDetailMutation } from '@/entities/additional-service/api/account-holder-auth/use-extension-account-holder-auth-deatil-mutation';
-import { ExtensionAccountHolderAuthDetailParams } from '@/entities/additional-service/model/account-holder-auth/types';
+import { ExtensionAccountHolderAuthDetailParams, ExtensionAccountHolderAuthDetailResponse } from '@/entities/additional-service/model/account-holder-auth/types';
+import moment from 'moment';
+import { getAuthStatusText } from '@/entities/additional-service/model/account-holder-auth/constant';
+import { getAuthResultStatusText } from '@/entities/additional-service/model/face-auth/constant';

 export const AccountHolderAuthDetailPage = () => {
    const { navigate } = useNavigate();
@@ -21,8 +24,7 @@ export const AccountHolderAuthDetailPage = () => {

    const { mid, tid } = location.state || {};

-    const [titleInfo, setTitleInfo] = useState<TitleInfo>();
-    const [detailInfo, setDetailInfo] = useState<DetailInfo>();
+    const [detail, setDetail] = useState<ExtensionAccountHolderAuthDetailResponse>();

    useSetHeaderTitle('계좌점유인증 상세');
    useSetHeaderType(HeaderType.LeftArrow);
@@ -38,32 +40,71 @@ export const AccountHolderAuthDetailPage = () => {
            mid: mid,
            tid: tid
        }
-        accountHolderAuthDetail(accountHolderAuthDetailParams).then((rs: DetailResponse) => {
-            console.log("Detail Info: ", rs)
-            setTitleInfo(rs.titleInfo);
-            setDetailInfo(rs.detailInfo);
+        accountHolderAuthDetail(accountHolderAuthDetailParams).then((rs: ExtensionAccountHolderAuthDetailResponse) => {
+            setDetail(rs);
        });
    };
    useEffect(() => {
        callDetail();
    }, []);
+
+    const getDate = (date?: string) => {
+        return (date) ? moment(date, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '';
+    };
    return (
        <>
            <main>
                <div className="tab-content">
                    <div className="tab-pane sub active">
                        <div className="pay-top">
-                            <TitleInfoWrap
-                                additionalServiceCategory={AdditionalServiceCategory.AccountHolderAuth}
-                                titleInfo={titleInfo}
-                            ></TitleInfoWrap>
+                            <div className="num-amount">
+                                <span className="amount">{detail?.accountName}</span>
+                                <span className="amount">{detail?.accountNo}</span>
+                            </div>
+                            <div className="num-day">{getDate(detail?.requestDate)}</div>
                        </div>
+                        <div className="detail-divider"></div>
                        <div className="pay-detail">
-                            <div className="detail-divider"></div>
-                            <DetailInfoWrap
-                                additionalServiceCategory={AdditionalServiceCategory.AccountHolderAuth}
-                                detailInfo={detailInfo}
-                            ></DetailInfoWrap>
+                            <div className="detail-title">상세 정보</div>
+                            <ul className="kv-list">
+                                <li className="kv-row">
+                                    <span className="k">가맹점상호</span>
+                                    <span className="v">{detail?.companyName}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">MID</span>
+                                    <span className="v">{detail?.mid}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">요청일시</span>
+                                    <span className="v">{getDate(detail?.requestDate)}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">은행</span>
+                                    <span className="v">{detail?.bankName}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">계좌번호</span>
+                                    <span className="v">{detail?.bankName}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">예금주</span>
+                                    <span className="v">{detail?.accountName}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">결과</span>
+                                    <span className="v">{getAuthStatusText(detail?.authStatus)}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">실패 사유</span>
+                                    {detail?.authResult !== "MATCHED" &&
+                                        <span className="v">{getAuthResultStatusText(detail?.authResult)}</span>
+                                    }
+                                    {detail?.authResult === "MATCHED" &&
+                                        <span className="v">-</span>
+                                    }
+                                </li>
+                            </ul>
                        </div>
                    </div>
                </div>