통합거래내역 거래 취소

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>
+      */}
     </>
   );
 }