diff --git a/src/entities/common/model/constant.ts b/src/entities/common/model/constant.ts
index a70127a..18bcdf4 100644
--- a/src/entities/common/model/constant.ts
+++ b/src/entities/common/model/constant.ts
@@ -16,6 +16,23 @@ export const DEFAULT_PAGE_PARAM = {
   sortType: SortTypeKeys.LATEST,
 };
 
+export const DetailMotionVariants = {
+  hidden: {
+    x: '100%'
+  },
+  visible: {
+    x: '0%'
+  },
+};
+export const DetailMotionDuration = {
+  duration: 0.3
+};
+export const DetailMotionStyle = {
+  width: '100%',
+  height: '100%'
+};
+
+
 export const FilterMotionVariants = {
   hidden: {
     x: '100%'
diff --git a/src/entities/home/ui/home-notice-item.tsx b/src/entities/home/ui/home-notice-item.tsx
index 0cbe040..d2f8840 100644
--- a/src/entities/home/ui/home-notice-item.tsx
+++ b/src/entities/home/ui/home-notice-item.tsx
@@ -6,21 +6,19 @@ import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 
 export const HomeNoticeItem = ({
-  seq,
-  title,
-  informCl,
-  regDt,
+  noticeItem,
+  setDetailData,
 }: NoticeItemProps) => {
   const { navigate } = useNavigate();
   const { t } = useTranslation();
 
   const onClickToDetail = () => {
-    navigate(PATHS.support.notice.detail, {
-      state: {
-        seq: seq,
-        from: PATHS.home
-      }
-    })
+    if(setDetailData){
+      setDetailData({
+        seq: noticeItem.seq,
+        detailOn: true
+      });
+    }
   };
 
   return (
@@ -30,8 +28,8 @@ export const HomeNoticeItem = ({
         onClick={ () => onClickToDetail() }
       >
         <div className="notice-content">
-          <div className="notice-title">{ title }</div>
-          <div className="notice-meta">{ t(`support.notice.categories.${informCl}`) }<span>{ moment(regDt).format('YY년 MM월 DD일') }</span></div>
+          <div className="notice-title">{ noticeItem.title }</div>
+          <div className="notice-meta">{ t(`support.notice.categories.${noticeItem.informCl}`) }<span>{ noticeItem.regDt? moment(noticeItem.regDt).format('YY년 MM월 DD일'): '' }</span></div>
         </div>
         <div className="notice-arrow">
           <img
diff --git a/src/entities/home/ui/home-notice-list.tsx b/src/entities/home/ui/home-notice-list.tsx
index dc83eef..9e9dfad 100644
--- a/src/entities/home/ui/home-notice-list.tsx
+++ b/src/entities/home/ui/home-notice-list.tsx
@@ -1,31 +1,43 @@
 import { useEffect, useState } from 'react';
 import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { NoticeItem } from '@/entities/support/model/types';
+import { DetailData, NoticeItem } from '@/entities/support/model/types';
 import { HomeNoticeItem } from './home-notice-item';
 import { useTranslation } from 'react-i18next';
+import { NoticeDetail } from '@/entities/support/ui/detail/notice-detail';
 
 export const HomeNoticeList = () => {
   const { t } = useTranslation();
   
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailSeq, setDetailSeq] = useState<number>(0);
 
   const { mutateAsync: noticeList } = useNoticeListMutation();
 
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    if(detailData?.seq){
+      setDetailSeq(detailData?.seq);
+    }
+  };
+
   const getItems = () => {
     let rs = [];
     let maxCnt = (!!resultList && resultList.length < 4)? resultList.length: 4;
     for(let i=0;i<maxCnt;i++){
-      rs.push(
-        <HomeNoticeItem 
-          key={ `key-home-notice-item-${i}` }
-          seq={ resultList[i]?.seq }
-          title={ resultList[i]?.title }
-          informCl={ resultList[i]?.informCl }
-          regDt={ resultList[i]?.regDt }
-        ></HomeNoticeItem>
-      );
+      let noticeItem = resultList[i];
+      if(noticeItem){
+        rs.push(
+          <HomeNoticeItem 
+            key={ `key-home-notice-item-${i}` }
+            noticeItem={ noticeItem }
+            setDetailData={ setDetailData }
+          ></HomeNoticeItem>
+        );
+      }
+      
     }
     return rs;
   };
@@ -56,6 +68,11 @@ export const HomeNoticeList = () => {
           }
         </div>
       </div>
+      <NoticeDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        seq={ detailSeq }
+      ></NoticeDetail>
     </>
   );
 };
diff --git a/src/entities/settlement/ui/detail/list-detail.tsx b/src/entities/settlement/ui/detail/list-detail.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/entities/support/model/types.ts b/src/entities/support/model/types.ts
index 430a589..cd16562 100644
--- a/src/entities/support/model/types.ts
+++ b/src/entities/support/model/types.ts
@@ -21,9 +21,10 @@ export interface FaqListResponse extends DefaulResponsePagination {
   hasNext: boolean;
   nextCursor: string | null;
 };
-export interface FaqItemProps extends FaqItem {
-  
-}
+export interface FaqItemProps {
+  faqItem: FaqItem,
+  setDetailData?: (detailData: DetailData) => void;
+};
 export interface QnaListParams extends SupportParams {
   statusCode?: string;
   page?: DefaultRequestPagination;
@@ -45,8 +46,15 @@ export interface QnaItem {
 export interface QnaListResponse extends DefaulResponsePagination {
   content: Array<QnaItem>
 };
-export interface QnaItemProps extends QnaItem {
-
+export interface DetailData {
+  qnaItem?: QnaItem;
+  faqItem?: FaqItem;
+  seq?: number;
+  detailOn: boolean;
+};
+export interface QnaItemProps {
+  qnaItem: QnaItem;
+  setDetailData?: (detailData: DetailData) => void;
 };
 export interface QnaSaveParams extends SupportParams {
   requestType: string;
@@ -100,6 +108,7 @@ export interface NoticeDetailParams {
 export interface NoticeDetailResponse extends NoticeItem {
   
 };
-export interface NoticeItemProps extends NoticeItem {
-
-}
\ No newline at end of file
+export interface NoticeItemProps {
+  noticeItem: NoticeItem;
+  setDetailData?: (detailData: DetailData) => void;
+};
\ No newline at end of file
diff --git a/src/entities/support/ui/detail/faq-detail.tsx b/src/entities/support/ui/detail/faq-detail.tsx
new file mode 100644
index 0000000..746b831
--- /dev/null
+++ b/src/entities/support/ui/detail/faq-detail.tsx
@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+import { FaqItem } from '../../model/types';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+
+export interface FaqDetaillProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  faqItem: FaqItem
+};
+export const FaqDetail = ({
+  detailOn,
+  setDetailOn,
+  faqItem
+}: FaqDetaillProps) => {
+  const { t } = useTranslation();
+
+  const [cursorId, setCursorId] = useState<number>();
+  const [seq, setSeq] = useState<string>();
+  const [category, setCategory] = useState<string>();
+  const [title, setTitle] = useState<string>();
+  const [contents, setContents] = useState<string>();
+
+   const onClickToClose = () => {
+    setDetailOn(false);
+  };
+
+  useEffect(() => {
+    setCursorId(faqItem?.cursorId);
+    setSeq(faqItem?.seq);
+    setCategory(faqItem?.category);
+    setTitle(faqItem?.title);
+    setContents(faqItem?.contents);
+  }, [faqItem]);
+
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        { contents &&
+          <div className="full-menu-container pdw-16">
+            <div className="full-menu-header">
+              <div className="full-menu-title center">{ t('support.qna.title') }</div>
+              <div className="full-menu-actions">
+                <FullMenuClose
+                  addClass="full-menu-close"
+                  onClickToCallback={ onClickToClose }
+                ></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>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/src/entities/support/ui/detail/notice-detail.tsx b/src/entities/support/ui/detail/notice-detail.tsx
new file mode 100644
index 0000000..a9ece91
--- /dev/null
+++ b/src/entities/support/ui/detail/notice-detail.tsx
@@ -0,0 +1,81 @@
+import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
+import { useLocation } from 'react-router';
+import { NoticeDetailParams, NoticeDetailResponse, NoticeItem } from '../../model/types';
+import { useEffect, useState } from 'react';
+import { useNoticeDetailMutation } from '../../api/use-notice-detail-mutation';
+import moment from 'moment';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+
+export interface NoticeDetaillProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  seq: number;
+};
+export const NoticeDetail = ({
+  detailOn,
+  setDetailOn,
+  seq
+}: NoticeDetaillProps) => {
+  const location = useLocation();
+  const { t } = useTranslation();
+
+  const [result, setResult] = useState<NoticeItem>({});
+  
+  const { mutateAsync: noticeDetail } = useNoticeDetailMutation();
+
+  const callDetail = () => {
+    let detailParams: NoticeDetailParams = {
+      seq: seq,
+    };
+    noticeDetail(detailParams).then((rs: NoticeDetailResponse) => {
+      setResult(rs);
+    });
+  };
+
+  const onClickToClose = () => {
+    setDetailOn(false);
+  };
+
+  useEffect(() => {
+    callDetail();
+  }, [seq]);
+
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        { result.informCl &&
+          <div className="full-menu-container pdw-16">
+            <div className="full-menu-header">
+              <div className="full-menu-title center">{ t('support.notice.title') }</div>
+              <div className="full-menu-actions">
+                <FullMenuClose
+                  addClass="full-menu-close"
+                  onClickToCallback={ onClickToClose }
+                ></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>
+            </div>
+          </div>
+        }
+      </motion.div>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/src/entities/support/ui/detail/qna-detail.tsx b/src/entities/support/ui/detail/qna-detail.tsx
new file mode 100644
index 0000000..79eb8be
--- /dev/null
+++ b/src/entities/support/ui/detail/qna-detail.tsx
@@ -0,0 +1,110 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { QnaItem } from '../../model/types';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+
+export interface qnaDetaillProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  qnaItem: QnaItem;
+};
+export const QnaDetail = ({
+  detailOn,
+  setDetailOn,
+  qnaItem
+}: qnaDetaillProps) => {
+  const { t } = useTranslation();
+  
+  const [answer, setAnswer] = useState<string>();
+  const [answerDate, setAnswerDate] = useState<string>();
+  const [contents, setContents] = useState<string>();
+  const [corpName, setCorpName] = useState<string | null>();
+  const [cursorId, setCursorId] = useState<number>();
+  const [requestDate, setRequestDate] = useState<string>();
+  const [requestName, setRequestName] = useState<string>();
+  const [requestType, setRequestType] = useState<string>();
+  const [sendEmail, setSendEmail] = useState<string | null>();
+  const [seq, setSeq] = useState<string>();
+  const [statusCode, setStatusCode] = useState<string>();
+  const [title, setTitle] = useState<string>();
+  
+  const onClickToClose = () => {
+    setDetailOn(false);
+  };
+
+  useEffect(() => {
+    setAnswer(qnaItem?.answer);
+    setAnswerDate(qnaItem?.answerDate);
+    setContents(qnaItem?.contents);
+    setCorpName(qnaItem?.corpName);
+    setCursorId(qnaItem?.cursorId);
+    setRequestDate(qnaItem?.requestDate);
+    setRequestName(qnaItem?.requestName);
+    setRequestType(qnaItem?.requestType);
+    setSendEmail(qnaItem?.sendEmail);
+    setSeq(qnaItem?.seq);
+    setStatusCode(qnaItem?.statusCode);
+    setTitle(qnaItem?.title);
+  }, [qnaItem]);
+
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        { statusCode &&
+          <div className="full-menu-container pdw-16">
+            <div className="full-menu-header">
+              <div className="full-menu-title center">{ t('support.qna.title') }</div>
+              <div className="full-menu-actions">
+                <FullMenuClose
+                  addClass="full-menu-close"
+                  onClickToCallback={ onClickToClose }
+                ></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">{ title }</span>
+                  </div>
+                  <div className="inq-detail__row">
+                    <span className="inq-badge">{t('support.qna.detailLabels.type')}</span>
+                    <span className="inq-head-text">{ t(`support.qna.categories.${requestType}`) }</span>
+                  </div>
+                  <div className="inq-detail__row">
+                    <span className="inq-badge">{t('support.qna.detailLabels.registrationDate')}</span>
+                    <span className="inq-head-text">{ !!requestDate? moment(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">{ !!answerDate? moment(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: 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: contents || '' }}></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+      </motion.div>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/src/entities/support/ui/faq-item.tsx b/src/entities/support/ui/faq-item.tsx
index 1f8abcd..a738a8a 100644
--- a/src/entities/support/ui/faq-item.tsx
+++ b/src/entities/support/ui/faq-item.tsx
@@ -4,36 +4,29 @@ import { FaqItemProps } from '../model/types';
 import { useTranslation } from 'react-i18next';
 
 export const SupportFaqItem = ({
-  cursorId,
-  seq,
-  category,
-  title,
-  contents,
+ faqItem,
+  setDetailData
 }: FaqItemProps) => {
-  const { navigate } = useNavigate();
   const { t } = useTranslation();
 
   const onClickToDetail = () => {
-    navigate(PATHS.support.faq.detail, {
-      state: {
-        cursorId,
-        seq,
-        category,
-        title,
-        contents
-      }
-    });
+    if(setDetailData){
+      setDetailData({
+        faqItem: faqItem,
+        detailOn: true
+      });
+    }
   };
 
   return (
     <>
       <div 
         className="faq-row"
-        onClick={ () => onClickToDetail() }
+        onClick={ onClickToDetail }
       >
         <div className="faq-txt">
-          <div className="faq-title">{ title }</div>
-          <div className="faq-tag">{ t('support.faq.categories.' + category) }</div>
+          <div className="faq-title">{ faqItem.title }</div>
+          <div className="faq-tag">{ t('support.faq.categories.' + faqItem.category) }</div>
         </div>
       </div>
     </>
diff --git a/src/entities/support/ui/notice-item.tsx b/src/entities/support/ui/notice-item.tsx
index dfbd150..2e1f961 100644
--- a/src/entities/support/ui/notice-item.tsx
+++ b/src/entities/support/ui/notice-item.tsx
@@ -5,21 +5,19 @@ import { NoticeItemProps } from '../model/types';
 import { useTranslation } from 'react-i18next';
 
 export const SupportNoticeItem = ({
-  seq,
-  title,
-  informCl,
-  regDt,
+  noticeItem,
+  setDetailData,
 }: NoticeItemProps) => {
   const { navigate } = useNavigate();
   const { t } = useTranslation();
 
   const onClickToDetail = () => {
-    navigate(PATHS.support.notice.detail, {
-      state: {
-        seq: seq,
-        from: PATHS.support.notice.list
-      }
-    })
+    if(setDetailData){
+      setDetailData({
+        seq: noticeItem.seq,
+        detailOn: true
+      });
+    }
   };
 
   return (
@@ -29,9 +27,9 @@ export const SupportNoticeItem = ({
         onClick={ () => onClickToDetail() }
       >
         <div className="notice-txt">
-          <div className="notice-title-114">{ title }</div>
+          <div className="notice-title-114">{ noticeItem.title }</div>
           <div className="notice-meta-114">
-            <span className="blue">{ t(`support.notice.categories.${informCl}`) }</span> ㅣ <span>{ moment(regDt).format('YYYY.MM.DD HH:mm:ss') }</span>
+            <span className="blue">{ t(`support.notice.categories.${noticeItem.informCl}`) }</span> ㅣ <span>{ noticeItem.regDt? moment(noticeItem.regDt).format('YYYY.MM.DD HH:mm:ss'): '' }</span>
           </div>
         </div>
       </div>
diff --git a/src/entities/support/ui/qna-item.tsx b/src/entities/support/ui/qna-item.tsx
index f28cd3e..8f62d36 100644
--- a/src/entities/support/ui/qna-item.tsx
+++ b/src/entities/support/ui/qna-item.tsx
@@ -1,42 +1,19 @@
 import moment from 'moment';
-import { PATHS } from '@/shared/constants/paths';
-import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { QnaItemProps } from '../model/types';
 import { useTranslation } from 'react-i18next';
 
 export const SupportQnaItem = ({
-  answer,
-  answerDate,
-  contents,
-  corpName,
-  cursorId,
-  requestDate,
-  requestName,
-  requestType,
-  sendEmail,
-  seq,
-  statusCode,
-  title
+  qnaItem,
+  setDetailData
 }: QnaItemProps) => {
-  const { navigate } = useNavigate();
   const { t } = useTranslation();
   const onClickToDetail = () => {
-    navigate(PATHS.support.qna.detail, {
-      state: {
-        answer: answer,
-        answerDate: answerDate,
-        contents: contents,
-        corpName: corpName,
-        cursorId: cursorId,
-        requestDate: requestDate,
-        requestName: requestName,
-        requestType: requestType,
-        sendEmail: sendEmail,
-        seq: seq,
-        statusCode: statusCode,
-        title: title
-      }
-    });
+    if(setDetailData){
+      setDetailData({
+        qnaItem: qnaItem,
+        detailOn: true
+      });
+    }
   };
 
   return (
@@ -46,12 +23,12 @@ export const SupportQnaItem = ({
         onClick={ () => onClickToDetail() }
       >
         <div className="inq-line">
-          <div className="inq-title-text">{ title }</div>
+          <div className="inq-title-text">{ qnaItem.title }</div>
           <div className="inq-meta">
-            {t('support.qna.registrationDate')}<span>{ moment(requestDate).format('YYYY.MM.DD') }</span>
-            <span className="sai">ㅣ</span>{t('support.qna.status')} <span>[{t(`support.qna.statusCode.${statusCode}`)}]</span>
+            {t('support.qna.registrationDate')}<span>{ qnaItem.requestDate? moment(qnaItem.requestDate).format('YYYY.MM.DD'): '' }</span>
+            <span className="sai">ㅣ</span>{t('support.qna.status')} <span>[{t(`support.qna.statusCode.${qnaItem.statusCode}`)}]</span>
           </div>
-          <span className={`dot ${(statusCode === '03')? 'blue': 'gray'}`}></span>
+          <span className={`dot ${(qnaItem.statusCode === '03')? 'blue': 'gray'}`}></span>
         </div>
       </div>
     </>
diff --git a/src/entities/transaction/model/types.ts b/src/entities/transaction/model/types.ts
index 1139f06..400d758 100644
--- a/src/entities/transaction/model/types.ts
+++ b/src/entities/transaction/model/types.ts
@@ -136,29 +136,40 @@ export enum BillingPaymentMethod {
   MOBILE_PAYMENT = 'MOBILE_PAYMENT'
 };
 
+export interface DetailData {
+  tid: string;
+  serviceCode?: string;
+  detailOn: boolean;
+}
 export interface ListItemProps extends AllTransactionListItem, CashReceiptListItem, EscrowListItem, BillingListItem {
   transactionCategory?: TransactionCategory;
+  setDetailData?: (detailData: DetailData) => void;
 };
 export interface ListDateGroupProps {
   transactionCategory?: TransactionCategory;
   date?: string;
   items?: Array<ListItemProps>;
+  setDetailData?: (detailData: DetailData) => void;
 };
 export interface AllTransactionListProps {
   transactionCategory: TransactionCategory;
   listItems: Array<ListItemProps>;
+  setDetailData: (detailData: DetailData) => void;
 };
 export interface CashReceiptListProps {
   transactionCategory: TransactionCategory;
   listItems: Array<ListItemProps>;
+  setDetailData: (detailData: DetailData) => void;
 };
 export interface EscrowListProps {
   transactionCategory: TransactionCategory;
   listItems: Array<ListItemProps>;
+  setDetailData: (detailData: DetailData) => void;
 };
 export interface BillingListProps {
   transactionCategory: TransactionCategory;
   listItems: Array<ListItemProps>;
+  setDetailData: (detailData: DetailData) => void;
 };
 export interface AllTransactionListItem {
   tid?: string;
diff --git a/src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx b/src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx
index 602c8eb..ade84b0 100644
--- a/src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx
+++ b/src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx
@@ -28,12 +28,7 @@ export const AllTransactionCancelPreventBond = ({
   const { navigate } = useNavigate();
   const [item, setItem] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(debtPreventionCancelDisplayInfo);
   const onClickToClose = () => {
-    navigate(PATHS.transaction.allTransaction.detail, {
-      state: {
-        serviceCode: serviceCode,
-        tid: tid
-      }
-    });
+    setCancelPreventBondOn(false);
   };
   const callTransactionCancel = () => {
 
diff --git a/src/entities/transaction/ui/all-transaction-list.tsx b/src/entities/transaction/ui/all-transaction-list.tsx
index 8564283..15d0628 100644
--- a/src/entities/transaction/ui/all-transaction-list.tsx
+++ b/src/entities/transaction/ui/all-transaction-list.tsx
@@ -3,7 +3,8 @@ import { ListDateGroup } from './list-date-group';
 
 export const AllTransactionList = ({ 
   transactionCategory,
-  listItems 
+  listItems,
+  setDetailData
 }: AllTransactionListProps) => {
   const getListDateGroup = () => {
     let rs = [];
@@ -26,6 +27,7 @@ export const AllTransactionList = ({
                   key={ date + '-' + i }
                   date={ date }
                   items={ list }
+                  setDetailData={ setDetailData }
                 ></ListDateGroup>
               );
             }
@@ -43,6 +45,7 @@ export const AllTransactionList = ({
           key={ date + '-last' }
           date={ date }
           items={ list }
+          setDetailData={ setDetailData }
         ></ListDateGroup>
       );
     }
diff --git a/src/entities/transaction/ui/billing-list.tsx b/src/entities/transaction/ui/billing-list.tsx
index e50aebd..97e236c 100644
--- a/src/entities/transaction/ui/billing-list.tsx
+++ b/src/entities/transaction/ui/billing-list.tsx
@@ -6,10 +6,9 @@ import { useTranslation } from 'react-i18next';
 
 export const BillingList = ({
   transactionCategory,
-  listItems
+  listItems,
+  setDetailData
 }: BillingListProps) => {
-  const { navigate } = useNavigate();
-  const { t } = useTranslation();
   
   const getListDateGroup = () => {
     let rs = [];
@@ -31,6 +30,7 @@ export const BillingList = ({
                   key={ date + '-' + i }
                   date={ date }
                   items={ list }
+                  setDetailData={ setDetailData }
                 ></ListDateGroup>
               );
             }
@@ -48,27 +48,20 @@ export const BillingList = ({
           key={ date + '-last' }
           date={ date }
           items={ list }
+          setDetailData={ setDetailData }
         ></ListDateGroup>
       );
     }
     return rs;
   };
 
-  const onClickToNavigate = () => {
-    navigate(PATHS.transaction.billing.charge);
-  };
+  
   
   return (
     <>
       <div className="transaction-list">
       { getListDateGroup() }
       </div>  
-      <div className="apply-row">
-        <button
-          className="btn-50 btn-blue flex-1"
-          onClick={ () => onClickToNavigate() }
-        >{ t('transaction.list.paymentRequest') }</button>
-      </div>
     </>
   );
 };
\ No newline at end of file
diff --git a/src/entities/transaction/ui/cash-receipt-list.tsx b/src/entities/transaction/ui/cash-receipt-list.tsx
index 1b5007c..cf7c8b3 100644
--- a/src/entities/transaction/ui/cash-receipt-list.tsx
+++ b/src/entities/transaction/ui/cash-receipt-list.tsx
@@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next';
 
 export const CashReceiptList = ({
   transactionCategory,
-  listItems
+  listItems,
+  setDetailData
 }: CashReceiptListProps) => {
   const { navigate } = useNavigate();
   const { t } = useTranslation();
@@ -31,6 +32,7 @@ export const CashReceiptList = ({
                   key={ date + '-' + i }
                   date={ date }
                   items={ list }
+                  setDetailData={ setDetailData }
                 ></ListDateGroup>
               );
             }
@@ -48,27 +50,19 @@ export const CashReceiptList = ({
           key={ date + '-last' }
           date={ date }
           items={ list }
+          setDetailData={ setDetailData }
         ></ListDateGroup>
       );
     }
     return rs;
   };
 
-  const onClickToNavigate = () => {
-    navigate(PATHS.transaction.cashReceipt.handWrittenIssuance);
-  };
-
   return (
     <>
       <div className="transaction-list">
       { getListDateGroup() }
       </div>
-      <div className="apply-row">
-        <button
-          className="btn-50 btn-blue flex-1"
-          onClick={ () => onClickToNavigate() }
-        >{ t('transaction.list.manualIssuance') }</button>
-      </div>  
+        
     </>
   );
 };
\ No newline at end of file
diff --git a/src/entities/transaction/ui/detail/all-transaction-detail.tsx b/src/entities/transaction/ui/detail/all-transaction-detail.tsx
new file mode 100644
index 0000000..47e732c
--- /dev/null
+++ b/src/entities/transaction/ui/detail/all-transaction-detail.tsx
@@ -0,0 +1,238 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+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 { 
+  TransactionCategory,
+  AllTransactionDetailParams,
+  DetailResponse,
+  AmountInfo,
+  ImportantInfo,
+  PaymentInfo,
+  TransactionInfo,
+  SettlementInfo,
+  PartCancelInfo,
+  InfoSectionKeys
+} from '@/entities/transaction/model/types';
+import { useTranslation } from 'react-i18next';
+import { 
+  DetailMotionDuration, 
+  DetailMotionStyle, 
+  DetailMotionVariants 
+} from '@/entities/common/model/constant';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+
+export interface AllTransactionDetailProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  tid: string;
+  serviceCode: string;
+};
+
+export const AllTransactionDetail = ({
+  detailOn,
+  setDetailOn,
+  tid,
+  serviceCode
+}: AllTransactionDetailProps) => {
+  const { navigate } = useNavigate();
+  const { t } = useTranslation();
+  
+  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);
+
+  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(() => {
+    if(!!detailOn && serviceCode && tid){
+      callDetail();
+    }
+  }, [detailOn]);
+
+  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 onClickToClose = () => {
+    setDetailOn(false);
+  };
+
+  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 (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        <div className="full-menu-container pdw-16">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">{ t('transaction.detailTitle') }</div>
+            <div className="full-menu-actions">
+              <FullMenuClose
+                addClass="full-menu-close"
+                onClickToCallback={ onClickToClose }
+              ></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>
+          </div>
+        </div>
+        <div className="apply-row">
+          <button
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToCancel() }
+          >{t('transaction.cancelTransaction')}</button>
+        </div>
+      </motion.div>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/src/entities/transaction/ui/detail/billing-detail.tsx b/src/entities/transaction/ui/detail/billing-detail.tsx
new file mode 100644
index 0000000..f3c6130
--- /dev/null
+++ b/src/entities/transaction/ui/detail/billing-detail.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
+import { useBillingDetailMutation } from '@/entities/transaction/api/use-billing-detail-mutation';
+import { BillingInfoSection } from '@/entities/transaction/ui/section/billing-info-section';
+import { 
+  TransactionCategory,
+  BillingDetailParams,
+  BillingDetailResponse,
+  BillingInfo,
+  AmountInfo
+} from '@/entities/transaction/model/types';
+import { NumericFormat } from 'react-number-format';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+
+export interface BillingDetailProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  tid: string;
+};
+
+export const BillingDetail = ({
+  detailOn,
+  setDetailOn,
+  tid
+}: BillingDetailProps) => {
+  const { t, i18n } = useTranslation();
+      
+  const [billingInfo, setBillingInfo] = useState<BillingInfo>();
+  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
+  
+  const { mutateAsync: billingDetail } = useBillingDetailMutation();
+    
+  const callDetail = () => {
+    let billingDetailParams: BillingDetailParams = {
+      tid: tid
+    };
+    billingDetail(billingDetailParams).then((rs: BillingDetailResponse) => {
+      setBillingInfo(rs);
+      setAmountInfo({
+        transactionAmount: rs.transactionAmount,
+        buyerName: rs.buyerName
+      })
+    });
+  };
+  const onClickToClose = () => {
+    setDetailOn(false);
+  };
+  useEffect(() => {
+    if(!!detailOn && tid){
+      callDetail();
+    }
+  }, [detailOn]);
+  
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        <div className="full-menu-container pdw-16">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">{ t('billing.detailTitle') }</div>
+            <div className="full-menu-actions">
+              <FullMenuClose
+                addClass="full-menu-close"
+                onClickToCallback={ onClickToClose }
+              ></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>
+                  <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>
+        </div>
+      </motion.div>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/src/entities/transaction/ui/detail/cash-receit-detail.tsx b/src/entities/transaction/ui/detail/cash-receit-detail.tsx
new file mode 100644
index 0000000..296a58e
--- /dev/null
+++ b/src/entities/transaction/ui/detail/cash-receit-detail.tsx
@@ -0,0 +1,178 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { useCashReceiptDetailMutation } from '@/entities/transaction/api/use-cash-receipt-detail-mutation';
+import { IssueInfoSection } from '@/entities/transaction/ui/section/issue-info-section';
+import { DetailInfoSection } from '@/entities/transaction/ui/section/detail-info-section';
+import { 
+  TransactionCategory,
+  CashReceiptDetailParams,
+  DetailResponse,
+  IssueInfo,
+  DetailInfo,
+  InfoSectionKeys,
+  CashReceiptPurposeType,
+  AmountInfo,
+  CashReceiptPurposeUpdateParams,
+  CashReceiptTransactionType
+} from '@/entities/transaction/model/types';
+import { CashReceitPurposeUpdateBottomSheet } from '@/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet';
+import { useCashReceiptPurposeUpdateMutation } from '@/entities/transaction/api/use-cash-receipt-purpose-update-mutation';
+import { AmountInfoSection } from '@/entities/transaction/ui/section/amount-info-section';
+import { snackBar } from '@/shared/lib';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+
+export interface CashReceiptDetailProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  tid: string;
+};
+
+export const CashReceiptDetail = ({
+  detailOn,
+  setDetailOn,
+  tid
+}: CashReceiptDetailProps) => {
+  const { navigate, reload } = useNavigate();
+  const { t } = useTranslation();
+  const location = useLocation();
+  
+  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
+  const [issueInfo, setIssueInfo] = useState<IssueInfo>();
+  const [detailInfo, setDetailInfo] = useState<DetailInfo>();
+  const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
+  const [showDetailInfo, setShowDetailInfo] = useState<boolean>(false);
+  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
+  const [purposeType, setPurposeType] = useState<string>();
+  const [canDownloadReceipt, setCanDownloadReceipt] = useState<boolean>(false);
+
+  const { mutateAsync: cashReceiptDetail } = useCashReceiptDetailMutation();
+  const { mutateAsync: cashReceiptPurposeUpdate } = useCashReceiptPurposeUpdateMutation();
+  
+  const callPurposeUpdate = () => {
+    let newPurpose = (purposeType === CashReceiptPurposeType.EXPENSE_PROOF)
+      ? CashReceiptPurposeType.INCOME_DEDUCTION: CashReceiptPurposeType.EXPENSE_PROOF;
+    let params: CashReceiptPurposeUpdateParams = {
+      tid: tid,
+      newPurpose: newPurpose
+    };
+    cashReceiptPurposeUpdate(params).then((rs) => {
+      setPurposeType(rs.afterPurposeType);
+      setBottomSheetOn(false);
+      snackBar('용도 변경을 성공하였습니다.', function(){
+        reload();
+      }, 2000);
+    });  
+  };
+
+  const callDetail = () => {
+    let cashReceitDetailParams: CashReceiptDetailParams = {
+      tid: tid
+    };
+    cashReceiptDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
+      if(rs.amountDetail){
+        rs.amountDetail.customerName =  rs.customerName;
+      }
+      setAmountInfo(rs.amountDetail || {});
+      setIssueInfo(rs.issueInfo || {});
+      setDetailInfo(rs.detailInfo || {});
+      setCanDownloadReceipt(rs.detailInfo?.canDownloadReceipt || false);
+      if(rs.issueInfo){
+        setPurposeType(rs.issueInfo.purpose);
+      }
+    });
+  };
+  useEffect(() => {
+    if(!!detailOn && tid){
+      callDetail();
+    }
+  }, [tid]);
+
+  const onClickToOpenInfo = (infoSectionKey: InfoSectionKeys) => {
+    if(infoSectionKey === InfoSectionKeys.Amount){
+      setShowAmountInfo(!showAmountInfo);
+    }
+    else if(infoSectionKey === InfoSectionKeys.Detail){
+      setShowDetailInfo(!showDetailInfo);
+    }
+  };
+
+  const onClickToClose = () => {
+    setDetailOn(false);
+  };
+
+  const onClickToPurposeUpdate = () => {
+    setBottomSheetOn(true);
+  };
+
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        <div className="full-menu-container pdw-16">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">{ t('cashReceipt.detailTitle') }</div>
+            <div className="full-menu-actions">
+              <FullMenuClose
+                addClass="full-menu-close"
+                onClickToCallback={ onClickToClose }
+              ></FullMenuClose>
+            </div>
+          </div>
+          <div className="tab-pane sub active">
+            <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 }
+                    detailInfo={ detailInfo }
+                    isOpen={ showDetailInfo }
+                    onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                  ></DetailInfoSection>
+                }
+              </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>
+        </div>
+      </motion.div>
+      <CashReceitPurposeUpdateBottomSheet
+        setBottomSheetOn={ setBottomSheetOn }
+        bottomSheetOn={ bottomSheetOn }
+        callPurposeUpdate={ callPurposeUpdate }
+      ></CashReceitPurposeUpdateBottomSheet>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/src/entities/transaction/ui/detail/escrow-detail.tsx b/src/entities/transaction/ui/detail/escrow-detail.tsx
new file mode 100644
index 0000000..b03e8cf
--- /dev/null
+++ b/src/entities/transaction/ui/detail/escrow-detail.tsx
@@ -0,0 +1,225 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { useEscrowDetailMutation } from '@/entities/transaction/api/use-escrow-detail-mutation';
+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 { 
+  TransactionCategory,
+  EscrowDetailParams,
+  DetailResponse,
+  ImportantInfo,
+  EscrowInfo,
+  PaymentInfo,
+  TransactionInfo,
+  SettlementInfo,
+  InfoSectionKeys,
+  MerchantInfo,
+  AmountInfo
+} from '@/entities/transaction/model/types';
+import { useEscrowMailResendMutation } from '@/entities/transaction/api/use-escrow-mail-resend-mutation';
+import { MerchantInfoSection } from '@/entities/transaction/ui/section/merchant-info-section';
+import { AmountInfoSection } from '@/entities/transaction/ui/section/amount-info-section';
+import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+
+export interface EscrowDetailProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  tid: string;
+  serviceCode: string;
+};
+
+export const EscrowDetail = ({
+  detailOn,
+  setDetailOn,
+  tid,
+  serviceCode
+}: EscrowDetailProps) => {
+  const { navigate } = useNavigate();
+  const { t } = useTranslation();
+  
+  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
+  const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
+  const [escrowInfo, setEscrowInfo] = useState<EscrowInfo>();
+  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
+  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
+  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
+  const [merchantInfo, setMerchantInfo] = useState<MerchantInfo>();
+
+  const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
+  const [showImportantInfo, setShowImportantInfo] = useState<boolean>(false);
+  const [showEscroInfo, setShowEscroInfo] = useState<boolean>(false);
+  const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
+  const [showTransactionInfo, setShowTransactionInfo] = useState<boolean>(false);
+  const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
+  const [showMerchantInfo, setShowMerchantInfo] = useState<boolean>(false);
+
+  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
+
+  const [orderNumber, setOrderNumber] = useState<string>();
+  
+  const { mutateAsync: escrowDetail } = useEscrowDetailMutation();
+  const { mutateAsync: escrowMailResend } = useEscrowMailResendMutation() 
+    
+  const callDetail = () => {
+    let escroDetailParams: EscrowDetailParams = {
+      tid: tid,
+    };
+    escrowDetail(escroDetailParams).then((rs: DetailResponse) => {
+      setAmountInfo(rs.paymentInfo || {});
+      setImportantInfo(rs.importantInfo || {});
+      setEscrowInfo(rs.escrowInfo || {});
+      setPaymentInfo(rs.paymentInfo || {});
+      setTransactionInfo(rs.transactionInfo || {});
+      setSettlementInfo(rs.settlementInfo || {});
+      setMerchantInfo(rs.merchantInfo || {});
+
+      setOrderNumber(rs.importantInfo?.orderNumber);
+    });
+  };
+  useEffect(() => {
+    if(!!detailOn && serviceCode && tid){
+      callDetail();
+    }
+  }, [detailOn]);
+
+
+  const onClickToShowMailResend = () => {
+    setBottomSheetOn(true);
+  };
+
+  const callMailResend = () => {
+    let params = {
+      orderNumber: orderNumber,
+      tid: tid,
+    };
+    escrowMailResend(params).then((rs: any) => {
+      console.log(rs);
+    });
+  };
+
+  const onClickToClose = () => {
+    setDetailOn(false);
+  };
+  
+  const onClickToOpenInfo = (infoSectionKey: InfoSectionKeys) => {
+    if(infoSectionKey === InfoSectionKeys.Amount){
+      setShowAmountInfo(!showAmountInfo);
+    }
+    else if(infoSectionKey === InfoSectionKeys.Important){
+      setShowImportantInfo(!showImportantInfo);
+    }
+    else if(infoSectionKey === InfoSectionKeys.Escrow){
+      setShowEscroInfo(!showEscroInfo);
+    }
+    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.Merchant){
+      setShowMerchantInfo(!showMerchantInfo);
+    }
+  };
+
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        <div className="full-menu-container pdw-16">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">{ t('escrow.detailTitle') }</div>
+            <div className="full-menu-actions">
+              <FullMenuClose
+                addClass="full-menu-close"
+                onClickToCallback={ onClickToClose }
+              ></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>
+          </div>
+        </div>
+        <div className="apply-row">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToShowMailResend() }
+          >메일 재발송</button>
+        </div>
+      </motion.div>
+      <EmailBottomSheet
+        setBottomSheetOn={ setBottomSheetOn }
+        bottomSheetOn={ bottomSheetOn }
+        imageSave={ false }
+				sendEmail={ true }
+				sendRequest={ callMailResend }
+      ></EmailBottomSheet>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/src/entities/transaction/ui/escrow-list.tsx b/src/entities/transaction/ui/escrow-list.tsx
index 84272c8..1993970 100644
--- a/src/entities/transaction/ui/escrow-list.tsx
+++ b/src/entities/transaction/ui/escrow-list.tsx
@@ -3,7 +3,8 @@ import { ListDateGroup } from './list-date-group';
 
 export const EscrowList = ({ 
   transactionCategory,
-  listItems 
+  listItems,
+  setDetailData
 }: EscrowListProps) => {
   
   const getListDateGroup = () => {
@@ -26,6 +27,7 @@ export const EscrowList = ({
                   key={ date + '-' + i }
                   date={ date }
                   items={ list }
+                  setDetailData={ setDetailData }
                 ></ListDateGroup>
               );
             }
@@ -43,6 +45,7 @@ export const EscrowList = ({
           key={ date + '-last' }
           date={ date }
           items={ list }
+          setDetailData={ setDetailData }
         ></ListDateGroup>
       );
     }
diff --git a/src/entities/transaction/ui/list-date-group.tsx b/src/entities/transaction/ui/list-date-group.tsx
index 40f912b..879bff1 100644
--- a/src/entities/transaction/ui/list-date-group.tsx
+++ b/src/entities/transaction/ui/list-date-group.tsx
@@ -9,7 +9,8 @@ import { useTranslation } from 'react-i18next';
 export const ListDateGroup = ({
   transactionCategory,
   date,
-  items
+  items,
+  setDetailData
 }: ListDateGroupProps) => {
   const { t, i18n } = useTranslation();
 
@@ -93,6 +94,8 @@ export const ListDateGroup = ({
 
             billKey={ items[i]?.billKey }
             orderNumber={ items[i]?.orderNumber }
+
+            setDetailData={ setDetailData }
           ></ListItem>
         )
       }  
diff --git a/src/entities/transaction/ui/list-item.tsx b/src/entities/transaction/ui/list-item.tsx
index d0420b2..3799cdb 100644
--- a/src/entities/transaction/ui/list-item.tsx
+++ b/src/entities/transaction/ui/list-item.tsx
@@ -1,9 +1,6 @@
-import { NumericFormat } from 'react-number-format';
-import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { BillingRequestStatus, CashReceiptTransactionType, EscrowDeliveryStatus, ListItemProps, TransactionCategory } from '../model/types';
 import moment from 'moment';
-import { useStore } from '@/shared/model/store';
 import { getAllTransactionStatusCode, getPaymentMethodName } from '../model/contant';
 import { useTranslation } from 'react-i18next';
 
@@ -16,9 +13,9 @@ export const ListItem = ({
   paymentMethod, processResult, transactionType,
   transactionDateTime, transactionAmount,
   deliveryStatus, settlementStatus,
-  cancelStatus, billKey, orderNumber, requestStatus
+  cancelStatus, billKey, orderNumber, requestStatus,
+  setDetailData
 }: ListItemProps) => {
-  const { navigate } = useNavigate();
   const { t } = useTranslation();
   const getItemClass = () => {
     let rs = '';
@@ -88,34 +85,38 @@ export const ListItem = ({
 
   const onClickToNavigate = () => {
     if(transactionCategory === TransactionCategory.AllTransaction){
-      navigate(PATHS.transaction.allTransaction.detail, {
-        state: {
+      if(setDetailData && tid){
+        setDetailData({
           tid: tid,
-          serviceCode: serviceCode
-        }
-      });
+          serviceCode: serviceCode,
+          detailOn: true
+        });
+      }
     }
     else if(transactionCategory === TransactionCategory.CashReceipt){
-      navigate(PATHS.transaction.cashReceipt.detail, {
-        state: {
-          tid: tid
-        }
-      });
+      if(setDetailData && tid){
+        setDetailData({
+          tid: tid,
+          detailOn: true
+        });
+      }
     }
     else if(transactionCategory === TransactionCategory.Escrow){
-      navigate(PATHS.transaction.escrow.detail, {
-        state: {
-         tid: tid,
-         serviceCode: serviceCode
-        }
-      });
+      if(setDetailData && tid){
+        setDetailData({
+          tid: tid,
+          serviceCode: serviceCode,
+          detailOn: true
+        });
+      }
     }
     else if(transactionCategory === TransactionCategory.Billing){
-      navigate(PATHS.transaction.billing.detail, {
-        state: {
+      if(setDetailData && tid){
+        setDetailData({
           tid: tid,
-        }
-      });
+          detailOn: true
+        });
+      }
     }
     else{
       alert(t('common.error'));
diff --git a/src/entities/vat-return/model/types.ts b/src/entities/vat-return/model/types.ts
index dfe24b6..91ca674 100644
--- a/src/entities/vat-return/model/types.ts
+++ b/src/entities/vat-return/model/types.ts
@@ -51,7 +51,8 @@ export interface VatReturnListResponse extends DefaulResponsePagination {
 };
 
 export interface VatReturnListContent {
-  id?: number
+  id?: number;
+  taxInvoiceNumber?: string;
   companyName?: string;
   mid?: string;
   issueDate?: string;
@@ -61,15 +62,22 @@ export interface VatReturnListContent {
 
 export interface ListDateGroupProps {
   date?: string;
-  items?: Array<VatReturnListContent>
-}
+  items?: Array<VatReturnListContent>;
+  setDetailData?: (detailData: DetailData) => void;
+};
+
+export interface DetailData {
+  taxInvoiceNumber: string;
+  detailOn: boolean;
+};
 export interface ListItemProps {
-  id?: number;
+  taxInvoiceNumber?: string;
   companyName?: string;
   mid?: string;
   issueDate?: string;
   paymentMethod?: string;
   amount?: number;
+  setDetailData?: (detailData: DetailData) => void;
 }
 export interface VatReturnDetailParams {
   taxInvoiceNumber?: string;
diff --git a/src/entities/vat-return/ui/detail/tax-invoice-detail.tsx b/src/entities/vat-return/ui/detail/tax-invoice-detail.tsx
new file mode 100644
index 0000000..ef76c96
--- /dev/null
+++ b/src/entities/vat-return/ui/detail/tax-invoice-detail.tsx
@@ -0,0 +1,162 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
+import { PATHS } from '@/shared/constants/paths';
+import { useLocation } from 'react-router';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { useVatReturnDetailMutation } from '@/entities/vat-return/api/use-vat-return-detail-mutation';
+import { HeaderType } from '@/entities/common/model/types';
+import {
+  Breakdown,
+  VatReturnBreakdownParams,
+  VatReturnBreakdownResponse,
+  VatReturnDetailParams,
+  VatReturnDetailResponse
+} from '@/entities/vat-return/model/types';
+import {
+  useSetOnBack,
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+import { SupplierSection } from '@/entities/vat-return/ui/section/supplier-section';
+import { ReceiverSection } from '@/entities/vat-return/ui/section/receiver-section';
+import { IssueSection } from '@/entities/vat-return/ui/section/issue-section';
+import { AmountSection } from '@/entities/vat-return/ui/section/amount-section';
+import { useVatReturnTaxInvoiceMutation } from '@/entities/vat-return/api/use-vat-return-tax-invoice-mutation';
+import { VatReturnListDetailBottomSheet } from '@/entities/vat-return/ui/list-detail-bottom-sheet';
+import { useVatReturnBreakdownMutation } from '@/entities/vat-return/api/use-vat-return-breakdown-mutation';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+
+export interface TaxInvoiceDetailProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  taxInvoiceNumber: string;
+};
+
+export const TaxInvoiceDetail = ({
+  detailOn,
+  setDetailOn,
+  taxInvoiceNumber
+}: TaxInvoiceDetailProps) => {
+  const { t } = useTranslation();
+  const { navigate } = useNavigate();
+  const location = useLocation();
+  
+  // taxInvoiceNumber = 'TAX202506300001';
+  
+  const [openAmount, setOpenAmount] = useState<boolean>(false);
+  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
+  const [detail, setDetail] = useState<VatReturnDetailResponse>({});
+  const [breakdown, setBreakdown] = useState<Array<Breakdown>>([]);
+   
+  useSetHeaderTitle(t('vatReturn.taxInvoiceDetail'));
+  useSetHeaderType(HeaderType.RightClose);
+  useSetOnBack(() => {
+    navigate(PATHS.vatReturn.list);
+  });
+  useSetFooterMode(false);
+  
+  const { mutateAsync: vatReturnTaxInvoice } = useVatReturnTaxInvoiceMutation();
+  const { mutateAsync: vatReturnDetail } = useVatReturnDetailMutation();
+  const { mutateAsync: vatReturnBreakdown } = useVatReturnBreakdownMutation(); 
+
+  const callTaxInvoice = () => {
+    if(taxInvoiceNumber){
+      let params: VatReturnDetailParams = {
+        taxInvoiceNumber: taxInvoiceNumber,
+      };
+      vatReturnDetail(params).then((rs: VatReturnDetailResponse) => {
+        setDetail(rs);
+      });
+    }
+    
+  };
+  const callVatReturnBreakdown = async() => {
+    let params: VatReturnBreakdownParams = {
+      taxInvoiceNumber: taxInvoiceNumber,
+    };
+    vatReturnBreakdown(params).then((rs: VatReturnBreakdownResponse) => {
+      setBreakdown(rs.breakdown);
+    });
+  };
+
+  const onClickToOpenBottomSheet = () => {
+    setBottomSheetOn(true);
+  };
+
+  const onClickToClose = () => {
+    setDetailOn(false);
+  };
+
+  useEffect(() => {
+    if(!!detailOn && taxInvoiceNumber){
+      callTaxInvoice();
+      callVatReturnBreakdown();  
+    }
+  }, [detailOn]);
+  
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        <div className="full-menu-container pdw-16">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">{ t('transaction.detailTitle') }</div>
+            <div className="full-menu-actions">
+              <FullMenuClose
+                addClass="full-menu-close"
+                onClickToCallback={ onClickToClose }
+              ></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>
+          </div>
+        </div>
+        <div className="apply-row">
+          <button
+            className="btn-50 btn-blue flex-1"
+            onClick={ onClickToOpenBottomSheet }
+          >{t('vatReturn.viewDetails')}</button>
+        </div>
+      </motion.div>
+      { !!bottomSheetOn &&
+        <VatReturnListDetailBottomSheet
+          bottomSheetOn={ bottomSheetOn }
+          setBottomSheetOn={ setBottomSheetOn }
+          breakdown={ breakdown }
+          transactionAmount={ detail?.transactionAmount }
+          supplyAmount={ detail?.supplyAmount }
+          vatAmount={ detail?.vatAmount }
+          totalAmount={ detail?.totalAmount }
+        ></VatReturnListDetailBottomSheet>
+      }
+    </>
+  )
+};
\ No newline at end of file
diff --git a/src/entities/vat-return/ui/list-date-group.tsx b/src/entities/vat-return/ui/list-date-group.tsx
index 4a83ca4..20522e0 100644
--- a/src/entities/vat-return/ui/list-date-group.tsx
+++ b/src/entities/vat-return/ui/list-date-group.tsx
@@ -5,7 +5,8 @@ import { ListItem } from './list-item';
 
 export const ListDateGroup = ({
   date,
-  items
+  items,
+  setDetailData
 }: ListDateGroupProps) => {
   moment.locale('ko');
   const getStateDate = () => {
@@ -21,12 +22,13 @@ export const ListDateGroup = ({
         rs.push(
           <ListItem
             key={ key }
-            id={ items[i]?.id || 0 }
+            taxInvoiceNumber={ items[i]?.taxInvoiceNumber || '' }
             companyName={ items[i]?.companyName || '' }
             mid={ items[i]?.mid || '' }
             issueDate={ items[i]?.issueDate || '' }
             paymentMethod={ items[i]?.paymentMethod || '' }
             amount={ items[i]?.amount || 0 }
+            setDetailData={ setDetailData }
           ></ListItem>
         )
       }  
diff --git a/src/entities/vat-return/ui/list-item.tsx b/src/entities/vat-return/ui/list-item.tsx
index 955f429..42d1e51 100644
--- a/src/entities/vat-return/ui/list-item.tsx
+++ b/src/entities/vat-return/ui/list-item.tsx
@@ -1,27 +1,25 @@
-import { NumericFormat } from 'react-number-format';
 import { useTranslation } from 'react-i18next';
-import { PATHS } from '@/shared/constants/paths';
-import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListItemProps } from '../model/types';
 import moment from 'moment';
 
 export const ListItem = ({
-  id,
+  taxInvoiceNumber,
   companyName,
   mid,
   issueDate,
   paymentMethod,
-  amount
+  amount,
+  setDetailData
 }: ListItemProps) => {
   const { t, i18n } = useTranslation();
-  const { navigate } = useNavigate();
   
   const onClickToNavigate = () => {
-    navigate(PATHS.vatReturn.detail, {
-      state: {
-        taxInvoiceNumber: id
-      }
-    });
+    if(setDetailData && taxInvoiceNumber){
+      setDetailData({
+        taxInvoiceNumber: taxInvoiceNumber,
+        detailOn: true
+      });
+    }
   };
 
   return (
diff --git a/src/entities/vat-return/ui/list-wrap.tsx b/src/entities/vat-return/ui/list-wrap.tsx
index 0cab181..a677358 100644
--- a/src/entities/vat-return/ui/list-wrap.tsx
+++ b/src/entities/vat-return/ui/list-wrap.tsx
@@ -7,6 +7,7 @@ import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import {
+  DetailData,
   VatReturnListContent,
   VatReturnListParams,
   VatReturnListResponse,
@@ -18,6 +19,7 @@ import { ListDateGroup } from './list-date-group';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { TaxInvoiceDetail } from './detail/tax-invoice-detail';
 
 export const ListWrap = () => {
   const { t } = useTranslation();
@@ -36,7 +38,10 @@ export const ListWrap = () => {
 
   const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
 
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailTaxInvoiceNumber, setDetailTaxInvoiceNumber] = useState<string>('');
   const { mutateAsync: vatReturnList } = useVatReturnListMutation();
+  
   const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
     entries.forEach((entry: IntersectionObserverEntry) => {
       if(entry.isIntersecting){
@@ -122,6 +127,11 @@ export const ListWrap = () => {
     mid, startMonth, endMonth, 
     receiptType, targetType, sortType
   ]);
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    setDetailTaxInvoiceNumber(detailData.taxInvoiceNumber);
+  };
+  
 
   const getListDateGroup = () => {
     let rs = [];
@@ -144,6 +154,7 @@ export const ListWrap = () => {
                   key={ date + '-' + i }
                   date={ date }
                   items={ list }
+                  setDetailData={ setDetailData }
                 ></ListDateGroup>
               );
             }
@@ -160,6 +171,7 @@ export const ListWrap = () => {
           key={ date + '-last' }
           date={ date }
           items={ list }
+          setDetailData={ setDetailData }
         ></ListDateGroup>
       );
     }
@@ -220,6 +232,12 @@ export const ListWrap = () => {
         setReceiptType={ setReceiptType }
         setTargetType={ setTargetType }
       ></ListFilter>
+      <TaxInvoiceDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        taxInvoiceNumber={ detailTaxInvoiceNumber }
+      >
+      </TaxInvoiceDetail>
       { !!emailBottomSheetOn &&
         <EmailBottomSheet
           bottomSheetOn={ emailBottomSheetOn }
diff --git a/src/pages/support/faq/list-page.tsx b/src/pages/support/faq/list-page.tsx
index 5584ecb..94faee0 100644
--- a/src/pages/support/faq/list-page.tsx
+++ b/src/pages/support/faq/list-page.tsx
@@ -5,7 +5,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
 import { useFaqListMutation } from '@/entities/support/api/use-faq-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { FaqItem, FaqListParams, FaqListResponse, SearchCl } from '@/entities/support/model/types';
+import { DetailData, FaqItem, FaqListParams, FaqListResponse, SearchCl } from '@/entities/support/model/types';
 import { SupportFaqItem } from '@/entities/support/ui/faq-item';
 import { 
 	useSetHeaderTitle,
@@ -14,6 +14,7 @@ import {
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { FaqDetail } from '@/entities/support/ui/detail/faq-detail';
 
 export const FaqListPage = () => {
   const { navigate } = useNavigate();
@@ -24,6 +25,8 @@ export const FaqListPage = () => {
   const [searchValue, setSearchValue] = useState<string>('');
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [resultList, setResultList] = useState<Array<FaqItem>>([]);
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailFaqItem, setDetailFaqItem] = useState<FaqItem>({});
 
   useSetHeaderTitle(t('support.faq.title'));
   useSetHeaderType(HeaderType.LeftArrow);
@@ -103,19 +106,26 @@ export const FaqListPage = () => {
     callList();
   };
 
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    if(detailData?.faqItem){
+      setDetailFaqItem(detailData?.faqItem);
+    }
+  };
+
   const getFaqList = () => {
     let rs = [];
     for(let i=0;i<resultList.length;i++){
-      rs.push(
-        <SupportFaqItem
-          key={ `key-support-faq-item-${i}` }
-          cursorId={ resultList[i]?.cursorId }
-          seq={ resultList[i]?.seq }
-          category={ resultList[i]?.category }
-          title={ resultList[i]?.title }
-          contents={ resultList[i]?.contents }
-        ></SupportFaqItem>
-      )
+      let faqItem = resultList[i];
+      if(faqItem){
+        rs.push(
+          <SupportFaqItem
+            key={ `key-support-faq-item-${i}` }
+            faqItem={ faqItem }
+            setDetailData={ setDetailData }
+          ></SupportFaqItem>
+        );
+      }
     }
     return rs;
   };
@@ -175,15 +185,20 @@ export const FaqListPage = () => {
               </div>
               <div ref={ setTarget }></div>
             </div>
-            <div className="apply-row">
-              <button 
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToNavigation() }
-              >{t('support.faq.inquiryButton')}</button>
-            </div>
           </div>
         </div>
+        <div className="apply-row">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToNavigation() }
+          >{t('support.faq.inquiryButton')}</button>
+        </div>
       </main>
+      <FaqDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        faqItem={ detailFaqItem }
+      ></FaqDetail>
     </>
   );
 };
\ No newline at end of file
diff --git a/src/pages/support/notice/list-page.tsx b/src/pages/support/notice/list-page.tsx
index 36f4e8a..8448aba 100644
--- a/src/pages/support/notice/list-page.tsx
+++ b/src/pages/support/notice/list-page.tsx
@@ -4,7 +4,7 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { InformCl, NoticeItem, NoticeListParams, NoticeListResponse, SearchCl } from '@/entities/support/model/types';
+import { DetailData, InformCl, NoticeItem, NoticeListParams, NoticeListResponse, SearchCl } from '@/entities/support/model/types';
 import { SupportNoticeItem } from '@/entities/support/ui/notice-item';
 import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
 import {
@@ -14,6 +14,7 @@ import {
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { NoticeDetail } from '@/entities/support/ui/detail/notice-detail';
 
 export const NoticeListPage = () => {
   const { navigate } = useNavigate();
@@ -24,6 +25,8 @@ export const NoticeListPage = () => {
   const [informCl, setInformCl] = useState<InformCl | string>('');
   const [searchKeyword, setSearchKeyword] = useState<string>('');
   const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailSeq, setDetailSeq] = useState<number>(0);
 
   useSetHeaderTitle(t('support.notice.title'));
   useSetHeaderType(HeaderType.LeftArrow);
@@ -102,19 +105,27 @@ export const NoticeListPage = () => {
     }
     callList();
   };
+  
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    if(detailData?.seq){
+      setDetailSeq(detailData?.seq);
+    }
+  };
 
   const getNoticeList = () => {
     let rs = [];
     for(let i=0;i<resultList.length;i++){
-      rs.push(
-        <SupportNoticeItem
-          key={ `key-support-notice-item-${i}` }
-          seq={ resultList[i]?.seq }
-          title={ resultList[i]?.title }
-          informCl={ resultList[i]?.informCl }
-          regDt={ resultList[i]?.regDt }
-        ></SupportNoticeItem>
-      )
+      let noticeItem = resultList[i];
+      if(noticeItem){
+        rs.push(
+          <SupportNoticeItem
+            key={ `key-support-notice-item-${i}` }
+            noticeItem={ noticeItem }
+            setDetailData={ setDetailData }
+          ></SupportNoticeItem>
+        );
+      }
     }
     return rs;
   };
@@ -173,6 +184,11 @@ export const NoticeListPage = () => {
             </div>
           </div>
         </div>
+        <NoticeDetail
+          detailOn={ detailOn }
+          setDetailOn={ setDetailOn }
+          seq={ detailSeq }
+        ></NoticeDetail>
       </main>
     </>
   );
diff --git a/src/pages/support/qna/list-page.tsx b/src/pages/support/qna/list-page.tsx
index 0c10b2e..77ac667 100644
--- a/src/pages/support/qna/list-page.tsx
+++ b/src/pages/support/qna/list-page.tsx
@@ -6,7 +6,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
 import { useQnaListMutation } from '@/entities/support/api/use-qna-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { QnaItem, QnaListParams, QnaListResponse } from '@/entities/support/model/types';
+import { DetailData, QnaItem, QnaListParams, QnaListResponse } from '@/entities/support/model/types';
 import { SupportQnaItem } from '@/entities/support/ui/qna-item';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { 
@@ -15,6 +15,7 @@ import {
 	useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { QnaDetail } from '@/entities/support/ui/detail/qna-detail';
 
 export const QnaListPage = () => {
   const { navigate } = useNavigate();
@@ -31,6 +32,8 @@ export const QnaListPage = () => {
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [statusCode, setStatusCode] = useState<string>(''); // 02, 03
   const [resultList, setResultList] = useState<Array<QnaItem>>([]);
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailQnaItem, setDetailQnaItem] = useState<QnaItem>({});
  
   useSetHeaderTitle(t('support.qna.title'));
   useSetHeaderType(HeaderType.LeftArrow);
@@ -102,27 +105,27 @@ export const QnaListPage = () => {
       );
     });
   };
+
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+		if(detailData?.qnaItem){
+			setDetailQnaItem(detailData?.qnaItem);
+		}
+  };
   
   const getQnaList = () => {
     let rs = [];
     for(let i=0;i<resultList.length;i++){
-      rs.push(
-        <SupportQnaItem
-          key={ `key-support-faq-item-${i}` }
-          answer={ resultList[i]?.answer }
-          answerDate={ resultList[i]?.answerDate }
-          contents={ resultList[i]?.contents }
-          corpName={ resultList[i]?.corpName }
-          cursorId={ resultList[i]?.cursorId }
-          requestDate={ resultList[i]?.requestDate }
-          requestName={ resultList[i]?.requestName } 
-          requestType={ resultList[i]?.requestType }
-          sendEmail={ resultList[i]?.sendEmail }
-          seq={ resultList[i]?.seq }
-          statusCode={ resultList[i]?.statusCode }
-          title={ resultList[i]?.title }
-        ></SupportQnaItem>
-      );
+      let qnaItem = resultList[i];
+      if(qnaItem){
+        rs.push(
+          <SupportQnaItem
+            key={ `key-support-faq-item-${i}` }
+            qnaItem={ qnaItem }
+            setDetailData={ setDetailData }
+          ></SupportQnaItem>
+        );  
+      }
     }
     return rs;
   };
@@ -176,16 +179,20 @@ export const QnaListPage = () => {
               </div>
               <div ref={ setTarget }></div>
             </div>
-            <div className="apply-row">
-              <button 
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToNavigation() }
-              >{t('support.qna.inquiryButton')}</button>
-            </div>
           </div>
         </div>
+        <div className="apply-row">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToNavigation() }
+          >{t('support.qna.inquiryButton')}</button>
+        </div>
       </main>
-      
+      <QnaDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        qnaItem={ detailQnaItem }
+      ></QnaDetail>
     </>
   );
 };
\ No newline at end of file
diff --git a/src/pages/transaction/all-transaction/list-page.tsx b/src/pages/transaction/all-transaction/list-page.tsx
index c9892a1..6680d2c 100644
--- a/src/pages/transaction/all-transaction/list-page.tsx
+++ b/src/pages/transaction/all-transaction/list-page.tsx
@@ -13,7 +13,8 @@ import {
   ListItemProps, 
   AllTransactionListSummaryParams, 
   AllTransactionListResponse, 
-  AllTransactionListSummaryResponse 
+  AllTransactionListSummaryResponse, 
+  DetailData
 } from '@/entities/transaction/model/types';
 import { useAllTransactionListMutation } from '@/entities/transaction/api/use-all-transaction-list-mutation';
 import { useAllTransactionListSummaryMutation } from '@/entities/transaction/api/use-all-transaction-list-summary-mutation';
@@ -31,6 +32,7 @@ import {
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
+import { AllTransactionDetail } from '@/entities/transaction/ui/detail/all-transaction-detail';
 
 export const AllTransactionListPage = () => {
   const { navigate } = useNavigate();
@@ -65,6 +67,10 @@ export const AllTransactionListPage = () => {
   const [totalAmount, setTotalAmount] = useState<number>(0);
 
   const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailTid, setDetailTid] = useState<string>('');
+  const [detailServiceCode, setDetailServiceCode] = useState<string>('');
       
 	useSetHeaderTitle(t('transaction.listTitle'));
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -209,6 +215,14 @@ export const AllTransactionListPage = () => {
     return rs;
   };
 
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    setDetailTid(detailData.tid);
+    if(detailData?.serviceCode){
+      setDetailServiceCode(detailData?.serviceCode);
+    }
+  };
+
   const getLocalizedServiceCodeName = (name?: string): string => {
     if (!name) return '';
 
@@ -307,6 +321,7 @@ export const AllTransactionListPage = () => {
             <AllTransactionList 
               listItems={ listItems }
               transactionCategory={ TransactionCategory.AllTransaction }
+              setDetailData={ setDetailData }
             ></AllTransactionList>
             <div ref={ setTarget }></div>
 					</div>
@@ -341,7 +356,12 @@ export const AllTransactionListPage = () => {
         setSearchValue={ setSearchValue }
         serviceCodeOptions={ serviceCodeOptions }
       ></AllTransactionFilter>
-
+      <AllTransactionDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        tid={ detailTid }
+        serviceCode={ detailServiceCode }
+      ></AllTransactionDetail>
       { !!emailBottomSheetOn &&
         <EmailBottomSheet
           bottomSheetOn={ emailBottomSheetOn }
diff --git a/src/pages/transaction/billing/list-page.tsx b/src/pages/transaction/billing/list-page.tsx
index 514ac0b..8b4f445 100644
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/src/pages/transaction/billing/list-page.tsx
@@ -14,7 +14,8 @@ import {
 	BillingSearchType, 
 	ListItemProps, 
 	BillingListParams, 
-	BillingListResponse 
+	BillingListResponse, 
+	DetailData
 } from '@/entities/transaction/model/types';
 import { useBillingListMutation } from '@/entities/transaction/api/use-billing-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
@@ -31,6 +32,7 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { BillingDetail } from '@/entities/transaction/ui/detail/billing-detail';
 
 export const BillingListPage = () => {
 	const { navigate } = useNavigate();
@@ -55,6 +57,8 @@ export const BillingListPage = () => {
 	const [maxAmount, setMaxAmount] = useState<number>();
 
 	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
+	const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailTid, setDetailTid] = useState<string>('');
 
 	useSetHeaderTitle(t('billing.title'));
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -149,10 +153,17 @@ export const BillingListPage = () => {
 	const onClickToRequestStatus = (val: BillingRequestStatus) => {
     setRequestStatus(val);
   };
+	const onClickToNavigate = () => {
+    navigate(PATHS.transaction.billing.charge);
+  };
 
 	const onRequestDownload = (userEmail?: string) => {
 
 	};
+	const setDetailData = (detailData: DetailData) => {
+		setDetailOn(detailData.detailOn);
+		setDetailTid(detailData.tid);
+	};
 
   useEffect(() => {
 		callList();
@@ -217,11 +228,18 @@ export const BillingListPage = () => {
 						<BillingList 
 							listItems={ listItems }
 							transactionCategory={ TransactionCategory.Billing }
+							setDetailData={ setDetailData }
 						></BillingList>
 						<div ref={ setTarget }></div>
 					</div>
 				</div>
 			</main>
+			<div className="apply-row">
+        <button
+          className="btn-50 btn-blue flex-1"
+          onClick={ () => onClickToNavigate() }
+        >{ t('transaction.list.paymentRequest') }</button>
+      </div>
 			<BillingFilter
         filterOn={ filterOn }
         setFilterOn={ setFilterOn }
@@ -246,6 +264,11 @@ export const BillingListPage = () => {
 				setMinAmount={ setMinAmount }
 				setMaxAmount={ setMaxAmount }
       ></BillingFilter>
+			<BillingDetail
+				detailOn={ detailOn }
+				setDetailOn={ setDetailOn }
+				tid={ detailTid }
+			></BillingDetail>
 			{ !!downloadBottomSheetOn &&
 				<EmailBottomSheet
 					bottomSheetOn={ downloadBottomSheetOn }
diff --git a/src/pages/transaction/cash-receipt/list-page.tsx b/src/pages/transaction/cash-receipt/list-page.tsx
index a336261..2a990ba 100644
--- a/src/pages/transaction/cash-receipt/list-page.tsx
+++ b/src/pages/transaction/cash-receipt/list-page.tsx
@@ -16,7 +16,8 @@ import {
 	CashReceiptSearchNumberType, 
 	CashReceiptSummaryParams, 
 	CashReceiptListResponse, 
-	CashReceiptSummaryResponse 
+	CashReceiptSummaryResponse, 
+	DetailData
 } from '@/entities/transaction/model/types';
 import { useCashReceiptListMutation } from '@/entities/transaction/api/use-cash-receipt-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
@@ -35,6 +36,7 @@ import { useStore } from '@/shared/model/store';
 import { useCashReceiptSummaryMutation } from '@/entities/transaction/api/use-cash-receipt-summary-mutation';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { CashReceiptDetail } from '@/entities/transaction/ui/detail/cash-receit-detail';
 
 export const CashReceiptListPage = () => {
 	const { navigate } = useNavigate();
@@ -62,12 +64,16 @@ export const CashReceiptListPage = () => {
 
 	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
 
+	const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailTid, setDetailTid] = useState<string>('');
+  const [detailServiceCode, setDetailServiceCode] = useState<string>('');
+	
 	useSetHeaderTitle(t('cashReceipt.title'));
 	useSetHeaderType(HeaderType.LeftArrow);
 	useSetOnBack(() => {
 		navigate(PATHS.home);
 	});
-	useSetFooterMode(false);
+  useSetFooterMode(false);
 
 	const { mutateAsync: cashReceiptList } = useCashReceiptListMutation();
 	const { mutateAsync: cashReceiptSummary } = useCashReceiptSummaryMutation();
@@ -157,6 +163,14 @@ export const CashReceiptListPage = () => {
     setEmailBottomSheetOn(true);
   };
 
+	const setDetailData = (detailData: DetailData) => {
+		setDetailOn(detailData.detailOn);
+		setDetailTid(detailData.tid);
+		if(detailData?.serviceCode){
+			setDetailServiceCode(detailData?.serviceCode);
+		}
+	};	
+
 	const onClickToOpenFilter = () => {
 		setFilterOn(!filterOn);
 	};
@@ -175,6 +189,9 @@ export const CashReceiptListPage = () => {
 	const onClickToTransactionType = (val: CashReceiptTransactionType) => {
 		setTransactionType(val);
 	};
+	const onClickToNavigate = () => {
+    navigate(PATHS.transaction.cashReceipt.handWrittenIssuance);
+  };
 
 	useEffect(() => {
     callList();
@@ -271,11 +288,18 @@ export const CashReceiptListPage = () => {
 						<CashReceiptList
 							listItems={ listItems }
 							transactionCategory={ TransactionCategory.CashReceipt }
+							setDetailData={ setDetailData }
 						></CashReceiptList>
 						<div ref={ setTarget }></div>
 					</div>
 				</div>
 			</main>
+			<div className="apply-row">
+				<button
+					className="btn-50 btn-blue flex-1"
+					onClick={ () => onClickToNavigate() }
+				>{ t('transaction.list.manualIssuance') }</button>
+			</div>
 			<CashReceiptFilter
 				filterOn={ filterOn }
 				setFilterOn={ setFilterOn }
@@ -296,6 +320,11 @@ export const CashReceiptListPage = () => {
 				setSearchNumberType={ setSearchNumberType }
 				setSearchNumber={ setSearchNumber }
 			></CashReceiptFilter>
+			<CashReceiptDetail
+				detailOn={ detailOn }
+				setDetailOn={ setDetailOn }
+				tid={ detailTid }
+			></CashReceiptDetail>
 			{ !!emailBottomSheetOn &&
 				<EmailBottomSheet
 					bottomSheetOn={ emailBottomSheetOn }
diff --git a/src/pages/transaction/escrow/list-page.tsx b/src/pages/transaction/escrow/list-page.tsx
index a6ec3c2..4d23f3e 100644
--- a/src/pages/transaction/escrow/list-page.tsx
+++ b/src/pages/transaction/escrow/list-page.tsx
@@ -13,7 +13,8 @@ import {
 	EscrowSettlementStatus, 
 	ListItemProps, 
 	EscrowListParams,
-	EscrowListResponse
+	EscrowListResponse,
+	DetailData
 } from '@/entities/transaction/model/types';
 import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
@@ -30,6 +31,7 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { EscrowDetail } from '@/entities/transaction/ui/detail/escrow-detail';
 
 export const EscrowListPage = () => {
 	const { navigate } = useNavigate();
@@ -54,6 +56,10 @@ export const EscrowListPage = () => {
 	const [maxAmount, setMaxAmount] = useState<number>();
 
 	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+
+	const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailTid, setDetailTid] = useState<string>('');
+  const [detailServiceCode, setDetailServiceCode] = useState<string>('');
 		
 	useSetHeaderTitle(t('escrow.title'));
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -150,6 +156,15 @@ export const EscrowListPage = () => {
     });
     */
   };
+
+	const setDetailData = (detailData: DetailData) => {
+		setDetailOn(detailData.detailOn);
+		setDetailTid(detailData.tid);
+		if(detailData?.serviceCode){
+			setDetailServiceCode(detailData?.serviceCode);
+		}
+	};
+
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
   };
@@ -221,6 +236,7 @@ export const EscrowListPage = () => {
 						<EscrowList 
 							listItems={ listItems }
 							transactionCategory={ TransactionCategory.Escrow }
+							setDetailData={ setDetailData }
 						></EscrowList>
 						<div ref={ setTarget }></div>
 					</div>
@@ -248,6 +264,12 @@ export const EscrowListPage = () => {
 				setMinAmount={ setMinAmount }
 				setMaxAmount={ setMaxAmount }
       ></EscrowFilter>
+			<EscrowDetail
+				detailOn={ detailOn }
+				setDetailOn={ setDetailOn }
+				tid={ detailTid }
+				serviceCode={ detailServiceCode }
+			></EscrowDetail>
 			{ !!emailBottomSheetOn &&
 				<EmailBottomSheet
 					bottomSheetOn={ emailBottomSheetOn }
diff --git a/src/pages/transaction/transaction-pages.tsx b/src/pages/transaction/transaction-pages.tsx
index cafc6b1..fca6018 100644
--- a/src/pages/transaction/transaction-pages.tsx
+++ b/src/pages/transaction/transaction-pages.tsx
@@ -2,39 +2,30 @@ import { Route } from 'react-router-dom';
 import { SentryRoutes } from '@/shared/configs/sentry';
 import { ROUTE_NAMES } from '@/shared/constants/route-names';
 import { AllTransactionListPage } from './all-transaction/list-page';
-import { AllTransactionDetailPage } from './all-transaction/detail-page';
 import { AllTransactionCancelPage } from './all-transaction/cancel-page';
 import { CashReceiptListPage } from './cash-receipt/list-page';
-import { CashReceiptDetailPage } from './cash-receipt/detail-page';
 import { CashReceitHandWrittenIssuancePage } from './cash-receipt/hand-written-issuance-page';
 import { EscrowListPage } from './escrow/list-page';
-import { EscrowDetailPage } from './escrow/detail-page';
 import { BillingListPage } from './billing/list-page';
-import { BillingDetailPage } from './billing/detail-page';
 import { BillingChargePage } from './billing/charge-page';
 
-
 export const TransactionPages = () => {
   return (
     <>
       <SentryRoutes>
         <Route path={ROUTE_NAMES.transaction.allTransaction.base}>
           <Route path={ROUTE_NAMES.transaction.allTransaction.list} element={<AllTransactionListPage />} />
-          <Route path={ROUTE_NAMES.transaction.allTransaction.detail} element={<AllTransactionDetailPage />} />
           <Route path={ROUTE_NAMES.transaction.allTransaction.cancel} element={<AllTransactionCancelPage />} />
         </Route>
         <Route path={ROUTE_NAMES.transaction.cashReceipt.base}>
           <Route path={ROUTE_NAMES.transaction.cashReceipt.list} element={<CashReceiptListPage />} />
-          <Route path={ROUTE_NAMES.transaction.cashReceipt.detail} element={<CashReceiptDetailPage />} />
           <Route path={ROUTE_NAMES.transaction.cashReceipt.handWrittenIssuance} element={<CashReceitHandWrittenIssuancePage />} />
         </Route>
         <Route path={ROUTE_NAMES.transaction.escrow.base}>
           <Route path={ROUTE_NAMES.transaction.escrow.list} element={<EscrowListPage />} />
-          <Route path={ROUTE_NAMES.transaction.escrow.detail} element={<EscrowDetailPage />} />
         </Route>
         <Route path={ROUTE_NAMES.transaction.billing.base}>
           <Route path={ROUTE_NAMES.transaction.billing.list} element={<BillingListPage />} />
-          <Route path={ROUTE_NAMES.transaction.billing.detail} element={<BillingDetailPage />} />
           <Route path={ROUTE_NAMES.transaction.billing.charge} element={<BillingChargePage />} />
         </Route>
       </SentryRoutes>
diff --git a/src/shared/constants/paths.ts b/src/shared/constants/paths.ts
index b996555..6230cf3 100644
--- a/src/shared/constants/paths.ts
+++ b/src/shared/constants/paths.ts
@@ -20,10 +20,6 @@ export const PATHS: RouteNamesType = {
         `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.allTransaction.base}`,
         ROUTE_NAMES.transaction.allTransaction.list,
       ),
-      detail: generatePath(
-        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.allTransaction.base}`,
-        ROUTE_NAMES.transaction.allTransaction.detail,
-      ),
       cancel: generatePath(
         `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.allTransaction.base}`,
         ROUTE_NAMES.transaction.allTransaction.cancel,
@@ -35,10 +31,6 @@ export const PATHS: RouteNamesType = {
         `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.cashReceipt.base}`,
         ROUTE_NAMES.transaction.cashReceipt.list,
       ),
-      detail: generatePath(
-        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.cashReceipt.base}`,
-        ROUTE_NAMES.transaction.cashReceipt.detail,
-      ),
       handWrittenIssuance: generatePath(
         `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.cashReceipt.base}`,
         ROUTE_NAMES.transaction.cashReceipt.handWrittenIssuance,
@@ -50,10 +42,6 @@ export const PATHS: RouteNamesType = {
         `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.escrow.base}`,
         ROUTE_NAMES.transaction.escrow.list,
       ),
-      detail: generatePath(
-        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.escrow.base}`,
-        ROUTE_NAMES.transaction.escrow.detail,
-      ),
     },
     billing: {
       base: generatePath(`${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.billing.base}`),
@@ -61,10 +49,6 @@ export const PATHS: RouteNamesType = {
         `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.billing.base}`,
         ROUTE_NAMES.transaction.billing.list,
       ),
-      detail: generatePath(
-        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.billing.base}`,
-        ROUTE_NAMES.transaction.billing.detail,
-      ),
       charge: generatePath(
         `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.billing.base}`,
         ROUTE_NAMES.transaction.billing.charge,
diff --git a/src/shared/constants/route-names.ts b/src/shared/constants/route-names.ts
index 9e2800d..8912021 100644
--- a/src/shared/constants/route-names.ts
+++ b/src/shared/constants/route-names.ts
@@ -5,24 +5,20 @@ export const ROUTE_NAMES = {
     allTransaction: {
       base: '/all-transaction/*',
       list: 'list',
-      detail: 'detail',
       cancel: 'cancel',
     },
     cashReceipt: {
       base: '/cash-receipt/*',
       list: 'list',
-      detail: 'detail',
       handWrittenIssuance: 'hand-written-issuance',
     },
     escrow: {
       base: '/escrow/*',
       list: 'list',
-      detail: 'detail',
     },
     billing: {
       base: '/billing/*',
       list: 'list',
-      detail: 'detail',
       charge: 'charge',
     }
   },