결제관리 무이자 정보 연결

src/entities/payment/model/types.ts

@@ -34,7 +34,7 @@ export interface MerchantInfo {
   paymentInfoType: string;
   mid: string;
 };
-export interface CreditCard {
+export interface PaymentNotificationDataCommonType {
   id: number;
   paymentMethodName: string;
   startDate: string;
@@ -46,59 +46,14 @@ export interface CreditCard {
   encryptionStatus: string;
   expandable: boolean;
   detail: Record<string, any>;
-};
+}
-export interface AccountTransfer {
+
-  id: number;
+export interface CreditCard extends PaymentNotificationDataCommonType {};
-  paymentMethodName: string;
+export interface AccountTransfer extends PaymentNotificationDataCommonType {};
-  startDate: string;
+export interface VirtualAccount extends PaymentNotificationDataCommonType {};
-  adminEmail: string;
+export interface MobilePayment extends PaymentNotificationDataCommonType {};
-  urlIp: string;
+export interface EscrowPayment extends PaymentNotificationDataCommonType {};
-  retransmissionInterval: string;
+
-  retransmissionCount: string;
-  okCheck: string;
-  encryptionStatus: string;
-  expandable: boolean;
-  detail: Record<string, any>;
-};
-export interface VirtualAccount {
-  id: number;
-  paymentMethodName: string;
-  startDate: string;
-  adminEmail: string;
-  urlIp: string;
-  retransmissionInterval: string;
-  retransmissionCount: string;
-  okCheck: string;
-  encryptionStatus: string;
-  expandable: boolean;
-  detail: Record<string, any>;
-};
-export interface MobilePayment {
-  id: 1,
-  paymentMethodName: string;
-  startDate: string;
-  adminEmail: string;
-  urlIp: string;
-  retransmissionInterval: string;
-  retransmissionCount: string;
-  okCheck: string;
-  encryptionStatus: string;
-  expandable: boolean;
-  detail: Record<string, any>;
-};
-export interface EscrowPayment {
-  id: 1,
-  paymentMethodName: string;
-  startDate: string;
-  adminEmail: string;
-  urlIp: string;
-  retransmissionInterval: string;
-  retransmissionCount: string;
-  okCheck: string;
-  encryptionStatus: string;
-  expandable: boolean;
-  detail: Record<string, any>;
-};
 export interface PaymentNonCardParams extends PaymentCommonParams {
   paymentMethod: string;
 };
@@ -125,13 +80,19 @@ export interface PaymentInstallmentParams extends PaymentCommonParams {
 export interface PaymentInstallmentResponse {
   installmentData: Array<Record<string, any>>;
 };
+export interface InstallmentDetails {
+  id: number;
+  installmentMonths: string;
+  applicationPeriod: string;
+  applicationAmount: number;
+};
 export interface PaymentInstallmentDetailParams extends PaymentCommonParams {
   cardCompany: string;
 };
 export interface PaymentInstallmentDetailResponse {
   cardCompany: string;
   cardCompanyOptions: Array<string>;
-  installmentDetails: Array<Record<string, any>>;
+  installmentDetails: Array<InstallmentDetails>;
 };
 export interface PaymentCardParams extends PaymentCommonParams{
   paymentMethod: string;

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

@@ -1,4 +1,6 @@
-import { PaymentInfoItemType } from '../model/types';
+import { 
+  PaymentInfoItemType, 
+} from '../model/types';
 
 export interface InfoItemProps {
   type?: PaymentInfoItemType;
@@ -17,8 +19,8 @@ export const InfoItem = ({
 }: InfoItemProps) => {
 
   const onClickToOpenBottomSheet = () => {
-    if(!!infoLink){
+    if(setNoInterestInfoBottomSheetOn){
-      
+      setNoInterestInfoBottomSheetOn(true);
     }
   };
   return (

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>
     </>
   );

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

@@ -1,21 +1,40 @@
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { BottomSheetMotionVaiants, BottomSheetMotionDuration } from '@/entities/common/model/constant';
+import { InstallmentDetails, PaymentInstallmentDetailResponse } from '../model/types';
+import { ChangeEvent } from 'react';
+import { NumericFormat } from 'react-number-format';
 
 export interface NoInterestInfoBottomSheetProps {
   noInterestInfoBottomSheetOn: boolean;
   setNoInterestInfoBottomSheetOn: (noInterestInfoBottomSheetOn: boolean) => void;
+  cardCompany?: string;
+  cardCompanyOptions?: Array<string>;
+  installmentDetails?: Array<InstallmentDetails>;
+  setCardCompany?: (cardCompany: string) => void;
 };
 
 export const NoInterestInfoBottomSheet = ({
   noInterestInfoBottomSheetOn,
-  setNoInterestInfoBottomSheetOn
+  setNoInterestInfoBottomSheetOn,
+  cardCompany,
+  cardCompanyOptions,
+  installmentDetails,
+  setCardCompany
 }: NoInterestInfoBottomSheetProps) => {
   const onClickToClose = () => {
     // close
     setNoInterestInfoBottomSheetOn(false);
   };
-   return (
+
+  const onChangeToCardCompany = (e: ChangeEvent<HTMLSelectElement>) => {
+    let value = e.target.value;
+    if(setCardCompany){
+      setCardCompany(value);
+    }
+  };
+
+  return (
     <>
       { noInterestInfoBottomSheetOn &&
         <div className="bg-dim"></div>
@@ -47,11 +66,48 @@ export const NoInterestInfoBottomSheet = ({
           <div className="card-fee-box">
             <span className="label">카드사</span>
             <div className="field wid-100">
-              <select>
+            { !!cardCompanyOptions &&
-                <option>KB국민</option>
+              <select onChange={ onChangeToCardCompany }>
+              { cardCompanyOptions.map((value, index) => (
+                  <option 
+                    value={ value }
+                    selected={ cardCompany === value }
+                  >{ value }</option>
+                ))
+              }
               </select>
+            }
             </div>
           </div>
+          { !!installmentDetails 
+            && installmentDetails.length > 0
+            && installmentDetails.map((value, index) => (
+            <>
+              { (index > 0) && 
+                <div className="divider"></div>
+              }
+              <div className="desc dot">
+                <span>할부개월 : </span>
+                <span>{ value.installmentMonths }</span>
+              </div>
+              <div className="desc dot">
+                <span>적용기간 : </span>
+                <span>{ value.applicationPeriod }</span>
+              </div>
+              <div className="desc dot">
+                <span>적용금액 : </span>
+                <span>
+                  <NumericFormat
+                    value={ value.applicationAmount } 
+                    thousandSeparator
+                    displayType="text"
+                  ></NumericFormat>
+                </span>
+              </div>
+            </>
+            ))
+          }
+          {/*
           <div className="desc dot">할부개월 : 02, 03, 07</div>
           <div className="desc dot">적용기간 : 2025.06.01 ~ 9999.12.31</div>
           <div className="desc dot">적용금액 : 70,000</div>
@@ -59,6 +115,7 @@ export const NoInterestInfoBottomSheet = ({
           <div className="desc dot">할부개월 : 15, 20, 36, 60</div>
           <div className="desc dot">적용기간 : 2025.06.01 ~ 9999.12.31</div>
           <div className="desc dot">적용금액 : 50,000</div>
+          */}
         </div>
       </motion.div>
     </>

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

@@ -83,6 +83,7 @@ export const InfoPage = () => {
           <div className="tab-pane pt-46 active">
             <PaymentTab activeTab={ activeTab }></PaymentTab>
             <InfoWrap
+              mid={ mid }
               paymentCard={ paymentCardResult }
               paymentNonCard={ paymentNonCardResult }
               paymentInstallment={ paymentInstallmentResult }