계좌점유인증

2025-11-04 10:28:51 +09:00
parent 4f87f40a0e
commit d290e91a45
8 changed files with 177 additions and 45 deletions
--- a/src/entities/additional-service/ui/account-holder-auth/detail/account-holder-auth-detail.tsx
+++ b/src/entities/additional-service/ui/account-holder-auth/detail/account-holder-auth-detail.tsx
@@ -0,0 +1,126 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { useLocation } from 'react-router';
+import { useExtensionAccountHolderAuthDetailMutation } from '@/entities/additional-service/api/account-holder-auth/use-extension-account-holder-auth-deatil-mutation';
+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';
+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 AccountHolderAuthDetailProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  mid: string;
+  tid: string;
+};
+
+export const AccountHolderAuthDetail = ({
+  detailOn,
+  setDetailOn,
+  mid,
+  tid
+}: AccountHolderAuthDetailProps) => {
+  const { t } = useTranslation();
+  const [detail, setDetail] = useState<ExtensionAccountHolderAuthDetailResponse>();
+
+  const { mutateAsync: accountHolderAuthDetail } = useExtensionAccountHolderAuthDetailMutation();
+
+  const callDetail = () => {
+    let accountHolderAuthDetailParams: ExtensionAccountHolderAuthDetailParams = {
+      mid: mid,
+      tid: tid
+    }
+    accountHolderAuthDetail(accountHolderAuthDetailParams).then((rs: ExtensionAccountHolderAuthDetailResponse) => {
+        setDetail(rs);
+    });
+  };
+  const onClickToClose = () => {
+    setDetailOn(false);
+  };
+
+  const getDate = (date?: string) => {
+    return (date) ? moment(date, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '';
+  };
+
+  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('additionalService.accountHolderAuth.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?.accountName}</span>
+              </div>
+              <span className="num-store">{detail?.accountNo}</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.companyName')}</span>
+                  <span className="v">{detail?.companyName}</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('transaction.fields.mid')}</span>
+                  <span className="v">{detail?.mid}</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('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('transaction.fields.accountHolder')}</span>
+                  <span className="v">{detail?.accountName}</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('common.result')}</span>
+                  <span className="v">{getAuthStatusText(t)(detail?.authStatus)}</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('transaction.fields.failureReason')}</span>
+                  <span className="v">{detail?.failReason ? getAuthResultStatusText(t)(detail?.failReason) : '-' }</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+}