- 부가서비스 상세 수정

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

@@ -5,7 +5,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
 import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter';
-import { ProcessResult } from '@/entities/additional-service/model/types';
+import { DetailData, ProcessResult } from '@/entities/additional-service/model/types';
 import {
   useSetHeaderTitle,
   useSetHeaderType,
@@ -25,6 +25,7 @@ import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { useTranslation } from 'react-i18next';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { snackBar } from '@/shared/lib';
 
 export const AccountHolderSearchPage = () => {
   const { navigate } = useNavigate();
@@ -50,6 +51,9 @@ export const AccountHolderSearchPage = () => {
   const [bank, setBank] = useState<string>('');
   const [resultStatus, setResultStatus] = useState<AccountHolderResultStatus>(AccountHolderResultStatus.ALL);
   const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailTid, setDetailTid] = useState<string>('');
+  const [detailServiceCode, setDetailServiceCode] = useState<string>('');
 
   useSetHeaderTitle(t('additionalService.services.accountHolderSearch'));
   useSetHeaderType(HeaderType.LeftArrow);
@@ -62,18 +66,18 @@ export const AccountHolderSearchPage = () => {
   const { mutateAsync: downloadExcel } = useExtensionAccountHolderSearchDownloadExcelMutation();
   const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
     entries.forEach((entry: IntersectionObserverEntry) => {
-      if(entry.isIntersecting){
-        if(onActionIntersect && !!pageParam.cursor){
+      if (entry.isIntersecting) {
+        if (onActionIntersect && !!pageParam.cursor) {
           setOnActionIntersect(false);
           callList('page');
-        } 
+        }
       }
     });
   };
 
-  const { setTarget } = useIntersectionObserver({ 
-    threshold: 1, 
-    onIntersect 
+  const { setTarget } = useIntersectionObserver({
+    threshold: 1,
+    onIntersect
   });
 
 
@@ -88,41 +92,41 @@ export const AccountHolderSearchPage = () => {
       bankCode: bank,
       resultStatus: resultStatus,
       page: {
-				...pageParam,
-				...{ sortType: sortType }
-			}
+        ...pageParam,
+        ...{ sortType: sortType }
+      }
     }
-    if(type !== 'page' && listParams.page){
+    if (type !== 'page' && listParams.page) {
       listParams.page.cursor = null;
     }
 
     accountHolderSearchList(listParams).then((rs) => {
-      if(type === 'page'){
+      if (type === 'page') {
         setListItems([
           ...listItems,
           ...rs.content
         ]);
       }
-      else{
+      else {
         setListItems(rs.content);
       }
-			if(rs.hasNext 
+      if (rs.hasNext
         && rs.nextCursor !== pageParam.cursor
         && rs.content.length === DEFAULT_PAGE_PARAM.size
-      ){
+      ) {
         setPageParam({
           ...pageParam,
           ...{ cursor: rs.nextCursor }
         });
       }
-      else{
+      else {
         setPageParam({
           ...pageParam,
           ...{ cursor: null }
         });
-			}
-			setOnActionIntersect(
-        !!rs.hasNext 
+      }
+      setOnActionIntersect(
+        !!rs.hasNext
         && rs.nextCursor !== pageParam.cursor
         && rs.content.length === DEFAULT_PAGE_PARAM.size
       );
@@ -149,7 +153,13 @@ export const AccountHolderSearchPage = () => {
         bankCode: bank,
         resultStatus: resultStatus
       }).then((rs) => {
-        console.log('Excel Download Status: ' + rs.status);
+        if (rs.status) {
+          setTimeout(() => {
+            snackBar("다운로드가 완료되었습니다.");
+          }, 2000);
+        } else {
+          snackBar("다운로드에 실패했습니다.")
+        }
       });
     }
     setEmailBottomSheetOn(false);
@@ -163,6 +173,14 @@ export const AccountHolderSearchPage = () => {
     setResultStatus(val);
   };
 
+  const setDetailDate = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    setDetailTid(detailData.tid);
+    if(detailData?.serviceCode) {
+      setDetailServiceCode(detailData?.serviceCode);
+    }
+  }
+
   useEffect(() => {
     callList();
   }, [
@@ -244,7 +262,7 @@ export const AccountHolderSearchPage = () => {
               listItems={listItems}
               mid={mid}
             ></AccountHolderSearchList>
-            <div ref={ setTarget }></div>
+            <div ref={setTarget}></div>
           </div>
         </div>
       </main>

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

@@ -8,7 +8,7 @@ import {
   ExtensionPayoutExcelResponse,
   ExtensionPayoutListParams,
   ExtensionPayoutListResponse,
-  PayoutContent,
+  PayoutListItem,
   PayoutDisbursementStatus,
   PayoutSearchDateType
 } from '@/entities/additional-service/model/payout/types';
@@ -44,7 +44,7 @@ export const PayoutListPage = () => {
 
   const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
   const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
-  const [listItems, setListItems] = useState<Array<PayoutContent>>([]);
+  const [listItems, setListItems] = useState<Array<PayoutListItem>>([]);
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>(userMid);

src/pages/additional-service/sms-payment/sms-payment-page.tsx

@@ -19,7 +19,7 @@ import { SmsPaymentList } from '@/entities/additional-service/ui/sms-payment/sms
 import { SmsPaymentFilter } from '@/entities/additional-service/ui/sms-payment/sms-payment-filter';
 import { useExtensionSmsDetailMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-detail-mutation';
 import { useStore } from '@/shared/model/store';
-import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
+import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
 import { PATHS } from '@/shared/constants/paths';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
@@ -51,25 +51,28 @@ export const SmsPaymentPage = () => {
   const [smsCl, setSmsCl] = useState<SmsCl>(SmsCl.ALL);
   const [smsDetailData, setSmsDetailData] = useState<ExtensionSmsDetailResponse | null>(null);
   const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailTid, setDetailTid] = useState<string>('');
+  const [detailServiceCode, setDetailServiceCode] = useState<string>('');
 
   const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
   const { mutateAsync: downloadExcel } = useExtensionSmsDownloadExcelMutation();
   const { mutateAsync: detail } = useExtensionSmsDetailMutation();
-  
+
   const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
     entries.forEach((entry: IntersectionObserverEntry) => {
-      if(entry.isIntersecting){
-        if(onActionIntersect && !!pageParam.cursor){
+      if (entry.isIntersecting) {
+        if (onActionIntersect && !!pageParam.cursor) {
           setOnActionIntersect(false);
           callList('page');
-        } 
+        }
       }
     });
   };
 
-  const { setTarget } = useIntersectionObserver({ 
-    threshold: 1, 
-    onIntersect 
+  const { setTarget } = useIntersectionObserver({
+    threshold: 1,
+    onIntersect
   });
 
   useSetHeaderTitle(t('additionalService.sms.title'));
@@ -89,37 +92,37 @@ export const SmsPaymentPage = () => {
       smsCl: smsCl,
       page: pageParam
     }
-    if(type !== 'page' && listParams.page){
+    if (type !== 'page' && listParams.page) {
       listParams.page.cursor = null;
     }
 
     smsPaymentList(listParams).then((rs) => {
-      if(type === 'page'){
+      if (type === 'page') {
         setListItems([
           ...listItems,
           ...rs.content
         ]);
       }
-      else{
+      else {
         setListItems(rs.content);
       }
-			if(rs.hasNext 
+      if (rs.hasNext
         && rs.nextCursor !== pageParam.cursor
         && rs.content.length === DEFAULT_PAGE_PARAM.size
-      ){
+      ) {
         setPageParam({
           ...pageParam,
           ...{ cursor: rs.nextCursor }
         });
       }
-      else{
+      else {
         setPageParam({
           ...pageParam,
           ...{ cursor: null }
         });
       }
       setOnActionIntersect(
-        !!rs.hasNext 
+        !!rs.hasNext
         && rs.nextCursor !== pageParam.cursor
         && rs.content.length === DEFAULT_PAGE_PARAM.size
       );
@@ -169,6 +172,14 @@ export const SmsPaymentPage = () => {
     setBottomSmsPaymentDetailResendOn(true);
   };
 
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    setDetailTid(detailData.tid);
+    if (detailData?.serviceCode) {
+      setDetailServiceCode(detailData?.serviceCode);
+    }
+  };
+
   useEffect(() => {
     callList();
   }, [
@@ -227,6 +238,7 @@ export const SmsPaymentPage = () => {
               additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
               mid={mid}
               onResendClick={onClickToShowDetail}
+              setDetailData={setDetailData}
             ></SmsPaymentList>
           </div>
         </div>