상세 태그 수정

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

@@ -132,7 +132,6 @@ export const SettlementDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
           <div className="option-list">
             <div className="txn-detail">
               { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
@@ -192,7 +191,6 @@ export const SettlementDetail = ({
             </div>
           </div>
         </div>
-        </div>
       </motion.div>
     </>
   );

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

@@ -56,14 +56,12 @@ 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>
-          </div>
         }
       </motion.div>
     </>

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

@@ -62,7 +62,6 @@ 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>
@@ -72,7 +71,6 @@ export const NoticeDetail = ({
               </div>
             </div>
           </div>
-          </div>
         }
       </motion.div>
     </>

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

@@ -63,7 +63,6 @@ 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">
@@ -94,7 +93,6 @@ export const QnaDetail = ({
               </div>
             </div>
           </div>
-          </div>
         }
       </motion.div>
     </>

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

@@ -157,7 +157,7 @@ export const AllTransactionDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
+          
           <div className="option-list pb-86">
             <div className="txn-detail">
               <AmountInfoSection
@@ -225,7 +225,6 @@ export const AllTransactionDetail = ({
             </div>
           </div>
         </div>
-        </div>
         <div className="apply-row">
           <button
             className="btn-50 btn-blue flex-1"

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

@@ -73,7 +73,6 @@ 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">
@@ -100,7 +99,6 @@ export const BillingDetail = ({
             </div>
           </div>
         </div>
-        </div>
       </motion.div>
     </>
   );

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

@@ -128,7 +128,6 @@ 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
@@ -166,7 +165,6 @@ export const CashReceiptDetail = ({
             </div>
           }
         </div>
-        </div>
       </motion.div>
       <CashReceitPurposeUpdateBottomSheet
         setBottomSheetOn={ setBottomSheetOn }

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

@@ -152,7 +152,6 @@ export const EscrowDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
           <div className="option-list">
             <div className="txn-detail">
               <AmountInfoSection
@@ -205,7 +204,6 @@ export const EscrowDetail = ({
             </div>
           </div>
         </div>
-        </div>
         <div className="apply-row">
           <button 
             className="btn-50 btn-blue flex-1"

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

@@ -117,7 +117,6 @@ export const TaxInvoiceDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
           <div className="option-list">
             <div className="txn-detail">
               <AmountSection
@@ -138,7 +137,6 @@ export const TaxInvoiceDetail = ({
             </div>
           </div>
         </div>
-        </div>
         <div className="apply-row">
           <button
             className="btn-50 btn-blue flex-1"

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;