결제정보

2025-11-19 16:35:43 +09:00
parent b71a6bf729
commit 1601ad79e2
5 changed files with 309 additions and 151 deletions
--- a/src/entities/payment/ui/info-wrap.tsx
+++ b/src/entities/payment/ui/info-wrap.tsx
@@ -35,6 +35,7 @@ import { usePaymentInstallmentMutation } from '../api/use-payment-installment-mu
 import { useStore } from '@/shared/model/store';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
+import { TransferCommissionBottomSheet } from './transfer-commission-bottom-sheet';

 export const InfoWrap = () => {
  const { t } = useTranslation();
@@ -49,12 +50,14 @@ export const InfoWrap = () => {
  const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false);
  const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false);
  const [creditCardListBottomSheetOn, setCreditCardListBottomSheetOn] = useState<boolean>(false);
-
+  const [transferCommissionBottomSheetOn, setTransferCommissionBottomSheetOn] = useState<boolean>(false);
+  
  const [cardCompany, setCardCompany] = useState<string>(t('payment.paymentMethods.bcCard'));
  const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
  const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
  
  const [payType, setPayType] = useState<number>(2);
+  const [itemKey, setItemKey] = useState<string>('');
  const [settlementPeriod, setSettlementPeriod] = useState<string>();
  const [generalTabItems, setGeneralTabItems] = useState<Array<GeneralTabItems>>([]);
  const [installmentTabItems, setInstallmentTabItems] = useState<Array<InstallmentTabItems>>([]);
@@ -78,30 +81,30 @@ export const InfoWrap = () => {
  const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();

  const list1 = [
-    {payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.kakaoPay'), payImage: 'pay_02.svg', infoLink: '', payType: 3},
-    {payName: t('payment.paymentMethods.naverPay'), payImage: 'pay_03.svg', infoLink: '', payType: 3},
-    {payName: t('payment.paymentMethods.samsungPay'), payImage: 'pay_04.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.accountTransfer'), payImage: 'pay_05.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.mobilePaymentFull'), payImage: 'pay_06.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.cultureLandGiftCard'), payImage: 'pay_07.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.ssgMoney'), payImage: 'pay_08.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_10.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.applePay'), payImage: 'pay_11.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.tossPay'), payImage: 'pay_12.svg', infoLink: '', payType: 3},
-    {payName: t('payment.paymentMethods.payco'), payImage: 'pay_13.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.livePay'), payImage: 'pay_14.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.taiwanPayment'), payImage: 'pay_15.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.tmoneyPay'), payImage: 'pay_16.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.lPay'), payImage: 'pay_17.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.payU'), payImage: 'pay_18.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.twLinePay'), payImage: 'pay_19.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.ssgPay'), payImage: 'pay_21.svg', infoLink: '', payType: 3},
-    {payName: t('payment.paymentMethods.kBankPay'), payImage: 'pay_22.svg', infoLink: '', payType: 2},
-    {payName: t('payment.paymentMethods.virtualAccount'), payImage: 'pay_23.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.ssgBankAccount'), payImage: 'pay_21.svg', infoLink: '', payType: 1},
-    {payName: t('payment.paymentMethods.accountSimplePayment'), payImage: 'pay_24.svg', infoLink: '', payType: 1},
+    {payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: '', payType: 2, itemKey: 'creditCard'},
+    {payName: t('payment.paymentMethods.kakaoPay'), payImage: 'pay_02.svg', infoLink: '', payType: 3, itemKey: 'kakaoPay'},
+    {payName: t('payment.paymentMethods.naverPay'), payImage: 'pay_03.svg', infoLink: '', payType: 3, itemKey: 'naverPay'},
+    {payName: t('payment.paymentMethods.samsungPay'), payImage: 'pay_04.svg', infoLink: '', payType: 2, itemKey: 'samsungPay'},
+    {payName: t('payment.paymentMethods.accountTransfer'), payImage: 'pay_05.svg', infoLink: '', payType: 1, itemKey: 'accountTransfer'},
+    {payName: t('payment.paymentMethods.mobilePaymentFull'), payImage: 'pay_06.svg', infoLink: '', payType: 1, itemKey: 'mobilePaymentFull'},
+    {payName: t('payment.paymentMethods.cultureLandGiftCard'), payImage: 'pay_07.svg', infoLink: '', payType: 1, itemKey: 'etc'},
+    {payName: t('payment.paymentMethods.ssgMoney'), payImage: 'pay_08.svg', infoLink: '', payType: 1, itemKey: 'etc'},
+    {payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: '', payType: 1, itemKey: 'etc'},
+    {payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_10.svg', infoLink: '', payType: 2, itemKey: 'samsungPayCard'},
+    {payName: t('payment.paymentMethods.applePay'), payImage: 'pay_11.svg', infoLink: '', payType: 2, itemKey: 'applePay'},
+    {payName: t('payment.paymentMethods.tossPay'), payImage: 'pay_12.svg', infoLink: '', payType: 3, itemKey: 'tossPay'},
+    {payName: t('payment.paymentMethods.payco'), payImage: 'pay_13.svg', infoLink: '', payType: 2, itemKey: 'payco'},
+    {payName: t('payment.paymentMethods.livePay'), payImage: 'pay_14.svg', infoLink: '', payType: 2, itemKey: 'livePay'},
+    {payName: t('payment.paymentMethods.taiwanPayment'), payImage: 'pay_15.svg', infoLink: '', payType: 1, itemKey: ''},
+    {payName: t('payment.paymentMethods.tmoneyPay'), payImage: 'pay_16.svg', infoLink: '', payType: 1, itemKey: ''},
+    {payName: t('payment.paymentMethods.lPay'), payImage: 'pay_17.svg', infoLink: '', payType: 2, itemKey: 'lPay'},
+    {payName: t('payment.paymentMethods.payU'), payImage: 'pay_18.svg', infoLink: '', payType: 2, itemKey: 'payU'},
+    {payName: t('payment.paymentMethods.twLinePay'), payImage: 'pay_19.svg', infoLink: '', payType: 2, itemKey: 'twLinePay'},
+    {payName: t('payment.paymentMethods.ssgPay'), payImage: 'pay_21.svg', infoLink: '', payType: 3, itemKey: 'ssgPay'},
+    {payName: t('payment.paymentMethods.kBankPay'), payImage: 'pay_22.svg', infoLink: '', payType: 2, itemKey: 'kBankPay'},
+    {payName: t('payment.paymentMethods.virtualAccount'), payImage: 'pay_23.svg', infoLink: '', payType: 1, itemKey: 'virtualAccount'},
+    {payName: t('payment.paymentMethods.ssgBankAccount'), payImage: 'pay_21.svg', infoLink: '', payType: 1, itemKey: 'etc'},
+    {payName: t('payment.paymentMethods.accountSimplePayment'), payImage: 'pay_24.svg', infoLink: '', payType: 1, itemKey: 'accountSimplePayment'},
  ];

  const list2 = [
@@ -115,18 +118,36 @@ export const InfoWrap = () => {
    let rs = [];
    if(type === PaymentInfoItemType.Comission){
      for(let i=0;i<list1.length;i++){
-        rs.push(
-          <InfoItem
-            key={ `comission-info-wrap-${i}` }
-            type={ type }
-            payName={ list1[i]?.payName }
-            payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
-            infoLink={ list1[i]?.infoLink }
-            payType={ list1[i]?.payType }
-            setPayType={ setPayType }
-            setBottomSheetOn={ setCardCommissionBottomSheetOn }
-          ></InfoItem>
-        );
+        let itemKey = list1[i]?.itemKey;
+        let payType = list1[i]?.payType;
+
+        let newBottomSheetOn;
+        if(payType === 1){
+          newBottomSheetOn = setTransferCommissionBottomSheetOn;
+        }
+        else if(payType === 2){
+          newBottomSheetOn = setCardCommissionBottomSheetOn;
+        }
+        else if(payType === 3){
+          newBottomSheetOn = setCardCommissionBottomSheetOn;
+        }
+        if(!!newBottomSheetOn){
+          rs.push(
+            <InfoItem
+              key={ `comission-info-wrap-${i}` }
+              type={ type }
+              payName={ list1[i]?.payName }
+              payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
+              infoLink={ list1[i]?.infoLink }
+              payType={ payType }
+              itemKey={ itemKey }
+              setItemKey={ setItemKey }
+              setPayType={ setPayType }
+              setBottomSheetOn={ newBottomSheetOn }
+            ></InfoItem>
+          );
+        }
+        
      }
    }
    else if(type === PaymentInfoItemType.NoInterest){
@@ -270,20 +291,31 @@ export const InfoWrap = () => {
        { getList(PaymentInfoItemType.NoInterest) }
        </ul>
      </div>
-      <CardCommissionBottomSheet
-        cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
-        setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
-        payType={ payType }
-        settlementPeriod={ settlementPeriod }
-        generalTabItems={ generalTabItems }
-        installmentTabItems={ installmentTabItems }
-        moneyPointTabItems= { moneyPointTabItems }
-        feeRanges={ feeRanges }
-        bankFees={ bankFees }
-        paymentFees={ paymentFees  }
-        categoryFees={ categoryFees }
-        feeRate={ feeRate }
-      ></CardCommissionBottomSheet>
+      { !!cardCommissionBottomSheetOn &&
+        <CardCommissionBottomSheet
+          cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
+          setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
+          payType={ payType }
+          itemKey={ itemKey }
+          settlementPeriod={ settlementPeriod }
+          generalTabItems={ generalTabItems }
+          installmentTabItems={ installmentTabItems }
+          moneyPointTabItems= { moneyPointTabItems }
+          feeRanges={ feeRanges }
+          bankFees={ bankFees }
+          paymentFees={ paymentFees  }
+          categoryFees={ categoryFees }
+          feeRate={ feeRate }
+        ></CardCommissionBottomSheet>
+      }
+      { !!transferCommissionBottomSheetOn &&
+        <TransferCommissionBottomSheet
+          itemKey={ itemKey }
+          transferCommissionBottomSheetOn={ transferCommissionBottomSheetOn }
+          setTransferCommissionBottomSheetOn={ setTransferCommissionBottomSheetOn }
+        ></TransferCommissionBottomSheet>
+      }
+      
      <CreditCardListBottomSheet
        creditCardListBottomSheetOn={ creditCardListBottomSheetOn }
        setCreditCardListBottomSheetOn={ setCreditCardListBottomSheetOn }