98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
import { IMAGE_ROOT } from "@/shared/constants/common";
|
|
import { InfoItem } from "./info-item";
|
|
import { InfoItemProps, PaymentCardResponse, PaymentInfoItemType, PaymentInstallmentResponse, PaymentNonCardResponse } from "../model/types";
|
|
|
|
export interface InfoWrapProp {
|
|
paymentCard?: PaymentCardResponse,
|
|
paymentNonCard?: PaymentNonCardResponse,
|
|
paymentInstallment?: PaymentInstallmentResponse
|
|
};
|
|
export const InfoWrap = ({
|
|
paymentCard,
|
|
paymentNonCard,
|
|
paymentInstallment
|
|
}: InfoWrapProp) => {
|
|
|
|
|
|
const list1 = [
|
|
{payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
|
|
{payName: '카카오페이', payImage: 'pay_02.svg', infoLink: ''},
|
|
{payName: '네이버페이', payImage: 'pay_03.svg', infoLink: ''},
|
|
{payName: '삼성페이', payImage: 'pay_04.svg', infoLink: ''},
|
|
{payName: '계좌이체', payImage: 'pay_05.svg', infoLink: ''},
|
|
{payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: ''},
|
|
{payName: '문화상품권', payImage: 'pay_07.svg', infoLink: ''},
|
|
{payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: ''},
|
|
{payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''},
|
|
{payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: ''},
|
|
{payName: '애플페이', payImage: 'pay_11.svg', infoLink: ''},
|
|
{payName: '토스페이', payImage: 'pay_12.svg', infoLink: ''},
|
|
{payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: ''},
|
|
{payName: '리브페이', payImage: 'pay_14.svg', infoLink: ''},
|
|
{payName: '대만결제', payImage: 'pay_15.svg', infoLink: ''},
|
|
{payName: '티머니페이', payImage: 'pay_16.svg', infoLink: ''},
|
|
{payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: ''},
|
|
{payName: 'PAYU', payImage: 'pay_18.svg', infoLink: ''},
|
|
{payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: ''},
|
|
{payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: ''},
|
|
{payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: ''},
|
|
{payName: '가상계좌', payImage: 'pay_23.svg', infoLink: ''},
|
|
{payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: ''},
|
|
{payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: ''},
|
|
];
|
|
|
|
const list2 = [
|
|
{payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
|
|
{payName: 'SK PAY', payImage: 'pay_20.svg', infoLink: ''},
|
|
{payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''},
|
|
{payName: '삼성페이(카드)', payImage: 'pay_04.svg', infoLink: ''},
|
|
];
|
|
|
|
const getList = (type: PaymentInfoItemType) => {
|
|
let rs = [];
|
|
if(type === PaymentInfoItemType.Comission){
|
|
for(let i=0;i<list1.length;i++){
|
|
rs.push(
|
|
<InfoItem
|
|
type={ type }
|
|
payName={ list1[i]?.payName }
|
|
payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
|
|
infoLink={ list1[i]?.infoLink }
|
|
></InfoItem>
|
|
);
|
|
}
|
|
}
|
|
else if(type === PaymentInfoItemType.NoInterest){
|
|
for(let i=0;i<list2.length;i++){
|
|
rs.push(
|
|
<InfoItem
|
|
type={ type }
|
|
payName={ list2[i]?.payName }
|
|
payImage={ IMAGE_ROOT + '/' + list2[i]?.payImage }
|
|
infoLink={ list2[i]?.infoLink }
|
|
></InfoItem>
|
|
);
|
|
}
|
|
}
|
|
|
|
return rs;
|
|
}
|
|
|
|
|
|
return (
|
|
<>
|
|
<div className="ing-list">
|
|
<div className="ing-title">서비스 이용, 수수료 및 정산주기</div>
|
|
<ul className="ing-card-list">
|
|
{ getList(PaymentInfoItemType.Comission) }
|
|
</ul>
|
|
|
|
<div className="ing-title">가맹점 분담 무이자 정보</div>
|
|
<ul className="ing-card-list">
|
|
{ getList(PaymentInfoItemType.NoInterest) }
|
|
</ul>
|
|
</div>
|
|
|
|
</>
|
|
);
|
|
}; |