홈 화면 month api 수정

src/entities/home/ui/day-status-box-container2.tsx

@@ -44,6 +44,7 @@ export const BoxContainer2 = () => {
       let previousMonthAmount = rs.sales.previousMonthAmount;
       if(currentMonthAmount && previousMonthAmount){
         let increase = (currentMonthAmount - previousMonthAmount) / previousMonthAmount * 100;
+        increase = Math.round(increase * 100) / 100;
         setSalesIncrease(increase);
       }
 
@@ -51,6 +52,7 @@ export const BoxContainer2 = () => {
       let previousMonthSettlementAmount = rs.settlement.previousMonthSettlementAmount;
       if(currentMonthSettlementAmount && previousMonthSettlementAmount){
         let increase = (currentMonthSettlementAmount - previousMonthSettlementAmount) / previousMonthSettlementAmount * 100;
+        increase = Math.round(increase * 100) / 100;
         setSettlementIncrease(increase);
       }
     });
@@ -72,7 +74,7 @@ export const BoxContainer2 = () => {
   };
 
   useEffect(() => {
-    // callMonth();
+    callMonth();
     callOverview();
   }, []);
 

src/entities/transaction/api/use-all-transaction-cancel-info-mutation.ts

@@ -18,7 +18,7 @@ export const allTransactionCancelInfo = (params: AllTransactionCancelInfoParams)
   );
 };
 
-export const useTransactioCancleInfonMutation = (options?: UseMutationOptions<AllTransactionCancelInfoResponse, CBDCAxiosError, AllTransactionCancelInfoParams>) => {
+export const useAllTransactioCancleInfoMutation = (options?: UseMutationOptions<AllTransactionCancelInfoResponse, CBDCAxiosError, AllTransactionCancelInfoParams>) => {
   const mutation = useMutation<AllTransactionCancelInfoResponse, CBDCAxiosError, AllTransactionCancelInfoParams>({
     ...options,
     mutationFn: (params: AllTransactionCancelInfoParams) => allTransactionCancelInfo(params),

src/entities/transaction/model/types.ts

@@ -488,16 +488,54 @@ export interface AllTransactionCancelResponse {
   
 };
 export interface AllTransactionCancelInfoParams {
+  serviceCode: string;
   tid: string;
 };
 export interface AllTransactionCancelInfoResponse {
   remainAmount: number;
   partCancelCl: boolean;
   isCompoundTax: boolean;
-  supplyAmount: number;
-  goodsVatAmount: number;
-  taxFreeAmount: number;
-  serviceAmount: number;
+  supplyAmount: number | null;
+  goodsVat: number | null;
+  taxFreeAmount: number | null;
+  serviceAmount: number | null;
+  debtPreventionCancelDisplayInfo: DebtPreventionCancelDisplayInfo | null;
+  debtPreventionCancelRequestInfo: DebtPreventionCancelRequestInfo | null;
+};
+export interface DebtPreventionCancelDisplayInfo {
+  isCancel: boolean;
+  serviceCode: string;
+  approvalDate: string;
+  approvalNo: string;
+  amount: number;
+  totalCancelAmount: number;
+  depositRequestAmount: number;
+  bankName: string;
+  accountNo: string;
+  accountName: string;
+};
+
+export interface DebtPreventionCancelRequestInfo {
+  tid: string;  
+  mid: string;
+  gid: string;
+  aid: string;
+  corpNo: string;
+  corpName: string;
+  serviceCode: string;
+  serviceProductCode: string;
+  approvalDate: string;
+  approvalNo: string;
+  goodsAmount: number;
+  cancelRequestAmount: number;
+  depositRequestAmount: number;
+  bankName: string;
+  accountNo: string;
+  depositName: string;
+  hourCount: 0,
+  totalCancelCount: number;
+  autoTaxCalcCl: string;
+  approvalVatMark: string;
 };
 export interface FilterProps {
   filterOn: boolean;

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

@@ -1,58 +1,32 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { AllTransactionCancelInfoResponse } from '../model/types';
+import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
+import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
 
-export const AllTransactionAllCancel = () => {
+export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoResponse {
+  serviceCode: string;
+};
 
+export const AllTransactionAllCancel = ({
+  serviceCode,
+  remainAmount,
+  partCancelCl,
+  isCompoundTax,
+  supplyAmount,
+  goodsVat,
+  taxFreeAmount,
+  serviceAmount,
+  debtPreventionCancelDisplayInfo,
+  debtPreventionCancelRequestInfo
+}: AllTransactionAllCancelProps) => {
+  console.log(serviceCode)
   return (
     <>
       <div className="form-section">
-        <div className="form-group">
-          <label className="form-label">취소 비밀번호</label>
-          <div className="input-wrapper wid-100 error">
-            <input 
-              className="wid-100 align-right" 
-              type="password" 
-              value="2736356352" 
-            />
-          </div>
-        </div>
-        <div className="error-msg">비밀번호 불일치</div>
-
-        <div className="form-group">
-          <label className="form-label">은행</label>
-          <div className="input-wrapper wid-100">
-            <select className="wid-100 align-right">
-              <option>선택</option>
-              <option>KB국민은행</option>
-              <option>22323213123</option>
-            </select>
-          </div>
-        </div>
-
-        <div className="form-group">
-          <label className="form-label">계좌번호</label>
-          <div className="input-wrapper wid-100">
-            <input 
-              className="form-input wid-100" 
-              type="text" 
-              placeholder="" 
-            />
-          </div>
-        </div>
-
-        <div className="form-group">
-          <label className="form-label">예금주</label>
-          <div className="input-wrapper wid-100">
-            <input 
-              className="form-input  wid-100" 
-              type="text" 
-              placeholder="" 
-            />
-          </div>
-        </div>
-
-        <div className="notice-text wid-100">
-          <p>환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.<br />입력 정보를 한번 더 확인해 주세요.</p>
-        </div>
+        <AllTransactionCancelSectionPasswordGroup></AllTransactionCancelSectionPasswordGroup>
+        { serviceCode === '03' &&
+        <AllTransactionCancelSectionBankGroup></AllTransactionCancelSectionBankGroup>
+        }
       </div>
     </>
   );

src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx

@@ -0,0 +1,100 @@
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
+export interface AllTransactionCancelPreventBondProps {
+  preventBondOn: boolean;
+  setCancelPreventBondOn: (preventBondOn: boolean) => void;
+};
+
+export const AllTransactionCancelPreventBond = ({
+  preventBondOn,
+  setCancelPreventBondOn
+}: AllTransactionCancelPreventBondProps) => {
+  const onClickToClose = () => {
+    setCancelPreventBondOn(false);
+  };
+  return (
+    <>
+      <motion.div>
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">거래취소(입금 후 취소)</div>
+            <div className="full-menu-actions">
+              <button 
+                id="closeFullMenu"
+                className="full-menu-close"
+              >
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                  onClick={ () => onClickToClose() }
+                />
+              </button>
+            </div>
+          </div>
+          <div className="option-list pt-16">
+            
+            <div className="txn-divider minus"></div>
+            <div className="summary-section pt-30">
+              <div className="summary-extend">
+                <div>취소 거래내역</div>
+                <ul className="summary-amount-list">
+                  <li className="summary-amount-item">
+                    <span className="label">승인일</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">승인번호</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">승인금액</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">총 취소금액</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">입금요청금액</span>
+                    <span className="value"></span>
+                  </li>
+                </ul>
+              </div>
+              <div className="summary-extend">
+                <div>입금 정보</div>
+                <ul className="summary-amount-list">
+                  <li className="summary-amount-item">
+                    <span className="label">은행</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">계좌번호</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">예금주</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">총 취소금액</span>
+                    <span className="value"></span>
+                  </li>
+                </ul>
+              </div>
+              <div>
+                <div>[취소요청] 버튼을 통해 취소 요청을 진행해야 접수됩니다.</div>
+                <div>입금자명은 가맹점 상호로 입력해 주세요.</div>
+                <div>입금요청금액과 동일한 금액을 입금해야 취소가 진행됩니다.</div>
+                <div>취소내역은 최대 3일 이후 확인 가능합니다.</div>
+                <div>입금 후 취소 프로세스</div>
+                <div>가맹점이 취소요청 - 가맹점이 입금 - 입금확인 - 취소 처리</div>
+                <div>정산받지 않은 겨래인 경우</div>
+                <div>service@nicepay.co.kr 로 거래내역을 방송바랍니다.(단 정산예정일이 2일 이상 남은 거래에 한함)</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};

src/entities/transaction/ui/all-transaction-part-cancel.tsx

@@ -1,11 +1,30 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { AllTransactionCancelInfoResponse } from '../model/types';
+import { NumericFormat } from 'react-number-format';
+import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
+import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
 
+export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoResponse {
+  serviceCode: string;
+};
 
-export const AllTransactionPartCancel = () => {
+export const AllTransactionPartCancel = ({
+  serviceCode,
+  remainAmount,
+  partCancelCl,
+  isCompoundTax,
+  supplyAmount,
+  goodsVat,
+  taxFreeAmount,
+  serviceAmount,
+  debtPreventionCancelDisplayInfo,
+  debtPreventionCancelRequestInfo
+}: AllTransactionPartCancelProps) => {
   
 
   return (
     <>
+      { !!isCompoundTax  && 
       <div className="tb_both">
         <table className="partial-cancel-table">
           <colgroup>
@@ -23,7 +42,13 @@ export const AllTransactionPartCancel = () => {
           <tbody>
             <tr>
               <td className="row-label">과세액</td>
-              <td className="row-balance">555,550,000</td>
+              <td className="row-balance">
+                <NumericFormat
+                  value={ supplyAmount } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat> 
+              </td>
               <td className="row-cancel">
                 <input 
                   className="cancel-input"
@@ -34,7 +59,13 @@ export const AllTransactionPartCancel = () => {
             </tr>
               <tr>
                 <td className="row-label">부가세</td>
-                <td className="row-balance">50,000</td>
+                <td className="row-balance">
+                  <NumericFormat
+                    value={ goodsVat } 
+                    thousandSeparator
+                    displayType="text"
+                  ></NumericFormat> 
+                </td>
                 <td className="row-cancel">
                   <input 
                     className="cancel-input"
@@ -45,7 +76,13 @@ export const AllTransactionPartCancel = () => {
               </tr>
               <tr>
                 <td className="row-label">면세</td>
-                <td className="row-balance">50,000</td>
+                <td className="row-balance">
+                  <NumericFormat
+                    value={ taxFreeAmount } 
+                    thousandSeparator
+                    displayType="text"
+                  ></NumericFormat>
+                </td>
                 <td className="row-cancel">
                   <input 
                     className="cancel-input"
@@ -56,7 +93,13 @@ export const AllTransactionPartCancel = () => {
               </tr>
               <tr>
                 <td className="row-label">봉사료</td>
-                <td className="row-balance">50,000</td>
+                <td className="row-balance">
+                  <NumericFormat
+                    value={ serviceAmount } 
+                    thousandSeparator
+                    displayType="text"
+                  ></NumericFormat>
+                </td>
                 <td className="row-cancel">
                   <input 
                     className="cancel-input"
@@ -68,56 +111,13 @@ export const AllTransactionPartCancel = () => {
           </tbody>
         </table>
       </div>
+      }
 
       <div className="form-section">
-        <div className="form-group">
-          <label className="form-label">취소 비밀번호</label>
-          <div className="input-wrapper wid-100 error">
-            <input 
-              className="wid-100 align-right"
-              type="password"
-              value=""
-            />
-          </div>
-        </div>
-        <div className="error-msg">비밀번호 불일치</div>
-
-        <div className="form-group">
-          <label className="form-label">은행</label>
-          <div className="input-wrapper wid-100">
-            <select className="wid-100 align-right">
-              <option>선택</option>
-              <option>KB국민은행</option>
-              <option>22323213123</option>
-            </select>
-          </div>
-        </div>
-    
-        <div className="form-group">
-          <label className="form-label">계좌번호</label>
-          <div className="input-wrapper wid-100">
-            <input 
-              className="form-input wid-100"
-              type="text"
-              placeholder=""
-            />
-          </div>
-        </div>
-
-        <div className="form-group">
-          <label className="form-label">예금주</label>
-          <div className="input-wrapper wid-100">
-            <input
-              className="form-input  wid-100"
-              type="text"
-              placeholder=""
-            />
-          </div>
-        </div>
-
-        <div className="notice-text wid-100">
-          <p>환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.<br />입력 정보를 한번 더 확인해 주세요.</p>
-        </div>
+        <AllTransactionCancelSectionPasswordGroup></AllTransactionCancelSectionPasswordGroup>
+        { serviceCode === '03' &&
+        <AllTransactionCancelSectionBankGroup></AllTransactionCancelSectionBankGroup>
+        }
       </div>  
     </>
   );

src/entities/transaction/ui/section/all-transaction-cancel-section-bank-group.tsx

@@ -0,0 +1,43 @@
+export const AllTransactionCancelSectionBankGroup = () => {
+
+  return (
+    <>
+      <div className="form-group">
+        <label className="form-label">은행</label>
+        <div className="input-wrapper wid-100">
+          <select className="wid-100 align-right">
+            <option>선택</option>
+            <option>KB국민은행</option>
+            <option>22323213123</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="form-group">
+        <label className="form-label">계좌번호</label>
+        <div className="input-wrapper wid-100">
+          <input 
+            className="form-input wid-100" 
+            type="text" 
+            placeholder="" 
+          />
+        </div>
+      </div>
+
+      <div className="form-group">
+        <label className="form-label">예금주</label>
+        <div className="input-wrapper wid-100">
+          <input 
+            className="form-input  wid-100" 
+            type="text" 
+            placeholder="" 
+          />
+        </div>
+      </div>
+
+      <div className="notice-text wid-100">
+        <p>환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.<br />입력 정보를 한번 더 확인해 주세요.</p>
+      </div>
+    </>
+  );
+}

src/entities/transaction/ui/section/all-transaction-cancel-section-password-group.tsx

@@ -0,0 +1,18 @@
+export const AllTransactionCancelSectionPasswordGroup = () => {
+
+  return (
+    <>
+      <div className="form-group">
+        <label className="form-label">취소 비밀번호</label>
+        <div className="input-wrapper wid-100 error">
+          <input 
+            className="wid-100 align-right" 
+            type="password" 
+            value="2736356352" 
+          />
+        </div>
+      </div>
+      <div className="error-msg">비밀번호 불일치</div>
+    </>
+  );
+}

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

@@ -5,18 +5,26 @@ import { AllTransactionPartCancel } from '@/entities/transaction/ui/all-transact
 import { useAllTransactioCancleMutation } from '@/entities/transaction/api/use-all-transaction-cancel-mutation';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
+  AllTransactionCancelInfoParams,
+  AllTransactionCancelInfoResponse,
   AllTransactionCancelParams,
   AllTransactionCancelResponse,
-  CancelTabKeys
+  CancelTabKeys,
+  DebtPreventionCancelDisplayInfo,
+  DebtPreventionCancelRequestInfo
 } from '@/entities/transaction/model/types';
 import { 
   useSetHeaderTitle,
   useSetHeaderType,
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { useAllTransactioCancleInfoMutation } from '@/entities/transaction/api/use-all-transaction-cancel-info-mutation';
+import { NumericFormat } from 'react-number-format';
 
 export const AllTransactionCancelPage = () => {
   const location = useLocation();
+  const tid = location.state.tid;
+  const serviceCode = location.state.serviceCode;
   
   useSetHeaderTitle('거래 취소');
   useSetHeaderType(HeaderType.RightClose);
@@ -24,8 +32,53 @@ export const AllTransactionCancelPage = () => {
 
   // all or part
   const [tabAction, setTabAction] = useState<CancelTabKeys>(CancelTabKeys.All);
+  const [remainAmount, setRemainAmount] = useState<number>(0);
+  const [totalCancelAmount, setTotalCancelAmount] = useState<number>(0);
+  const [partCancelCl, setPartCancelCl] = useState<boolean>(false);
+  const [isCompoundTax, setIsCompoundTax] = useState<boolean>(false);
+  const [supplyAmount, setSupplyAmount] = useState<number | null>(null);
+  const [goodsVat, setGoodsVat] = useState<number | null>(null);
+  const [taxFreeAmount, setTaxFreeAmount] = useState<number | null>(null);
+  const [serviceAmount, setServiceAmount] = useState<number | null>(null);
+  const [debtPreventionCancelDisplayInfo, setDebtPreventionCancelDisplayInfo] = useState<DebtPreventionCancelDisplayInfo | null>(null);
+  const [debtPreventionCancelRequestInfo, setDebtPreventionCancelRequestInfo] = useState<DebtPreventionCancelRequestInfo | null>(null);
 
   const { mutateAsync: transactionCancel } = useAllTransactioCancleMutation();
+  const { mutateAsync: allTransactionCancelInfo } = useAllTransactioCancleInfoMutation();
+
+  const callCancelInfo = () => {
+    let params: AllTransactionCancelInfoParams = {
+      serviceCode: serviceCode,
+      tid: tid
+    };
+    allTransactionCancelInfo(params).then((rs: AllTransactionCancelInfoResponse) => {
+      setRemainAmount(rs.remainAmount);
+      setPartCancelCl(rs.partCancelCl);
+      setIsCompoundTax(rs.isCompoundTax);
+      setSupplyAmount(rs.supplyAmount);
+      setGoodsVat(rs.goodsVat);
+      setTaxFreeAmount(rs.taxFreeAmount);
+      setServiceAmount(rs.serviceAmount);
+      setDebtPreventionCancelDisplayInfo(rs.debtPreventionCancelDisplayInfo);
+      setDebtPreventionCancelRequestInfo(rs.debtPreventionCancelRequestInfo);
+
+      if(!partCancelCl){
+        setTotalCancelAmount(rs.remainAmount);
+      }
+      else{
+        setTotalCancelAmount(0);
+      }
+      // partCancelCl == true ==> 부분취소 버튼 활성화
+      // isCompoundTax == true ==> 부분취소의 복합과세 노출
+      // debtPreventionCancelDisplayInfo != null => 입금 후 취소 페이지 노출
+      // [취소신청]버튼 클릭시
+      // debtPreventionCancelDisplayInfo.isCancel == true => 취소api호출
+      // debtPreventionCancelRequestInfo 이 값 통쨰로 변조없이 그대로 api에 전달
+      // debtPreventionCancelDisplayInfo.isCancel == false => 얼럿만 띄우고 취소요청하면안됨
+
+      
+    }); 
+  };
 
   const callTransactionCancel = () => {
     let transactionCancelParams: AllTransactionCancelParams = {
@@ -45,7 +98,7 @@ export const AllTransactionCancelPage = () => {
     });
   };
   useEffect(() => {
-    
+    callCancelInfo();
   }, []);
 
   const onClickToChangeTab = (tab: CancelTabKeys) => {
@@ -55,36 +108,72 @@ export const AllTransactionCancelPage = () => {
     <>
       <main>
         <div className="tab-content">
-          <div className="tab-pane sub active">
+          <div className="tab-pane pt-46 active">
             <div className="option-list-nopadding">
               <div className="subTab">
                 <button 
                   className={ `subtab-btn ${(tabAction === CancelTabKeys.All)? 'active': ''}` }
                   onClick={ () => onClickToChangeTab(CancelTabKeys.All) }
                 >전체 취소</button>
+                { !!partCancelCl &&
                 <button 
                   className={ `subtab-btn ${(tabAction === CancelTabKeys.Part)? 'active': ''}` }
                   onClick={ () => onClickToChangeTab(CancelTabKeys.Part) }
                 >부분 취소</button>
+                }
               </div>
-              <div className="cancel-list">
+              <div className="cancel-list pt-30">
                 <div className="amount-info">
                   <ul className="amount-list">
                     <li className="amount-item">
                       <span className="label">·&nbsp;&nbsp;총 잔액</span>
-                      <span className="value">500,000,000</span>
+                      <span className="value">
+                        <NumericFormat
+                          value={ remainAmount } 
+                          thousandSeparator
+                          displayType="text"
+                        ></NumericFormat>
+                      </span>
                     </li>
                     <li className="amount-item">
                       <span className="label">·&nbsp;&nbsp;총 취소금액</span>
-                      <span className="value">500,000,000</span>
+                      <span className="value">
+                        <NumericFormat
+                          value={ totalCancelAmount } 
+                          thousandSeparator
+                          displayType="text"
+                        ></NumericFormat>
+                      </span>
                     </li>
                   </ul>
                 </div>
                 { (tabAction === CancelTabKeys.All) &&
-                  <AllTransactionAllCancel></AllTransactionAllCancel>
+                  <AllTransactionAllCancel
+                    serviceCode={ serviceCode }
+                    remainAmount={ remainAmount }
+                    partCancelCl={ partCancelCl }
+                    isCompoundTax={ isCompoundTax }
+                    supplyAmount={ supplyAmount }
+                    goodsVat={ goodsVat }
+                    taxFreeAmount={ taxFreeAmount }
+                    serviceAmount={ serviceAmount }
+                    debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
+                    debtPreventionCancelRequestInfo={ debtPreventionCancelRequestInfo }
+                  ></AllTransactionAllCancel>
                 }
-                { (tabAction === CancelTabKeys.Part) &&
-                  <AllTransactionPartCancel></AllTransactionPartCancel>
+                { partCancelCl && (tabAction === CancelTabKeys.Part) &&
+                  <AllTransactionPartCancel
+                    serviceCode={ serviceCode }
+                    remainAmount={ remainAmount }
+                    partCancelCl={ partCancelCl }
+                    isCompoundTax={ isCompoundTax }
+                    supplyAmount={ supplyAmount }
+                    goodsVat={ goodsVat }
+                    taxFreeAmount={ taxFreeAmount }
+                    serviceAmount={ serviceAmount }
+                    debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
+                    debtPreventionCancelRequestInfo={ debtPreventionCancelRequestInfo }
+                  ></AllTransactionPartCancel>
                 }
               </div>
             </div>

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

@@ -81,6 +81,7 @@ export const AllTransactionDetailPage = () => {
       clearTimeout(timeout);
       navigate(PATHS.transaction.allTransaction.cancel, {
         state: {
+          serviceCode: serviceCode,
           tid: tid
         }
       });
@@ -101,6 +102,7 @@ export const AllTransactionDetailPage = () => {
           open={ isOpen }
           onClose={ close }
           onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) }
+          // onConfirmClick={ () => callCancelInfo() }
           message={ msg }
           buttonLabel={['취소', '확인']}
         />