From 1601ad79e2706124d7561f680078655e2ada362d Mon Sep 17 00:00:00 2001 From: "focp212@naver.com" Date: Wed, 19 Nov 2025 16:35:43 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B2=B0=EC=A0=9C=EC=A0=95=EB=B3=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/entities/home/ui/favorite-wrapper.tsx | 4 +- .../ui/card-commission-bottom-sheet.tsx | 202 ++++++++++++------ src/entities/payment/ui/info-item.tsx | 7 + src/entities/payment/ui/info-wrap.tsx | 134 +++++++----- .../ui/transfer-commission-bottom-sheet.tsx | 113 +++++++--- 5 files changed, 309 insertions(+), 151 deletions(-) diff --git a/src/entities/home/ui/favorite-wrapper.tsx b/src/entities/home/ui/favorite-wrapper.tsx index 2ca2c03..9d3246f 100644 --- a/src/entities/home/ui/favorite-wrapper.tsx +++ b/src/entities/home/ui/favorite-wrapper.tsx @@ -104,9 +104,7 @@ export const FavoriteWrapper = ({ const makeFavoriteItems = () => { let rs = []; let cnt = favoriteItems.length; - if(usingType === 'home'){ - cnt = (cnt > 4)? 4: cnt; - } + for(let i=0;i void; payType: number; + itemKey: string; settlementPeriod?: string; generalTabItems?: Array, installmentTabItems?: Array, @@ -30,6 +31,7 @@ export const CardCommissionBottomSheet = ({ cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn, payType, + itemKey, settlementPeriod, generalTabItems, installmentTabItems, @@ -42,17 +44,58 @@ export const CardCommissionBottomSheet = ({ }: CardCommissionBottomSheetProps) => { const { t } = useTranslation(); const cardList = useStore.getState().CommonStore.creditCardList; + console.log(cardList); + let newCardList = cardList.filter((value, index) => value.code2 === 'pur'); + const [onTab, setOnTab] = useState(CardCommissionTabKey.GENERAL); const [selectedCard, setSelectedCard] = useState(cardList[0].desc1); + const [leftTitle, setLeftTitle] = useState(''); + const [leftText, setLeftText] = useState(''); const onClickToClose = () => { setCardCommissionBottomSheetOn(false); }; - + + const getItemList = (key?: CardCommissionTabKey) => { + let rs = []; + if(key === CardCommissionTabKey.GENERAL){ + for(let i=0;i + { newCardList[i].desc1 } + 2.000% + + ); + } + } + return rs; + } + useEffect(() => { // 탭 이동시 할일 }, [onTab]); + + useEffect(() => { + if(!!itemKey){ + if(itemKey === 'kakaoPay'){ + setLeftTitle('구분'); + setLeftText('카카오머니'); + } + else if(itemKey === 'naverPay'){ + setLeftTitle('할부개월'); + setLeftText('네이버포인트'); + } + else if(itemKey === 'tossPay'){ + setLeftTitle('할부개원'); + setLeftText('토스머니'); + } + + } + }, [itemKey]); return ( <> @@ -76,7 +119,7 @@ export const CardCommissionBottomSheet = ({ {t('common.close')} onClickToClose() } + onClick={ onClickToClose } /> @@ -109,79 +152,96 @@ export const CardCommissionBottomSheet = ({ >{t('payment.moneyPoint')} } + { (onTab === CardCommissionTabKey.GENERAL) && +
+
+ {t('payment.cardCompany')} + {t('payment.commission')} +
+ { getItemList(CardCommissionTabKey.GENERAL) } +
+ } -
- {t('payment.cardCompany')} -
- -
-
+ { (onTab === CardCommissionTabKey.NO_INTEREST) && + <> +
+ {t('payment.cardCompany')} +
+ +
+
-
-
- {t('payment.installmentMonths')} - {t('payment.commission')} -
-
- {t('payment.months', { count: 2 })} - 2.000% -
-
- {t('payment.months', { count: 3 })} - 3.100% -
-
- {t('payment.months', { count: 4 })} - 4.400% -
-
- {t('payment.months', { count: 5 })} - 5.200% -
-
- {t('payment.months', { count: 6 })} - 6.000% -
-
- {t('payment.months', { count: 7 })} - 6.600% -
-
- {t('payment.months', { count: 8 })} - 7.500% -
-
- {t('payment.months', { count: 9 })} - 8.000% -
-
- {t('payment.months', { count: 10 })} - 9.000% -
-
+
+
+ {t('payment.installmentMonths')} + {t('payment.commission')} +
+
+ {t('payment.months', { count: 2 })} + 2.000% +
+
+ {t('payment.months', { count: 3 })} + 3.100% +
+
+ {t('payment.months', { count: 4 })} + 4.400% +
+
+ {t('payment.months', { count: 5 })} + 5.200% +
+
+ {t('payment.months', { count: 6 })} + 6.000% +
+
+ {t('payment.months', { count: 7 })} + 6.600% +
+
+ {t('payment.months', { count: 8 })} + 7.500% +
+
+ {t('payment.months', { count: 9 })} + 8.000% +
+
+ {t('payment.months', { count: 10 })} + 9.000% +
+
+ + } + + { (onTab === CardCommissionTabKey.MONEY_POINT) && + <> +
+ { leftTitle } + {t('payment.commission')} +
+
+ { leftText } + 2.000% +
+ + } - {/* -
- -
- */} ); diff --git a/src/entities/payment/ui/info-item.tsx b/src/entities/payment/ui/info-item.tsx index 47f41ee..a765725 100644 --- a/src/entities/payment/ui/info-item.tsx +++ b/src/entities/payment/ui/info-item.tsx @@ -9,6 +9,8 @@ export interface InfoItemProps { payImage?: string; infoLink?: string; payType?: number; + itemKey?: string; + setItemKey?: (itemKey: string) => void; setPayType?: (payType: number) => void; setBottomSheetOn?: (bottomSheetOn: boolean) => void; }; @@ -19,6 +21,8 @@ export const InfoItem = ({ payImage, infoLink, payType, + itemKey, + setItemKey, setPayType, setBottomSheetOn }: InfoItemProps) => { @@ -28,6 +32,9 @@ export const InfoItem = ({ if(setPayType && payType){ setPayType(payType); } + if(setItemKey && itemKey){ + setItemKey(itemKey) + } if(setBottomSheetOn){ setBottomSheetOn(true); } diff --git a/src/entities/payment/ui/info-wrap.tsx b/src/entities/payment/ui/info-wrap.tsx index 4fc3013..d30c9cb 100644 --- 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(false); const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState(false); const [creditCardListBottomSheetOn, setCreditCardListBottomSheetOn] = useState(false); - + const [transferCommissionBottomSheetOn, setTransferCommissionBottomSheetOn] = useState(false); + const [cardCompany, setCardCompany] = useState(t('payment.paymentMethods.bcCard')); const [cardCompanyOptions, setCardCompanyOptions] = useState>(); const [installmentDetails, setInstallmentDetails] = useState>([]); const [payType, setPayType] = useState(2); + const [itemKey, setItemKey] = useState(''); const [settlementPeriod, setSettlementPeriod] = useState(); const [generalTabItems, setGeneralTabItems] = useState>([]); const [installmentTabItems, setInstallmentTabItems] = useState>([]); @@ -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 - ); + 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( + + ); + } + } } else if(type === PaymentInfoItemType.NoInterest){ @@ -270,20 +291,31 @@ export const InfoWrap = () => { { getList(PaymentInfoItemType.NoInterest) } - + { !!cardCommissionBottomSheetOn && + + } + { !!transferCommissionBottomSheetOn && + + } + { +export interface TransferCommissionBottomSheetProps { + itemKey: string; + settlementPeriod?: string; + transferCommissionBottomSheetOn: boolean; + setTransferCommissionBottomSheetOn: (transferCommissionBottomSheetOn: boolean) => void; +}; + +export const TransferCommissionBottomSheet = ({ + itemKey, + settlementPeriod, + transferCommissionBottomSheetOn, + setTransferCommissionBottomSheetOn +}: TransferCommissionBottomSheetProps) => { const { t, i18n } = useTranslation(); + const onClickToClose = () => { + setTransferCommissionBottomSheetOn(false); + }; + return ( <>
@@ -18,35 +34,80 @@ export const TransferCommissionBottomSheet = () => { {t('common.close')} -
-
{t('payment.settlementPeriod')} : {t('payment.dailyPlus3Days')}
-
{t('payment.commission')}
-
-
    -
  • - {t('payment.paymentFeeMinimum')} - 1{i18n.language === 'en' ? '' : t('home.currencyWon')} -
    • -
  • - {t('payment.paymentFeeFrom1Won')} - 1{i18n.language === 'en' ? '' : t('home.currencyWon')} -
    • -
  • - {t('payment.cancellationFee')} - 1{i18n.language === 'en' ? '' : t('home.currencyWon')} -
    • -
-
- -
- +
+
+
{t('payment.settlementPeriod')} : { settlementPeriod }
+
수수료 :
+ { (itemKey === 'accountTransfer') && +
+
+ 구간 + 수수료 +
+
+   +   +
+
+ } + { (itemKey === 'virtualAccount') && +
+
+ 은행 + 수수료 +
+
+   +   +
+
+ } + { (itemKey === 'livePay' || itemKey === 'kBankPay') && +
+
+ 결제수수료 + 최저수수료 +
+
+   +   +
+
+ } + { (itemKey === 'mobilePaymentFull') && +
+
+ 구분 + 수수료 +
+
+   +   +
+
+ } + { (itemKey === 'accountSimplePayment') && +
+
+ 결제수수료 + 취소수수료 +
+
+ 최저수수료 + 1원~ + 1원~ +
+
+ } +