에스크로 거래취소

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

@@ -1,20 +1,51 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
+import { DebtPreventionCancelDisplayInfo } from '../model/types';
+import { useState } from 'react';
+import moment from 'moment';
+import { NumericFormat } from 'react-number-format';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
+import { useNavigate } from '@/shared/lib/hooks';
+import { PATHS } from '@/shared/constants/paths';
 export interface AllTransactionCancelPreventBondProps {
   cancelPreventBondOn: boolean;
   setCancelPreventBondOn: (cancelPreventBondOn: boolean) => void;
+  debtPreventionCancelDisplayInfo?: DebtPreventionCancelDisplayInfo | null;
+  serviceCode: string;
+  tid: string;
 };
 
 export const AllTransactionCancelPreventBond = ({
   cancelPreventBondOn,
-  setCancelPreventBondOn
+  setCancelPreventBondOn,
+  debtPreventionCancelDisplayInfo,
+  serviceCode,
+  tid
 }: AllTransactionCancelPreventBondProps) => {
+  const { navigate } = useNavigate();
+  const [item, setItem] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(debtPreventionCancelDisplayInfo);
   const onClickToClose = () => {
-    setCancelPreventBondOn(false);
+    navigate(PATHS.transaction.allTransaction.detail, {
+      state: {
+        serviceCode: serviceCode,
+        tid: tid
+      }
+    });
   };
+  const callTransactionCancel = () => {
+
+  };
+  
   return (
     <>
-      <motion.div>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (cancelPreventBondOn)? 'visible': 'hidden' }
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
+      >
         <div className="full-menu-container">
           <div className="full-menu-header">
             <div className="full-menu-title center">거래취소(입금 후 취소)</div>
@@ -26,7 +57,7 @@ export const AllTransactionCancelPreventBond = ({
                 <img 
                   src={ IMAGE_ROOT + '/ico_close.svg' }
                   alt="닫기"
-                  onClick={ () => onClickToClose() }
+                  onClick={ onClickToClose }
                 />
               </button>
             </div>
@@ -39,23 +70,41 @@ export const AllTransactionCancelPreventBond = ({
                 <ul className="kv-list">
                   <li className="kv-row">
                     <div className="k">· 승인일</div>
-                    <div className="v">2025/10/10</div>
+                    <div className="v">{ item?.approvalDate? moment(item?.approvalDate).format('YYYY.MM.DD'): '' }</div>
                   </li>
                   <li className="kv-row">
                     <div className="k">· 승인번호</div>
-                    <div className="v">00259163</div>
+                    <div className="v">{ item?.approvalNo }</div>
                   </li>
                   <li className="kv-row">
                     <div className="k">· 승인금액</div>
-                    <div className="v">1,004</div>
+                    <div className="v">
+                      <NumericFormat
+                        value={ item?.amount } 
+                        thousandSeparator
+                        displayType="text"
+                      ></NumericFormat>
+                    </div>
                   </li>
                   <li className="kv-row">
                     <div className="k">· 총 취소금액</div>
-                    <div className="v">204</div>
+                    <div className="v">
+                      <NumericFormat
+                        value={ item?.totalCancelAmount } 
+                        thousandSeparator
+                        displayType="text"
+                      ></NumericFormat>
+                    </div>
                   </li>
                   <li className="kv-row">
                     <div className="k red">· 입금요청금액 :</div>
-                    <div className="v red">200</div>
+                    <div className="v red">
+                      <NumericFormat
+                        value={ item?.depositRequestAmount } 
+                        thousandSeparator
+                        displayType="text"
+                      ></NumericFormat>
+                    </div>
                   </li>
                 </ul>
               </div>
@@ -65,15 +114,15 @@ export const AllTransactionCancelPreventBond = ({
                 <ul className="kv-list">
                   <li className="kv-row">
                     <div className="k">· 은행</div>
-                    <div className="v">신한은행</div>
+                    <div className="v">{ item?.bankName }</div>
                   </li>
                   <li className="kv-row">
                     <div className="k">· 계좌번호</div>
-                    <div className="v">140-012-733704</div>
+                    <div className="v">{ item?.accountNo }</div>
                   </li>
                   <li className="kv-row">
                     <div className="k">· 예금주</div>
-                    <div className="v">나이스정보통신(주)</div>
+                    <div className="v">{ item?.accountName }</div>
                   </li>
                 </ul>
               </div>
@@ -86,8 +135,14 @@ export const AllTransactionCancelPreventBond = ({
                 <div className="desc dot">입금 후 취소 프로세스 :<br />가맹점의 취소요청 -&gt; 가맹점의입금 -&gt; 입금 확인 -&gt; 취소 처리</div>
                 <div className="desc dot">정산받지 않은 거래인 경우 <span className="link-blue">service@nicepay.co.kr</span>로 거래내역을 발송바랍니다. (단. 정산예정일이 2일 이상 남은 거래에 한함)</div>
               </div>
+            </div>
           </div>
         </div>
+        <div className="apply-row">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => callTransactionCancel() }
+          >신청</button>
         </div>
       </motion.div>
     </>