결제 관리 API 연결

2025-09-19 13:05:46 +09:00
parent b900c16b71
commit b01190b395
6 changed files with 199 additions and 92 deletions
--- a/src/entities/payment/model/types.ts
+++ b/src/entities/payment/model/types.ts
@@ -64,13 +64,35 @@ export interface PaymentNonCardResponse {
  otherPaymentData: OtherPaymentData;
 };
 export interface AccountTransferData {
-  feeRanges: Array<Record<string, any>>;
-  bankFees: Array<Record<string, any>>;
+  feeRanges: Array<FeeRanges>;
+  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>>;
-  categoryFees: Array<Record<string, any>>;
+  paymentFees: Array<PaymentFees>;
+  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;
 };
--- a/src/entities/payment/ui/card-commission-bottom-sheet.tsx
+++ b/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>
    </>
  );
 };
--- a/src/entities/payment/ui/credit-card-list-bottom-sheet.tsx
+++ b/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>
    </>
  );
 };
--- a/src/entities/payment/ui/info-wrap.tsx
+++ b/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 }
--- a/src/entities/payment/ui/no-interest-info-bottom-sheet.tsx
+++ b/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);
  };

--- a/src/pages/payment/info/info-page.tsx
+++ b/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 { usePaymentCardMutation } from '@/entities/payment/api/use-payment-card-mutation';
-import { usePaymentNonCardMutation } from '@/entities/payment/api/use-payment-non-card-mutation';
+import { PaymentTabKeys } from '@/entities/payment/model/types';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
 	useSetHeaderTitle,
@@ -13,22 +11,12 @@ 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);
  useSetFooterMode(true);
@@ -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
-              mid={ mid }
-              paymentCard={ paymentCardResult }
-              paymentNonCard={ paymentNonCardResult }
-              paymentInstallment={ paymentInstallmentResult }
-            ></InfoWrap>
+            <InfoWrap></InfoWrap>
          </div>
        </div>
      </main>