알림톡 결제통보 상세

src/entities/additional-service/ui/account-holder-auth/detail/account-holder-auth-detail.tsx

@@ -1,7 +1,5 @@
 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';

src/entities/additional-service/ui/alimtalk/detail/alimtalk-detail.tsx

@@ -0,0 +1,130 @@
+import { motion } from 'framer-motion';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { useLocation } from 'react-router';
+import { useEffect, useState } from 'react';
+import { ExtensionAlimtalkDetailParams, ExtensionAlimtalkDetailResponse } from '@/entities/additional-service/model/alimtalk/types';
+import { useExtensionAlimtalkDetailMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-detail-mutation';
+import moment from 'moment';
+import { getAlimtalkAlimClText, getAlimtalkSendClTypeText, getAlimtalkSendTypeText, getAlimtalkServiceCodeText } from '@/entities/additional-service/model/alimtalk/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 AlimtalkDetailProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  mid: string;
+  tid: string;
+};
+
+export const AlimtalkDetail = ({
+  detailOn,
+  setDetailOn,
+  mid,
+  tid
+}: AlimtalkDetailProps) => {
+  const { t } = useTranslation();
+  
+  const [detail, setDetail] = useState<ExtensionAlimtalkDetailResponse>();
+  
+  const { mutateAsync: extensionAlimtalkDetail } = useExtensionAlimtalkDetailMutation();
+
+  const callDetail = () => {
+    let params: ExtensionAlimtalkDetailParams = {
+      mid: mid,
+      tid: tid
+    };
+
+    extensionAlimtalkDetail(params).then((rs: ExtensionAlimtalkDetailResponse) => {
+      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.alimtalk.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?.receiverName }</span>
+              </div>
+              <div className="num-store">{ detail?.companyName }</div>
+              <div className="num-day">{ getDate(detail?.sendDate) }</div>
+            </div>
+            <div className="detail-divider"></div>
+            <div className="pay-detail">
+              <div className="detail-title">{t('additionalService.alimtalk.transactionInfo')}</div>
+              <ul className="kv-list">
+                <li className="kv-row">
+                  <span className="k">MID</span>
+                  <span className="v">{ detail?.mid }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">TID</span>
+                  <span className="v">{ detail?.tid }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('additionalService.alimtalk.serviceName')}</span>
+                  <span className="v">{ detail?.extensionServiceName }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('additionalService.alimtalk.sendKind')}</span>
+                  <span className="v">{ getAlimtalkSendTypeText(t)(detail?.sendType) }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('additionalService.alimtalk.buyerName')}</span>
+                  <span className="v">{detail?.receiverName }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('additionalService.alimtalk.paymentService')}</span>
+                  <span className="v">{ getAlimtalkServiceCodeText(t)(detail?.serviceCode) }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('additionalService.alimtalk.notificationDivision')}</span>
+                  <span className="v">{ getAlimtalkAlimClText(t)(detail?.alimCl) }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">{t('additionalService.alimtalk.sendDivision')}</span>
+                  <span className="v">{ getAlimtalkSendClTypeText(t)(detail?.sendCl) }</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};

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

@@ -238,13 +238,13 @@ export const ListItem = ({
       });
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
-      navigate(PATHS.additionalService.alimtalk.detail, {
-        state: {
-          additionalServiceCategory: additionalServiceCategory,
+      if(setDetailData && !!mid && !!tid){
+        setDetailData({
           mid: mid,
           tid: tid,
-        }
-      });
+          detailOn: true
+        });
+      }
     }
     // else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
     //   navigate(PATHS.additionalService.faceAuth.detail, {