통합거래내역 거래 취소

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