통합거래내역 거래 취소

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">
-            <option>선택</option>
+          <select 
+            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>
+      */}
     </>
   );
 }