알림톡 결제통보 상세

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}