알림톡 결제통보 상세

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, {

src/pages/additional-service/account-holder-search/account-holder-search-page.tsx

@@ -182,7 +182,7 @@ export const AccountHolderSearchPage = () => {
     if(detailData.tid){
       setDetailTid(detailData.tid);
     }
-  }
+  };
 
   useEffect(() => {
     callList();

src/pages/additional-service/additional-service-pages.tsx

@@ -13,7 +13,6 @@ import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth
 import { LinkPaymentHistoryPage } from './link-payment/link-payment-history-page';
 import { LinkPaymentWaitSendPage } from './link-payment/link-payment-wait-send-page';
 import { AlimtalkListPage } from './alimtalk/list-page';
-import { AlimtalkDetailPage } from './alimtalk/detail-page';
 import { AlimtalkSettingPage } from './alimtalk/setting-page';
 import { FundAccountTransferListPage } from './fund-account/transfer-list-page';
 import { FundAccountTransferDetailPage } from './fund-account/transfer-detail-page';
@@ -74,7 +73,6 @@ export const AdditionalServicePages = () => {
         </Route>
         <Route path={ROUTE_NAMES.additionalService.alimtalk.base}>
           <Route path={ROUTE_NAMES.additionalService.alimtalk.list} element={<AlimtalkListPage />} />
-          <Route path={ROUTE_NAMES.additionalService.alimtalk.detail} element={<AlimtalkDetailPage />} />
           <Route path={ROUTE_NAMES.additionalService.alimtalk.setting} element={<AlimtalkSettingPage />} />
         </Route>
         <Route path={ROUTE_NAMES.additionalService.fundAccount.base}>

src/pages/additional-service/alimtalk/list-page.tsx

@@ -26,7 +26,7 @@ import moment from 'moment';
 import { useExtensionAlimtalkListMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-list-mutation';
 import { useExtensionAlimtalkDownloadExcelMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-download-excel-mutation';
 import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
-import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
+import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
 import { useStore } from '@/shared/model/store';
 import { snackBar } from '@/shared/lib';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
@@ -34,6 +34,7 @@ import { AlimtalkFilter } from '@/entities/additional-service/ui/filter/alimtalk
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
+import { AlimtalkDetail } from '@/entities/additional-service/ui/alimtalk/detail/alimtalk-detail';
 
 export const AlimtalkListPage = () => {
   const { t } = useTranslation();
@@ -60,6 +61,10 @@ export const AlimtalkListPage = () => {
   const [sendCl, setSendCl] = useState<AlimTalkSendCl>(AlimTalkSendCl.ALL);
 
   const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailMid, setDetailMid] = useState<string>('');
+  const [detailTid, setDetailTid] = useState<string>('');
+
   const { mutateAsync: extensionAlimtalkList } = useExtensionAlimtalkListMutation();
   const { mutateAsync: extensionAlimtalkDownloadExcel } = useExtensionAlimtalkDownloadExcelMutation();
   const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
@@ -161,6 +166,16 @@ export const AlimtalkListPage = () => {
     setEmailBottomSheetOn(false);
   };
 
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    if(detailData.mid){
+      setDetailMid(detailData.mid);
+    }
+    if(detailData.tid){
+      setDetailTid(detailData.tid);
+    }
+  };
+
   const onClickToNavigate = () => {
     navigate(PATHS.additionalService.alimtalk.setting);
   };
@@ -192,6 +207,7 @@ export const AlimtalkListPage = () => {
                   key={date + '-' + i}
                   date={date}
                   items={list as any}
+                  setDetailData={ setDetailData }
                 ></ListDateGroup>
               );
             }
@@ -210,6 +226,7 @@ export const AlimtalkListPage = () => {
           key={date + '-last'}
           date={date}
           items={list as any}
+          setDetailData={ setDetailData }
         ></ListDateGroup>
       );
     }
@@ -273,7 +290,7 @@ export const AlimtalkListPage = () => {
             </section>
 
             <section className="transaction-list">
-              {getAlimtalkList()}
+              { getAlimtalkList() }
             </section>
             <div ref={ setTarget }></div>
           </div>
@@ -307,6 +324,12 @@ export const AlimtalkListPage = () => {
         setSendType={setSendType}
         setSendCl={setSendCl}
       ></AlimtalkFilter>
+      <AlimtalkDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        mid={ detailMid }
+        tid={ detailTid }
+      ></AlimtalkDetail>
       <EmailBottomSheet
         bottomSheetOn={emailBottomSheetOn}
         setBottomSheetOn={setEmailBottomSheetOn}

src/shared/constants/paths.ts

@@ -213,10 +213,6 @@ export const PATHS: RouteNamesType = {
         `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.alimtalk.base}`,
         ROUTE_NAMES.additionalService.alimtalk.list,
       ),
-      detail: generatePath(
-        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.alimtalk.base}`,
-        ROUTE_NAMES.additionalService.alimtalk.detail,
-      ),
       setting: generatePath(
         `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.alimtalk.base}`,
         ROUTE_NAMES.additionalService.alimtalk.setting,

src/shared/constants/route-names.ts

@@ -99,7 +99,6 @@ export const ROUTE_NAMES = {
     alimtalk: {
       base: '/alimtalk/*',
       list: 'list',
-      detail: 'detail',
       setting: 'setting',
     },
     fundAccount: {