알림톡 결제통보 상세

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}