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:44:57 +09:00
parent d91fb758ba
commit 1b153a86bb
6 changed files with 99 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/pages/additional-service/link-payment/link-payment-apply-confirm-page.tsx Normal file
View File

@@ -0,0 +1,92 @@
import { useState } from 'react';
import { HeaderType } from '@/entities/common/model/types';
import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { PATHS } from "@/shared/constants/paths";
import { IMAGE_ROOT } from "@/shared/constants/common";
export const LinkPaymentApplyConfirmPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('링크결제 신청');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
const onClickToConfirm = () => {
navigate(PATHS.home);
};
const onClickToBack = () => {
navigate(-1);
};
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="option-list">
<div className="confirm-section">
<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 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>
</div>
</main>
</>
);
};