mid 셋팅및 코드 정리

2025-10-10 15:26:04 +09:00
parent 306629be53
commit ced334f90f
41 changed files with 692 additions and 582 deletions
--- a/src/pages/transaction/all-transaction/detail-page.tsx
+++ b/src/pages/transaction/all-transaction/detail-page.tsx
@@ -5,12 +5,12 @@ import { Dialog } from '@/shared/ui/dialogs/dialog';
 import { overlay } from 'overlay-kit';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useAllTransactionDetailMutation } from '@/entities/transaction/api/use-all-transaction-detail-mutation';
-import { AmountInfoWrap } from '@/entities/transaction/ui/info-wrap/amount-info-wrap';
-import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';
-import { PaymentInfoWrap } from '@/entities/transaction/ui/info-wrap/payment-info-wrap';
-import { TransactionInfoWrap } from '@/entities/transaction/ui/info-wrap/transaction-info-wrap';
-import { SettlementInfoWrap } from '@/entities/transaction/ui/info-wrap/settlement-info-wrap';
-import { PartCancelInfoWrap } from '@/entities/transaction/ui/info-wrap/part-cancel-info-wrap';
+import { AmountInfoSection } from '@/entities/transaction/ui/section/amount-info-section';
+import { ImportantInfoSection } from '@/entities/transaction/ui/section/important-info-section';
+import { PaymentInfoSection } from '@/entities/transaction/ui/section/payment-info-section';
+import { TransactionInfoSection } from '@/entities/transaction/ui/section/transaction-info-section';
+import { SettlementInfoSection } from '@/entities/transaction/ui/section/settlement-info-section';
+import { PartCancelInfoSection } from '@/entities/transaction/ui/section/part-cancel-info-section';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
  TransactionCategory,
@@ -22,7 +22,7 @@ import {
  TransactionInfo,
  SettlementInfo,
  PartCancelInfo,
-  InfoWrapKeys
+  InfoSectionKeys
 } from '@/entities/transaction/model/types';
 import {
  useSetOnBack, 
@@ -108,20 +108,20 @@ export const AllTransactionDetailPage = () => {
    });
  };

-  const onClickToOpenInfo = (infoWrapKey: InfoWrapKeys) => {
-    if(infoWrapKey === InfoWrapKeys.Amount){
+  const onClickToOpenInfo = (infoSectionKey: InfoSectionKeys) => {
+    if(infoSectionKey === InfoSectionKeys.Amount){
      setShowAmountInfo(!showAmountInfo);
    }
-    else if(infoWrapKey === InfoWrapKeys.Payment){
+    else if(infoSectionKey === InfoSectionKeys.Payment){
      setShowPaymentInfo(!showPaymentInfo);
    }
-    else if(infoWrapKey === InfoWrapKeys.Transaction){
+    else if(infoSectionKey === InfoSectionKeys.Transaction){
      setShowTransactionInfo(!showTransactionInfo);
    }
-    else if(infoWrapKey === InfoWrapKeys.Settlement){
+    else if(infoSectionKey === InfoSectionKeys.Settlement){
      setShowSettlementInfo(!showSettlementInfo);
    }
-    else if(infoWrapKey === InfoWrapKeys.PartCancel){
+    else if(infoSectionKey === InfoSectionKeys.PartCancel){
      setShowPartCancelInfo(!showPartCancelInfo);
    }
  };
@@ -133,52 +133,52 @@ export const AllTransactionDetailPage = () => {
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
-                <AmountInfoWrap
+                <AmountInfoSection
                  transactionCategory={ TransactionCategory.AllTransaction }
                  amountInfo={ amountInfo }
                  isOpen={ showAmountInfo }
                  tid={ tid } 
                  serviceCode={ serviceCode }
-                  onClickToOpenInfo={ (infoWrapKey) => onClickToOpenInfo(infoWrapKey) }
-                ></AmountInfoWrap>
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></AmountInfoSection>
                <div className="txn-divider"></div>
-                <ImportantInfoWrap
+                <ImportantInfoSection
                  transactionCategory={ TransactionCategory.AllTransaction }
                  importantInfo={ importantInfo }
                  serviceCode={ serviceCode }
-                ></ImportantInfoWrap>
+                ></ImportantInfoSection>
                <div className="txn-divider"></div>
-                <PaymentInfoWrap
+                <PaymentInfoSection
                  transactionCategory={ TransactionCategory.AllTransaction }
                  paymentInfo={ paymentInfo }
                  serviceCode={ serviceCode }
                  isOpen={ showPaymentInfo }
-                  onClickToOpenInfo={ (infoWrapKey) => onClickToOpenInfo(infoWrapKey) }
-                ></PaymentInfoWrap>
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></PaymentInfoSection>
                <div className="txn-divider"></div>
-                <TransactionInfoWrap
+                <TransactionInfoSection
                  transactionCategory={ TransactionCategory.AllTransaction }
                  transactionInfo={ transactionInfo }
                  serviceCode={ serviceCode }
                  isOpen={ showTransactionInfo }
-                  onClickToOpenInfo={ (infoWrapKey) => onClickToOpenInfo(infoWrapKey) }
-                ></TransactionInfoWrap>
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></TransactionInfoSection>
                <div className="txn-divider"></div>
-                <SettlementInfoWrap
+                <SettlementInfoSection
                  transactionCategory={ TransactionCategory.AllTransaction }
                  settlementInfo={ settlementInfo }
                  serviceCode={ serviceCode }
                  isOpen={ showSettlementInfo }
-                  onClickToOpenInfo={ (infoWrapKey) => onClickToOpenInfo(infoWrapKey) }
-                ></SettlementInfoWrap>
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></SettlementInfoSection>
                <div className="txn-divider"></div>
-                <PartCancelInfoWrap
+                <PartCancelInfoSection
                  transactionCategory={ TransactionCategory.AllTransaction }
                  partCancelInfo={ partCancelInfo }
                  serviceCode={ serviceCode }
                  isOpen={ showPartCancelInfo }
-                  onClickToOpenInfo={ (infoWrapKey) => onClickToOpenInfo(infoWrapKey) }
-                ></PartCancelInfoWrap>
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></PartCancelInfoSection>
              </div>
            </div>
            <div className="apply-row">
--- a/src/pages/transaction/all-transaction/list-page.tsx
+++ b/src/pages/transaction/all-transaction/list-page.tsx
@@ -21,9 +21,11 @@ import {
 	useSetFooterMode,
  useSetFooterCurrentPage
 } from '@/widgets/sub-layout/use-sub-layout';
+import { useStore } from '@/shared/model/store';

 export const AllTransactionListPage = () => {
  const { navigate } = useNavigate();
+  const userMid = useStore.getState().UserStore.mid;

  const [serviceCodeOptions, setServiceCodeOptions] = useState<Array<Record<string, any>>>();
  const [selectedServiceCode, setSelectedServiceCode] = useState<string>('st');
@@ -32,7 +34,7 @@ export const AllTransactionListPage = () => {
  const [listItems, setListItems] = useState({});
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-  const [mid, setMid] = useState<string>('nictest00m');
+  const [mid, setMid] = useState<string>(userMid);
  const [moid, setMoid] = useState<string>('');
  const [tid, setTid] = useState<string>('');
  // const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
@@ -50,8 +52,7 @@ export const AllTransactionListPage = () => {
  const [totalTransactionCount, setTotalTransactionCount] = useState<number>(0);
  const [totalTransactionAmount, setTotalTransactionAmount] = useState<number>(0);
  
-  
-  
+    
 	useSetHeaderTitle('거래내역 조회');
 	useSetHeaderType(HeaderType.LeftArrow);
 	useSetOnBack(() => {
@@ -139,7 +140,7 @@ export const AllTransactionListPage = () => {
      {text: '계좌이체', value: 'transfer'},
      {text: '휴대폰', value: 'phone'},
      {text: '문화상품권', value: 'gift'},
-      {text: '티머니페이', value: '티머니페이'},  
+      {text: '티머니페이', value: '티머니페이'}
    ];
    setServiceCodeOptions(options);
    setSelectedServiceCode('simple');  
@@ -149,7 +150,9 @@ export const AllTransactionListPage = () => {
    let val = e.target.value;
    // onchagne 에서 useState가 즉시 반영 안되므로 값을 직접 바로 넘긴다.
    setSelectedServiceCode(val);
-    callList({val: val});
+    callList({
+      val: val
+    });
  };

  const getServiceCodeOptions = () => {
--- a/src/pages/transaction/billing/detail-page.tsx
+++ b/src/pages/transaction/billing/detail-page.tsx
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useBillingDetailMutation } from '@/entities/transaction/api/use-billing-detail-mutation';
-import { BillingInfoWrap } from '@/entities/transaction/ui/info-wrap/billing-info-wrap';
+import { BillingInfoSection } from '@/entities/transaction/ui/section/billing-info-section';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
  TransactionCategory,
@@ -70,9 +70,9 @@ export const BillingDetailPage = () => {

                </div>
                <div className="txn-divider"></div>
-                <BillingInfoWrap
+                <BillingInfoSection
                  billingInfo={ billingInfo }
-                ></BillingInfoWrap>
+                ></BillingInfoSection>
              </div>
            </div>
          </div>
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/src/pages/transaction/billing/list-page.tsx
@@ -22,13 +22,14 @@ import {

 export const BillingListPage = () => {
 	const { navigate } = useNavigate();
+	const userMid = useStore.getState().UserStore.mid;
 	const userInfo = useStore((state) => state.UserStore.userInfo);

 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [mid, setMid] = useState<string>('nictest00m');
+	const [mid, setMid] = useState<string>(userMid);
 	const [searchType, setSearchType] = useState<BillingSearchType>(BillingSearchType.ALL);
 	const [searchKeyword, setSearchKeyword] = useState<string>('');
 	// const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
@@ -112,12 +113,16 @@ export const BillingListPage = () => {
  };
  const onClickToSort = (sort: SortByKeys) => {
    setSortBy(sort);
-    callList({sortBy: sort});
+    callList({
+			sortBy: sort
+		});
  };

 	const onClickToRequestStatus = (val: BillingRequestStatus) => {
    setRequestStatus(val);
-    callList({val: val});
+    callList({
+			val: val
+		});
  };

  useEffect(() => {
--- a/src/pages/transaction/cash-receipt/detail-page.tsx
+++ b/src/pages/transaction/cash-receipt/detail-page.tsx
@@ -3,8 +3,8 @@ import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useCashReceiptDetailMutation } from '@/entities/transaction/api/use-cash-receipt-detail-mutation';
-import { IssueInfoWrap } from '@/entities/transaction/ui/info-wrap/issue-info-wrap';
-import { DetailInfoWrap } from '@/entities/transaction/ui/info-wrap/detail-info-wrap';
+import { IssueInfoSection } from '@/entities/transaction/ui/section/issue-info-section';
+import { DetailInfoSection } from '@/entities/transaction/ui/section/detail-info-section';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
  TransactionCategory,
@@ -12,7 +12,7 @@ import {
  DetailResponse,
  IssueInfo,
  DetailInfo,
-  InfoWrapKeys,
+  InfoSectionKeys,
  CashReceiptPurposeType
 } from '@/entities/transaction/model/types';
 import {
@@ -76,8 +76,8 @@ export const CashReceiptDetailPage = () => {
    callDetail();
  }, []);

-  const onClickToOpenInfo = (infoWrapKey: InfoWrapKeys) => {
-    if(infoWrapKey === InfoWrapKeys.Detail){
+  const onClickToOpenInfo = (infoSectionKey: InfoSectionKeys) => {
+    if(infoSectionKey === InfoSectionKeys.Detail){
      setShowDetailInfo(!showDetailInfo);
    }
  };
@@ -93,18 +93,18 @@ export const CashReceiptDetailPage = () => {
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
-                <IssueInfoWrap
+                <IssueInfoSection
                  transactionCategory={ TransactionCategory.CashReceipt }
                  issueInfo={ issueInfo }
                  purposeType={ purposeType }
-                ></IssueInfoWrap>
+                ></IssueInfoSection>
                <div className="txn-divider minus"></div>
-                <DetailInfoWrap
+                <DetailInfoSection
                  transactionCategory={ TransactionCategory.CashReceipt }
                  detailInfo={ detailInfo }
                  isOpen={ showDetailInfo }
-                  onClickToOpenInfo={ (infoWrapKey) => onClickToOpenInfo(infoWrapKey) }
-                ></DetailInfoWrap>
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></DetailInfoSection>
              </div>
            </div>
            <div className="apply-row">
--- a/src/pages/transaction/cash-receipt/list-page.tsx
+++ b/src/pages/transaction/cash-receipt/list-page.tsx
@@ -19,15 +19,17 @@ import {
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 import { CashReceiptIssueStatusBtnGroup } from '@/entities/transaction/model/contant';
+import { useStore } from '@/shared/model/store';

 export const CashReceiptListPage = () => {
 	const { navigate } = useNavigate();
+	const userMid = useStore.getState().UserStore.mid;

 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [mid, setMid] = useState<string>('nictest00m');
+	const [mid, setMid] = useState<string>(userMid);
 	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
 	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
 	const [purposeType, setPurposeType] = useState<CashReceiptPurposeType>(CashReceiptPurposeType.ALL);
@@ -61,7 +63,7 @@ export const CashReceiptListPage = () => {
 		};

 		cashReceiptList(listParams).then((rs) => {
-			console.log(rs)
+			console.log(rs);
 			setListItems(assembleData(rs.content));
 		});

@@ -69,13 +71,13 @@ export const CashReceiptListPage = () => {

 	const assembleData = (content: Array<CashReceiptListItem>) => {
 		let data: any = {};
-		if (content && content.length > 0) {
-			for (let i = 0; i < content?.length; i++) {
+		if(content && content.length > 0){
+			for (let i=0;i<content?.length;i++){
 				let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
-				if (!!groupDate && !data.hasOwnProperty(groupDate)) {
+				if(!!groupDate && !data.hasOwnProperty(groupDate)){
 					data[groupDate] = [];
 				}
-				if (!!groupDate && data.hasOwnProperty(groupDate)) {
+				if(!!groupDate && data.hasOwnProperty(groupDate)){
 					data[groupDate].push(content[i]);
 				}
 			}
@@ -96,12 +98,16 @@ export const CashReceiptListPage = () => {
 	};
 	const onClickToSort = (sort: SortByKeys) => {
 		setSortBy(sort);
-		callList({ sortBy: sort });
+		callList({
+			sortBy: sort
+		});
 	};

 	const onClickToIssueStatus = (val: CashReceiptIssueStatus) => {
 		setIssueStatus(val);
-		callList({ val: val });
+		callList({
+			val: val
+		});
 	};

 	useEffect(() => {
@@ -119,14 +125,14 @@ export const CashReceiptListPage = () => {
 									<input
 										type="text"
 										className="credit-period"
-										value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
-										readOnly={true}
+										value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') }
+										readOnly={ true }
 									/>
 									<button className="filter-btn">
 										<img
-											src={IMAGE_ROOT + '/ico_setting.svg'}
+											src={ IMAGE_ROOT + '/ico_setting.svg' }
 											alt="검색옵션"
-											onClick={() => onClickToOpenFilter()}
+											onClick={ () => onClickToOpenFilter() }
 										/>
 									</button>
 								</div>
@@ -143,19 +149,19 @@ export const CashReceiptListPage = () => {
 									<span className="label">승인</span>
 									<strong className="amount22">
 										<NumericFormat
-											value={83745200}
+											value={ 83745200 }
 											thousandSeparator
 											displayType="text"
-											suffix={'원'}
+											suffix='원'
 										></NumericFormat>
 									</strong>
 									<span className="count">
 										<NumericFormat
-											value={2745}
+											value={ 2745 }
 											thousandSeparator
 											displayType="text"
-											prefix={'('}
-											suffix={'건)'}
+											prefix='('
+											suffix='건)'
 										></NumericFormat>
 									</span>
 								</div>
@@ -163,19 +169,19 @@ export const CashReceiptListPage = () => {
 									<span className="label">취소</span>
 									<strong className="amount19">
 										<NumericFormat
-											value={534407}
+											value={ 534407 }
 											thousandSeparator
 											displayType="text"
-											suffix={'원'}
+											suffix='원'
 										></NumericFormat>
 									</strong>
 									<span className="count">
 										<NumericFormat
-											value={32}
+											value={ 32 }
 											thousandSeparator
 											displayType="text"
-											prefix={'('}
-											suffix={'건)'}
+											prefix='('
+											suffix='건)'
 										></NumericFormat>
 									</span>
 								</div>
@@ -184,26 +190,26 @@ export const CashReceiptListPage = () => {

 						<div className="filter-section">
 							<SortOptionsBox
-								sortBy={sortBy}
+								sortBy={ sortBy }
 								onClickToSort={ onClickToSort }
 							></SortOptionsBox>
 							<div>
 								<div className="full-menu-keywords no-padding">
-									{
-										CashReceiptIssueStatusBtnGroup.map((value, index) => (
-											<span
-												key={`key-service-code=${index}`}
-												className={`keyword-tag ${(issueStatus === value.value) ? 'active' : ''}`}
-												onClick={() => onClickToIssueStatus(value.value)}
-											>{value.name}</span>
-										))
-									}
+								{
+									CashReceiptIssueStatusBtnGroup.map((value, index) => (
+										<span
+											key={`key-service-code=${index}`}
+											className={`keyword-tag ${(issueStatus === value.value) ? 'active' : ''}`}
+											onClick={() => onClickToIssueStatus(value.value)}
+										>{value.name}</span>
+									))
+								}
 								</div>
 							</div>
 						</div>
 						<CashReceiptList
-							listItems={listItems}
-							transactionCategory={TransactionCategory.CashReceipt}
+							listItems={ listItems }
+							transactionCategory={ TransactionCategory.CashReceipt }
 						></CashReceiptList>
 					</div>
 				</div>
--- a/src/pages/transaction/escrow/detail-page.tsx
+++ b/src/pages/transaction/escrow/detail-page.tsx
@@ -3,11 +3,11 @@ import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useEscrowDetailMutation } from '@/entities/transaction/api/use-escrow-detail-mutation';
-import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';
-import { EscrowInfoWrap } from '@/entities/transaction/ui/info-wrap/escrow-info-wrap';
-import { PaymentInfoWrap } from '@/entities/transaction/ui/info-wrap/payment-info-wrap';
-import { TransactionInfoWrap } from '@/entities/transaction/ui/info-wrap/transaction-info-wrap';
-import { SettlementInfoWrap } from '@/entities/transaction/ui/info-wrap/settlement-info-wrap';
+import { ImportantInfoSection } from '@/entities/transaction/ui/section/important-info-section';
+import { EscrowInfoSection } from '@/entities/transaction/ui/section/escrow-info-section';
+import { PaymentInfoSection } from '@/entities/transaction/ui/section/payment-info-section';
+import { TransactionInfoSection } from '@/entities/transaction/ui/section/transaction-info-section';
+import { SettlementInfoSection } from '@/entities/transaction/ui/section/settlement-info-section';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
  TransactionCategory,
@@ -18,7 +18,7 @@ import {
  PaymentInfo,
  TransactionInfo,
  SettlementInfo,
-  InfoWrapKeys
+  InfoSectionKeys
 } from '@/entities/transaction/model/types';
 import {
  useSetOnBack, 
@@ -93,23 +93,23 @@ export const EscrowDetailPage = () => {
    });
  };
  
-  const onClickToOpenInfo = (infoWrapKey: InfoWrapKeys) => {
-    if(infoWrapKey === InfoWrapKeys.Amount){
+  const onClickToOpenInfo = (infoSectionKey: InfoSectionKeys) => {
+    if(infoSectionKey === InfoSectionKeys.Amount){
      setShowAmountInfo(!showAmountInfo);
    }
-    else if(infoWrapKey === InfoWrapKeys.Important){
+    else if(infoSectionKey === InfoSectionKeys.Important){
      setShowImportantInfo(!showImportantInfo);
    }
-    else if(infoWrapKey === InfoWrapKeys.Escrow){
+    else if(infoSectionKey === InfoSectionKeys.Escrow){
      setShowEscroInfo(!showEscroInfo);
    }
-    else if(infoWrapKey === InfoWrapKeys.Payment){
+    else if(infoSectionKey === InfoSectionKeys.Payment){
      setShowPaymentInfo(!showPaymentInfo);
    }
-    else if(infoWrapKey === InfoWrapKeys.Transaction){
+    else if(infoSectionKey === InfoSectionKeys.Transaction){
      setShowTransactionInfo(!showTransactionInfo);
    }
-    else if(infoWrapKey === InfoWrapKeys.Settlement){
+    else if(infoSectionKey === InfoSectionKeys.Settlement){
      setShowSettlementInfo(!showSettlementInfo);
    }
  };
@@ -121,39 +121,38 @@ export const EscrowDetailPage = () => {
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
-                <ImportantInfoWrap
+                <ImportantInfoSection
                  transactionCategory={ TransactionCategory.Escrow }
                  importantInfo={ importantInfo }
-                  
-                ></ImportantInfoWrap>
+                ></ImportantInfoSection>
                <div className="txn-divider minus"></div>
-                <EscrowInfoWrap
+                <EscrowInfoSection
                  transactionCategory={ TransactionCategory.Escrow }
                  importantInfo={ importantInfo }
                  isOpen={ showEscroInfo }
-                  onClickToOpenInfo={ (infoWrapKey) => onClickToOpenInfo(infoWrapKey) }
-                ></EscrowInfoWrap>
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></EscrowInfoSection>
                <div className="txn-divider minus"></div>
-                <PaymentInfoWrap
+                <PaymentInfoSection
                  transactionCategory={ TransactionCategory.Escrow }
                  paymentInfo={ paymentInfo }
                  isOpen={ showPaymentInfo }
-                  onClickToOpenInfo={ (infoWrapKey) => onClickToOpenInfo(infoWrapKey) }
-                ></PaymentInfoWrap>
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></PaymentInfoSection>
                <div className="txn-divider"></div>
-                <TransactionInfoWrap
+                <TransactionInfoSection
                  transactionCategory={ TransactionCategory.Escrow }
                  transactionInfo={ transactionInfo }
                  isOpen={ showTransactionInfo }
-                  onClickToOpenInfo={ (infoWrapKey) => onClickToOpenInfo(infoWrapKey) }
-                ></TransactionInfoWrap>
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></TransactionInfoSection>
                <div className="txn-divider"></div>
-                <SettlementInfoWrap
+                <SettlementInfoSection
                  transactionCategory={ TransactionCategory.Escrow }
                  settlementInfo={ settlementInfo }
                  isOpen={ showSettlementInfo }
-                  onClickToOpenInfo={ (infoWrapKey) => onClickToOpenInfo(infoWrapKey) }
-                ></SettlementInfoWrap>
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></SettlementInfoSection>
                <div className="txn-divider"></div>
              </div>
            </div>
--- a/src/pages/transaction/escrow/list-page.tsx
+++ b/src/pages/transaction/escrow/list-page.tsx
@@ -23,12 +23,13 @@ import {
 export const EscrowListPage = () => {
 	const { navigate } = useNavigate();
 	const userInfo = useStore((state) => state.UserStore.userInfo);
+	const userMid = useStore.getState().UserStore.mid;

 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [mid, setMid] = useState<string>('nictest00m');
+	const [mid, setMid] = useState<string>(userMid);
 	const [searchType, setSearchType] = useState<EscrowSearchType>(EscrowSearchType.ALL);
 	const [searchKeyword, setSearchKeyword] = useState<string>('');
 	//const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
@@ -110,12 +111,16 @@ export const EscrowListPage = () => {
  };
  const onClickToSort = (sort: SortByKeys) => {
    setSortBy(sort);
-    callList({sortBy: sort});
+    callList({
+			sortBy: sort
+		});
  };
 	
 	const onClickToDeliveryStatus = (val: EscrowDeliveryStatus) => {
    setDeliveryStatus(val);
-    callList({val: val});
+    callList({
+			val: val
+		});
  };

  useEffect(() => {