홈 화면 month api 수정

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,59 +1,33 @@
 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>
-    </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>
+    </>
+  );
+}