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-24 15:39:49 +09:00
parent 06dc05da65
commit 02b3d2faa4
1 changed files with 44 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,11 +52,14 @@ export const CardCommissionBottomSheet = ({
// let newCardList = cardList.filter((value, index) => useCodes.includes(value.code1)); // let newCardList = cardList.filter((value, index) => useCodes.includes(value.code1));
const [newGeneralTabItems, setNewGeneralTabItems] = useState<Record<string, any>>({}); const [newGeneralTabItems, setNewGeneralTabItems] = useState<Record<string, any>>({});
const [newInstallmentTabItems, setNewInstallmentTabItems] = useState<Array<InstallmentTabItems> | undefined>();
const [newMoneyPointTabItems, setNewMoneyPointTabItems] = useState<Array<MoneyPointTabItems> | undefined>();
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 [moneyPointTitle, setMoneyPointTitle] = useState<string>('');
const [leftText, setLeftText] = useState<string>(''); const [moneyPointText, setMoneyPointText] = useState<string>('');
const [moneyPointRate, setMoneyPointRate] = useState<string>();
const onClickToClose = () => { const onClickToClose = () => {
setCardCommissionBottomSheetOn(false); setCardCommissionBottomSheetOn(false);
@@ -77,7 +80,7 @@ export const CardCommissionBottomSheet = ({
className="card-fee-row" className="card-fee-row"
> >
<span>{ cardCompany }</span> <span>{ cardCompany }</span>
<span>{ feeRate || ''}</span> <span>{ feeRate+'%' || ''}</span>
</div> </div>
); );
} }
@@ -86,6 +89,12 @@ export const CardCommissionBottomSheet = ({
} }
return rs; return rs;
} }
const getMoneyPointRate = (itemKey: string) => {
let items = moneyPointTabItems?.filter((value, index) => {
return value.category === itemKey;
});
setNewMoneyPointTabItems(items);
};
useEffect(() => { useEffect(() => {
// 탭 이동시 할일 // 탭 이동시 할일
@@ -93,25 +102,33 @@ export const CardCommissionBottomSheet = ({
useEffect(() => { useEffect(() => {
if(!!itemKey){ if(!!itemKey){
getMoneyPointRate(itemKey);
if(itemKey === 'kakaoPay'){ if(itemKey === 'kakaoPay'){
setLeftTitle('구분'); setMoneyPointTitle('구분');
setLeftText('카카오머니'); setMoneyPointText('카카오머니');
} }
else if(itemKey === 'naverPay'){ else if(itemKey === 'naverPay'){
setLeftTitle('할부개월'); setMoneyPointTitle('할부개월');
setLeftText('네이버포인트'); setMoneyPointText('네이버포인트');
} }
else if(itemKey === 'tossPay'){ else if(itemKey === 'tossPay'){
setLeftTitle('할부개원'); setMoneyPointTitle('할부개원');
setLeftText('토스머니'); setMoneyPointText('토스머니');
} }
} }
}, [itemKey]); }, [itemKey]);
const getInstallmentTabItems = () => {
let items = installmentTabItems?.filter((value, index) => {
return value.cardCompany === selectedCard;
});
setNewInstallmentTabItems(items);
}
useEffect(() => { useEffect(() => {
if(onTab === CardCommissionTabKey.NO_INTEREST){ if(onTab === CardCommissionTabKey.NO_INTEREST && !!selectedCard){
getInstallmentTabItems();
} }
}, [selectedCard]); }, [selectedCard]);
@@ -215,42 +232,13 @@ export const CardCommissionBottomSheet = ({
<span className="th-left">{t('payment.installmentMonths')}</span> <span className="th-left">{t('payment.installmentMonths')}</span>
<span className="th-right">{t('payment.commission')}</span> <span className="th-right">{t('payment.commission')}</span>
</div> </div>
<div className="card-fee-row"> { !!newInstallmentTabItems && newInstallmentTabItems.map((value, index) => (
<span>{t('payment.months', { count: 2 })}</span> <div className="card-fee-row">
<span>2.000%</span> <span>{t('payment.months', { count: parseInt(value.installmentMonth.substring(0, 1)) })}</span>
</div> <span>{ value.feeRate+'%' || '' }</span>
<div className="card-fee-row"> </div>
<span>{t('payment.months', { count: 3 })}</span> ))
<span>3.100%</span> }
</div>
<div className="card-fee-row">
<span>{t('payment.months', { count: 4 })}</span>
<span>4.400%</span>
</div>
<div className="card-fee-row">
<span>{t('payment.months', { count: 5 })}</span>
<span>5.200%</span>
</div>
<div className="card-fee-row">
<span>{t('payment.months', { count: 6 })}</span>
<span>6.000%</span>
</div>
<div className="card-fee-row">
<span>{t('payment.months', { count: 7 })}</span>
<span>6.600%</span>
</div>
<div className="card-fee-row">
<span>{t('payment.months', { count: 8 })}</span>
<span>7.500%</span>
</div>
<div className="card-fee-row">
<span>{t('payment.months', { count: 9 })}</span>
<span>8.000%</span>
</div>
<div className="card-fee-row">
<span>{t('payment.months', { count: 10 })}</span>
<span>9.000%</span>
</div>
</div> </div>
</> </>
} }
@@ -258,13 +246,16 @@ export const CardCommissionBottomSheet = ({
{ (onTab === CardCommissionTabKey.MONEY_POINT) && { (onTab === CardCommissionTabKey.MONEY_POINT) &&
<> <>
<div className="card-fee-list-header"> <div className="card-fee-list-header">
<span className="th-left">{ leftTitle }</span> <span className="th-left">{ moneyPointTitle }</span>
<span className="th-right">{t('payment.commission')}</span> <span className="th-right">{t('payment.commission')}</span>
</div> </div>
<div className="card-fee-row"> { !!newMoneyPointTabItems && newMoneyPointTabItems.map((value, index) => (
<span>{ leftText }</span> <div className="card-fee-row">
<span>2.000%</span> <span>{ value.category }</span>
</div> <span>{ value.feeRate+'%' || '' }</span>
</div>
))
}
</> </>
} }
</div> </div>