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

추가이미지 / css 수정 / 결제 정보 수정

Browse Source
This commit is contained in:
focp212@naver.com
2025-09-09 09:46:01 +09:00
parent 484c06fba0
commit 337ac1bf97
15 changed files with 231 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/entities/payment/model/types.ts
View File

@@ -4,4 +4,9 @@ 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
View 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() }
>수수료 및 정산주기 &gt;</button>
</li>
</>
)
};

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

@@ -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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</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"
>수수료 및 정산주기 &gt;</button>
</li>
{ getList('NoInterest') }
</ul>
</div>
</>

7
src/shared/ui/assets/css/style.css
View File

@@ -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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

9
src/shared/ui/assets/images/mail_nicepay_logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

9
src/shared/ui/assets/images/mail_nicepay_logo_gray.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB