결제관리 무이자 정보 연결

src/entities/payment/ui/info-wrap.tsx

@@ -1,20 +1,25 @@
+import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { InfoItem } from './info-item';
+import { NoInterestInfoBottomSheet } from './no-interest-info-bottom-sheet';
+import { usePaymentInstallmentDetailMutation } from '../api/use-payment-installment-detail-mutation';
 import { 
+  InstallmentDetails,
   PaymentCardResponse, 
   PaymentInfoItemType, 
+  PaymentInstallmentDetailResponse, 
   PaymentInstallmentResponse, 
   PaymentNonCardResponse 
 } from '../model/types';
-import { NoInterestInfoBottomSheet } from './no-interest-info-bottom-sheet';
-import { useState } from 'react';
 
 export interface InfoWrapProp {
+  mid: string;
   paymentCard?: PaymentCardResponse,
   paymentNonCard?: PaymentNonCardResponse,
   paymentInstallment?: PaymentInstallmentResponse
 };
 export const InfoWrap = ({
+  mid,
   paymentCard,
   paymentNonCard,
   paymentInstallment
@@ -22,6 +27,12 @@ export const InfoWrap = ({
   
   const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false);
 
+  const [cardCompany, setCardCompany] = useState<string>('비씨');
+  const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
+  const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
+  
+  const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();
+
   const list1 = [
     {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
     {payName: '카카오페이', payImage: 'pay_02.svg', infoLink: ''},
@@ -85,8 +96,25 @@ export const InfoWrap = ({
     }
     
     return rs;
-  }
+  };
 
+  const callPaymentIntallmentDetail = () => {
+    let params = {
+      mid: mid,
+      cardCompany: cardCompany
+    };
+    
+    paymentInstallmentDetail(params).then((rs) => {
+      console.log(rs);
+      setCardCompany(rs.cardCompany);
+      setCardCompanyOptions(rs.cardCompanyOptions);
+      setInstallmentDetails(rs.installmentDetails);
+    });
+  };
+
+  useEffect(() => {
+    callPaymentIntallmentDetail();
+  }, [cardCompany]);
 
   return (
     <>
@@ -104,6 +132,10 @@ export const InfoWrap = ({
       <NoInterestInfoBottomSheet
         noInterestInfoBottomSheetOn={ noInterestInfoBottomSheetOn }
         setNoInterestInfoBottomSheetOn={ setNoInterestInfoBottomSheetOn }
+        cardCompany={ cardCompany }
+        cardCompanyOptions={ cardCompanyOptions }
+        installmentDetails={ installmentDetails }
+        setCardCompany={ setCardCompany }
       ></NoInterestInfoBottomSheet>
     </>
   );