홈 화면 month api 수정

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={['취소', '확인']}
         />