수정

2025-10-26 01:28:47 +09:00
parent 7e5f1e71a7
commit 00aec7656e
34 changed files with 930 additions and 319 deletions
--- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
@@ -17,12 +17,14 @@ import { FundAccountResultStatusBtnGroup, FundAccountStatusBtnGroup } from '../.
 import { FundAccountResultFilter } from '../filter/fund-account-result-filter';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import useIntersectionObserver from '@/widgets/intersection-observer';

 export const FundAccountResultListWrap = () => {
  const { navigate } = useNavigate();

  const userMid = useStore.getState().UserStore.mid;

+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [listItems, setListItems] = useState<Array<FundAccountResultContentItem>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -49,12 +51,28 @@ export const FundAccountResultListWrap = () => {
  const { mutateAsync: extensionFundAccountResultList } = useExtensionFundAccountResultListMutation();
  const { mutateAsync: extensionFundAccountResultExcel } = useExtensionFundAccountResultExcelMutation();
  const { mutateAsync: extensionFundAccountResultSummary } = useExtensionFundAccountResultSummaryMutation();
+  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
+    entries.forEach((entry: IntersectionObserverEntry) => {
+      if(entry.isIntersecting){
+        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
+        if(onActionIntersect && !!pageParam.cursor){
+          callList('page');
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };

-  const callList = (option?: {
-    sortType?: SortTypeKeys,
-    resultStatus?: FundAccountResultStatus
-  }) => {
-    let listSummaryParams: ExtensionFundAccountResultListParams = {
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+  
+  const callList = (type?: string) => {
+    setOnActionIntersect(false);
+    let listParams: ExtensionFundAccountResultListParams = {
      mid: mid,
      searchCl: searchCl,
      searchValue: searchValue,
@@ -62,18 +80,39 @@ export const FundAccountResultListWrap = () => {
      fromDate: fromDate,
      toDate: toDate,
      bankCode: bankCode,
-      resultStatus: option?.resultStatus ?? resultStatus,
-      page: pageParam
+      resultStatus: resultStatus,
+      page: {
+				...pageParam,
+				...{ sortType: sortType }
+			}
    };
-
-    if (listSummaryParams.page) {
-      listSummaryParams.page.sortType = option?.sortType || sortType;
-      setPageParam(listSummaryParams.page);
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
    }

-    extensionFundAccountResultList(listSummaryParams).then((rs: any) => {
-      console.log(rs);
-      setListItems(rs.content);
+    extensionFundAccountResultList(listParams).then((rs: any) => {
+      if(type === 'page'){
+        setListItems([
+          ...listItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setListItems(rs.content);
+      }
+			if(rs.hasNext){
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
+        setOnActionIntersect(true);
+      }
+      else{
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
+      }
    });
  };

@@ -119,9 +158,6 @@ export const FundAccountResultListWrap = () => {

  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
-    callList({
-      sortType: sort
-    });
  };
  const onClickToStatus = (val: FundAccountResultStatus) => {
    setResultStatus(val);
@@ -187,7 +223,8 @@ export const FundAccountResultListWrap = () => {
    fromDate,
    toDate,
    bankCode,
-    resultStatus
+    resultStatus,
+    sortType
  ]);

  const onClickToNavigate = () => {
@@ -318,12 +355,13 @@ export const FundAccountResultListWrap = () => {
      </section>

      <section className="transaction-list">
-        {getListDateGroup()}
+        { getListDateGroup() }
+        <div ref={ setTarget }></div>
      </section>
      <div className="apply-row">
        <button
          className="btn-50 btn-blue flex-1"
-          onClick={onClickToNavigate}
+          onClick={ onClickToNavigate }
        >이체 등록</button>
      </div>
      <FundAccountResultFilter
--- a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
@@ -26,12 +26,14 @@ import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction
 import { PATHS } from '@/shared/constants/paths';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import useIntersectionObserver from '@/widgets/intersection-observer';

 export const FundAccountTransferListWrap = () => {
  const { navigate } = useNavigate();

  const userMid = useStore.getState().UserStore.mid;

+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [listItems, setListItems] = useState<Array<FundAccountTransferContentItem>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -50,29 +52,67 @@ export const FundAccountTransferListWrap = () => {
  const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
  const { mutateAsync: extensionFundAccountTransferExcel } = useExtensionFundAccountTransferExcelMutation();
  const { mutateAsync: extensionFundAccountBalance } = useExtensionFundAccountBalanceMutation();
+  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
+    entries.forEach((entry: IntersectionObserverEntry) => {
+      if(entry.isIntersecting){
+        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
+        if(onActionIntersect && !!pageParam.cursor){
+          callList('page');
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };

-  const callList = (option?: {
-    sortType?: SortTypeKeys,
-    status?: FundAccountStatus
-  }) => {
-    let listSummaryParams: ExtensionFundAccountTransferListParams = {
+	const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+  const callList = (type?: string) => {
+    setOnActionIntersect(false);
+    let listParams: ExtensionFundAccountTransferListParams = {
      mid: mid,
      searchCl: searchCl,
      searchValue: searchValue,
      bankCode: bankCode,
      fromDate: fromDate,
      toDate: toDate,
-      resultStatus: option?.status ?? status,
-      page: pageParam
+      resultStatus: status,
+      page: {
+				...pageParam,
+				...{ sortType: sortType }
+			}
    };
-
-    if (listSummaryParams.page) {
-      listSummaryParams.page.sortType = option?.sortType || sortType;
-      setPageParam(listSummaryParams.page);
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
    }

-    extensionFundAccountTransferList(listSummaryParams).then((rs: any) => {
-      setListItems(rs.content);
+    extensionFundAccountTransferList(listParams).then((rs: any) => {
+      if(type === 'page'){
+        setListItems([
+          ...listItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setListItems(rs.content);
+      }
+			if(rs.hasNext){
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
+        setOnActionIntersect(true);
+      }
+      else{
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
+      }
    });
    callBalance();
  };
@@ -111,9 +151,6 @@ export const FundAccountTransferListWrap = () => {

  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
-    callList({
-      sortType: sort
-    });
  };

  const onClickToStatus = (val: FundAccountStatus) => {
@@ -174,7 +211,8 @@ export const FundAccountTransferListWrap = () => {
    fromDate,
    toDate,
    bankCode,
-    status
+    status,
+    sortType
  ]);

  const onClickToNavigate = () => {
@@ -254,7 +292,8 @@ export const FundAccountTransferListWrap = () => {
      </section>

      <section className="transaction-list pb-86">
-        {getListDateGroup()}
+        { getListDateGroup() }
+        <div ref={ setTarget }></div>
      </section>
      <div className="apply-row">
        <button
--- a/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
@@ -14,6 +14,7 @@ import { useExtensionLinkPayHistoryDownloadExcelMutation } from '../../api/link-
 import { useStore } from '@/shared/model/store';
 import { ExtensionLinkPayHistoryListParams, LinkPaymentHistoryListItem, LinkPaymentPaymentMethod, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '../../model/link-pay/types';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import useIntersectionObserver from '@/widgets/intersection-observer';

 const paymentResultBtnGroup = [
 	{ name: '전체', value: LinkPaymentPaymentStatus.ALL },
@@ -28,6 +29,7 @@ export const LinkPaymentHistoryWrap = () => {
 	const { navigate } = useNavigate();
 	const userMid = useStore.getState().UserStore.mid;

+	const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
 	const [listItems, setListItems] = useState<Array<LinkPaymentHistoryListItem>>([]);
@@ -46,34 +48,72 @@ export const LinkPaymentHistoryWrap = () => {

 	const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation();
 	const { mutateAsync: downloadExcel } = useExtensionLinkPayHistoryDownloadExcelMutation();
+	const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
+    entries.forEach((entry: IntersectionObserverEntry) => {
+      if(entry.isIntersecting){
+        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
+        if(onActionIntersect && !!pageParam.cursor){
+          callList('page');
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };
+
+	const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });

 	const onClickToNavigate = () => {
 		navigate(PATHS.additionalService.linkPayment.request)
 	};

-	const callList = (option?: {
-		sortType?: SortTypeKeys,
-		status?: LinkPaymentPaymentStatus
-	}) => {
+	const callList = (type?: string) => {
+		setOnActionIntersect(false);
 		let listParams: ExtensionLinkPayHistoryListParams = {
 			mid: mid,
 			searchCl: searchCl,
 			searchValue: searchValue,
 			fromDate: fromDate,
 			toDate: toDate,
-			paymentStatus: option?.status ?? paymentStatus,
+			paymentStatus: paymentStatus,
 			sendStatus: sendStatus,
 			sendMethod: sendMethod,
-			page: pageParam
+			page: {
+				...pageParam,
+				...{ sortType: sortType }
+			}
 		};
-
-		if (listParams.page) {
-			listParams.page.sortType = option?.sortType || sortType;
-			setPageParam(listParams.page);
-		}
+		if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
+    }

 		linkPayHistoryList(listParams).then((rs) => {
-			setListItems(rs.content);
+			if(type === 'page'){
+        setListItems([
+          ...listItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setListItems(rs.content);
+      }
+			if(rs.hasNext){
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
+        setOnActionIntersect(true);
+      }
+      else{
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
+      }
 		});
 	};

@@ -107,9 +147,6 @@ export const LinkPaymentHistoryWrap = () => {

 	const onClickToSort = (sort: SortTypeKeys) => {
 		setSortType(sort);
-		callList({
-			sortType: sort
-		});
 	};

 	const onClickToOpenFilter = () => {
@@ -127,7 +164,8 @@ export const LinkPaymentHistoryWrap = () => {
 		toDate,
 		paymentStatus,
 		sendStatus,
-		sendMethod
+		sendMethod,
+		sortType
 	]);

 	return (
@@ -189,6 +227,7 @@ export const LinkPaymentHistoryWrap = () => {
 				additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
 				mid={mid}
 			></LinkPaymentHistoryList>
+			<div ref={ setTarget }></div>
 			<div className="apply-row">
 				<button
 					className="btn-50 btn-blue flex-1"
--- a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
@@ -16,6 +16,7 @@ import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, L
 import { ProcessStatusBtnGrouup } from '../../model/link-pay/constant';
 import { useExtensionLinkPayWaitDeleteMutation } from '../../api/link-payment/use-extension-link-pay-wait-delete-mutation';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import useIntersectionObserver from '@/widgets/intersection-observer';



@@ -23,6 +24,7 @@ export const LinkPaymentWaitSendWrap = () => {
  const { navigate } = useNavigate();
  const userMid = useStore.getState().UserStore.mid;

+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [mid, setMid] = useState<string>(userMid);
@@ -38,6 +40,24 @@ export const LinkPaymentWaitSendWrap = () => {

  const { mutateAsync: pendingSendList } = useExtensionLinkPayWaitListMutation();
  const { mutateAsync: downloadExcel } = useExtensionLinkPayWaitDownloadExcelMutation();
+  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
+    entries.forEach((entry: IntersectionObserverEntry) => {
+      if(entry.isIntersecting){
+        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
+        if(onActionIntersect && !!pageParam.cursor){
+          callList('page');
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };
+
+	const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });

  const onClickToOpenFilter = () => {
    setFilterOn(!filterOn);
@@ -46,10 +66,8 @@ export const LinkPaymentWaitSendWrap = () => {
    navigate(PATHS.additionalService.linkPayment.request)
  }

-  const callList = (option?: {
-    sortType?: SortTypeKeys,
-    status?: LinkPaymentProcessStatus
-  }) => {
+  const callList = (type?: string) => {
+    setOnActionIntersect(false);
    let listParams = {
      mid: mid,
      searchCl: searchType,
@@ -57,17 +75,39 @@ export const LinkPaymentWaitSendWrap = () => {
      fromDate: startDate,
      toDate: endDate,
      sendMethod: sendMethod,
-      processStatus: option?.status ?? processStatus,
-      page: pageParam
+      processStatus: processStatus,
+      page: {
+				...pageParam,
+				...{ sortType: sortType }
+			}
    }
-
-    if (listParams.page) {
-      listParams.page.sortType = option?.sortType || sortType;
-      setPageParam(listParams.page);
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
    }
-
+    
    pendingSendList(listParams).then((rs) => {
-      setListItems(rs.content);
+      if(type === 'page'){
+        setListItems([
+          ...listItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setListItems(rs.content);
+      }
+			if(rs.hasNext){
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
+        setOnActionIntersect(true);
+      }
+      else{
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
+      }
    });
  };

@@ -95,9 +135,6 @@ export const LinkPaymentWaitSendWrap = () => {

  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
-    callList({
-      sortType: sort
-    });
  };

  const onClickSendingStatus = (val: LinkPaymentProcessStatus) => {
@@ -113,7 +150,8 @@ export const LinkPaymentWaitSendWrap = () => {
    startDate,
    endDate,
    sendMethod,
-    processStatus
+    processStatus,
+    sortType
  ]);

  return (
@@ -174,6 +212,7 @@ export const LinkPaymentWaitSendWrap = () => {
        additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
        mid={mid}
      ></LinkPaymentWaitList>
+      <div ref={ setTarget }></div>
      <div className="apply-row">
        <button
          className="btn-50 btn-blue flex-1"
--- a/src/entities/common/model/constant.ts
+++ b/src/entities/common/model/constant.ts
@@ -5,7 +5,6 @@ export const DEFAULT_PAGE_PARAM = {
  cursor: null,
  size: 20,
  sortType: SortTypeKeys.LATEST,
-  limit: 0
 };

 export const FilterMotionVariants = {
--- a/src/entities/common/model/types.ts
+++ b/src/entities/common/model/types.ts
@@ -23,7 +23,6 @@ export interface DefaultRequestPagination {
  cursor: string | null;
  size: number;
  sortType: SortTypeKeys;
-  limit: number;
 };
 export interface DefaulResponsePagination {
  nextCursor: string | null;
--- a/src/entities/common/ui/email-bottom-sheet.tsx
+++ b/src/entities/common/ui/email-bottom-sheet.tsx
@@ -3,6 +3,8 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useStore } from '@/shared/model/store';
 import { motion } from 'framer-motion';
 import { ChangeEvent, useState } from 'react';
+import { toPng } from 'html-to-image';
+import { snackBar } from '@/shared/lib';

 export interface EmailBottomSheetProps {
  bottomSheetOn: boolean;
@@ -30,6 +32,22 @@ export const EmailBottomSheet = ({
    sendRequest(userEmail);
  };
  
+  const downloadImage = () => { 
+    const app = document.getElementById('root') as HTMLElement;
+    toPng(app).then((image) => {
+      const link = document.createElement('a');
+      link.download = 'downloadImage.png';
+      link.href = image;
+      link.click();
+      snackBar('이미지가 요청 되었습니다.');
+    });
+  };
+  const onDownloadImage = () => {
+    downloadImage();
+    setTimeout(() => {
+      onClickToClose();
+    }, 1000);
+  };
  
  return (
    <>
@@ -62,7 +80,10 @@ export const EmailBottomSheet = ({
        <div className="bottomsheet-content">
          <div className="email-section">
            { !!imageSave &&
-            <div className="email-label mb-10">
+            <div 
+              className="email-label mb-10"
+              onClick={ onDownloadImage }
+            >
              <div className="mail-icon">
                <div className="mail-icon-bg"></div>
                <img 
@@ -93,7 +114,10 @@ export const EmailBottomSheet = ({
                  >
                    {
                      optionsEmails.map((value, index) => (
-                        <option value={ value.value }>{ value.value }</option>
+                        <option 
+                          key={ value.value }
+                          value={ value.value }
+                        >{ value.value }</option>
                      ))
                    }
                  </select>
--- a/src/entities/settlement/model/types.ts
+++ b/src/entities/settlement/model/types.ts
@@ -65,12 +65,13 @@ export interface SettlementsTransactionListResponse extends DefaulResponsePagina
 export interface SettlementsTransactionListContent {
  approvalNumber?: string;
  mid?: string;
+  tid?: string;
  approvalDate?: string;
  settlementDate?: string;
  transactionAmount?: number;
 };
 export interface SettlementsTransactionDetailParams {
-  approvalNumber: string;
+  tid: string;
 };
 export interface SettlementsTransactionDetailResponse {
  transactionAmount: number;
@@ -194,6 +195,7 @@ export interface ListItemProps extends SettlementsHistoryContent, SettlementsTra
 export interface AmountInfoWrapProps {
  periodType: SettlementPeriodType;
  amountInfo?: AmountInfo;
+  settlementAmount?: number | null;
 };
 export interface SettlementInfoWrapProps {
  settlementInfo?: SettlementInfo;
--- a/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
+++ b/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
@@ -8,6 +8,7 @@ import {
 export const AmountInfoWrap = ({
  periodType,
  amountInfo,
+  settlementAmount
 }: AmountInfoWrapProps) => {

  return (
@@ -156,7 +157,13 @@ export const AmountInfoWrap = ({
            </li>
            <li className="kv-row bolder">
              <span className="k">정산금액</span>
-              <span className="v">5,731,742</span>
+              <span className="v">
+                <NumericFormat
+                  value={ settlementAmount } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
            </li>
          </ul>
        }
--- a/src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx
+++ b/src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx
@@ -47,7 +47,11 @@ export const SettlementInfoWrap = ({
            </li>
            <li className="kv-row bolder">
              <span className="k">이체시간</span>
-              <span className="v">{ moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss') }</span>
+              <span className="v">
+                { settlementInfo?.transferTime && 
+                  moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss') 
+                }
+              </span>
            </li>
            <li className="kv-row bolder">
              <span className="k">은행명</span>
--- a/src/entities/settlement/ui/list-date-group.tsx
+++ b/src/entities/settlement/ui/list-date-group.tsx
@@ -26,6 +26,7 @@ export const ListDateGroup = ({
            settlementDate={ items[i]?.settlementDate }
            merchantName={ items[i]?.merchantName }
            mid={ items[i]?.mid }
+            tid={ items[i]?.tid }
            settlementAmount={ items[i]?.settlementAmount }
            approvalNumber={ items[i]?.approvalNumber }
            approvalDate={ items[i]?.approvalDate }
--- a/src/entities/settlement/ui/list-item.tsx
+++ b/src/entities/settlement/ui/list-item.tsx
@@ -10,6 +10,7 @@ export const ListItem = ({
  settlementDate,
  merchantName,
  mid,
+  tid,
  settlementAmount,
  approvalNumber,
  approvalDate,
@@ -30,6 +31,7 @@ export const ListItem = ({
        periodType: periodType,
        settlementId: settlementId,
        approvalNumber: approvalNumber,
+        tid: tid,
      }
    });
  };
@@ -66,7 +68,7 @@ export const ListItem = ({
              value={ settlementAmount || transactionAmount } 
              thousandSeparator
              displayType="text"
-              suffix={ '원' }
+              suffix='원'
            ></NumericFormat> 
          }
        </div>
--- a/src/entities/transaction/model/types.ts
+++ b/src/entities/transaction/model/types.ts
@@ -192,6 +192,7 @@ export interface EscrowListItem {
  issueNumber?: string;
  transactionAmount?: number;
  deliveryStatus?: EscrowDeliveryStatus;
+  serviceCode?: string;
  settlementStatus?: string;
  cancelStatus?: string;
 };
--- a/src/entities/transaction/ui/list-item.tsx
+++ b/src/entities/transaction/ui/list-item.tsx
@@ -65,7 +65,8 @@ export const ListItem = ({
    else if(transactionCategory === TransactionCategory.Escrow){
      navigate(PATHS.transaction.escrow.detail, {
        state: {
-         tid: tid
+         tid: tid,
+         serviceCode: serviceCode
        }
      });
    }
--- a/src/entities/transaction/ui/section/important-info-section.tsx
+++ b/src/entities/transaction/ui/section/important-info-section.tsx
@@ -170,18 +170,24 @@ export const ImportantInfoSection = ({
                <span className="k">거래수단</span>
                <span className="v">{  }</span>
              </li>
-              <li className="kv-row">
-                <span className="k">승인일</span>
-                <span className="v">{  }</span>
-              </li>
-              <li className="kv-row">
-                <span className="k">거래일</span>
-                <span className="v">{  }</span>
-              </li>
-              <li className="kv-row">
-                <span className="k">요청일</span>
-                <span className="v">{  }</span>
-              </li>
+              { serviceCode === '01' &&
+                <li className="kv-row">
+                  <span className="k">승인일</span>
+                  <span className="v">{  }</span>
+                </li>
+              }
+              { serviceCode === '02' &&
+                <li className="kv-row">
+                  <span className="k">거래일</span>
+                  <span className="v">{  }</span>
+                </li>
+              }
+              { serviceCode === '03' && 
+                <li className="kv-row">
+                  <span className="k">요청일</span>
+                  <span className="v">{  }</span>
+                </li>
+              }
              <li className="kv-row">
                <span className="k">취소일</span>
                <span className="v">{  }</span>
--- a/src/entities/transaction/ui/section/payment-info-section.tsx
+++ b/src/entities/transaction/ui/section/payment-info-section.tsx
@@ -152,102 +152,118 @@ export const PaymentInfoSection = ({
            }
            { (transactionCategory === TransactionCategory.Escrow) && 
              <>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;승인매입</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;승인반송(횟수)</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;승인재매입(횟수)</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;승인VAN</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;취소매입</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;취소반송</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;취소재매입</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;매입VAN</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;매입사(발급사)</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;카드번호</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;승인번호</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;할부기간</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;인증</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;유형</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;은행명</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;계좌번호</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;입금금융기관명</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;입금자명</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;입금기한</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;입금일</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;환불예정일</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;환불은행명</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;환불계좌번호</span>
-                  <span className="v">{  }</span>
-                </li>
-                <li className="kv-row">
-                  <span className="k">·&nbsp;&nbsp;예금주</span>
-                  <span className="v">{  }</span>
-                </li>
+                { (serviceCode === '01') && 
+                  <>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;승인매입</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;승인반송(횟수)</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;승인재매입(횟수)</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;승인VAN</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;취소매입</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;취소반송</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;취소재매입</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;매입VAN</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;매입사(발급사)</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;카드번호</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;승인번호</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;할부기간</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;인증</span>
+                      <span className="v">{  }</span>
+                    </li>
+                  </>
+                }
+                { (serviceCode === '02') &&
+                  <>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;유형</span>
+                      <span className="v">{  }</span>
+                    </li>
+                  </>
+                }
+                { (serviceCode === '02' || serviceCode === '03') &&
+                  <>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;은행명</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;계좌번호</span>
+                      <span className="v">{  }</span>
+                    </li>
+                  </>
+                }
+                { (serviceCode === '03') && 
+                  <>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;입금금융기관명</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;입금자명</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;입금기한</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;입금일</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;환불예정일</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;환불은행명</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;환불계좌번호</span>
+                      <span className="v">{  }</span>
+                    </li>
+                    <li className="kv-row">
+                      <span className="k">·&nbsp;&nbsp;예금주</span>
+                      <span className="v">{  }</span>
+                    </li>
+                  </>
+                }
              </>
            }
          </ul>
--- a/src/entities/transaction/ui/section/transaction-info-section.tsx
+++ b/src/entities/transaction/ui/section/transaction-info-section.tsx
@@ -144,11 +144,12 @@ export const TransactionInfoSection = ({
                <span className="k">·&nbsp;&nbsp;부분취소</span>
                <span className="v">{ }</span>
              </li>
-              { /* 계좌이체 혹은 가상계좌 */ }
+              { (serviceCode === '02' || serviceCode === '03') &&
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;현금영수증발행</span>
                <span className="v">{ }</span>
              </li>
+              }
            </>
          }
          </ul>
--- a/src/entities/vat-return/model/types.ts
+++ b/src/entities/vat-return/model/types.ts
@@ -14,8 +14,8 @@ export enum VatReturnReceiptType {
  BILL = 'BILL '
 };
 export enum VatReturnPayTax {
-  TAX = 'RECEIPT',
-  NOTAX = 'REQUEST'
+  TAX = 'TAXABLE',
+  NOTAX = 'TAX_EXEMPT'
 };
 export enum VatReturnTargetType {
  ALL = 'ALL',