결제 관리 API 연결

src/entities/payment/ui/card-commission-bottom-sheet.tsx

@@ -1,11 +1,33 @@
+import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
 
-export const CardCommissionCycleBottomSheet = () => {
+export interface CardCommissionBottomSheetProps {
+  cardCommissionBottomSheetOn: boolean;
+  setCardCommissionBottomSheetOn: (cardCommissionBottomSheetOn: boolean) => void;
+};
+
+export const CardCommissionBottomSheet = ({
+  cardCommissionBottomSheetOn,
+  setCardCommissionBottomSheetOn
+}: CardCommissionBottomSheetProps) => {
+
+  const onClickToClose = () => {
+    setCardCommissionBottomSheetOn(false);
+  };
 
   return (
     <>
-      <div className="bg-dim"></div>
-      <div className="bottomsheet">
+      { cardCommissionBottomSheetOn &&
+        <div className="bg-dim"></div>
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (cardCommissionBottomSheetOn)? 'visible': 'hidden' }
+        variants={ BottomSheetMotionVaiants }
+        transition={ BottomSheetMotionDuration }
+      >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
             <h2>수수료 및 정산주기</h2>
@@ -14,8 +36,9 @@ export const CardCommissionCycleBottomSheet = () => {
               type="button"
             >
               <img 
-                src={ IMAGE_ROOT + '/images/ico_close.svg' }
+                src={ IMAGE_ROOT + '/ico_close.svg' }
                 alt="닫기"
+                onClick={ () => onClickToClose() }
               />
             </button>
           </div>
@@ -102,7 +125,7 @@ export const CardCommissionCycleBottomSheet = () => {
           >신청</button>
         </div>
         */}
-      </div>
+      </motion.div>
     </>
   );
 };

src/entities/payment/ui/credit-card-list-bottom-sheet.tsx

@@ -1,11 +1,33 @@
+import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
 
-export const CreditCardListBottomSheet = () => {
+export interface CreditCardListBottomSheetProps {
+  creditCardListBottomSheetOn: boolean;
+  setCreditCardListBottomSheetOn: (creditCardListBottomSheetOn: boolean) => void;
+};
+
+export const CreditCardListBottomSheet = ({
+  creditCardListBottomSheetOn,
+  setCreditCardListBottomSheetOn
+}: CreditCardListBottomSheetProps) => {
+
+  const onClickToClose = () => {
+    setCreditCardListBottomSheetOn(false);
+  };
 
   return (
     <>
+      { creditCardListBottomSheetOn &&
       <div className="bg-dim"></div>
-      <div className="bottomsheet">
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (creditCardListBottomSheetOn)? 'visible': 'hidden' }
+        variants={ BottomSheetMotionVaiants }
+        transition={ BottomSheetMotionDuration }
+      >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
             <h2>카드사</h2>
@@ -16,6 +38,7 @@ export const CreditCardListBottomSheet = () => {
               <img 
                 src={ IMAGE_ROOT + '/ico_close.svg' }
                 alt="닫기"
+                onClick={ () => onClickToClose() }
               />
             </button>
           </div>
@@ -59,7 +82,7 @@ export const CreditCardListBottomSheet = () => {
             type="button"
           >확인</button>
         </div>
-      </div>
+      </motion.div>
     </>
   );
 };

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 }

src/entities/payment/ui/no-interest-info-bottom-sheet.tsx

@@ -22,8 +22,8 @@ export const NoInterestInfoBottomSheet = ({
   installmentDetails,
   setCardCompany
 }: NoInterestInfoBottomSheetProps) => {
+  
   const onClickToClose = () => {
-    // close
     setNoInterestInfoBottomSheetOn(false);
   };