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

- 부가서비스 각 요청 페이지 키패드 높이 만큼 패딩 삽입 hook 추가

Browse Source 
- 각 요청 페이지 자동 패딩 적용
This commit is contained in:
HyeonJongKim
2025-11-06 18:04:44 +09:00
parent eee6afaa90
commit 3b4da4f9d4
10 changed files with 162 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,6 @@ 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 { HeaderType } from '@/entities/common/model/types';
import { useExtensionKeyinApplyMutation } from '@/entities/additional-service/api/use-extension-keyin-apply-mutation';
import {
@@ -11,13 +10,12 @@ import {
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { overlay } from 'overlay-kit';
import { Dialog } from '@/shared/ui/dialogs/dialog';
import { useStore } from '@/shared/model/store';
import { snackBar } from '@/shared/lib';
import { NumericFormat, PatternFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { showAlert } from '@/widgets/show-alert';
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
export const KeyInPaymentRequestPage = () => {
const { t } = useTranslation();
@@ -43,6 +41,7 @@ export const KeyInPaymentRequestPage = () => {
const [orderNumber, setOrderNumber] = useState<string>('');
const { mutateAsync: keyInApply } = useExtensionKeyinApplyMutation();
const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
useSetHeaderTitle(t('additionalService.keyIn.title'));
useSetHeaderType(HeaderType.LeftArrow);
@@ -191,6 +190,7 @@ export const KeyInPaymentRequestPage = () => {
type="text"
value={productName}
onChange={(e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -218,6 +218,7 @@ export const KeyInPaymentRequestPage = () => {
type="text"
value={customerName}
onChange={(e: ChangeEvent<HTMLInputElement>) => setCustomerName(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -230,6 +231,7 @@ export const KeyInPaymentRequestPage = () => {
value={email}
onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
className={email && !isValidEmail(email) ? 'error' : ''}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -249,6 +251,7 @@ export const KeyInPaymentRequestPage = () => {
inputMode="numeric"
pattern="[0-9]*"
maxLength={11}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -262,6 +265,7 @@ export const KeyInPaymentRequestPage = () => {
valueIsNumericString
format="####"
onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo1(e.target.value)}
onFocus={handleInputFocus}
>
</PatternFormat>
</div>
@@ -272,6 +276,7 @@ export const KeyInPaymentRequestPage = () => {
valueIsNumericString
format="####"
onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo2(e.target.value)}
onFocus={handleInputFocus}
>
</PatternFormat>
</div>
@@ -282,6 +287,7 @@ export const KeyInPaymentRequestPage = () => {
valueIsNumericString
format="####"
onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo3(e.target.value)}
onFocus={handleInputFocus}
>
</PatternFormat>
</div>
@@ -292,6 +298,7 @@ export const KeyInPaymentRequestPage = () => {
valueIsNumericString
format="####"
onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo4(e.target.value)}
onFocus={handleInputFocus}
>
</PatternFormat>
</div>
@@ -315,6 +322,7 @@ export const KeyInPaymentRequestPage = () => {
const { value } = values;
setExpMon(value);
}}
onFocus={handleInputFocus}
onBlur={() => {
if (expMon.length === 1 && parseInt(expMon) >= 1 && parseInt(expMon) <= 9) {
setExpMon(expMon.padStart(2, '0'));
@@ -333,6 +341,7 @@ export const KeyInPaymentRequestPage = () => {
const { value } = values;
setExpYear(value);
}}
onFocus={handleInputFocus}
style={{ flex: 1 }}
inputMode="numeric"
/>
@@ -367,13 +376,17 @@ export const KeyInPaymentRequestPage = () => {
</div>
</div>
<div className="billing-row">
<div
className="billing-row"
style={keyboardAwarePadding}
>
<div className="billing-label">{t('additionalService.keyIn.orderNumber')}<span>*</span></div>
<div className="billing-field">
<input
type="text"
value={orderNumber}
onChange={(e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>