통합거래내역 거래 취소

src/entities/transaction/model/types.ts

@@ -534,10 +534,14 @@ export interface AllTransactionCancelParams{
   bankCode: string;
   accountNo: string;
   accountHolder: string;
-  supplyAmount: number;
+  supplyAmount: number | null;
-  goodsVatAmount: number;
+  goodsVatAmount: number | null;
-  taxFreeAmount: number;
+  taxFreeAmount: number | null;
-  serviceAmount: number;
+  serviceAmount: number | null;
+  clientIp?: string;
+  partCancelCl: boolean;
+  isNpg: boolean;
+  serviceCode: string;
 };
 export interface AllTransactionCancelResponse {
   
@@ -547,15 +551,20 @@ export interface AllTransactionCancelInfoParams {
   tid: string;
 };
 export interface AllTransactionCancelInfoResponse {
-  remainAmount: number;
+  debtPreventionCancelDisplayInfo?: DebtPreventionCancelDisplayInfo | null;
-  partCancelCl: boolean;
+  debtPreventionCancelRequestInfo?: DebtPreventionCancelRequestInfo | null;
-  isCompoundTax: boolean;
-  supplyAmount: number | null;
   goodsVat: number | null;
-  taxFreeAmount: number | null;
+  isCompoundTax: boolean;
+  isConditionalVatAutoCalcMerchant: boolean;
+  isNpg: boolean;
+  isVatAutoCalcMerchant: boolean;
+  isVatDisplayed: boolean;
+  partCancelCl: boolean;
+  remainAmount: number;
   serviceAmount: number | null;
-  debtPreventionCancelDisplayInfo: DebtPreventionCancelDisplayInfo | null;
+  supplyAmount: number | null;
-  debtPreventionCancelRequestInfo: DebtPreventionCancelRequestInfo | null;
+  taxFreeAmount: number | null;
+  vatAutoCalcSummary: number;
 };
 export interface DebtPreventionCancelDisplayInfo {
   isCancel: boolean;

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

@@ -5,27 +5,57 @@ import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-
 
 export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoResponse {
   serviceCode: string;
+  cancelPassword: string;
+  setCancelPassword: (cancelPassword: string) => void;
+  bankCode?: string;
+  setBankCode?: (BankCode: string) => void;
+  accountNo?: string;
+  setAccountNo?: (accountNo: string) => void;
+  accountHolder?: string;
+  setAccountHolder?: (accountHolder: string) => void;
 };
 
 export const AllTransactionAllCancel = ({
   serviceCode,
-  remainAmount,
-  partCancelCl,
-  isCompoundTax,
-  supplyAmount,
-  goodsVat,
-  taxFreeAmount,
-  serviceAmount,
   debtPreventionCancelDisplayInfo,
-  debtPreventionCancelRequestInfo
+  debtPreventionCancelRequestInfo,
+  goodsVat,
+  isCompoundTax,
+  isConditionalVatAutoCalcMerchant,
+  isNpg,
+  isVatAutoCalcMerchant,
+  isVatDisplayed,
+  partCancelCl,
+  remainAmount,
+  serviceAmount,
+  supplyAmount,
+  taxFreeAmount,
+  vatAutoCalcSummary,
+  cancelPassword,
+  setCancelPassword,
+  bankCode,
+  setBankCode,
+  accountNo,
+  setAccountNo,
+  accountHolder,
+  setAccountHolder
 }: AllTransactionAllCancelProps) => {
-  console.log(serviceCode)
   return (
     <>
       <div className="form-section">
-        <AllTransactionCancelSectionPasswordGroup></AllTransactionCancelSectionPasswordGroup>
+        <AllTransactionCancelSectionPasswordGroup
+          cancelPassword={ cancelPassword }
+          setCancelPassword={ setCancelPassword }
+        ></AllTransactionCancelSectionPasswordGroup>
         { serviceCode === '03' &&
-        <AllTransactionCancelSectionBankGroup></AllTransactionCancelSectionBankGroup>
+          <AllTransactionCancelSectionBankGroup
+            bankCode={ bankCode }
+            setBankCode={ setBankCode }
+            accountNo={ accountNo }
+            setAccountNo={ setAccountNo }
+            accountHolder={ accountHolder }
+            setAccountHolder={ setAccountHolder }
+          ></AllTransactionCancelSectionBankGroup>
         }
       </div>
     </>

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

@@ -3,22 +3,44 @@ 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';
+import { BankCode } from '@/shared/@types/banking-code';
 
 export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoResponse {
   serviceCode: string;
+  cancelPassword: string;
+  setCancelPassword: (cancelPassword: string) => void;
+  bankCode?: string;
+  setBankCode?: (BankCode: string) => void;
+  accountNo?: string;
+  setAccountNo?: (accountNo: string) => void;
+  accountHolder?: string;
+  setAccountHolder?: (accountHolder: string) => void;
 };
 
 export const AllTransactionPartCancel = ({
   serviceCode,
-  remainAmount,
-  partCancelCl,
-  isCompoundTax,
-  supplyAmount,
-  goodsVat,
-  taxFreeAmount,
-  serviceAmount,
   debtPreventionCancelDisplayInfo,
-  debtPreventionCancelRequestInfo
+  debtPreventionCancelRequestInfo,
+  goodsVat,
+  isCompoundTax,
+  isConditionalVatAutoCalcMerchant,
+  isNpg,
+  isVatAutoCalcMerchant,
+  isVatDisplayed,
+  partCancelCl,
+  remainAmount,
+  serviceAmount,
+  supplyAmount,
+  taxFreeAmount,
+  vatAutoCalcSummary,
+  cancelPassword,
+  setCancelPassword,
+  bankCode,
+  setBankCode,
+  accountNo,
+  setAccountNo,
+  accountHolder,
+  setAccountHolder
 }: AllTransactionPartCancelProps) => {
   
 
@@ -114,9 +136,19 @@ export const AllTransactionPartCancel = ({
       }
 
       <div className="form-section">
-        <AllTransactionCancelSectionPasswordGroup></AllTransactionCancelSectionPasswordGroup>
+        <AllTransactionCancelSectionPasswordGroup
+          cancelPassword={ cancelPassword }
+          setCancelPassword={ setCancelPassword }
+        ></AllTransactionCancelSectionPasswordGroup>
         { serviceCode === '03' &&
-        <AllTransactionCancelSectionBankGroup></AllTransactionCancelSectionBankGroup>
+          <AllTransactionCancelSectionBankGroup
+            bankCode={ bankCode }
+            setBankCode={ setBankCode }
+            accountNo={ accountNo }
+            setAccountNo={ setAccountNo }
+            accountHolder={ accountHolder }
+            setAccountHolder={ setAccountHolder }
+          ></AllTransactionCancelSectionBankGroup>
         }
       </div>  
     </>

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

@@ -1,12 +1,47 @@
-export const AllTransactionCancelSectionBankGroup = () => {
+import { ChangeEvent, useState } from "react";
+
+export interface AllTransactionCancelSectionBankGroupProps {
+  bankCode?: string;
+  setBankCode?: (BankCode: string) => void;
+  accountNo?: string;
+  setAccountNo?: (accountNo: string) => void;
+  accountHolder?: string;
+  setAccountHolder?: (accountHolder: string) => void;
+};
+export const AllTransactionCancelSectionBankGroup = ({
+  bankCode,
+  setBankCode,
+  accountNo,
+  setAccountNo,
+  accountHolder,
+  setAccountHolder
+}: AllTransactionCancelSectionBankGroupProps ) => {
+
+  const [newBankCode, setNewBankCode] = useState<string | undefined>(bankCode);
+  const [newAccountNo, setNewAccountNo] = useState<string | undefined>(accountNo);
+  const [newAccountHolder, setNewAccountHolder] = useState<string | undefined>(accountHolder);
+
+  const onChangeNewBankCode = (value: string) => {
+    setNewBankCode(value);
+  };
+  const onChangeNewAccountNo = (value: string) => {
+    setNewAccountNo(value);
+  };
+  const onChangeNewAccountHolder = (value: string) => {
+    setNewAccountHolder(value);
+  };
 
   return (
     <>
       <div className="form-group">
         <label className="form-label">은행</label>
         <div className="input-wrapper wid-100">
-          <select className="wid-100 align-right">
+          <select 
-            <option>선택</option>
+            className="wid-100 align-right"
+            value={ bankCode }
+            onChange={ (e: ChangeEvent<HTMLSelectElement>) => onChangeNewBankCode(e.target.value) }
+          >
+            <option value="">선택</option>
             <option>KB국민은행</option>
             <option>22323213123</option>
           </select>
@@ -19,7 +54,8 @@ export const AllTransactionCancelSectionBankGroup = () => {
           <input 
             className="form-input wid-100" 
             type="text" 
-            placeholder="" 
+            value={ newAccountNo }
+            onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewAccountNo(e.target.value) }
           />
         </div>
       </div>
@@ -30,7 +66,8 @@ export const AllTransactionCancelSectionBankGroup = () => {
           <input 
             className="form-input  wid-100" 
             type="text" 
-            placeholder="" 
+            value={ newAccountHolder }
+            onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewAccountHolder(e.target.value) }
           />
         </div>
       </div>

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

@@ -1,5 +1,20 @@
-export const AllTransactionCancelSectionPasswordGroup = () => {
+import { ChangeEvent, useState } from "react";
 
+export interface AllTransactionCancelSectionPasswordGroupProps {
+  cancelPassword: string;
+  setCancelPassword: (cancelPassword: string) => void;
+};
+
+export const AllTransactionCancelSectionPasswordGroup = ({
+  cancelPassword,
+  setCancelPassword
+}: AllTransactionCancelSectionPasswordGroupProps) => {
+
+  const [newCancelPassword, setNewCancelPassword] = useState<string>(cancelPassword);
+
+  const onChangeNewCancelPassword = (value: string) => {
+    setCancelPassword(value);
+  };
   return (
     <>
       <div className="form-group">
@@ -8,11 +23,14 @@ export const AllTransactionCancelSectionPasswordGroup = () => {
           <input 
             className="wid-100 align-right" 
             type="password" 
-            value="2736356352" 
+            value={ newCancelPassword }
+            onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewCancelPassword(e.target.value) }
           />
         </div>
       </div>
+      {/* 
       <div className="error-msg">비밀번호 불일치</div>
+      */}
     </>
   );
 }

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

@@ -20,9 +20,11 @@ import {
 } 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';
+import { useStore } from '@/shared/model/store';
 
 export const AllTransactionCancelPage = () => {
   const location = useLocation();
+  const userInfo = useStore.getState().UserStore.userInfo;
   const tid = location.state.tid;
   const serviceCode = location.state.serviceCode;
   
@@ -32,16 +34,26 @@ export const AllTransactionCancelPage = () => {
 
   // all or part
   const [tabAction, setTabAction] = useState<CancelTabKeys>(CancelTabKeys.All);
-  const [remainAmount, setRemainAmount] = useState<number>(0);
+  const [debtPreventionCancelDisplayInfo, setDebtPreventionCancelDisplayInfo] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(null);
-  const [totalCancelAmount, setTotalCancelAmount] = useState<number>(0);
+  const [debtPreventionCancelRequestInfo, setDebtPreventionCancelRequestInfo] = useState<DebtPreventionCancelRequestInfo | null | undefined>(null);
-  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 [isCompoundTax, setIsCompoundTax] = useState<boolean>(false);
+  const [isConditionalVatAutoCalcMerchant, setIsConditionalVatAutoCalcMerchant] = useState<boolean>(false);
+  const [isNpg, setIsNpg] = useState<boolean>(false);
+  const [isVatAutoCalcMerchant, setIsVatAutoCalcMerchant] = useState<boolean>(false);
+  const [isVatDisplayed, setIsVatDisplayed] = useState<boolean>(false);
+  const [partCancelCl, setPartCancelCl] = useState<boolean>(false);
+  const [remainAmount, setRemainAmount] = useState<number>(0);
   const [serviceAmount, setServiceAmount] = useState<number | null>(null);
-  const [debtPreventionCancelDisplayInfo, setDebtPreventionCancelDisplayInfo] = useState<DebtPreventionCancelDisplayInfo | null>(null);
+  const [supplyAmount, setSupplyAmount] = useState<number | null>(null);
-  const [debtPreventionCancelRequestInfo, setDebtPreventionCancelRequestInfo] = useState<DebtPreventionCancelRequestInfo | null>(null);
+  const [taxFreeAmount, setTaxFreeAmount] = useState<number | null>(null);
+  const [vatAutoCalcSummary, setVatAutoCalcSummary] = useState<number>(0);
+  const [totalCancelAmount, setTotalCancelAmount] = useState<number>(0);
+  const [cancelPassword, setCancelPassword] = useState<string>('');
+
+  const [bankCode, setBankCode] = useState<string>('');
+  const [accountNo, setAccountNo] = useState<string>('');
+  const [accountHolder, setAccountHolder] = useState<string>('');
 
   const { mutateAsync: transactionCancel } = useAllTransactioCancleMutation();
   const { mutateAsync: allTransactionCancelInfo } = useAllTransactioCancleInfoMutation();
@@ -52,15 +64,20 @@ export const AllTransactionCancelPage = () => {
       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);
+      setGoodsVat(rs.goodsVat);
+      setIsCompoundTax(rs.isCompoundTax);
+      setIsConditionalVatAutoCalcMerchant(rs.isConditionalVatAutoCalcMerchant);
+      setIsNpg(rs.isNpg);
+      setIsVatAutoCalcMerchant(rs.isVatAutoCalcMerchant);
+      setIsVatDisplayed(rs.isVatDisplayed);
+      setPartCancelCl(rs.partCancelCl);
+      setRemainAmount(rs.remainAmount);
+      setServiceAmount(rs.serviceAmount);
+      setSupplyAmount(rs.supplyAmount);
+      setTaxFreeAmount(rs.taxFreeAmount);
+      setVatAutoCalcSummary(rs.vatAutoCalcSummary);
       
       if(!partCancelCl){
         setTotalCancelAmount(rs.remainAmount);
@@ -82,16 +99,20 @@ export const AllTransactionCancelPage = () => {
 
   const callTransactionCancel = () => {
     let transactionCancelParams: AllTransactionCancelParams = {
-      tid: location?.state.tid,
+      tid: tid,
-      cancelAmount: 0,
+      cancelAmount: totalCancelAmount,
-      cancelPassword: "string",
+      cancelPassword: cancelPassword,
-      bankCode: "string",
+      bankCode: bankCode,
-      accountNo: "string",
+      accountNo: accountNo,
-      accountHolder: "string",
+      accountHolder: accountHolder,
-      supplyAmount: 0,
+      supplyAmount: supplyAmount,
-      goodsVatAmount: 0,
+      goodsVatAmount: goodsVat,
-      taxFreeAmount: 0,
+      taxFreeAmount: taxFreeAmount,
-      serviceAmount: 0
+      serviceAmount: serviceAmount,
+      clientIp: userInfo.clientAddressIP,
+      partCancelCl: partCancelCl,
+      isNpg: isNpg,
+      serviceCode: serviceCode
     };
     transactionCancel(transactionCancelParams).then((rs: AllTransactionCancelResponse) => {
       console.log(rs);
@@ -150,29 +171,55 @@ export const AllTransactionCancelPage = () => {
                 { (tabAction === CancelTabKeys.All) &&
                   <AllTransactionAllCancel
                     serviceCode={ serviceCode }
-                    remainAmount={ remainAmount }
-                    partCancelCl={ partCancelCl }
-                    isCompoundTax={ isCompoundTax }
-                    supplyAmount={ supplyAmount }
-                    goodsVat={ goodsVat }
-                    taxFreeAmount={ taxFreeAmount }
-                    serviceAmount={ serviceAmount }
                     debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
                     debtPreventionCancelRequestInfo={ debtPreventionCancelRequestInfo }
+                    goodsVat={ goodsVat }
+                    isCompoundTax={ isCompoundTax }
+                    isConditionalVatAutoCalcMerchant={ isConditionalVatAutoCalcMerchant }
+                    isNpg={ isNpg }
+                    isVatAutoCalcMerchant={ isVatAutoCalcMerchant }
+                    isVatDisplayed={ isVatDisplayed }
+                    partCancelCl={ partCancelCl }
+                    remainAmount={ remainAmount }
+                    serviceAmount={ serviceAmount }
+                    supplyAmount={ supplyAmount }
+                    taxFreeAmount={ taxFreeAmount }
+                    vatAutoCalcSummary={ vatAutoCalcSummary }
+                    cancelPassword={ cancelPassword }
+                    setCancelPassword={ setCancelPassword }
+                    bankCode={ bankCode }
+                    setBankCode={ setBankCode }
+                    accountNo={ accountNo }
+                    setAccountNo={ setAccountNo }
+                    accountHolder={ accountHolder }
+                    setAccountHolder={ setAccountHolder }
                   ></AllTransactionAllCancel>
                 }
                 { 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 }
+                    goodsVat={ goodsVat }
+                    isCompoundTax={ isCompoundTax }
+                    isConditionalVatAutoCalcMerchant={ isConditionalVatAutoCalcMerchant }
+                    isNpg={ isNpg }
+                    isVatAutoCalcMerchant={ isVatAutoCalcMerchant }
+                    isVatDisplayed={ isVatDisplayed }
+                    partCancelCl={ partCancelCl }
+                    remainAmount={ remainAmount }
+                    serviceAmount={ serviceAmount }
+                    supplyAmount={ supplyAmount }
+                    taxFreeAmount={ taxFreeAmount }
+                    vatAutoCalcSummary={ vatAutoCalcSummary }
+                    cancelPassword={ cancelPassword }
+                    setCancelPassword={ setCancelPassword }
+                    bankCode={ bankCode }
+                    setBankCode={ setBankCode }
+                    accountNo={ accountNo }
+                    setAccountNo={ setAccountNo }
+                    accountHolder={ accountHolder }
+                    setAccountHolder={ setAccountHolder }
                   ></AllTransactionPartCancel>
                 }
               </div>