Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

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

@@ -6,6 +6,7 @@ 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';
+import { MaskedNameInput, MaskedEmailInput, MaskedPhoneInput } from '@/shared/ui/masked-input';
 
 export interface CashReceiptHandWrittenIssuanceStep1Props {
   businessNumber?: string;
@@ -95,11 +96,10 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
         <div className="issue-row">
           <div className="issue-label">{t('transaction.fields.buyer')}</div>
           <div className="issue-field">
-            <input
-              type="text"
+            <MaskedNameInput
+              value={buyerName || ''}
+              onChange={setBuyerName}
               placeholder={t('transaction.handWrittenIssuance.buyerNamePlaceholder')}
-              value={buyerName}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
               onFocus={handleInputFocus}
             />
           </div>
@@ -120,11 +120,10 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
         <div className="issue-row">
           <div className="issue-label">{t('account.emailAddress')}</div>
           <div className="issue-field">
-            <input
-              type="email"
+            <MaskedEmailInput
+              value={email || ''}
+              onChange={setEmail}
               placeholder={t('transaction.handWrittenIssuance.emailPlaceholder')}
-              value={email}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
               onFocus={handleInputFocus}
             />
           </div>
@@ -132,14 +131,12 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
         <div className="issue-row" style={keyboardAwarePadding}>
           <div className="issue-label">{t('account.phoneNumber')}</div>
           <div className="issue-field">
-            <PatternFormat
+            <MaskedPhoneInput
+              value={phoneNumber || ''}
+              onChange={setPhoneNumber}
               placeholder={t('transaction.handWrittenIssuance.phoneNumberPlaceholder')}
-              value={phoneNumber}
-              valueIsNumericString
-              format="###########"
-              onChange={(e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value)}
               onFocus={handleInputFocus}
-            ></PatternFormat>
+            />
           </div>
         </div>
       </div>