결제 관리 API 연결

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

@@ -1,36 +1,59 @@
 import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { InfoItem } from './info-item';
+import { CardCommissionBottomSheet } from './card-commission-bottom-sheet';
+import { CreditCardListBottomSheet } from './credit-card-list-bottom-sheet';
 import { NoInterestInfoBottomSheet } from './no-interest-info-bottom-sheet';
 import { usePaymentInstallmentDetailMutation } from '../api/use-payment-installment-detail-mutation';
 import { 
+  AccountTransferData,
+  GeneralTab,
+  InstallmentData,
   InstallmentDetails,
+  InstallmentTab,
+  MobilePaymentData,
+  MoneyPointTab,
+  OtherPaymentData,
+  PaymentCardParams,
   PaymentCardResponse, 
   PaymentInfoItemType, 
+  PaymentInstallmentDetailParams, 
   PaymentInstallmentDetailResponse, 
+  PaymentInstallmentParams, 
   PaymentInstallmentResponse, 
+  PaymentNonCardParams, 
   PaymentNonCardResponse 
 } from '../model/types';
+import { usePaymentCardMutation } from '../api/use-payment-card-mutation';
+import { usePaymentNonCardMutation } from '../api/use-payment-non-card-mutation';
+import { usePaymentInstallmentMutation } from '../api/use-payment-installment-mutation';
 
-export interface InfoWrapProp {
-  mid: string;
-  paymentCard?: PaymentCardResponse,
-  paymentNonCard?: PaymentNonCardResponse,
-  paymentInstallment?: PaymentInstallmentResponse
-};
-export const InfoWrap = ({
-  mid,
-  paymentCard,
-  paymentNonCard,
-  paymentInstallment
-}: InfoWrapProp) => {
+export const InfoWrap = () => {
   
+  const [mid, setMid] = useState<string>('nictest00g');
+
   const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false);
+  const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false);
+  const [creditCardListBottomSheetOn, setCreditCardListBottomSheetOn] = useState<boolean>(false);
 
   const [cardCompany, setCardCompany] = useState<string>('비씨');
   const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
   const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
   
+  const [settlementPeriod, setSettlementPeriod] = useState<string>();
+  const [generalTab, setGeneralTab] = useState<GeneralTab>();
+  const [installmentTab, setInstallmentTab] = useState<InstallmentTab>();
+  const [moneyPointTab, setMoneyPointTab] = useState<MoneyPointTab>();
+  
+  const [accountTransferData, setAccountTransferData] = useState<AccountTransferData>();
+  const [mobilePaymentData, setMobilePaymentData] = useState<MobilePaymentData>();
+  const [otherPaymentData, setOtherPaymentData] = useState<OtherPaymentData>();
+
+  const [installmentData, setInstallmentData] = useState<Array<InstallmentData>>();
+
+  const { mutateAsync: paymentCard } = usePaymentCardMutation();
+  const { mutateAsync: paymentNonCard } = usePaymentNonCardMutation();
+  const { mutateAsync: paymentInstallment } = usePaymentInstallmentMutation();
   const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();
 
   const list1 = [
@@ -98,20 +121,64 @@ export const InfoWrap = ({
     return rs;
   };
 
+  const callPaymentCard = () => {
+    let params: PaymentCardParams = {
+      mid: mid,
+      paymentMethod: 'CREDIT_CARD'
+    };
+    
+    paymentCard(params).then((rs: PaymentCardResponse) => {
+      console.log(rs);
+      setSettlementPeriod(rs.settlementPeriod);
+      setGeneralTab(rs.generalTab);
+      setInstallmentTab(rs.installmentTab);
+      setMoneyPointTab(rs.moneyPointTab);
+    });
+  };
+  const callPaymentNonCard = () => {
+    let params: PaymentNonCardParams = {
+      mid: mid,
+      paymentMethod: 'ACCOUNT_TRANSFER'
+    };
+    
+    paymentNonCard(params).then((rs: PaymentNonCardResponse) => {
+      console.log(rs);
+      setSettlementPeriod(rs.settlementPeriod);
+      setAccountTransferData(rs.accountTransferData);
+      setMobilePaymentData(rs.mobilePaymentData);
+      setOtherPaymentData(rs.otherPaymentData);
+    });
+  };
+  const callPaymentIntallment = () => {
+    let params: PaymentInstallmentParams = {
+      mid: mid,
+      paymentMethod: 'CREDIT_CARD'
+    };
+    
+    paymentInstallment(params).then((rs: PaymentInstallmentResponse) => {
+      console.log(rs);
+      setInstallmentData(rs.installmentData);
+    });
+  };
+
   const callPaymentIntallmentDetail = () => {
-    let params = {
+    let params: PaymentInstallmentDetailParams  = {
       mid: mid,
       cardCompany: cardCompany
     };
     
-    paymentInstallmentDetail(params).then((rs) => {
+    paymentInstallmentDetail(params).then((rs: PaymentInstallmentDetailResponse) => {
       console.log(rs);
       setCardCompany(rs.cardCompany);
       setCardCompanyOptions(rs.cardCompanyOptions);
       setInstallmentDetails(rs.installmentDetails);
     });
   };
-
+  useEffect(() => {
+    callPaymentCard();
+    callPaymentNonCard();
+    callPaymentIntallment();
+  }, []);
   useEffect(() => {
     callPaymentIntallmentDetail();
   }, [cardCompany]);
@@ -129,6 +196,14 @@ export const InfoWrap = ({
           { getList(PaymentInfoItemType.NoInterest) }
         </ul>
       </div>
+      <CardCommissionBottomSheet
+        cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
+        setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
+      ></CardCommissionBottomSheet>
+      <CreditCardListBottomSheet
+        creditCardListBottomSheetOn={ creditCardListBottomSheetOn }
+        setCreditCardListBottomSheetOn={ setCreditCardListBottomSheetOn }
+      ></CreditCardListBottomSheet>
       <NoInterestInfoBottomSheet
         noInterestInfoBottomSheetOn={ noInterestInfoBottomSheetOn }
         setNoInterestInfoBottomSheetOn={ setNoInterestInfoBottomSheetOn }