diff --git a/src/entities/transaction/ui/detail/cash-receit-detail.tsx b/src/entities/transaction/ui/detail/cash-receit-detail.tsx
index a9adace..c7061d9 100644
--- a/src/entities/transaction/ui/detail/cash-receit-detail.tsx
+++ b/src/entities/transaction/ui/detail/cash-receit-detail.tsx
@@ -25,6 +25,7 @@ import { snackBar } from '@/shared/lib';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { checkGrant } from '@/shared/lib/check-grant';
+import { showAlert } from '@/widgets/show-alert';
 
 export interface CashReceiptDetailProps {
   detailOn: boolean;
diff --git a/src/pages/settlement/list/detail-page.tsx b/src/pages/settlement/list/detail-page.tsx
deleted file mode 100644
index ad8b1af..0000000
--- a/src/pages/settlement/list/detail-page.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router';
-import { PATHS } from '@/shared/constants/paths';
-import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { AmountInfoWrap } from '@/entities/settlement/ui/info-wrap/amount-info-wrap';
-import { SettlementInfoWrap } from '@/entities/settlement/ui/info-wrap/settlement-info-wrap';
-import { TransactionInfoWrap } from '@/entities/settlement/ui/info-wrap/transaction-info-wrap'
-import { HeaderType } from '@/entities/common/model/types';
-import { 
-  AmountInfo,
-  InfoWrapKeys,
-  SettlementInfo,
-  SettlementPeriodType,
-  SettlementsHistoryDetailParams,
-  SettlementsHistoryDetailResponse,
-  SettlementsTransactionDetailParams,
-  SettlementsTransactionDetailResponse,
-  TransactionInfo
-} from '@/entities/settlement/model/types';
-import {
-  useSetOnBack,
-  useSetHeaderTitle,
-  useSetHeaderType,
-  useSetFooterMode
-} from '@/widgets/sub-layout/use-sub-layout';
-import { useSettlementsHistoryDetailMutation } from '@/entities/settlement/api/use-settlements-history-detail-mutation';
-import { useSettlementsTransactionDetailMutation } from '@/entities/settlement/api/use-settlements-transaction-detail-mutation';
-import { NumericFormat } from 'react-number-format';
-import moment from 'moment';
-import { useTranslation } from 'react-i18next';
-
-export const DetailPage = () => {
-  const { navigate } = useNavigate();
-  const { t, i18n } = useTranslation();
-  const location = useLocation();
-  
-  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
-  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
-  const [settlementAmount, setSettlementAmount] = useState<number>();
-  const [settlementDate, setSettlementDate] = useState<string>();
-  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
-  const [transactionAmount, setTransactionAmount] = useState<number>();
-  const [merchantName, setMerchantName] = useState<string>();
-
-  const [showSettlement, setShowSettlement] = useState<boolean>(false);
-  const [showTransaction, setShowTransaction] = useState<boolean>(false);
-
-  const { mutateAsync: settlementsHistoryDetail } = useSettlementsHistoryDetailMutation();
-  const { mutateAsync: settlementsTransactionDetail } = useSettlementsTransactionDetailMutation();
-  
-  const settlementId = location.state.settlementId;
-  const approvalNumber = location.state.approvalNumber;
-  const periodType = location.state.periodType;
-  const tid = location.state.tid;
-
-
-  useSetHeaderTitle(t('settlement.detailTitle'));
-  useSetHeaderType(HeaderType.RightClose);
-  useSetOnBack(() => {
-    navigate(PATHS.settlement.list);
-  });
-  useSetFooterMode(false);
-
-  const callSettlementDetail = () => {
-    let params: SettlementsHistoryDetailParams = {
-      settlementId: settlementId
-    };
-
-    settlementsHistoryDetail(params).then((rs: SettlementsHistoryDetailResponse) => {
-      setAmountInfo(rs.amountInfo);
-      setSettlementInfo(rs.settlementInfo);
-      setSettlementAmount(rs.settlementAmount);
-      setSettlementDate(rs.settlementDate);
-    });
-  };
-  const callTransactionDetail = () => {
-    let params: SettlementsTransactionDetailParams = {
-      tid: tid
-    };
-
-    settlementsTransactionDetail(params).then((rs: SettlementsTransactionDetailResponse) => {
-      setAmountInfo(rs.amountInfo);
-      setTransactionInfo(rs.transactionInfo);
-      setTransactionAmount(rs.transactionAmount);
-      setMerchantName(rs.merchantName);
-    });
-  };
-  
-  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
-    if(infoWrapKey === InfoWrapKeys.Settlement){
-      setShowSettlement(!showSettlement);
-    }
-    else if(infoWrapKey === InfoWrapKeys.Transaction){
-      setShowTransaction(!showTransaction);
-    }
-  };
-
-  useEffect(() => {
-    if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
-      callSettlementDetail();
-    }
-    else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
-      callTransactionDetail();
-    }
-  }, []);
-
-  return (
-    <>
-      <main>
-        <div className="tab-content">
-          <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>
-                    <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>
-                    <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>
-        </div>
-      </main>
-    </>
-  );
-};
\ No newline at end of file