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

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

@@ -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>

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

@@ -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>

src/pages/support/qna/register-page.tsx

@@ -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>

src/pages/transaction/billing/charge-page.tsx

@@ -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

src/shared/lib/hooks/use-keyboard-aware.ts

@@ -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에서 사용할 공통 핸들러
+    // input과 textarea 모두에서 사용할 공통 핸들러
-    const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    const handleInputFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         // focus된 요소를 저장
         (window as any).setFocusedElement?.(e.target);
     };