추가이미지 / css 수정 / 결제 정보 수정
11
public/images/ico_search_16.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2631_1197)">
|
||||
<circle cx="6.3" cy="6.3" r="5.55" stroke="#2D3436" stroke-width="1.5"/>
|
||||
<path d="M14.6293 15.5303C14.9222 15.8232 15.3971 15.8232 15.69 15.5303C15.9829 15.2374 15.9829 14.7626 15.69 14.4697L15.1597 15L14.6293 15.5303ZM10.1597 10L9.62934 10.5303L14.6293 15.5303L15.1597 15L15.69 14.4697L10.69 9.46967L10.1597 10Z" fill="#2D3436"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2631_1197">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 580 B |
21
public/images/mail_download.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17 22H53L63 43H7L17 22Z" fill="url(#paint0_linear_2456_7153)"/>
|
||||
<path d="M17 8C17 5.79086 18.7909 4 21 4H49C51.2091 4 53 5.79086 53 8V41H17V8Z" fill="#D9D9D9"/>
|
||||
<path d="M20 6.5H50C51.933 6.5 53.5 8.067 53.5 10V50.5H16.5V10C16.5 8.067 18.067 6.5 20 6.5Z" fill="url(#paint1_linear_2456_7153)" stroke="#D9D9D9"/>
|
||||
<path d="M63 60C63 62.2091 61.2091 64 59 64H11C8.79086 64 7 62.2091 7 60V43H25.5L26.5049 47.4414C26.7111 48.3528 27.5207 48.9999 28.4551 49H41.5449C42.4793 48.9999 43.2889 48.3528 43.4951 47.4414L44.5 43H63V60Z" fill="url(#paint2_linear_2456_7153)"/>
|
||||
<path d="M39.5334 27.6143C39.5334 27.8904 39.7573 28.1143 40.0334 28.1143H42.6231C43.0786 28.1143 43.2968 28.6737 42.9617 28.9821L35.5 35.8504C35.3086 36.0266 35.0141 36.0266 34.8228 35.8504L27.3611 28.9821C27.0259 28.6737 27.2442 28.1143 27.6997 28.1143H30.2903C30.5664 28.1143 30.7903 27.8904 30.7903 27.6143V17.5C30.7903 17.2239 31.0141 17 31.2903 17H39.0334C39.3096 17 39.5334 17.2239 39.5334 17.5V27.6143Z" fill="#429AFF"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_2456_7153" x1="35" y1="22" x2="35" y2="43" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3D76C1"/>
|
||||
<stop offset="1" stop-color="#2966B5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_2456_7153" x1="35" y1="6" x2="35" y2="51" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#F1F1F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_2456_7153" x1="35" y1="43" x2="35" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8FC1FC"/>
|
||||
<stop offset="1" stop-color="#5798E3"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
9
public/images/mail_nicepay_logo.svg
Normal file
|
After Width: | Height: | Size: 7.7 KiB |
9
public/images/mail_nicepay_logo_gray.svg
Normal file
|
After Width: | Height: | Size: 7.1 KiB |
10
public/images/pay_21.svg
Normal file
|
After Width: | Height: | Size: 78 KiB |
8
public/images/pay_22.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="12" fill="#0517A1"/>
|
||||
<path d="M8.4238 10.6253C8.06564 10.6253 7.73218 10.7516 7.48826 10.9826L7.40489 11.0612V9.2666H6.44928V12.3336C6.44928 13.4782 7.13473 14.1883 8.23855 14.1883C9.34236 14.1883 10.1004 13.4412 10.1004 12.4106C10.1004 11.3801 9.39485 10.6253 8.4238 10.6253ZM8.27097 13.3164C7.76923 13.3164 7.36012 12.9082 7.36012 12.4091C7.36012 11.91 7.76923 11.5002 8.27097 11.5002C8.7727 11.5002 9.18181 11.9085 9.18181 12.4091C9.18181 12.9097 8.7727 13.3164 8.27097 13.3164Z" fill="white"/>
|
||||
<path d="M4.85758 9.2666L2.96642 11.4556V9.2666H2V14.0759H2.96642V11.9054L4.89617 14.0759H6.13893L4.00385 11.6712L6.08181 9.2666H4.85758Z" fill="white"/>
|
||||
<path d="M22 10.7377H20.9363L19.7121 12.1796V9.2666H18.7565V14.0774H19.7121V12.634L20.9363 14.0774H22L20.5843 12.406L22 10.7377Z" fill="white"/>
|
||||
<path d="M16.8839 10.625C16.2941 10.625 15.9298 10.9007 15.7553 11.0933V10.739H14.8322V14.0771H15.7878V12.2594C15.7878 11.805 16.1042 11.4876 16.501 11.4876C16.8978 11.4876 17.2158 11.805 17.2158 12.2594V14.0771H18.1714V11.9729C18.1714 11.1919 17.6033 10.625 16.8823 10.625H16.8839Z" fill="white"/>
|
||||
<path d="M12.3914 10.625C11.3246 10.625 10.5496 11.3752 10.5496 12.4104C10.5496 13.4455 11.2644 14.1896 12.2478 14.1896C13.2312 14.1896 13.3207 13.6843 13.3238 13.6797L13.3779 13.6042V14.0771H14.247V12.4104C14.247 11.3767 13.4674 10.625 12.3914 10.625ZM12.4207 13.3161C11.919 13.3161 11.5099 12.9079 11.5099 12.4088C11.5099 11.9097 11.919 11.5 12.4207 11.5C12.9224 11.5 13.3316 11.9082 13.3316 12.4088C13.3316 12.9095 12.9224 13.3161 12.4207 13.3161Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
7
public/images/pay_23.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="12" fill="#3E6AFC"/>
|
||||
<path d="M7 8C7 7.44772 7.44772 7 8 7H16C16.5523 7 17 7.44772 17 8V13C13.0948 13 10.9052 13 7 13V8Z" fill="#E3EFFF"/>
|
||||
<path d="M7.48452 12.2676C7.5709 12.1031 7.74139 12 7.92722 12H16.0728C16.2586 12 16.4291 12.1031 16.5155 12.2676L18.6155 16.2676C18.7903 16.6005 18.5488 17 18.1728 17H5.82722C5.45119 17 5.20973 16.6005 5.38452 16.2676L7.48452 12.2676Z" fill="#E3EFFF"/>
|
||||
<path d="M9 9H12.5" stroke="#3E6AFC" stroke-linecap="round"/>
|
||||
<path d="M7 13L17 13" stroke="#3E6AFC" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 649 B |
12
public/images/pay_24.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2647_7386)">
|
||||
<circle cx="12" cy="12" r="12" fill="#3E6AFC"/>
|
||||
<rect x="4" y="7" width="16" height="10" rx="2" fill="white"/>
|
||||
<path d="M6.56543 13.333L6.62695 12.3896L5.84082 12.916L5.51953 12.3623L6.36719 11.9453L5.51953 11.5215L5.84082 10.9678L6.62695 11.4941L6.56543 10.5508H7.20801L7.14648 11.4941L7.93262 10.9678L8.25391 11.5215L7.40625 11.9453L8.25391 12.3623L7.93262 12.916L7.14648 12.3896L7.20801 13.333H6.56543ZM9.98887 13.333L10.0504 12.3896L9.26426 12.916L8.94297 12.3623L9.79063 11.9453L8.94297 11.5215L9.26426 10.9678L10.0504 11.4941L9.98887 10.5508H10.6314L10.5699 11.4941L11.3561 10.9678L11.6773 11.5215L10.8297 11.9453L11.6773 12.3623L11.3561 12.916L10.5699 12.3896L10.6314 13.333H9.98887ZM13.4123 13.333L13.4738 12.3896L12.6877 12.916L12.3664 12.3623L13.2141 11.9453L12.3664 11.5215L12.6877 10.9678L13.4738 11.4941L13.4123 10.5508H14.0549L13.9934 11.4941L14.7795 10.9678L15.1008 11.5215L14.2531 11.9453L15.1008 12.3623L14.7795 12.916L13.9934 12.3896L14.0549 13.333H13.4123ZM16.8357 13.333L16.8973 12.3896L16.1111 12.916L15.7898 12.3623L16.6375 11.9453L15.7898 11.5215L16.1111 10.9678L16.8973 11.4941L16.8357 10.5508H17.4783L17.4168 11.4941L18.2029 10.9678L18.5242 11.5215L17.6766 11.9453L18.5242 12.3623L18.2029 12.916L17.4168 12.3896L17.4783 13.333H16.8357Z" fill="#3E6AFC"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2647_7386">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -5,3 +5,8 @@ export enum PaymentTabKeys {
|
||||
export interface PaymentTabProps {
|
||||
activeTab: PaymentTabKeys;
|
||||
};
|
||||
export interface InfoItemProps {
|
||||
payName?: string;
|
||||
payImage?: string;
|
||||
infoLink?: string;
|
||||
};
|
||||
34
src/entities/payment/ui/info-item.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { InfoItemProps } from '../model/types';
|
||||
|
||||
export const InfoItem = ({
|
||||
payName,
|
||||
payImage,
|
||||
infoLink
|
||||
}: InfoItemProps) => {
|
||||
|
||||
const onClickToShow = () => {
|
||||
if(!!infoLink){
|
||||
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ payImage }
|
||||
alt={ payName }
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">{ payName }</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
onClick={ () => onClickToShow() }
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
</>
|
||||
)
|
||||
};
|
||||
@@ -1,361 +1,76 @@
|
||||
import { IMAGE_ROOT } from "@/shared/constants/common";
|
||||
import { InfoItem } from "./info-item";
|
||||
import { InfoItemProps } from "../model/types";
|
||||
|
||||
export const InfoWrap = () => {
|
||||
|
||||
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: 'comission' | 'NoInterest') => {
|
||||
let rs = [];
|
||||
let arr: Array<InfoItemProps> = [];
|
||||
if(type === 'comission'){
|
||||
arr = list1;
|
||||
}
|
||||
else if(type === 'NoInterest'){
|
||||
arr = list2;
|
||||
}
|
||||
for(let i=0;i<arr.length;i++){
|
||||
rs.push(
|
||||
<InfoItem
|
||||
payName={ arr[i]?.payName }
|
||||
payImage={ IMAGE_ROOT + '/' + arr[i]?.payImage }
|
||||
infoLink={ arr[i]?.infoLink }
|
||||
></InfoItem>
|
||||
);
|
||||
}
|
||||
return rs;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="ing-list">
|
||||
<div className="ing-title">서비스 이용, 수수료 및 정산주기</div>
|
||||
<ul className="ing-card-list">
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_01.svg' }
|
||||
alt="신용카드"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">신용카드</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_02.svg' }
|
||||
alt="카카오페이"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">카카오페이</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_03.svg' }
|
||||
alt="네이버페이"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">네이버페이</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_04.svg' }
|
||||
alt="삼성페이"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">삼성페이</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_05.svg' }
|
||||
alt="계좌이체"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">계좌이체</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_06.svg' }
|
||||
alt="휴대폰결제"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">휴대폰결제</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_07.svg' }
|
||||
alt="문화상품권"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">문화상품권</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_08.svg' }
|
||||
alt="SSG머니"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">SSG머니</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_09.svg' }
|
||||
alt="TV페이"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">TV페이</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_10.svg' }
|
||||
alt="삼성페이(카드)"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">삼성페이(카드)</span>
|
||||
</div>
|
||||
<button
|
||||
className ="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_11.svg' }
|
||||
alt="애플페이"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">애플페이</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_12.svg' }
|
||||
alt="토스페이"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">토스페이</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_13.svg' }
|
||||
alt="PAYCO"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">PAYCO</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_14.svg' }
|
||||
alt="리브페이"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">리브페이</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_14.svg' }
|
||||
alt="대만결제"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">대만결제</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_15.svg' }
|
||||
alt="티머니페이"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">티머니페이</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_16.svg' }
|
||||
alt="L.PAY"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">L.PAY</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_17.svg' }
|
||||
alt="PAYU"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">PAYU</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_18.svg' }
|
||||
alt="TW라인페이"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">TW라인페이</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
{ getList('comission') }
|
||||
</ul>
|
||||
|
||||
<div className="ing-title">가맹점 분담 무이자 정보</div>
|
||||
<ul className="ing-card-list">
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_01.svg' }
|
||||
alt="신용카드"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">신용카드</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_20.svg' }
|
||||
alt="SK PAY"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">SK PAY</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_09.svg' }
|
||||
alt="TV페이"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">TV페이</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
<li className="ing-card">
|
||||
<div className="ing-card-head">
|
||||
<div className="ing-card-icon">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/pay_04.svg' }
|
||||
alt="삼성페이(카드)"
|
||||
/>
|
||||
</div>
|
||||
<span className="ing-card-name">삼성페이(카드)</span>
|
||||
</div>
|
||||
<button
|
||||
className="ing-card-link"
|
||||
type="button"
|
||||
>수수료 및 정산주기 ></button>
|
||||
</li>
|
||||
{ getList('NoInterest') }
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
@charset "utf-8";
|
||||
@import 'reset.css';
|
||||
@import 'fonts.css';
|
||||
@import 'safearea.css';
|
||||
|
||||
:root {
|
||||
|
||||
@@ -5681,6 +5680,7 @@ ul.txn-amount-detail li span:last-child {
|
||||
.inq-form {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.inq-field {
|
||||
display: grid;
|
||||
grid-template-columns: 90px 1fr;
|
||||
@@ -5688,17 +5688,20 @@ ul.txn-amount-detail li span:last-child {
|
||||
gap: 10px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.inq-label {
|
||||
font-size: var(--fs-16);
|
||||
font-weight: var(--fw-500);
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
.inq-label .red, .inq-text-label .red { color: var(--color-EB5757); }
|
||||
.inq-control input,
|
||||
.inq-control select {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.inq-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -5706,11 +5709,13 @@ ul.txn-amount-detail li span:last-child {
|
||||
padding: 0 0 30px 0;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.inq-text-label {
|
||||
font-size: var(--fs-16);
|
||||
font-weight: var(--fw-500);
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
.inq-text-body textarea {
|
||||
width: 100%;
|
||||
min-height: 150px;
|
||||
|
||||
21
src/shared/ui/assets/images/mail_download.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17 22H53L63 43H7L17 22Z" fill="url(#paint0_linear_2456_7153)"/>
|
||||
<path d="M17 8C17 5.79086 18.7909 4 21 4H49C51.2091 4 53 5.79086 53 8V41H17V8Z" fill="#D9D9D9"/>
|
||||
<path d="M20 6.5H50C51.933 6.5 53.5 8.067 53.5 10V50.5H16.5V10C16.5 8.067 18.067 6.5 20 6.5Z" fill="url(#paint1_linear_2456_7153)" stroke="#D9D9D9"/>
|
||||
<path d="M63 60C63 62.2091 61.2091 64 59 64H11C8.79086 64 7 62.2091 7 60V43H25.5L26.5049 47.4414C26.7111 48.3528 27.5207 48.9999 28.4551 49H41.5449C42.4793 48.9999 43.2889 48.3528 43.4951 47.4414L44.5 43H63V60Z" fill="url(#paint2_linear_2456_7153)"/>
|
||||
<path d="M39.5334 27.6143C39.5334 27.8904 39.7573 28.1143 40.0334 28.1143H42.6231C43.0786 28.1143 43.2968 28.6737 42.9617 28.9821L35.5 35.8504C35.3086 36.0266 35.0141 36.0266 34.8228 35.8504L27.3611 28.9821C27.0259 28.6737 27.2442 28.1143 27.6997 28.1143H30.2903C30.5664 28.1143 30.7903 27.8904 30.7903 27.6143V17.5C30.7903 17.2239 31.0141 17 31.2903 17H39.0334C39.3096 17 39.5334 17.2239 39.5334 17.5V27.6143Z" fill="#429AFF"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_2456_7153" x1="35" y1="22" x2="35" y2="43" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3D76C1"/>
|
||||
<stop offset="1" stop-color="#2966B5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_2456_7153" x1="35" y1="6" x2="35" y2="51" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#F1F1F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_2456_7153" x1="35" y1="43" x2="35" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8FC1FC"/>
|
||||
<stop offset="1" stop-color="#5798E3"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
9
src/shared/ui/assets/images/mail_nicepay_logo.svg
Normal file
|
After Width: | Height: | Size: 7.7 KiB |
9
src/shared/ui/assets/images/mail_nicepay_logo_gray.svg
Normal file
|
After Width: | Height: | Size: 7.1 KiB |