- 링크결제_분리승인 페이지 추가
- KeyIn결제 FormData 생성 - 링크결제_분리승인 과련 Css 추가
This commit is contained in:
HyeonJongKim
@@ -105,7 +105,9 @@ export const ArsListPage = () => {
|
||||
};
|
||||
|
||||
const onClickToNavigate = () => {
|
||||
navigate(PATHS.additionalService.ars.request);
|
||||
navigate(PATHS.additionalService.ars.request, {
|
||||
state: { mid }
|
||||
});
|
||||
};
|
||||
|
||||
const onClickToDownloadExcel = () => {
|
||||
|
||||
@@ -1,23 +1,27 @@
|
||||
import { ChangeEvent, useState } from 'react';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useLocation } from 'react-router';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { useExtensionArsApplyMutation } from '@/entities/additional-service/api/ars/use-extension-ars-apply-mutation';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode,
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { ArsPaymentMethod, ExtensionArsApplyParams } from '@/entities/additional-service/model/ars/types';
|
||||
|
||||
export const ArsRequestPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const { mid: receivedMid } = location.state || {};
|
||||
|
||||
const { mutateAsync: arsApply } = useExtensionArsApplyMutation();
|
||||
|
||||
const [mid, setMid] = useState<string>('');
|
||||
const [mid, setMid] = useState<string>(receivedMid || '');
|
||||
const [moid, setMoid] = useState<string>('');
|
||||
const [goodsName, setGoodsName] = useState<string>('');
|
||||
const [amount, setAmount] = useState<number>(0);
|
||||
@@ -52,30 +56,47 @@ export const ArsRequestPage = () => {
|
||||
}).catch(() => {
|
||||
|
||||
}).finally(() => {
|
||||
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const onClickToRequest = () => {
|
||||
callArsApply();
|
||||
};
|
||||
};
|
||||
|
||||
const isValidPhoneNumber = (phone: string) => {
|
||||
// 한국 휴대폰 번호: 010, 011, 016, 017, 018, 019로 시작, 10-11자리
|
||||
const phoneRegex = /^01[0|1|6|7|8|9][0-9]{7,8}$/;
|
||||
return phoneRegex.test(phone);
|
||||
};
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
mid.trim() !== '' &&
|
||||
moid.trim() !== '' &&
|
||||
goodsName.trim() !== '' &&
|
||||
amount > 0 &&
|
||||
buyerName.trim() !== '' &&
|
||||
isValidPhoneNumber(phoneNumber)
|
||||
);
|
||||
};
|
||||
|
||||
const getArsPaymentMethodBtns = () => {
|
||||
let rs = [];
|
||||
rs.push(
|
||||
<div
|
||||
<div
|
||||
key="ars-payment-method-btns"
|
||||
className="seg-buttons"
|
||||
>
|
||||
<button
|
||||
className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.SMS)? 'btn-blue': 'btn-white'}`}
|
||||
onClick={ (e) => setArsPaymentMethod(ArsPaymentMethod.SMS) }
|
||||
>{ ArsPaymentMethod.SMS }</button>
|
||||
<button
|
||||
className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.ARS)? 'btn-blue': 'btn-white'}`}
|
||||
onClick={ (e) => setArsPaymentMethod(ArsPaymentMethod.ARS) }
|
||||
>{ ArsPaymentMethod.ARS }</button>
|
||||
<button
|
||||
className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.SMS) ? 'btn-blue' : 'btn-white'}`}
|
||||
onClick={(e) => setArsPaymentMethod(ArsPaymentMethod.SMS)}
|
||||
>{ArsPaymentMethod.SMS}</button>
|
||||
<button
|
||||
className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.ARS) ? 'btn-blue' : 'btn-white'}`}
|
||||
onClick={(e) => setArsPaymentMethod(ArsPaymentMethod.ARS)}
|
||||
>{ArsPaymentMethod.ARS}</button>
|
||||
</div>
|
||||
);
|
||||
return rs;
|
||||
@@ -91,10 +112,9 @@ export const ArsRequestPage = () => {
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">가맹점 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value="nictest00m"
|
||||
readOnly={ true }
|
||||
<input
|
||||
type="text"
|
||||
value={mid}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -102,10 +122,10 @@ export const ArsRequestPage = () => {
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">주문번호 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value={ moid }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value) }
|
||||
<input
|
||||
type="text"
|
||||
value={moid}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,80 +133,95 @@ export const ArsRequestPage = () => {
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">상품명 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value={ goodsName }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value) }
|
||||
<input
|
||||
type="text"
|
||||
value={goodsName}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">금액 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value={ amount }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setAmount(parseInt(e.target.value)) }
|
||||
/>
|
||||
</div>
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">금액 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value={amount}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const onlyNumbers = e.target.value.replace(/[^0-9]/g, ''); // 숫자만 남김
|
||||
setAmount(onlyNumbers === '' ? 0 : parseInt(onlyNumbers));
|
||||
}}
|
||||
inputMode="numeric" // 모바일 키보드 숫자 전용
|
||||
pattern="[0-9]*" // 브라우저 기본 숫자만 유효하도록
|
||||
/>
|
||||
</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 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={ buyerName }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">구매자명 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value={buyerName}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">휴대폰 번호 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value={ phoneNumber }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">휴대폰 번호 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="tel"
|
||||
value={phoneNumber}
|
||||
placeholder='01012345678'
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => {
|
||||
const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
|
||||
setPhoneNumber(onlyNumbers);
|
||||
}}
|
||||
className={phoneNumber && !isValidPhoneNumber(phoneNumber) ? 'error' : ''}
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
maxLength={11}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">이메일</div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value={ email }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">이메일</div>
|
||||
<div className="billing-field">
|
||||
<input
|
||||
type="text"
|
||||
value={email}
|
||||
placeholder='test@nicepay.co.kr'
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">결제 방식 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
{ getArsPaymentMethodBtns() }
|
||||
</div>
|
||||
<div className="billing-row">
|
||||
<div className="billing-label">결제 방식 <span>*</span></div>
|
||||
<div className="billing-field">
|
||||
{getArsPaymentMethodBtns()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToRequest() }
|
||||
onClick={() => onClickToRequest()}
|
||||
disabled={!isFormValid()}
|
||||
>결제 신청</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user