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>
</>