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

3
src/pages/additional-service/additional-service-pages.tsx
View File

@@ -25,6 +25,7 @@ import { PaymentAgencyListPage } from './payment-agency/list-page';
import { PaymentAgencyDetailPage } from './payment-agency/detail-page';
import { PaymentAgencyRequestPage } from './payment-agency/request-page';
import { LinkPaymentApplyPage } from './link-payment/link-payment-apply-page';
import { LinkPaymentApplyConfirmPage } from './link-payment/link-payment-apply-confirm-page';
export const AdditionalServicePages = () => {
return (
@@ -45,7 +46,7 @@ export const AdditionalServicePages = () => {
<Route path={ROUTE_NAMES.additionalService.linkPayment.dispatchList} element={<LinkPaymentDispatchListPage/>} />
<Route path={ROUTE_NAMES.additionalService.linkPayment.pendingSend} element={<LinkPaymentPendingSendPage />} />
<Route path={ROUTE_NAMES.additionalService.linkPayment.request} element={<LinkPaymentApplyPage />} />
<Route path={ROUTE_NAMES.additionalService.linkPayment.requestSuccess} element={<LinkPaymentApplyPage />} />
<Route path={ROUTE_NAMES.additionalService.linkPayment.requestConfirm} element={<LinkPaymentApplyConfirmPage />} />
</Route>
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}>
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.list} element={<KakaoPaymentNotificationListPage />} />

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>
</>
);
};

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

@@ -21,8 +21,7 @@ export const LinkPaymentApplyPage = () => {
setProcessStep(ProcessStep.Two);
}
else if(processStep === ProcessStep.Two) {
alert('완료')
navigate(PATHS.home)
navigate(PATHS.additionalService.linkPayment.requestConfirm)
}
};

1
src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx
View File

@@ -12,6 +12,7 @@ import {
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment-filter';
export const LinkPaymentPendingSendPage = () => {
const { navigate } = useNavigate();

4
src/shared/constants/paths.ts
View File

@@ -175,9 +175,9 @@ export const PATHS: RouteNamesType = {
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
ROUTE_NAMES.additionalService.linkPayment.request,
),
requestSuccess: generatePath(
requestConfirm: generatePath(
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
ROUTE_NAMES.additionalService.linkPayment.requestSuccess,
ROUTE_NAMES.additionalService.linkPayment.requestConfirm,
)
},
kakaoPaymentNotification: {

2
src/shared/constants/route-names.ts
View File

@@ -85,7 +85,7 @@ export const ROUTE_NAMES = {
dispatchList: 'dispatch-list',
pendingSend: 'pending-send',
request: 'request',
requestSuccess: 'request-success'
requestConfirm: 'request-confirm'
},
kakaoPaymentNotification: {
base: '/kakao-payment-notification/*',