홈 화면 month api 수정

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>  
     </>
   );