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

Key-In 결제 List,결제 신청, 결제신청결과 화면 추가

Browse Source
This commit is contained in:
HyeonJongKim
2025-09-12 14:45:51 +09:00
parent 188fe5b259
commit 044a0c56c3
11 changed files with 434 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,6 +29,8 @@ import { LinkPaymentApplyConfirmPage } from './link-payment/apply/link-payment-a
import { LinkPaymentApplySuccessPage } from './link-payment/apply/link-payment-apply-success-page';
import { LinkPaymentDetailPage } from './link-payment/link-payment-detail-page';
import { LinkPaymentPendingDetailPage } from './link-payment/link-payment-pending-detail-page';
import { KeyInPaymentRequestPage } from './key-in-payment/requeset-page';
import { KeyInPaymentRequestSuccessPage } from './key-in-payment/request-success-page';
export const AdditionalServicePages = () => {
return (
@@ -41,7 +43,11 @@ export const AdditionalServicePages = () => {
<Route path={ROUTE_NAMES.additionalService.arsCardPayment.request} element={<ArsCardPaymentRequestPage />} />
<Route path={ROUTE_NAMES.additionalService.arsCardPayment.requestSuccess} element={<ArsCardPaymentRequestSuccessPage />} />
</Route>
<Route path={ROUTE_NAMES.additionalService.keyInPayment} element={<KeyInPaymentPage />} />
<Route path={ROUTE_NAMES.additionalService.keyInPayment.base}>
<Route path={ROUTE_NAMES.additionalService.keyInPayment.list} element={<KeyInPaymentPage/>} />
<Route path={ROUTE_NAMES.additionalService.keyInPayment.request} element={<KeyInPaymentRequestPage/>} />
<Route path={ROUTE_NAMES.additionalService.keyInPayment.requestSuccess} element={<KeyInPaymentRequestSuccessPage/>} />
</Route>
<Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentNotificationPage />} />
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch} element={<AccountHolderSearchPage />} />
<Route path={ROUTE_NAMES.additionalService.accountHolderAuth} element={<AccountHolderAuthPage />} />

2
src/pages/additional-service/intro/intro-page.tsx
View File

@@ -31,7 +31,7 @@ export const IntroPage = () => {
},
{
className: 'list-wrap01', serviceName: 'KEY-IN 결제', serviceDesc: '상담 중 카드정보 입력으로 간편한 결제 지원',
icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment
icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment.list
},
{
className: 'list-wrap01', serviceName: '계좌성명조회', serviceDesc: '예금주 정보 입력으로 즉시 예금주 확인',

150
src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
View File

@@ -1,18 +1,156 @@
import { useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { PATHS } from '@/shared/constants/paths';
export const KeyInPaymentPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('KEY-IN 결제');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
useSetFooterMode(false);
const onClickToNavigation = () => {
navigate(PATHS.additionalService.keyInPayment.request)
}
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<section className="summary-section no-border">
<div className="credit-controls">
<div>
<input
className="credit-period"
type="text"
value="2025.06.01 ~ 2025.06.31"
readOnly={true}
/>
<button
className="filter-btn"
aria-label="필터"
>
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt="검색옵션"
/>
</button>
</div>
<button
className="download-btn"
aria-label="다운로드"
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt="다운로드"
/>
</button>
</div>
</section>
<section className="filter-section">
<div className="sort-options">
<button className="sort-btn active">최신순</button>
<span className="sort-divider">|</span>
<button className="sort-btn">고액순</button>
</div>
<div className="excrow">
<div className="full-menu-keywords no-padding">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">승인</span>
<span className="keyword-tag">전취소</span>
<span className="keyword-tag">후취소</span>
</div>
</div>
</section>
<section className="transaction-list">
<div className="date-group">
<div className="date-header">2025.06.08(일)</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">김*환(7000)</div>
<div className="transaction-details">
<span>20:00ㅣ승인</span>
</div>
</div>
<div className="transaction-amount">5,254,000원</div>
</div>
<div className="transaction-item refund">
<div className="transaction-status">
<div className="status-dot gray"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">최*길(7000)</div>
<div className="transaction-details">
<span>08:35ㅣ승인</span>
</div>
</div>
<div className="transaction-amount">23,845,000원</div>
</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">김*환(7000)</div>
<div className="transaction-details">
<span>20:00ㅣ승인</span>
</div>
</div>
<div className="transaction-amount">5,254,000원</div>
</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">김*환(7000)</div>
<div className="transaction-details">
<span>20:00ㅣ후취소</span>
</div>
</div>
<div className="transaction-amount">5,254,000원</div>
</div>
<div className="transaction-item refund">
<div className="transaction-status">
<div className="status-dot gray"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">최*길(7000)</div>
<div className="transaction-details">
<span>20:00ㅣ후취소</span>
</div>
</div>
<div className="transaction-amount">23,845,000원</div>
</div>
</div>
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToNavigation()}
>결제 신청</button>
</div>
</div>
</div>
</main>
</>
);
};

210
src/pages/additional-service/key-in-payment/requeset-page.tsx Normal file
View File

@@ -0,0 +1,210 @@
import { useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { HeaderType } from '@/entities/common/model/types';
import { useExtensionKeyinApplyMutation } from '@/entities/additional-service/api/use-extension-keyin-apply-mutation';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { number } from 'framer-motion';
export const KeyInPaymentRequestPage = () => {
const { navigate } = useNavigate();
const { mutateAsync: keyInApply } = useExtensionKeyinApplyMutation();
useSetHeaderTitle('KEY-IN 결제');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.additionalService.keyInPayment.list);
});
const callKeyInPaymentRequest = () => {
let keyInApplyParams = {
mid: 'string',
goodsName: 'string',
amount: 0,
buyerName: 'string',
email: 'string',
phoneNumber: 'string',
cardNo: 'string',
cardExpirationDate: 'string',
instmntMonth: 'string',
moid: 'SMS',
};
keyInApply(keyInApplyParams).then((rs) => {
navigate(PATHS.additionalService.arsCardPayment.requestSuccess);
console.log(rs)
}).catch(() => {
}).finally(() => {
});
};
const [formData, setFormData] = useState({
mid: 'nictest001m',
goodsName: '',
amount: 0
});
const handleInputChange = (field: string, value: string) => {
setFormData(prev => ({
...prev,
[field]: value
}));
};
const onClickToRequest = () => {
callKeyInPaymentRequest();
};
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="option-list">
<div className="billing-form gap-16">
<div className="billing-row">
<div className="billing-label">가맹점 <span>*</span></div>
<div className="billing-field">
<select
className="wid-100"
onChange={(e) => handleInputChange('merchant', e.target.value)}
>
<option>nictest001m</option>
</select>
</div>
</div>
<div className="billing-row">
<div className="billing-label">상품명 <span>*</span></div>
<div className="billing-field">
<input
type="text"
value=""
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">상품가격 <span>*</span></div>
<div className="billing-field">
<input
type="text"
value=""
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">구매자명 <span>*</span></div>
<div className="billing-field">
<input
type="text"
value=""
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">구매자 이메일 <span>*</span></div>
<div className="billing-field">
<select disabled>
<option selected>일시불</option>
<option>일시불</option>
</select>
</div>
</div>
<div className="billing-row">
<div className="billing-label">구매자 전화번호 <span>*</span></div>
<div className="billing-field">
<input
type="text"
value=""
placeholder=" '-' 제외하고 입력"
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">카드번호 <span>*</span></div>
<div className="billing-field">
<input
type="text"
value=""
/>
</div>
<div className="billing-field">
<input
type="text"
value=""
/>
</div>
<div className="billing-field">
<input
type="text"
value=""
/>
</div>
<div className="billing-field">
<input
type="text"
value=""
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">유효기간(월/년)<span>*</span></div>
<div className="billing-field">
<input
type="text"
value=""
placeholder='MM/YY'
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">할부 기간<span>*</span></div>
<div className="billing-field">
<select
className="wid-100"
onChange={(e) => handleInputChange('merchant', e.target.value)}
>
<option>일시불</option>
</select>
</div>
</div>
<div className="billing-row">
<div className="billing-label">주문번호</div>
<div className="billing-field">
<input
type="text"
value=""
/>
</div>
</div>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToRequest() }
>결제 신청</button>
</div>
</div>
</div>
</main>
</>
)
}

43
src/pages/additional-service/key-in-payment/request-success-page.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderType,
useSetFooterMode,
} from '@/widgets/sub-layout/use-sub-layout';
export const KeyInPaymentRequestSuccessPage = () => {
const { navigate } = useNavigate();
useSetHeaderType(HeaderType.NoHeader);
useSetFooterMode(false);
const onClickToNavigate = () => {
navigate(PATHS.additionalService.keyInPayment.list);
};
return (
<>
<div className="success-page" >
<div className="success-body">
<div
className="success-icon"
aria-hidden="true"
></div>
<h1 className="success-title">
<span>KEY-IN 결제</span><br/>
<span>결제 신청이 완료되었습니다.</span>
</h1>
<div className="success-result">
<p className="result-text">결과 : [0000] ARS 요청 처리 완료</p>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() }
>확인</button>
</div>
</div>
</>
);
};

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

@@ -13,6 +13,9 @@ import {
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
/**
* 발송내역 탭 화면
*/
export const LinkPaymentDispatchListPage = () => {
const { navigate } = useNavigate();

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

@@ -14,6 +14,9 @@ import {
} from '@/widgets/sub-layout/use-sub-layout';
import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment/link-payment-filter';
/**
* 발송대기 탭 화면
*/
export const LinkPaymentPendingSendPage = () => {
const { navigate } = useNavigate();