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

- 수기발행,1:1문의 등록, 빌링 모바일 용 패딩 추가 로직 추가

Browse Source
This commit is contained in:
HyeonJongKim
2025-11-07 11:09:35 +09:00
parent da66206417
commit 21103232e9
5 changed files with 143 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx
View File

@@ -5,6 +5,7 @@ import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { CashReceiptPurposeType } from '../model/types';
import { PatternFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
export interface CashReceiptHandWrittenIssuanceStep1Props {
businessNumber?: string;
@@ -41,6 +42,7 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
}: CashReceiptHandWrittenIssuanceStep1Props) => {
const { t } = useTranslation();
const { navigate } = useNavigate();
const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
useSetOnBack(() => {
navigate(PATHS.transaction.cashReceipt.list);
@@ -86,6 +88,7 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
placeholder={t('transaction.handWrittenIssuance.productNamePlaceholder')}
value={productName}
onChange={(e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -97,6 +100,7 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
placeholder={t('transaction.handWrittenIssuance.buyerNamePlaceholder')}
value={buyerName}
onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -109,6 +113,7 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
valueIsNumericString
format="###########"
onChange={(e: ChangeEvent<HTMLInputElement>) => setIssueNumber(e.target.value)}
onFocus={handleInputFocus}
></PatternFormat>
</div>
</div>
@@ -120,10 +125,11 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
placeholder={t('transaction.handWrittenIssuance.emailPlaceholder')}
value={email}
onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
<div className="issue-row">
<div className="issue-row" style={keyboardAwarePadding}>
<div className="issue-label">{t('account.phoneNumber')}</div>
<div className="issue-field">
<PatternFormat
@@ -132,6 +138,7 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
valueIsNumericString
format="###########"
onChange={(e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value)}
onFocus={handleInputFocus}
></PatternFormat>
</div>
</div>

9
src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx
View File

@@ -3,6 +3,7 @@ import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { ProcessStep } from '../model/types';
import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
export interface CashReceiptHandWrittenIssuanceStep2Props {
setProcessStep: (processStep: ProcessStep) => void;
@@ -33,6 +34,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
onClickToVatCalculate
}: CashReceiptHandWrittenIssuanceStep2Props) => {
const { t } = useTranslation();
const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
useSetOnBack(() => {
setProcessStep(ProcessStep.One);
@@ -52,6 +54,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
allowNegative={ false }
displayType="input"
onChange={ (e: ChangeEvent<HTMLInputElement>) => setIssueAmount(parseInt(e.target.value)) }
onFocus={handleInputFocus}
></NumericFormat>
<button
className="btn-40 btn-white"
@@ -70,6 +73,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
allowNegative={ false }
displayType="input"
onChange={ (e: ChangeEvent<HTMLInputElement>) => setSupplyAmount(parseInt(e.target.value)) }
onFocus={handleInputFocus}
></NumericFormat>
</div>
</div>
@@ -81,6 +85,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
allowNegative={ false }
displayType="input"
onChange={ (e: ChangeEvent<HTMLInputElement>) => setVatAmount(parseInt(e.target.value)) }
onFocus={handleInputFocus}
></NumericFormat>
</div>
</div>
@@ -92,10 +97,11 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
allowNegative={ false }
displayType="input"
onChange={ (e: ChangeEvent<HTMLInputElement>) => setTaxFreeAmount(parseInt(e.target.value)) }
onFocus={handleInputFocus}
></NumericFormat>
</div>
</div>
<div className="issue-row">
<div className="issue-row" style={keyboardAwarePadding}>
<div className="issue-label">{t('transaction.fields.serviceAmount')}</div>
<div className="issue-field">
<NumericFormat
@@ -103,6 +109,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
allowNegative={ false }
displayType="input"
onChange={ (e: ChangeEvent<HTMLInputElement>) => setServiceCharge(parseInt(e.target.value)) }
onFocus={handleInputFocus}
></NumericFormat>
</div>
</div>

9
src/pages/support/qna/register-page.tsx
View File

@@ -16,6 +16,7 @@ import { overlay } from 'overlay-kit';
import { Dialog } from '@/shared/ui/dialogs/dialog';
import { QnaSaveParams, QnaSaveResponse } from '@/entities/support/model/types';
import { checkGrant } from '@/shared/lib/check-grant';
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
export enum QnaRegisterPropsName {
Mid = 'Mid',
@@ -39,6 +40,7 @@ export const QnaRegisterPage = () => {
const [requestEmail, setRequestEmail] = useState<string>('');
const [title, setTitle] = useState<string>('');
const [contents, setContents] = useState<string>('');
const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
useSetHeaderTitle(t('support.qna.title'));
useSetHeaderType(HeaderType.LeftArrow);
@@ -171,6 +173,7 @@ export const QnaRegisterPage = () => {
value={title}
required={true}
onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.Title)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -205,6 +208,7 @@ export const QnaRegisterPage = () => {
value={requestName}
required={true}
onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestName)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -219,6 +223,7 @@ export const QnaRegisterPage = () => {
valueIsNumericString
format="###########"
onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestTel)}
onFocus={handleInputFocus}
></PatternFormat>
</div>
</div>
@@ -230,10 +235,11 @@ export const QnaRegisterPage = () => {
placeholder={t('support.qna.formLabels.emailPlaceholder')}
value={requestEmail}
onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestEmail)}
onFocus={handleInputFocus}
/>
</div>
</div>
<div className="inq-text">
<div className="inq-text" style={keyboardAwarePadding}>
<div className="inq-text-label">
{t('support.qna.formLabels.inquiryContents')} <span className="red">{t('support.qna.formLabels.required')}</span>
</div>
@@ -242,6 +248,7 @@ export const QnaRegisterPage = () => {
value={contents}
required={true}
onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setInputValue(e, QnaRegisterPropsName.Contents)}
onFocus={handleInputFocus}
></textarea>
</div>
</div>

10
src/pages/transaction/billing/charge-page.tsx
View File

@@ -17,6 +17,7 @@ import moment from 'moment';
import NiceCalendar from '@/shared/ui/calendar/nice-calendar';
import { notiBar, snackBar } from '@/shared/lib';
import { BillingChargeParams, BillingChargeResponse } from '@/entities/transaction/model/types';
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
export const BillingChargePage = () => {
const { navigate } = useNavigate();
@@ -31,7 +32,7 @@ export const BillingChargePage = () => {
const [installmentMonth, setInstallmentMonth] = useState<string>('00');
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
useSetHeaderTitle(t('billing.charge'));
useSetHeaderType(HeaderType.RightClose);
@@ -142,6 +143,7 @@ export const BillingChargePage = () => {
type="text"
value={billKey}
onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeBillKey(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -152,6 +154,7 @@ export const BillingChargePage = () => {
type="text"
value={productName}
onChange={(e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -163,6 +166,7 @@ export const BillingChargePage = () => {
allowNegative={false}
displayType="input"
onChange={(e: ChangeEvent<HTMLInputElement>) => setProductAmount(parseInt(e.target.value))}
onFocus={handleInputFocus}
></NumericFormat>
</div>
</div>
@@ -173,6 +177,7 @@ export const BillingChargePage = () => {
type="text"
value={orderNumber}
onChange={(e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -183,6 +188,7 @@ export const BillingChargePage = () => {
type="text"
value={buyerName}
onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
onFocus={handleInputFocus}
/>
</div>
</div>
@@ -211,7 +217,7 @@ export const BillingChargePage = () => {
</div>
</div>
<div className="billing-row">
<div className="billing-row" style={keyboardAwarePadding}>
<div className="billing-label">할부 개월</div>
<div className="billing-field">
<select

8
src/shared/lib/hooks/use-keyboard-aware.ts
View File

@@ -18,7 +18,7 @@ export const useKeyboardAware = (options?: UseKeyboardAwareOptions) => {
const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
useEffect(() => {
let focusedElement: HTMLInputElement | null = null;
let focusedElement: HTMLElement | null = null;
let isKeyboardOpen = false;
// 네이티브에서 호출할 전역 함수 등록
@@ -44,7 +44,7 @@ export const useKeyboardAware = (options?: UseKeyboardAwareOptions) => {
};
// focus된 요소를 추적하기 위한 함수
(window as any).setFocusedElement = (element: HTMLInputElement) => {
(window as any).setFocusedElement = (element: HTMLElement) => {
focusedElement = element;
// 키보드가 이미 열려있으면 즉시 스크롤
@@ -62,8 +62,8 @@ export const useKeyboardAware = (options?: UseKeyboardAwareOptions) => {
};
}, []);
// 모든 input에서 사용할 공통 핸들러
const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
// input과 textarea 모두에서 사용할 공통 핸들러
const handleInputFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
// focus된 요소를 저장
(window as any).setFocusedElement?.(e.target);
};