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

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