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-09-05 15:36:48 +09:00
commit 05238b04c1
825 changed files with 176358 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/entities/payment/ui/card-commission-bottom-sheet.tsx Normal file
View File

@@ -0,0 +1,108 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
export const CardCommissionCycleBottomSheet = () => {
return (
<>
<div className="bg-dim"></div>
<div className="bottomsheet">
<div className="bottomsheet-header">
<div className="bottomsheet-title">
<h2>수수료 및 정산주기</h2>
<button
className="close-btn"
type="button"
>
<img
src={ IMAGE_ROOT + '/images/ico_close.svg' }
alt="닫기"
/>
</button>
</div>
</div>
<div className="bottomsheet-content">
<div className="card-fee">
<div className="desc">정산주기 : 일일(+3일)</div>
<div className="notice-tabs">
<button
className="tab36 on"
type="button"
>일반</button>
<button
className="tab36"
type="button"
>무이자</button>
<button
className="tab36"
type="button"
>머니/포인트</button>
</div>
<div className="card-fee-box">
<span className="label">카드사</span>
<div className="field wid-100">
<select>
<option>KB국민</option>
</select>
</div>
</div>
<div className="card-fee-list">
<div className="card-fee-list-header">
<span className="th-left">할부개월</span>
<span className="th-right">수수료</span>
</div>
<div className="card-fee-row">
<span>02 개월</span>
<span>2.000%</span>
</div>
<div className="card-fee-row">
<span>03 개월</span>
<span>3.100%</span>
</div>
<div className="card-fee-row">
<span>04 개월</span>
<span>4.400%</span>
</div>
<div className="card-fee-row">
<span>05 개월</span>
<span>5.200%</span>
</div>
<div className="card-fee-row">
<span>06 개월</span>
<span>6.000%</span>
</div>
<div className="card-fee-row">
<span>07 개월</span>
<span>6.600%</span>
</div>
<div className="card-fee-row">
<span>08 개월</span>
<span>7.500%</span>
</div>
<div className="card-fee-row">
<span>09 개월</span>
<span>8.000%</span>
</div>
<div className="card-fee-row">
<span>10 개월</span>
<span>9.000%</span>
</div>
</div>
</div>
</div>
{/*
<div className="bottomsheet-footer">
<button
className="btn-50 btn-blue flex-1"
type="button"
disabled
>신청</button>
</div>
*/}
</div>
</>
);
};

65
src/entities/payment/ui/credit-card-list-bottom-sheet.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
export const CreditCardListBottomSheet = () => {
return (
<>
<div className="bg-dim"></div>
<div className="bottomsheet">
<div className="bottomsheet-header">
<div className="bottomsheet-title">
<h2>카드사</h2>
<button
className="close-btn"
type="button"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
/>
</button>
</div>
</div>
<div className="bottomsheet-content">
<div className="card-list">
<div className="card-option selected">
<span className="name">KB국민</span>
<i className="check"></i>
</div>
<div className="card-option">
<span className="name">비씨</span>
<i className="check"></i>
</div>
<div className="card-option">
<span className="name">하나(외환)</span>
<i className="check"></i>
</div>
<div className="card-option">
<span className="name">삼성</span>
<i className="check"></i>
</div>
<div className="card-option">
<span className="name">신한</span>
<i className="check"></i>
</div>
<div className="card-option">
<span className="name">현대</span>
<i className="check"></i>
</div>
<div className="card-option">
<span className="name">롯데</span>
<i className="check"></i>
</div>
</div>
</div>
<div className="bottomsheet-footer">
<button
className="btn-50 btn-blue flex-1"
type="button"
>확인</button>
</div>
</div>
</>
);
};

60
src/entities/payment/ui/data-notification-wrap.tsx Normal file
View File

@@ -0,0 +1,60 @@
export const DataNotificationWrap = () => {
return (
<>
<div className="ing-list">
<div className="input-wrapper top-select mt-16">
<select>
<option value="1">nicetest00g</option>
<option value="2">nicetest00g</option>
<option value="3">nicetest00g</option>
</select>
</div>
<div className="notify-container">
<div className="notify-header">
<h3 className="notify-title">결제데이터 통보 조회</h3>
</div>
<ul className="notify-list">
<li>
<div className="notify-row">
<span className="notify-name">신용카드</span>
<span className="ic20 arrow-down"></span>
</div>
</li>
<li className="notify-divider"></li>
<li>
<div className="notify-row">
<span className="notify-name">계좌이체</span>
<span className="ic20 arrow-down"></span>
</div>
</li>
<li className="notify-divider"></li>
<li>
<div className="notify-row">
<span className="notify-name">가상계좌</span>
<span className="ic20 arrow-down"></span>
</div>
</li>
<li className="notify-divider"></li>
<li>
<div className="notify-row">
<span className="notify-name">휴대폰</span>
<span className="ic20 arrow-down"></span>
</div>
</li>
<li>
<div className="notify-row">
<span className="notify-name">에스크로 결제</span>
<span className="ic20 arrow-down"></span>
</div>
</li>
</ul>
</div>
<div className="notify-bar">
<span>결제데이터 통보 설정은 PC에서 가능합니다.</span>
<span>전송 설정한 지불수단만 노출됩니다.</span>
</div>
</div>
</>
);
};

363
src/entities/payment/ui/info-wrap.tsx Normal file
View File

@@ -0,0 +1,363 @@
import { IMAGE_ROOT } from "@/shared/constants/common";
export const InfoWrap = () => {
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>
</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>
</ul>
</div>
</>
);
};

52
src/entities/payment/ui/no-interest-info-bottom-sheet.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
export const NoInterestInfoBottomSheet = () => {
return (
<>
<div className="bg-dim"></div>
<div className="bottomsheet">
<div className="bottomsheet-header">
<div className="bottomsheet-title">
<h2>무이자 정보</h2>
<button
className="close-btn"
type="button"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
/>
</button>
</div>
</div>
<div className="fee-cycle">
<div className="card-fee-box">
<span className="label">카드사</span>
<div className="field wid-100">
<select>
<option>KB국민</option>
</select>
</div>
</div>
<div className="desc dot">할부개월 : 02, 03, 07</div>
<div className="desc dot">적용기간 : 2025.06.01 ~ 9999.12.31</div>
<div className="desc dot">적용금액 : 70,000</div>
<div className="divider"></div>
<div className="desc dot">할부개월 : 15, 20, 36, 60</div>
<div className="desc dot">적용기간 : 2025.06.01 ~ 9999.12.31</div>
<div className="desc dot">적용금액 : 50,000</div>
</div>
{/*
<div className="bottomsheet-footer">
<button
className="btn-50 btn-blue flex-1"
type="button"
>확인</button>
</div>
*/}
</div>
</>
)
};

37
src/entities/payment/ui/payment-tab.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import {
PaymentTabKeys,
PaymentTabProps
} from '../model/types';
export const PaymentTab = ({
activeTab
}: PaymentTabProps) => {
const { navigate } = useNavigate();
const onClickToNavigation = (tab: PaymentTabKeys) => {
if(activeTab !== tab){
if(tab === PaymentTabKeys.Info){
navigate(PATHS.payment.info);
}
else if(tab === PaymentTabKeys.DataNotification){
navigate(PATHS.payment.dataNotification);
}
}
};
return(
<>
<div className="subTab">
<button
className={`subtab-btn ${(activeTab === PaymentTabKeys.Info)? 'active': ''}` }
onClick={ () => onClickToNavigation(PaymentTabKeys.Info) }
>결제 정보</button>
<button
className={`subtab-btn ${(activeTab === PaymentTabKeys.DataNotification)? 'active': ''}` }
onClick={ () => onClickToNavigation(PaymentTabKeys.DataNotification) }
>결제데이터 통보</button>
</div>
</>
);
};

52
src/entities/payment/ui/transfer-commission-bottom-sheet.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
export const TransferCommissionBottomSheet = () => {
return (
<>
<div className="bg-dim"></div>
<div className="bottomsheet">
<div className="bottomsheet-header">
<div className="bottomsheet-title">
<h2>수수료 및 정산주기</h2>
<button
className="close-btn"
type="button"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
/>
</button>
</div>
</div>
<div className="fee-cycle">
<div className="desc dot">정산주기 : 일일(+3일)</div>
<div className="desc dot">수수료</div>
<div className="divider"></div>
<ul className="kv-list">
<li className="kv-row pl-10">
<span className="k">결제수수료(최저수수료)</span>
<span className="v">1원</span>
</li>
<li className="kv-row pl-10">
<span className="k">결제수수료(1원~)</span>
<span className="v">1원</span>
</li>
<li className="kv-row pl-10">
<span className="k">취소수수료</span>
<span className="v">1원</span>
</li>
</ul>
</div>
<div className="bottomsheet-footer">
<button
className="btn-50 btn-blue flex-1"
type="button"
>확인</button>
</div>
</div>
</>
);
};