빌키 에스크로 추가 api 연ㄱㅕㄹ

src/entities/transaction/api/use-billing-charge-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL } from '@/shared/api/urls';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  BillingChargeParams,
+  BillingChargeResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const billingCharge = (params: BillingChargeParams) => {
+  return resultify(
+    axios.post<BillingChargeResponse>(API_URL.billingDetail(), params),
+  );
+};
+
+export const useBillingChargeMutation = (options?: UseMutationOptions<BillingChargeResponse, CBDCAxiosError, BillingChargeParams>) => {
+  const mutation = useMutation<BillingChargeResponse, CBDCAxiosError, BillingChargeParams>({
+    ...options,
+    mutationFn: (params: BillingChargeParams) => billingCharge(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-escrow-mail-resend-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL } from '@/shared/api/urls';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  EscrowMailResendParams,
+  EscrowMailResendResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const escrowMailResend = (params: EscrowMailResendParams) => {
+  return resultify(
+    axios.post<EscrowMailResendResponse>(API_URL.escrowMailResend(), params),
+  );
+};
+
+export const useEscrowMailResendMutation = (options?: UseMutationOptions<EscrowMailResendResponse, CBDCAxiosError, EscrowMailResendParams>) => {
+  const mutation = useMutation<EscrowMailResendResponse, CBDCAxiosError, EscrowMailResendParams>({
+    ...options,
+    mutationFn: (params: EscrowMailResendParams) => escrowMailResend(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/model/types.ts

@@ -451,3 +451,22 @@ export interface CashReceiptManualIssueResponse {
   issueDateTime: string,
   issueResult: SuccessResult
 };
+export interface BillingChargeParams {
+  billKey: string;
+  productName: string;
+  productAmount: number | string;
+  orderNumber: string;
+  buyerName: string;
+  paymentRequestDate: string;
+  installmentMonth: string;
+};
+export interface BillingChargeResponse {
+
+};
+export interface EscrowMailResendParams {
+  orderNumber?: string;
+  tid?: string;
+};
+export interface EscrowMailResendResponse {
+
+};

src/entities/transaction/ui/billing-list.tsx

@@ -25,7 +25,7 @@ export const BillingList = ({
   };
 
   const onClickToNavigate = () => {
-    navigate(PATHS.transaction.billing.paymentRequest);
+    navigate(PATHS.transaction.billing.charge);
   };
   
   return (

src/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet.tsx

@@ -1,17 +1,17 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
 
-export interface BottomSheetCashReceitPurposeUpdateProps {
+export interface CashReceitPurposeUpdateBottomSheetProps {
   setBottomSheetOn: (bottomSheetOn: boolean) => void;
   bottomSheetOn: boolean;
   callPurposeUpdate: () => void;
 };
 
-export const BottomSheetCashReceitPurposeUpdate = ({
+export const CashReceitPurposeUpdateBottomSheet = ({
   setBottomSheetOn,
   bottomSheetOn,
   callPurposeUpdate
-}: BottomSheetCashReceitPurposeUpdateProps) => {
+}: CashReceitPurposeUpdateBottomSheetProps) => {
   
   const onClickToClose = () => {
     setBottomSheetOn(false);

src/entities/transaction/ui/escrow-mail-resend-bottom-sheet.tsx

@@ -1,11 +1,42 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
 
-export const BottomSheetEmail = () => {
+export interface EscrowMailResendBottomSheetProps {
+  setBottomSheetOn: (bottomSheetOn: boolean) => void;
+  bottomSheetOn: boolean;
+  callMailResend: () => void;
+};
+
+export const EscrowMailResendBottomSheet = ({
+  setBottomSheetOn,
+  bottomSheetOn,
+  callMailResend
+}: EscrowMailResendBottomSheetProps) => {
+
+  const onClickToClose = () => {
+    setBottomSheetOn(false);
+  };
+  const onClickToMailResend = () => {
+    callMailResend();
+  };
+
+  const variants = {
+    hidden: { y: '100%' },
+    visible: { y: '0%' },
+  };
 
   return (
     <>
-      <div className="bg-dim"></div>
-      <div className="bottomsheet">
+      { (bottomSheetOn) &&
+        <div className="bg-dim"></div>
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (bottomSheetOn)? 'visible': 'hidden' }
+        variants={ variants }
+        transition={{ duration: 0.5 }}
+      >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
             <h2>이메일 주소를 선택하세요</h2>
@@ -16,6 +47,7 @@ export const BottomSheetEmail = () => {
               <img
                 src={ IMAGE_ROOT + '/ico_close.svg' }
                 alt="닫기"
+                onClick={ () => onClickToClose() }
               />
             </button>
           </div>
@@ -27,7 +59,7 @@ export const BottomSheetEmail = () => {
               <div className="mail-icon">
                 <div className="mail-icon-bg"></div>
                 <img
-                  src="../images/ico_email.svg"
+                  src={ IMAGE_ROOT +'/ico_email.svg' }
                   alt="메일"
                 />
               </div>
@@ -54,10 +86,10 @@ export const BottomSheetEmail = () => {
           <button
             className="btn-50 btn-blue flex-1"
             type="button"
-            disabled
+            onClick={ () => onClickToMailResend() }
           >신청</button>
         </div>
-      </div>
+      </motion.div>
     </>
   );
 };