상세 태그 수정

src/entities/settlement/ui/detail/settlement-detail.tsx

@@ -132,64 +132,62 @@ export const SettlementDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
-            <div className="option-list">
-              <div className="txn-detail">
-                { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
-                  <div className="txn-num-group">
-                    <div className="txn-amount">
-                      <div className="value">
-                        {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
-                        <NumericFormat
-                          value={ settlementAmount }
-                          thousandSeparator
-                          displayType="text"
-                        ></NumericFormat>
-                        {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
-                      </div>
+          <div className="option-list">
+            <div className="txn-detail">
+              { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
+                <div className="txn-num-group">
+                  <div className="txn-amount">
+                    <div className="value">
+                      {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
+                      <NumericFormat
+                        value={ settlementAmount }
+                        thousandSeparator
+                        displayType="text"
+                      ></NumericFormat>
+                      {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
                     </div>
-                    <div className="txn-date">{ moment(settlementDate).format('YYYY.MM.DD') }</div>
                   </div>
-                }
-                { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
-                  <div className="txn-num-group">
-                    <div className="txn-amount">
-                      <div className="value">
-                        {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
-                        <NumericFormat
-                          value={ transactionAmount }
-                          thousandSeparator
-                          displayType="text"
-                        ></NumericFormat>
-                        {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
-                      </div>
+                  <div className="txn-date">{ moment(settlementDate).format('YYYY.MM.DD') }</div>
+                </div>
+              }
+              { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
+                <div className="txn-num-group">
+                  <div className="txn-amount">
+                    <div className="value">
+                      {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
+                      <NumericFormat
+                        value={ transactionAmount }
+                        thousandSeparator
+                        displayType="text"
+                      ></NumericFormat>
+                      {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
                     </div>
-                    <div className="txn-date">{ merchantName }</div>
                   </div>
-                }
-                <div className="txn-divider minus"></div>
-                
-                <AmountInfoWrap
-                  periodType={ periodType }
-                  amountInfo={ amountInfo }
-                  settlementAmount={ settlementAmount }
-                ></AmountInfoWrap>
-                <div className="txn-divider"></div>
-                { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
-                  <SettlementInfoWrap
-                    settlementInfo={ settlementInfo }
-                    isOpen={ showSettlement }
-                    onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
-                  ></SettlementInfoWrap>
-                }
-                { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
-                  <TransactionInfoWrap
-                    transactionInfo={ transactionInfo }
-                    isOpen={ showTransaction }
-                    onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
-                  ></TransactionInfoWrap>
-                }
-              </div>
+                  <div className="txn-date">{ merchantName }</div>
+                </div>
+              }
+              <div className="txn-divider minus"></div>
+              
+              <AmountInfoWrap
+                periodType={ periodType }
+                amountInfo={ amountInfo }
+                settlementAmount={ settlementAmount }
+              ></AmountInfoWrap>
+              <div className="txn-divider"></div>
+              { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
+                <SettlementInfoWrap
+                  settlementInfo={ settlementInfo }
+                  isOpen={ showSettlement }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></SettlementInfoWrap>
+              }
+              { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
+                <TransactionInfoWrap
+                  transactionInfo={ transactionInfo }
+                  isOpen={ showTransaction }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></TransactionInfoWrap>
+              }
             </div>
           </div>
         </div>

src/entities/support/ui/detail/faq-detail.tsx

@@ -56,12 +56,10 @@ export const FaqDetail = ({
                 ></FullMenuClose>
               </div>
             </div>
-            <div className="tab-pane sub active">
-              <div className="faq-detail">
-                <div className="faq-detail__title">{ title }</div>
-                <div className="faq-detail__divider"></div>
-                <div className="faq-detail__body" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
-              </div>
+            <div className="faq-detail">
+              <div className="faq-detail__title">{ title }</div>
+              <div className="faq-detail__divider"></div>
+              <div className="faq-detail__body" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
             </div>
           </div>
         }

src/entities/support/ui/detail/notice-detail.tsx

@@ -62,14 +62,12 @@ export const NoticeDetail = ({
                 ></FullMenuClose>
               </div>
             </div>
-            <div className="tab-pane sub active">
-              <div className="option-list">
-                <div className="notice-detail">
-                  <div className="notice-detail__title">{ result.title }</div>
-                  <div className="notice-detail__meta">{ result.regDt? moment(result.regDt).format('YYYY.MM.DD'): '' } | { t(`support.notice.categories.${result.informCl}`) }</div>
-                  <div className="notice-detail__divider"></div>
-                  <div className="notice-detail__body" dangerouslySetInnerHTML={{ __html: result.contents || '' }}></div>
-                </div>
+            <div className="option-list">
+              <div className="notice-detail">
+                <div className="notice-detail__title">{ result.title }</div>
+                <div className="notice-detail__meta">{ result.regDt? moment(result.regDt).format('YYYY.MM.DD'): '' } | { t(`support.notice.categories.${result.informCl}`) }</div>
+                <div className="notice-detail__divider"></div>
+                <div className="notice-detail__body" dangerouslySetInnerHTML={{ __html: result.contents || '' }}></div>
               </div>
             </div>
           </div>

src/entities/support/ui/detail/qna-detail.tsx

@@ -63,35 +63,33 @@ export const QnaDetail = ({
                 ></FullMenuClose>
               </div>
             </div>
-            <div className="tab-pane active">
-              <div className="inq-detail">
-                <div className="inq-detail__head">
-                  <div className="inq-detail__row">
-                    <span className="inq-badge">{t('support.qna.detailLabels.title')}</span>
-                    <span className="inq-head-text bold">{ result?.title }</span>
-                  </div>
-                  <div className="inq-detail__row">
-                    <span className="inq-badge">{t('support.qna.detailLabels.type')}</span>
-                    <span className="inq-head-text">{ result?.requestType? t(`support.qna.categories.${result?.requestType}`): '' }</span>
-                  </div>
-                  <div className="inq-detail__row">
-                    <span className="inq-badge">{t('support.qna.detailLabels.registrationDate')}</span>
-                    <span className="inq-head-text">{ result?.requestDate? moment(result?.requestDate).format('YYYY.MM.DD'): '' }</span>
-                  </div>
-                  <div className="inq-detail__row">
-                    <span className="inq-badge">{t('support.qna.detailLabels.answerDate')}</span>
-                    <span className="inq-head-text">{ result?.answerDate? moment(result?.answerDate).format('YYYY.MM.DD'): '' }</span>
-                  </div>
+            <div className="inq-detail">
+              <div className="inq-detail__head">
+                <div className="inq-detail__row">
+                  <span className="inq-badge">{t('support.qna.detailLabels.title')}</span>
+                  <span className="inq-head-text bold">{ result?.title }</span>
                 </div>
-                <div className="inq-detail__divider"></div>
-                <div className="inq-detail__section">
-                  <div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryAnswer')}</div>
-                  <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.answer || '' }}></div>
+                <div className="inq-detail__row">
+                  <span className="inq-badge">{t('support.qna.detailLabels.type')}</span>
+                  <span className="inq-head-text">{ result?.requestType? t(`support.qna.categories.${result?.requestType}`): '' }</span>
                 </div>
-                <div className="inq-detail__section">
-                  <div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryContents')}</div>
-                  <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.contents || '' }}></div>
+                <div className="inq-detail__row">
+                  <span className="inq-badge">{t('support.qna.detailLabels.registrationDate')}</span>
+                  <span className="inq-head-text">{ result?.requestDate? moment(result?.requestDate).format('YYYY.MM.DD'): '' }</span>
                 </div>
+                <div className="inq-detail__row">
+                  <span className="inq-badge">{t('support.qna.detailLabels.answerDate')}</span>
+                  <span className="inq-head-text">{ result?.answerDate? moment(result?.answerDate).format('YYYY.MM.DD'): '' }</span>
+                </div>
+              </div>
+              <div className="inq-detail__divider"></div>
+              <div className="inq-detail__section">
+                <div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryAnswer')}</div>
+                <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.answer || '' }}></div>
+              </div>
+              <div className="inq-detail__section">
+                <div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryContents')}</div>
+                <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.contents || '' }}></div>
               </div>
             </div>
           </div>

src/entities/transaction/ui/detail/all-transaction-detail.tsx

@@ -157,72 +157,71 @@ export const AllTransactionDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
-            <div className="option-list pb-86">
-              <div className="txn-detail">
-                <AmountInfoSection
-                  transactionCategory={ TransactionCategory.AllTransaction }
-                  amountInfo={ amountInfo }
-                  isOpen={ showAmountInfo }
-                  tid={ tid } 
-                  serviceCode={ serviceCode }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></AmountInfoSection>
-                <div className="txn-divider minus"></div>
-                <ImportantInfoSection
-                  transactionCategory={ TransactionCategory.AllTransaction }
-                  importantInfo={ importantInfo }
-                  serviceCode={ serviceCode }
-                ></ImportantInfoSection>
-                { !!paymentInfo && 
-                  <>
-                    <div className="txn-divider"></div>
-                    <PaymentInfoSection
-                      transactionCategory={ TransactionCategory.AllTransaction }
-                      paymentInfo={ paymentInfo }
-                      serviceCode={ serviceCode }
-                      isOpen={ showPaymentInfo }
-                      onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                    ></PaymentInfoSection>
-                  </>
-                }
-                { !!transactionInfo &&
-                  <>
-                    <div className="txn-divider"></div>
-                    <TransactionInfoSection
-                      transactionCategory={ TransactionCategory.AllTransaction }
-                      transactionInfo={ transactionInfo }
-                      serviceCode={ serviceCode }
-                      isOpen={ showTransactionInfo }
-                      onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                    ></TransactionInfoSection>
-                  </>
-                }
-                { !!settlementInfo &&
-                  <>
-                    <div className="txn-divider"></div>
-                    <SettlementInfoSection
-                      transactionCategory={ TransactionCategory.AllTransaction }
-                      settlementInfo={ settlementInfo }
-                      serviceCode={ serviceCode }
-                      isOpen={ showSettlementInfo }
-                      onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                    ></SettlementInfoSection>
-                  </>
-                }
-                { !!partCancelInfo &&
-                  <>
-                    <div className="txn-divider"></div>
-                    <PartCancelInfoSection
-                      transactionCategory={ TransactionCategory.AllTransaction }
-                      partCancelInfo={ partCancelInfo }
-                      serviceCode={ serviceCode }
-                      isOpen={ showPartCancelInfo }
-                      onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                    ></PartCancelInfoSection>
-                  </>
-                }
-              </div>
+          
+          <div className="option-list pb-86">
+            <div className="txn-detail">
+              <AmountInfoSection
+                transactionCategory={ TransactionCategory.AllTransaction }
+                amountInfo={ amountInfo }
+                isOpen={ showAmountInfo }
+                tid={ tid } 
+                serviceCode={ serviceCode }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></AmountInfoSection>
+              <div className="txn-divider minus"></div>
+              <ImportantInfoSection
+                transactionCategory={ TransactionCategory.AllTransaction }
+                importantInfo={ importantInfo }
+                serviceCode={ serviceCode }
+              ></ImportantInfoSection>
+              { !!paymentInfo && 
+                <>
+                  <div className="txn-divider"></div>
+                  <PaymentInfoSection
+                    transactionCategory={ TransactionCategory.AllTransaction }
+                    paymentInfo={ paymentInfo }
+                    serviceCode={ serviceCode }
+                    isOpen={ showPaymentInfo }
+                    onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                  ></PaymentInfoSection>
+                </>
+              }
+              { !!transactionInfo &&
+                <>
+                  <div className="txn-divider"></div>
+                  <TransactionInfoSection
+                    transactionCategory={ TransactionCategory.AllTransaction }
+                    transactionInfo={ transactionInfo }
+                    serviceCode={ serviceCode }
+                    isOpen={ showTransactionInfo }
+                    onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                  ></TransactionInfoSection>
+                </>
+              }
+              { !!settlementInfo &&
+                <>
+                  <div className="txn-divider"></div>
+                  <SettlementInfoSection
+                    transactionCategory={ TransactionCategory.AllTransaction }
+                    settlementInfo={ settlementInfo }
+                    serviceCode={ serviceCode }
+                    isOpen={ showSettlementInfo }
+                    onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                  ></SettlementInfoSection>
+                </>
+              }
+              { !!partCancelInfo &&
+                <>
+                  <div className="txn-divider"></div>
+                  <PartCancelInfoSection
+                    transactionCategory={ TransactionCategory.AllTransaction }
+                    partCancelInfo={ partCancelInfo }
+                    serviceCode={ serviceCode }
+                    isOpen={ showPartCancelInfo }
+                    onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                  ></PartCancelInfoSection>
+                </>
+              }
             </div>
           </div>
         </div>

src/entities/transaction/ui/detail/billing-detail.tsx

@@ -73,31 +73,29 @@ export const BillingDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
-            <div className="option-list">
-              <div className="txn-detail">
-                <div className="txn-num-group">
-                  <div className="txn-amount">
-                    <div className="value">
-                      { i18n.language === 'en' && <span className="unit">{ t('home.currencySymbol') }</span> }
-                      <NumericFormat
-                        value={ amountInfo?.transactionAmount }
-                        thousandSeparator
-                        displayType="text"
-                      ></NumericFormat>
-                      { i18n.language !== 'en' && <span className="unit">{ t('home.currencyWon') }</span> }
-                    </div>
+          <div className="option-list">
+            <div className="txn-detail">
+              <div className="txn-num-group">
+                <div className="txn-amount">
+                  <div className="value">
+                    { i18n.language === 'en' && <span className="unit">{ t('home.currencySymbol') }</span> }
+                    <NumericFormat
+                      value={ amountInfo?.transactionAmount }
+                      thousandSeparator
+                      displayType="text"
+                    ></NumericFormat>
+                    { i18n.language !== 'en' && <span className="unit">{ t('home.currencyWon') }</span> }
                   </div>
-                  <div className="txn-mid">
-                    <span className="value">{ amountInfo?.buyerName }</span>
-                  </div>
-                  <div className="txn-doc"></div>
                 </div>
-                <div className="txn-divider"></div>
-                <BillingInfoSection
-                  billingInfo={ billingInfo }
-                ></BillingInfoSection>
+                <div className="txn-mid">
+                  <span className="value">{ amountInfo?.buyerName }</span>
+                </div>
+                <div className="txn-doc"></div>
               </div>
+              <div className="txn-divider"></div>
+              <BillingInfoSection
+                billingInfo={ billingInfo }
+              ></BillingInfoSection>
             </div>
           </div>
         </div>

src/entities/transaction/ui/detail/cash-receit-detail.tsx

@@ -128,44 +128,42 @@ export const CashReceiptDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
-            <div className={ `option-list ${(detailInfo?.canDownloadReceipt)? 'pb-86': ''}` }>
-              <div className="txn-detail">
-                <AmountInfoSection
+          <div className={ `option-list ${(detailInfo?.canDownloadReceipt)? 'pb-86': ''}` }>
+            <div className="txn-detail">
+              <AmountInfoSection
+                transactionCategory={ TransactionCategory.CashReceipt }
+                amountInfo={ amountInfo }
+                isOpen={ showAmountInfo }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                purposeType={ purposeType }
+                canDownloadReceipt={ canDownloadReceipt }
+              ></AmountInfoSection>
+              <div className="txn-divider"></div>
+              <IssueInfoSection
+                transactionCategory={ TransactionCategory.CashReceipt }
+                issueInfo={ issueInfo }
+                purposeType={ purposeType }
+              ></IssueInfoSection>
+              <div className="txn-divider minus"></div>
+              { !!detailInfo &&
+                <DetailInfoSection
                   transactionCategory={ TransactionCategory.CashReceipt }
-                  amountInfo={ amountInfo }
-                  isOpen={ showAmountInfo }
+                  detailInfo={ detailInfo }
+                  isOpen={ showDetailInfo }
                   onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                  purposeType={ purposeType }
-                  canDownloadReceipt={ canDownloadReceipt }
-                ></AmountInfoSection>
-                <div className="txn-divider"></div>
-                <IssueInfoSection
-                  transactionCategory={ TransactionCategory.CashReceipt }
-                  issueInfo={ issueInfo }
-                  purposeType={ purposeType }
-                ></IssueInfoSection>
-                <div className="txn-divider minus"></div>
-                { !!detailInfo &&
-                  <DetailInfoSection
-                    transactionCategory={ TransactionCategory.CashReceipt }
-                    detailInfo={ detailInfo }
-                    isOpen={ showDetailInfo }
-                    onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                  ></DetailInfoSection>
-                }
-              </div>
+                ></DetailInfoSection>
+              }
             </div>
-            { (issueInfo?.transactionType === CashReceiptTransactionType.APPROVAL) &&
-              (issueInfo?.processResult === '발급완료') &&
-              <div className="apply-row">
-                <button
-                  className="btn-50 btn-blue flex-1"
-                  onClick={ () => onClickToPurposeUpdate() }
-                >{ t('cashReceipt.changePurpose') }</button>
-              </div>
-            }
           </div>
+          { (issueInfo?.transactionType === CashReceiptTransactionType.APPROVAL) &&
+            (issueInfo?.processResult === '발급완료') &&
+            <div className="apply-row">
+              <button
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToPurposeUpdate() }
+              >{ t('cashReceipt.changePurpose') }</button>
+            </div>
+          }
         </div>
       </motion.div>
       <CashReceitPurposeUpdateBottomSheet

src/entities/transaction/ui/detail/escrow-detail.tsx

@@ -152,57 +152,55 @@ export const EscrowDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
-            <div className="option-list">
-              <div className="txn-detail">
-                <AmountInfoSection
-                  transactionCategory={ TransactionCategory.Escrow }
-                  amountInfo={ amountInfo }
-                  isOpen={ showAmountInfo }
-                  tid={ tid }
-                  serviceCode={ serviceCode }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></AmountInfoSection>
-                <div className="txn-divider minus"></div>
-                <ImportantInfoSection
-                  transactionCategory={ TransactionCategory.Escrow }
-                  importantInfo={ importantInfo }
-                ></ImportantInfoSection>
-                <div className="txn-divider minus"></div>
-                <EscrowInfoSection
-                  escrowInfo={ escrowInfo }
-                  isOpen={ showEscroInfo }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></EscrowInfoSection>
-                <div className="txn-divider minus"></div>
-                <PaymentInfoSection
-                  transactionCategory={ TransactionCategory.Escrow }
-                  paymentInfo={ paymentInfo }
-                  isOpen={ showPaymentInfo }
-                  serviceCode={ serviceCode }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></PaymentInfoSection>
-                <div className="txn-divider"></div>
-                <TransactionInfoSection
-                  transactionCategory={ TransactionCategory.Escrow }
-                  transactionInfo={ transactionInfo }
-                  isOpen={ showTransactionInfo }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></TransactionInfoSection>
-                <div className="txn-divider"></div>
-                <SettlementInfoSection
-                  transactionCategory={ TransactionCategory.Escrow }
-                  settlementInfo={ settlementInfo }
-                  isOpen={ showSettlementInfo }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></SettlementInfoSection>
-                <div className="txn-divider"></div>
-                <MerchantInfoSection
-                  merchantInfo={ merchantInfo }
-                  isOpen={ showMerchantInfo }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></MerchantInfoSection>
-              </div>
+          <div className="option-list">
+            <div className="txn-detail">
+              <AmountInfoSection
+                transactionCategory={ TransactionCategory.Escrow }
+                amountInfo={ amountInfo }
+                isOpen={ showAmountInfo }
+                tid={ tid }
+                serviceCode={ serviceCode }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></AmountInfoSection>
+              <div className="txn-divider minus"></div>
+              <ImportantInfoSection
+                transactionCategory={ TransactionCategory.Escrow }
+                importantInfo={ importantInfo }
+              ></ImportantInfoSection>
+              <div className="txn-divider minus"></div>
+              <EscrowInfoSection
+                escrowInfo={ escrowInfo }
+                isOpen={ showEscroInfo }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></EscrowInfoSection>
+              <div className="txn-divider minus"></div>
+              <PaymentInfoSection
+                transactionCategory={ TransactionCategory.Escrow }
+                paymentInfo={ paymentInfo }
+                isOpen={ showPaymentInfo }
+                serviceCode={ serviceCode }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></PaymentInfoSection>
+              <div className="txn-divider"></div>
+              <TransactionInfoSection
+                transactionCategory={ TransactionCategory.Escrow }
+                transactionInfo={ transactionInfo }
+                isOpen={ showTransactionInfo }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></TransactionInfoSection>
+              <div className="txn-divider"></div>
+              <SettlementInfoSection
+                transactionCategory={ TransactionCategory.Escrow }
+                settlementInfo={ settlementInfo }
+                isOpen={ showSettlementInfo }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></SettlementInfoSection>
+              <div className="txn-divider"></div>
+              <MerchantInfoSection
+                merchantInfo={ merchantInfo }
+                isOpen={ showMerchantInfo }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></MerchantInfoSection>
             </div>
           </div>
         </div>

src/entities/vat-return/ui/detail/tax-invoice-detail.tsx

@@ -117,25 +117,23 @@ export const TaxInvoiceDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
-            <div className="option-list">
-              <div className="txn-detail">
-                <AmountSection
-                  detail={ detail }
-                ></AmountSection>
-                <div className="txn-divider minus"></div>
-                <IssueSection
-                  detail={ detail }
-                ></IssueSection>
-                <div className="txn-divider minus"></div>
-                <ReceiverSection
-                  detail={ detail }
-                ></ReceiverSection>
-                <div className="txn-divider"></div>
-                <SupplierSection
-                  detail={ detail }
-                ></SupplierSection>
-              </div>
+          <div className="option-list">
+            <div className="txn-detail">
+              <AmountSection
+                detail={ detail }
+              ></AmountSection>
+              <div className="txn-divider minus"></div>
+              <IssueSection
+                detail={ detail }
+              ></IssueSection>
+              <div className="txn-divider minus"></div>
+              <ReceiverSection
+                detail={ detail }
+              ></ReceiverSection>
+              <div className="txn-divider"></div>
+              <SupplierSection
+                detail={ detail }
+              ></SupplierSection>
             </div>
           </div>
         </div>

src/pages/transaction/all-transaction/detail-page.tsx

@@ -1,213 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router';
-import { PATHS } from '@/shared/constants/paths';
-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 { 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,
-  AllTransactionDetailParams,
-  DetailResponse,
-  AmountInfo,
-  ImportantInfo,
-  PaymentInfo,
-  TransactionInfo,
-  SettlementInfo,
-  PartCancelInfo,
-  InfoSectionKeys
-} from '@/entities/transaction/model/types';
-import {
-  useSetOnBack,
-  useSetHeaderTitle,
-  useSetHeaderType,
-  useSetFooterMode
-} from '@/widgets/sub-layout/use-sub-layout';
-import { useTranslation } from 'react-i18next';
-
-export const AllTransactionDetailPage = () => {
-  const { navigate } = useNavigate();
-  const { t } = useTranslation();
-  const location = useLocation();
-  const tid = location.state.tid;
-  const serviceCode = location.state.serviceCode;
-  
-  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
-  const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
-  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
-  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
-  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
-  const [partCancelInfo, setPartCancelInfo] = useState<PartCancelInfo>();
-  const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
-  const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
-  const [showTransactionInfo, setShowTransactionInfo] = useState<boolean>(false);
-  const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
-  const [showPartCancelInfo, setShowPartCancelInfo] = useState<boolean>(false);
-
-  useSetHeaderTitle(t('transaction.detailTitle'));
-  useSetHeaderType(HeaderType.RightClose);
-  useSetOnBack(() => {
-    navigate(PATHS.transaction.allTransaction.list);
-  });
-  useSetFooterMode(false);
-
-  const { mutateAsync: allTransactionDetail } = useAllTransactionDetailMutation();
-  
-  const callDetail = () => {
-    let allTransactionDetailParams: AllTransactionDetailParams = {
-      serviceCode: serviceCode,
-      tid: tid
-    };
-    allTransactionDetail(allTransactionDetailParams).then((rs: DetailResponse) => {
-      setAmountInfo(rs.amountInfo);
-      setImportantInfo(rs.importantInfo);
-      setPaymentInfo(rs.paymentInfo);
-      setTransactionInfo(rs.transactionInfo);
-      setSettlementInfo(rs.settlementInfo);
-      setPartCancelInfo(rs.partCancelInfo);
-    });
-  };
-  useEffect(() => {
-    callDetail();
-  }, []);
-
-  const onClickToNavigate = (path: string) => {
-    let timeout = setTimeout(() => {
-      clearTimeout(timeout);
-      navigate(PATHS.transaction.allTransaction.cancel, {
-        state: {
-          serviceCode: serviceCode,
-          tid: tid
-        }
-      });
-    }, 10)
-  };
-
-  const onClickToCancel = () => {
-    let msg = t('transaction.confirmCancel');
-
-    overlay.open(({
-      isOpen,
-      close,
-      unmount
-    }) => {
-      return (
-        <Dialog
-          afterLeave={ unmount }
-          open={ isOpen }
-          onClose={ close }
-          onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) }
-          // onConfirmClick={ () => callCancelInfo() }
-          message={ msg }
-          buttonLabel={[t('common.cancel'), t('common.confirm')]}
-        />
-      );
-    });
-  };
-
-  const onClickToOpenInfo = (infoSectionKey: InfoSectionKeys) => {
-    if(infoSectionKey === InfoSectionKeys.Amount){
-      setShowAmountInfo(!showAmountInfo);
-    }
-    else if(infoSectionKey === InfoSectionKeys.Payment){
-      setShowPaymentInfo(!showPaymentInfo);
-    }
-    else if(infoSectionKey === InfoSectionKeys.Transaction){
-      setShowTransactionInfo(!showTransactionInfo);
-    }
-    else if(infoSectionKey === InfoSectionKeys.Settlement){
-      setShowSettlementInfo(!showSettlementInfo);
-    }
-    else if(infoSectionKey === InfoSectionKeys.PartCancel){
-      setShowPartCancelInfo(!showPartCancelInfo);
-    }
-  };
-
-  return (
-    <>
-      <main>
-        <div className="tab-content">
-          <div className="tab-pane sub active">
-            <div className="option-list pb-86">
-              <div className="txn-detail">
-                <AmountInfoSection
-                  transactionCategory={ TransactionCategory.AllTransaction }
-                  amountInfo={ amountInfo }
-                  isOpen={ showAmountInfo }
-                  tid={ tid } 
-                  serviceCode={ serviceCode }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></AmountInfoSection>
-                <div className="txn-divider"></div>
-                <ImportantInfoSection
-                  transactionCategory={ TransactionCategory.AllTransaction }
-                  importantInfo={ importantInfo }
-                  serviceCode={ serviceCode }
-                ></ImportantInfoSection>
-                <div className="txn-divider"></div>
-                { !!paymentInfo && 
-                  <>
-                    <PaymentInfoSection
-                      transactionCategory={ TransactionCategory.AllTransaction }
-                      paymentInfo={ paymentInfo }
-                      serviceCode={ serviceCode }
-                      isOpen={ showPaymentInfo }
-                      onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                    ></PaymentInfoSection>
-                    <div className="txn-divider"></div>
-                  </>
-                }
-                { !!transactionInfo &&
-                  <>
-                    <TransactionInfoSection
-                      transactionCategory={ TransactionCategory.AllTransaction }
-                      transactionInfo={ transactionInfo }
-                      serviceCode={ serviceCode }
-                      isOpen={ showTransactionInfo }
-                      onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                    ></TransactionInfoSection>
-                    <div className="txn-divider"></div>
-                  </>
-                }
-                { !!settlementInfo &&
-                  <>
-                    <SettlementInfoSection
-                      transactionCategory={ TransactionCategory.AllTransaction }
-                      settlementInfo={ settlementInfo }
-                      serviceCode={ serviceCode }
-                      isOpen={ showSettlementInfo }
-                      onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                    ></SettlementInfoSection>
-                    <div className="txn-divider"></div>
-                  </>
-                }
-                { !!partCancelInfo &&
-                  <PartCancelInfoSection
-                    transactionCategory={ TransactionCategory.AllTransaction }
-                    partCancelInfo={ partCancelInfo }
-                    serviceCode={ serviceCode }
-                    isOpen={ showPartCancelInfo }
-                    onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                  ></PartCancelInfoSection>
-                }
-              </div>
-            </div>
-            <div className="apply-row">
-              <button
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToCancel() }
-              >{t('transaction.cancelTransaction')}</button>
-            </div>
-          </div>
-        </div>
-      </main>
-    </>
-  );
-};

src/pages/transaction/all-transaction/list-page.tsx

@@ -33,7 +33,11 @@ import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
 import { AllTransactionDetail } from '@/entities/transaction/ui/detail/all-transaction-detail';
 
+/* 거래내역조회 31 */
 export const AllTransactionListPage = () => {
+  const menuGrantsByKey = useStore.getState().UserStore.menuGrantsByKey;
+  const myGrants = menuGrantsByKey['31'];
+
   const { navigate } = useNavigate();
   const { t, i18n } = useTranslation();
   const userMid = useStore.getState().UserStore.mid;