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

부가서비스: 링크결제 신청 최종확인 페이지 UI 수정

Browse Source
This commit is contained in:
HyeonJongKim
2025-09-09 16:50:26 +09:00
parent 1b153a86bb
commit bd9f111534
1 changed files with 33 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/additional-service/link-payment/link-payment-apply-confirm-page.tsx
View File

@@ -1,4 +1,3 @@
import { useState } from 'react';
import { HeaderType } from '@/entities/common/model/types'; import { HeaderType } from '@/entities/common/model/types';
import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout'; import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
@@ -8,7 +7,7 @@ import { IMAGE_ROOT } from "@/shared/constants/common";
export const LinkPaymentApplyConfirmPage = () => { export const LinkPaymentApplyConfirmPage = () => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
useSetHeaderTitle('링크결제 신청'); useSetHeaderTitle('메시지 미리보기');
useSetHeaderType(HeaderType.LeftArrow); useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false); useSetFooterMode(false);
@@ -22,53 +21,25 @@ export const LinkPaymentApplyConfirmPage = () => {
return ( return (
<> <>
<main> <main className="pop">
<div className="tab-content"> <div className="sub-wrap">
<div className="tab-pane sub active"> <div className="preview-body">
<div className="option-list"> <div className="attention-icon" aria-hidden="true">
<div className="confirm-section"> <img src={IMAGE_ROOT + '/ico_alert.svg'} alt="주의" />
<div className="confirm-icon-container">
<div className="confirm-icon">
<img
src={IMAGE_ROOT + '/ico_alert.svg'}
className="alert-icon"
/>
</div> </div>
</div> <h1 className="preview-title">발송 메시지를<br/>최종 확인하세요</h1>
<div className="preview-result">
<h2 className="confirm-title"> <p className="preview-text">
발송 메시지를 최종 확인하세요 TEST 고객님, 안녕하세요?<br/>
</h2> 나이스페이먼츠 주식회사에서 <br/>
결제하실 내역 안내드립니다.<br/>
<div className="confirm-details"> 아래 URL로 접속하시면 상세 내역 확인과 결제 진행이 가능합니다.<br/><br/>
<div className="detail-item"> !$&#123;pay_url&#125;<br/><br/>
<span className="detail-label">결제 방식</span> <b>
<span className="detail-value">링크 결제</span> 가맹점 상호 : 나이스페이먼츠 주식회사<br/>
</div> 상품명 : TEST<br/>
<div className="detail-item"> 금액 : 123,123원
<span className="detail-label">결제 금액</span> </b>
<span className="detail-value">5,254,000원</span>
</div>
<div className="detail-item">
<span className="detail-label">발송 방법</span>
<span className="detail-value">SMS</span>
</div>
<div className="detail-item">
<span className="detail-label">수신자</span>
<span className="detail-value">김*환(010-7000-****)</span>
</div>
<div className="detail-item">
<span className="detail-label">신청일</span>
<span className="detail-value">{new Date().toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\./g, '.').replace(/ /g, '')}</span>
</div>
</div>
<div className="confirm-notice">
<p className="notice-text">
• 결제 링크는 발송 후 24시간 동안 유효합니다.
</p>
<p className="notice-text">
• 결제 완료 후 취소/환불은 별도 문의가 필요합니다.
</p> </p>
</div> </div>
</div> </div>
@@ -84,8 +55,7 @@ export const LinkPaymentApplyConfirmPage = () => {
onClick={() => onClickToConfirm()} onClick={() => onClickToConfirm()}
>결제 신청</button> >결제 신청</button>
</div> </div>
</div> <div className="home-indicator"></div>
</div>
</main> </main>
</> </>
); );