결제 관리 API 연결

src/entities/payment/model/types.ts

@@ -64,13 +64,35 @@ export interface PaymentNonCardResponse {
   otherPaymentData: OtherPaymentData;
 };
 export interface AccountTransferData {
-  feeRanges: Array<Record<string, any>>;
+  feeRanges: Array<FeeRanges>;
-  bankFees: Array<Record<string, any>>;
+  bankFees: Array<BankFees>;
+};
+export interface FeeRanges {
+  id: number;
+  feeRange: string;
+  feeAmount: string;
+};
+export interface BankFees {
+  id: number;
+  bankName: string;
+  feeAmount: string;
 };
 export interface MobilePaymentData {
-  paymentFees: Array<Record<string, any>>;
+  paymentFees: Array<PaymentFees>;
-  categoryFees: Array<Record<string, any>>;
+  categoryFees: Array<CategoryFees>;
 };
+export interface PaymentFees {
+  id: number;
+  category: string;
+  feeRate: number;
+  feeAmount: string;
+};
+export interface CategoryFees {
+  id: number;
+  category: string;
+  feeRate: number;
+};
+
 export interface OtherPaymentData {
   feeRate: number;
 };
@@ -78,7 +100,12 @@ export interface PaymentInstallmentParams extends PaymentCommonParams {
   paymentMethod: string;
 };
 export interface PaymentInstallmentResponse {
-  installmentData: Array<Record<string, any>>;
+  installmentData: Array<InstallmentData>;
+};
+export interface InstallmentData {
+  id: number;
+  category: string;
+  detailLink: string;
 };
 export interface InstallmentDetails {
   id: number;
@@ -104,11 +131,27 @@ export interface PaymentCardResponse {
   moneyPointTab: MoneyPointTab;
 };
 export interface GeneralTab {
-  items: Array<Record<string, any>>;
+  items: Array<GeneralTabItems>;
+};
+export interface GeneralTabItems {
+  id: number;
+  cardCompany: string;
+  feeRate: number;
 };
 export interface InstallmentTab {
-  items: Array<Record<string, any>>;
+  items: Array<InstallmentTabItems>;
+};
+export interface InstallmentTabItems {
+  id: number;
+  installmentMonth: string;
+  cardCompany: string;
+  feeRate: number;
 };
 export interface MoneyPointTab {
-  items: Array<Record<string, any>>;
+  items: Array<MoneyPointTabItems>;
+};
+export interface MoneyPointTabItems {
+  id: number;
+  category: string;
+  feeRate: number;
 };

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 (
     <>
+      { cardCommissionBottomSheetOn &&
         <div className="bg-dim"></div>
-      <div className="bottomsheet">
+      }
+      <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 {
+export const InfoWrap = () => {
-  mid: string;
+  
-  paymentCard?: PaymentCardResponse,
+  const [mid, setMid] = useState<string>('nictest00g');
-  paymentNonCard?: PaymentNonCardResponse,
-  paymentInstallment?: PaymentInstallmentResponse
-};
-export const InfoWrap = ({
-  mid,
-  paymentCard,
-  paymentNonCard,
-  paymentInstallment
-}: InfoWrapProp) => {
 
   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);
   };
 

src/pages/payment/info/info-page.tsx

@@ -1,11 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PaymentTab } from '@/entities/payment/ui/payment-tab';
 import { InfoWrap } from '@/entities/payment/ui/info-wrap';
-import { PaymentCardResponse, PaymentInstallmentResponse, PaymentNonCardResponse, PaymentTabKeys } from '@/entities/payment/model/types';
+import { PaymentTabKeys } from '@/entities/payment/model/types';
-import { usePaymentCardMutation } from '@/entities/payment/api/use-payment-card-mutation';
-import { usePaymentNonCardMutation } from '@/entities/payment/api/use-payment-non-card-mutation';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
 	useSetHeaderTitle,
@@ -13,21 +11,11 @@ import {
 	useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
-import { usePaymentInstallmentMutation } from '@/entities/payment/api/use-payment-installment-mutation';
 
 export const InfoPage = () => {
   const { navigate } = useNavigate();
 
-  const { mutateAsync: paymentCard } = usePaymentCardMutation();
-  const { mutateAsync: paymentNonCard } = usePaymentNonCardMutation();
-  const { mutateAsync: paymentInstallment } = usePaymentInstallmentMutation();
-
   const [activeTab, setActiveTab] = useState<PaymentTabKeys>(PaymentTabKeys.Info);
-  const [mid, setMid] = useState<string>('nictest00g');
-  
-  const [paymentCardResult, setPaymentCardResult] = useState<PaymentCardResponse>();
-  const [paymentNonCardResult, setPaymentNonCardResult] = useState<PaymentNonCardResponse>();
-  const [paymentInstallmentResult, setPaymentInstallResult] = useState<PaymentInstallmentResponse>();
   
   useSetHeaderTitle('결제 관리');
   useSetHeaderType(HeaderType.LeftArrow);
@@ -36,58 +24,13 @@ export const InfoPage = () => {
     navigate(PATHS.home);
   });
 
-  const callPaymentCard = () => {
-    let params = {
-      mid: mid,
-      paymentMethod: 'CREDIT_CARD'
-    };
-    
-    paymentCard(params).then((rs) => {
-      console.log(rs);
-      setPaymentCardResult(rs);
-    });
-  };
-  const callPaymentNonCard = () => {
-    let params = {
-      mid: mid,
-      paymentMethod: 'ACCOUNT_TRANSFER'
-    };
-    
-    paymentNonCard(params).then((rs) => {
-      console.log(rs);
-      setPaymentNonCardResult(rs);
-    });
-  };
-  const callPaymentIntallment = () => {
-    let params = {
-      mid: mid,
-      paymentMethod: 'CREDIT_CARD'
-    };
-    
-    paymentInstallment(params).then((rs) => {
-      console.log(rs);
-      setPaymentInstallResult(rs);
-    });
-  };
-
-  useEffect(() => {
-    callPaymentCard();
-    callPaymentNonCard();
-    callPaymentIntallment();
-  }, []);
-
   return (
     <>
       <main>
         <div className="tab-content pb-70">
           <div className="tab-pane pt-46 active">
             <PaymentTab activeTab={ activeTab }></PaymentTab>
-            <InfoWrap
+            <InfoWrap></InfoWrap>
-              mid={ mid }
-              paymentCard={ paymentCardResult }
-              paymentNonCard={ paymentNonCardResult }
-              paymentInstallment={ paymentInstallmentResult }
-            ></InfoWrap>
           </div>
         </div>
       </main>