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

14
src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
View File

@@ -160,13 +160,13 @@ export const AccountHolderSearchPage = () => {
bankCode: bank,
resultStatus: resultStatus
}).then((rs) => {
if (rs.status) {
setTimeout(() => {
snackBar("다운로드가 완료되었습니다.");
}, 2000);
} else {
snackBar("다운로드에 실패했습니다.")
}
// if (rs.status) {
// setTimeout(() => {
// snackBar("다운로드가 완료되었습니다.");
// }, 2000);
// } else {
// snackBar("다운로드에 실패했습니다.")
// }
});
}
setEmailBottomSheetOn(false);

12
src/pages/additional-service/ars/request-page.tsx
View File

@@ -18,6 +18,7 @@ import { useStore } from '@/shared/model/store';
import { snackBar } from '@/shared/lib';
import { NumericFormat, PatternFormat } from 'react-number-format';
import { showAlert } from '@/widgets/show-alert';
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
export const ArsRequestPage = () => {
const { t } = useTranslation();
@@ -42,6 +43,8 @@ export const ArsRequestPage = () => {
const [successPageOn, setSuccessPageOn] = useState<boolean>(false);
const [resultMessage, setResultMessage] = useState<string>('');
const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
useSetHeaderTitle(t('additionalService.ars.paymentRequest'));
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
@@ -160,6 +163,7 @@ export const ArsRequestPage = () => {
type="text"
value={moid}
onChange={(e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -171,6 +175,7 @@ export const ArsRequestPage = () => {
type="text"
value={goodsName}
onChange={(e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -187,6 +192,7 @@ export const ArsRequestPage = () => {
const { floatValue } = values;
setAmount(floatValue ?? 0);
}}
onFocus={handleInputFocus}
></NumericFormat>
</div>
</div>
@@ -211,6 +217,7 @@ export const ArsRequestPage = () => {
type="text"
value={buyerName}
onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -230,6 +237,7 @@ export const ArsRequestPage = () => {
inputMode="numeric"
pattern="[0-9]*"
maxLength={11}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -243,12 +251,12 @@ export const ArsRequestPage = () => {
placeholder='test@nicepay.co.kr'
onChange={(e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value)}
className={email && !isValidEmail(email) ? 'error' : ''}
onFocus={handleInputFocus}
/>
</div>
</div>
<div className="billing-row" style={{ paddingBottom: '60px' }}>
<div className="billing-row" style={keyboardAwarePadding}>
<div className="billing-label">{t('additionalService.ars.paymentMethod')} <span>*</span></div>
<div className="billing-field">
{getArsPaymentMethodBtns()}

10
src/pages/additional-service/fund-account/transfer-request-page.tsx
View File

@@ -14,8 +14,8 @@ import { useStore } from '@/shared/model/store';
import { snackBar } from '@/shared/lib';
import { useExtensionFundAccountTransferRegistMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-regist-mutation';
import { NumericFormat } from 'react-number-format';
import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation';
import { showAlert } from '@/widgets/show-alert';
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
export const FundAccountTransferRequestPage = () => {
@@ -32,6 +32,7 @@ export const FundAccountTransferRequestPage = () => {
const [amount, setAmount] = useState<number>(0);
const [moid, setMoid] = useState<string>('');
const [depositParameter, setDepositParameter] = useState<string>('');
const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
const { mutateAsync: extensionFundAccountRegist } = useExtensionFundAccountTransferRegistMutation();
@@ -159,6 +160,7 @@ export const FundAccountTransferRequestPage = () => {
return !value || value.length <= 14;
}}
onValueChange={(values) => setAccountNo(values.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -169,6 +171,7 @@ export const FundAccountTransferRequestPage = () => {
type="text"
value={accountName}
onChange={(e: ChangeEvent<HTMLInputElement>) => setAccountName(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -180,6 +183,7 @@ export const FundAccountTransferRequestPage = () => {
allowNegative={false}
thousandSeparator={true}
displayType='input'
onFocus={handleInputFocus}
onValueChange={(values) => {
const { floatValue } = values;
setAmount(floatValue ?? 0);
@@ -194,16 +198,18 @@ export const FundAccountTransferRequestPage = () => {
type="text"
value={moid}
onChange={(e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
<div className="billing-row">
<div className="billing-row" style={keyboardAwarePadding}>
<div className="billing-label">{t('additionalService.fundAccount.depositParameter')}</div>
<div className="billing-field">
<input
type="text"
value={depositParameter}
onChange={(e) => setDepositParameter(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>

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>