nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

결제정보

Browse Source
This commit is contained in:
focp212@naver.com
2025-11-19 16:35:43 +09:00
parent b71a6bf729
commit 1601ad79e2
5 changed files with 309 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/entities/home/ui/favorite-wrapper.tsx
View File

@@ -104,9 +104,7 @@ export const FavoriteWrapper = ({
const makeFavoriteItems = () => { const makeFavoriteItems = () => {
let rs = []; let rs = [];
let cnt = favoriteItems.length; let cnt = favoriteItems.length;
if(usingType === 'home'){
cnt = (cnt > 4)? 4: cnt;
}
for(let i=0;i<cnt;i++){ for(let i=0;i<cnt;i++){
const displayName = i18n.language === 'en' && favoriteItems[i]?.menuNameEng const displayName = i18n.language === 'en' && favoriteItems[i]?.menuNameEng
? favoriteItems[i]?.menuNameEng ? favoriteItems[i]?.menuNameEng

82
src/entities/payment/ui/card-commission-bottom-sheet.tsx
View File

@@ -10,6 +10,7 @@ export interface CardCommissionBottomSheetProps {
cardCommissionBottomSheetOn: boolean; cardCommissionBottomSheetOn: boolean;
setCardCommissionBottomSheetOn: (cardCommissionBottomSheetOn: boolean) => void; setCardCommissionBottomSheetOn: (cardCommissionBottomSheetOn: boolean) => void;
payType: number; payType: number;
itemKey: string;
settlementPeriod?: string; settlementPeriod?: string;
generalTabItems?: Array<GeneralTabItems>, generalTabItems?: Array<GeneralTabItems>,
installmentTabItems?: Array<InstallmentTabItems>, installmentTabItems?: Array<InstallmentTabItems>,
@@ -30,6 +31,7 @@ export const CardCommissionBottomSheet = ({
cardCommissionBottomSheetOn, cardCommissionBottomSheetOn,
setCardCommissionBottomSheetOn, setCardCommissionBottomSheetOn,
payType, payType,
itemKey,
settlementPeriod, settlementPeriod,
generalTabItems, generalTabItems,
installmentTabItems, installmentTabItems,
@@ -42,18 +44,59 @@ export const CardCommissionBottomSheet = ({
}: CardCommissionBottomSheetProps) => { }: CardCommissionBottomSheetProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const cardList = useStore.getState().CommonStore.creditCardList; const cardList = useStore.getState().CommonStore.creditCardList;
console.log(cardList);
let newCardList = cardList.filter((value, index) => value.code2 === 'pur');
const [onTab, setOnTab] = useState<CardCommissionTabKey>(CardCommissionTabKey.GENERAL); const [onTab, setOnTab] = useState<CardCommissionTabKey>(CardCommissionTabKey.GENERAL);
const [selectedCard, setSelectedCard] = useState<string>(cardList[0].desc1); const [selectedCard, setSelectedCard] = useState<string>(cardList[0].desc1);
const [leftTitle, setLeftTitle] = useState<string>('');
const [leftText, setLeftText] = useState<string>('');
const onClickToClose = () => { const onClickToClose = () => {
setCardCommissionBottomSheetOn(false); setCardCommissionBottomSheetOn(false);
}; };
const getItemList = (key?: CardCommissionTabKey) => {
let rs = [];
if(key === CardCommissionTabKey.GENERAL){
for(let i=0;i<newCardList.length;i++){
rs.push(
<div
key={`card-fee-row-${i}`}
className="card-fee-row"
>
<span>{ newCardList[i].desc1 }</span>
<span>2.000%</span>
</div>
);
}
}
return rs;
}
useEffect(() => { useEffect(() => {
// 탭 이동시 할일 // 탭 이동시 할일
}, [onTab]); }, [onTab]);
useEffect(() => {
if(!!itemKey){
if(itemKey === 'kakaoPay'){
setLeftTitle('구분');
setLeftText('카카오머니');
}
else if(itemKey === 'naverPay'){
setLeftTitle('할부개월');
setLeftText('네이버포인트');
}
else if(itemKey === 'tossPay'){
setLeftTitle('할부개원');
setLeftText('토스머니');
}
}
}, [itemKey]);
return ( return (
<> <>
{ cardCommissionBottomSheetOn && { cardCommissionBottomSheetOn &&
@@ -76,7 +119,7 @@ export const CardCommissionBottomSheet = ({
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt={t('common.close')} alt={t('common.close')}
onClick={ () => onClickToClose() } onClick={ onClickToClose }
/> />
</button> </button>
</div> </div>
@@ -109,7 +152,18 @@ export const CardCommissionBottomSheet = ({
>{t('payment.moneyPoint')}</button> >{t('payment.moneyPoint')}</button>
} }
</div> </div>
{ (onTab === CardCommissionTabKey.GENERAL) &&
<div className="card-fee-list">
<div className="card-fee-list-header">
<span className="th-left">{t('payment.cardCompany')}</span>
<span className="th-right">{t('payment.commission')}</span>
</div>
{ getItemList(CardCommissionTabKey.GENERAL) }
</div>
}
{ (onTab === CardCommissionTabKey.NO_INTEREST) &&
<>
<div className="card-fee-box"> <div className="card-fee-box">
<span className="label">{t('payment.cardCompany')}</span> <span className="label">{t('payment.cardCompany')}</span>
<div className="field wid-100"> <div className="field wid-100">
@@ -118,7 +172,7 @@ export const CardCommissionBottomSheet = ({
onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCard(e.target.value) } onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCard(e.target.value) }
> >
{ {
cardList.map((value, index) => ( newCardList.map((value, index) => (
<option <option
key={ `card-list-${value.desc1}`} key={ `card-list-${value.desc1}`}
value={ value.desc1 } value={ value.desc1 }
@@ -171,17 +225,23 @@ export const CardCommissionBottomSheet = ({
<span>9.000%</span> <span>9.000%</span>
</div> </div>
</div> </div>
</>
}
{ (onTab === CardCommissionTabKey.MONEY_POINT) &&
<>
<div className="card-fee-list-header">
<span className="th-left">{ leftTitle }</span>
<span className="th-right">{t('payment.commission')}</span>
</div>
<div className="card-fee-row">
<span>{ leftText }</span>
<span>2.000%</span>
</div>
</>
}
</div> </div>
</div> </div>
{/*
<div className="bottomsheet-footer">
<button
className="btn-50 btn-blue flex-1"
type="button"
disabled
>신청</button>
</div>
*/}
</motion.div> </motion.div>
</> </>
); );

7
src/entities/payment/ui/info-item.tsx
View File

@@ -9,6 +9,8 @@ export interface InfoItemProps {
payImage?: string; payImage?: string;
infoLink?: string; infoLink?: string;
payType?: number; payType?: number;
itemKey?: string;
setItemKey?: (itemKey: string) => void;
setPayType?: (payType: number) => void; setPayType?: (payType: number) => void;
setBottomSheetOn?: (bottomSheetOn: boolean) => void; setBottomSheetOn?: (bottomSheetOn: boolean) => void;
}; };
@@ -19,6 +21,8 @@ export const InfoItem = ({
payImage, payImage,
infoLink, infoLink,
payType, payType,
itemKey,
setItemKey,
setPayType, setPayType,
setBottomSheetOn setBottomSheetOn
}: InfoItemProps) => { }: InfoItemProps) => {
@@ -28,6 +32,9 @@ export const InfoItem = ({
if(setPayType && payType){ if(setPayType && payType){
setPayType(payType); setPayType(payType);
} }
if(setItemKey && itemKey){
setItemKey(itemKey)
}
if(setBottomSheetOn){ if(setBottomSheetOn){
setBottomSheetOn(true); setBottomSheetOn(true);
} }

84
src/entities/payment/ui/info-wrap.tsx
View File

@@ -35,6 +35,7 @@ import { usePaymentInstallmentMutation } from '../api/use-payment-installment-mu
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { showAlert } from '@/widgets/show-alert'; import { showAlert } from '@/widgets/show-alert';
import { snackBar } from '@/shared/lib'; import { snackBar } from '@/shared/lib';
import { TransferCommissionBottomSheet } from './transfer-commission-bottom-sheet';
export const InfoWrap = () => { export const InfoWrap = () => {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -49,12 +50,14 @@ export const InfoWrap = () => {
const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false); const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false);
const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false); const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false);
const [creditCardListBottomSheetOn, setCreditCardListBottomSheetOn] = 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 [cardCompany, setCardCompany] = useState<string>(t('payment.paymentMethods.bcCard'));
const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>(); const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]); const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
const [payType, setPayType] = useState<number>(2); const [payType, setPayType] = useState<number>(2);
const [itemKey, setItemKey] = useState<string>('');
const [settlementPeriod, setSettlementPeriod] = useState<string>(); const [settlementPeriod, setSettlementPeriod] = useState<string>();
const [generalTabItems, setGeneralTabItems] = useState<Array<GeneralTabItems>>([]); const [generalTabItems, setGeneralTabItems] = useState<Array<GeneralTabItems>>([]);
const [installmentTabItems, setInstallmentTabItems] = useState<Array<InstallmentTabItems>>([]); const [installmentTabItems, setInstallmentTabItems] = useState<Array<InstallmentTabItems>>([]);
@@ -78,30 +81,30 @@ export const InfoWrap = () => {
const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation(); const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();
const list1 = [ const list1 = [
{payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: '', payType: 2}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {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}, {payName: t('payment.paymentMethods.accountSimplePayment'), payImage: 'pay_24.svg', infoLink: '', payType: 1, itemKey: 'accountSimplePayment'},
]; ];
const list2 = [ const list2 = [
@@ -115,6 +118,20 @@ export const InfoWrap = () => {
let rs = []; let rs = [];
if(type === PaymentInfoItemType.Comission){ if(type === PaymentInfoItemType.Comission){
for(let i=0;i<list1.length;i++){ for(let i=0;i<list1.length;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( rs.push(
<InfoItem <InfoItem
key={ `comission-info-wrap-${i}` } key={ `comission-info-wrap-${i}` }
@@ -122,12 +139,16 @@ export const InfoWrap = () => {
payName={ list1[i]?.payName } payName={ list1[i]?.payName }
payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage } payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
infoLink={ list1[i]?.infoLink } infoLink={ list1[i]?.infoLink }
payType={ list1[i]?.payType } payType={ payType }
itemKey={ itemKey }
setItemKey={ setItemKey }
setPayType={ setPayType } setPayType={ setPayType }
setBottomSheetOn={ setCardCommissionBottomSheetOn } setBottomSheetOn={ newBottomSheetOn }
></InfoItem> ></InfoItem>
); );
} }
}
} }
else if(type === PaymentInfoItemType.NoInterest){ else if(type === PaymentInfoItemType.NoInterest){
for(let i=0;i<list2.length;i++){ for(let i=0;i<list2.length;i++){
@@ -270,10 +291,12 @@ export const InfoWrap = () => {
{ getList(PaymentInfoItemType.NoInterest) } { getList(PaymentInfoItemType.NoInterest) }
</ul> </ul>
</div> </div>
{ !!cardCommissionBottomSheetOn &&
<CardCommissionBottomSheet <CardCommissionBottomSheet
cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn } cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn } setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
payType={ payType } payType={ payType }
itemKey={ itemKey }
settlementPeriod={ settlementPeriod } settlementPeriod={ settlementPeriod }
generalTabItems={ generalTabItems } generalTabItems={ generalTabItems }
installmentTabItems={ installmentTabItems } installmentTabItems={ installmentTabItems }
@@ -284,6 +307,15 @@ export const InfoWrap = () => {
categoryFees={ categoryFees } categoryFees={ categoryFees }
feeRate={ feeRate } feeRate={ feeRate }
></CardCommissionBottomSheet> ></CardCommissionBottomSheet>
}
{ !!transferCommissionBottomSheetOn &&
<TransferCommissionBottomSheet
itemKey={ itemKey }
transferCommissionBottomSheetOn={ transferCommissionBottomSheetOn }
setTransferCommissionBottomSheetOn={ setTransferCommissionBottomSheetOn }
></TransferCommissionBottomSheet>
}
<CreditCardListBottomSheet <CreditCardListBottomSheet
creditCardListBottomSheetOn={ creditCardListBottomSheetOn } creditCardListBottomSheetOn={ creditCardListBottomSheetOn }
setCreditCardListBottomSheetOn={ setCreditCardListBottomSheetOn } setCreditCardListBottomSheetOn={ setCreditCardListBottomSheetOn }

111
src/entities/payment/ui/transfer-commission-bottom-sheet.tsx
View File

@@ -1,9 +1,25 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
export const TransferCommissionBottomSheet = () => { 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 { t, i18n } = useTranslation();
const onClickToClose = () => {
setTransferCommissionBottomSheetOn(false);
};
return ( return (
<> <>
<div className="bg-dim"></div> <div className="bg-dim"></div>
@@ -18,35 +34,80 @@ export const TransferCommissionBottomSheet = () => {
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt={t('common.close')} alt={t('common.close')}
onClick={ onClickToClose }
/> />
</button> </button>
</div> </div>
</div> </div>
<div className="fee-cycle"> <div className="bottomsheet-content">
<div className="desc dot">{t('payment.settlementPeriod')} : {t('payment.dailyPlus3Days')}</div> <div className="card-fee">
<div className="desc dot">{t('payment.commission')}</div> <div className="desc">{t('payment.settlementPeriod')} : { settlementPeriod }</div>
<div className="divider"></div> <div
<ul className="kv-list"> className="desc"
<li className="kv-row pl-10"> style={{ paddingBottom: 0 }}
<span className="k">{t('payment.paymentFeeMinimum')}</span> >수수료 :</div>
<span className="v">1{i18n.language === 'en' ? '' : t('home.currencyWon')}</span> { (itemKey === 'accountTransfer') &&
</li> <div className="card-fee-list">
<li className="kv-row pl-10"> <div className="card-fee-list-header">
<span className="k">{t('payment.paymentFeeFrom1Won')}</span> <span className="th-left">구간</span>
<span className="v">1{i18n.language === 'en' ? '' : t('home.currencyWon')}</span> <span className="th-right">수수료</span>
</li> </div>
<li className="kv-row pl-10"> <div className="card-fee-row">
<span className="k">{t('payment.cancellationFee')}</span> <span>&nbsp;</span>
<span className="v">1{i18n.language === 'en' ? '' : t('home.currencyWon')}</span> <span>&nbsp;</span>
</li> </div>
</ul> </div>
}
{ (itemKey === 'virtualAccount') &&
<div className="card-fee-list">
<div className="card-fee-list-header">
<span className="th-left">은행</span>
<span className="th-right">수수료</span>
</div>
<div className="card-fee-row">
<span>&nbsp;</span>
<span>&nbsp;</span>
</div>
</div>
}
{ (itemKey === 'livePay' || itemKey === 'kBankPay') &&
<div className="card-fee-list">
<div className="card-fee-list-header">
<span className="th-left">결제수수료</span>
<span className="th-right">최저수수료</span>
</div>
<div className="card-fee-row">
<span>&nbsp;</span>
<span>&nbsp;</span>
</div>
</div>
}
{ (itemKey === 'mobilePaymentFull') &&
<div className="card-fee-list">
<div className="card-fee-list-header">
<span className="th-left">구분</span>
<span className="th-right">수수료</span>
</div>
<div className="card-fee-row">
<span>&nbsp;</span>
<span>&nbsp;</span>
</div>
</div>
}
{ (itemKey === 'accountSimplePayment') &&
<div className="card-fee-list">
<div className="card-fee-list-header">
<span className="th-left">결제수수료</span>
<span className="th-right">취소수수료</span>
</div>
<div className="card-fee-row">
<span>최저수수료</span>
<span>1원~</span>
<span>1원~</span>
</div>
</div>
}
</div> </div>
<div className="bottomsheet-footer">
<button
className="btn-50 btn-blue flex-1"
type="button"
>{t('common.confirm')}</button>
</div> </div>
</div> </div>
</> </>