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

96
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,12 +7,12 @@ 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);
const onClickToConfirm = () => { const onClickToConfirm = () => {
navigate(PATHS.home); navigate(PATHS.home);
}; };
const onClickToBack = () => { const onClickToBack = () => {
@@ -22,70 +21,41 @@ 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>
<h2 className="confirm-title">
발송 메시지를 최종 확인하세요
</h2>
<div className="confirm-details">
<div className="detail-item">
<span className="detail-label">결제 방식</span>
<span className="detail-value">링크 결제</span>
</div>
<div className="detail-item">
<span className="detail-label">결제 금액</span>
<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>
</div>
</div>
</div> </div>
<h1 className="preview-title">발송 메시지를<br/>최종 확인하세요</h1>
<div className="apply-row two-button"> <div className="preview-result">
<button <p className="preview-text">
className="btn-50 btn-darkgray flex-1" TEST 고객님, 안녕하세요?<br/>
onClick={() => onClickToBack()} 나이스페이먼츠 주식회사에서 <br/>
>이전</button> 결제하실 내역 안내드립니다.<br/>
<button 아래 URL로 접속하시면 상세 내역 확인과 결제 진행이 가능합니다.<br/><br/>
className="btn-50 btn-blue flex-3" !$&#123;pay_url&#125;<br/><br/>
onClick={() => onClickToConfirm()} <b>
>결제 신청</button> 가맹점 상호 : 나이스페이먼츠 주식회사<br/>
상품명 : TEST<br/>
금액 : 123,123원
</b>
</p>
</div> </div>
</div> </div>
</div> </div>
<div className="apply-row two-button">
<button
className="btn-50 btn-darkgray flex-1"
onClick={() => onClickToBack()}
>이전</button>
<button
className="btn-50 btn-blue flex-3"
onClick={() => onClickToConfirm()}
>결제 신청</button>
</div>
<div className="home-indicator"></div>
</main> </main>
</> </>
); );