- 수기발행,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);
@@ -55,8 +57,8 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
             <input
               className="error"
               type="text"
-              value={ businessNumber }
-              readOnly={ true }
+              value={businessNumber}
+              readOnly={true}
             />
           </div>
         </div>
@@ -66,14 +68,14 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
           <div className="issue-field">
             <div className="seg-buttons">
               <button
-                className={ `btn-40 ${(purposeType === CashReceiptPurposeType.INCOME_DEDUCTION)? 'btn-blue': 'btn-white'}` }
+                className={`btn-40 ${(purposeType === CashReceiptPurposeType.INCOME_DEDUCTION) ? 'btn-blue' : 'btn-white'}`}
                 type="button"
-                onClick={ () => setPurposeType(CashReceiptPurposeType.INCOME_DEDUCTION) }
+                onClick={() => setPurposeType(CashReceiptPurposeType.INCOME_DEDUCTION)}
               >{t('transaction.handWrittenIssuance.incomeDeduction')}</button>
               <button
-                className={ `btn-40 ${(purposeType === CashReceiptPurposeType.EXPENSE_PROOF)? 'btn-blue': 'btn-white'}` }
+                className={`btn-40 ${(purposeType === CashReceiptPurposeType.EXPENSE_PROOF) ? 'btn-blue' : 'btn-white'}`}
                 type="button"
-                onClick={ () => setPurposeType(CashReceiptPurposeType.EXPENSE_PROOF) }
+                onClick={() => setPurposeType(CashReceiptPurposeType.EXPENSE_PROOF)}
               >{t('transaction.handWrittenIssuance.expenseProof')}</button>
             </div>
           </div>
@@ -84,8 +86,9 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
             <input
               type="text"
               placeholder={t('transaction.handWrittenIssuance.productNamePlaceholder')}
-              value={ productName }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
+              value={productName}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value)}
+              onFocus={handleInputFocus}
             />
           </div>
         </div>
@@ -95,8 +98,9 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
             <input
               type="text"
               placeholder={t('transaction.handWrittenIssuance.buyerNamePlaceholder')}
-              value={ buyerName }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
+              value={buyerName}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
+              onFocus={handleInputFocus}
             />
           </div>
         </div>
@@ -105,10 +109,11 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
           <div className="issue-field">
             <PatternFormat
               placeholder={t('transaction.handWrittenIssuance.issueNumberPlaceholder')}
-              value={ issueNumber }
+              value={issueNumber}
               valueIsNumericString
               format="###########"
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setIssueNumber(e.target.value) }
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setIssueNumber(e.target.value)}
+              onFocus={handleInputFocus}
             ></PatternFormat>
           </div>
         </div>
@@ -118,20 +123,22 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
             <input
               type="email"
               placeholder={t('transaction.handWrittenIssuance.emailPlaceholder')}
-              value={ email }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value) }
+              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
               placeholder={t('transaction.handWrittenIssuance.phoneNumberPlaceholder')}
-              value={ phoneNumber }
+              value={phoneNumber}
               valueIsNumericString
               format="###########"
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value) }
+              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

@@ -4,9 +4,9 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useQnaSaveMutation } from '@/entities/support/api/use-qna-save-mutation';
 import { HeaderType } from '@/entities/common/model/types';
 import {
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode,
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useStore } from '@/shared/model/store';
@@ -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);
@@ -54,25 +56,25 @@ export const QnaRegisterPage = () => {
     key: string
   ) => {
     let value = e.target.value;
-    if(key === QnaRegisterPropsName.Mid){
+    if (key === QnaRegisterPropsName.Mid) {
       setMid(value);
     }
-    else if(key === QnaRegisterPropsName.RequestType){
+    else if (key === QnaRegisterPropsName.RequestType) {
       setRequestType(value);
     }
-    else if(key === QnaRegisterPropsName.RequestName){
+    else if (key === QnaRegisterPropsName.RequestName) {
       setRequestName(value);
     }
-    else if(key === QnaRegisterPropsName.RequestTel){
+    else if (key === QnaRegisterPropsName.RequestTel) {
       setRequestTel(value);
     }
-    else if(key === QnaRegisterPropsName.RequestEmail){
+    else if (key === QnaRegisterPropsName.RequestEmail) {
       setRequestEmail(value);
     }
-    else if(key === QnaRegisterPropsName.Title){
+    else if (key === QnaRegisterPropsName.Title) {
       setTitle(value);
     }
-    else if(key === QnaRegisterPropsName.Contents){
+    else if (key === QnaRegisterPropsName.Contents) {
       setContents(value);
     }
   };
@@ -87,7 +89,7 @@ export const QnaRegisterPage = () => {
           afterLeave={unmount}
           open={isOpen}
           onClose={close}
-          message={ msg }
+          message={msg}
           buttonLabel={[t('support.qna.confirmButton')]}
         />
       );
@@ -95,35 +97,35 @@ export const QnaRegisterPage = () => {
   }
   const checkEmail = (email: string) => {
     var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
-    if(email != '' && email != 'undefined' && re.test(email)){
+    if (email != '' && email != 'undefined' && re.test(email)) {
       return true;
     }
-    else{
+    else {
       return false;
     }
   };
   const callRegister = () => {
-    if(!title){
+    if (!title) {
       showAlert(t('support.qna.validation.title'));
       return;
     }
-    else if(!requestType){
+    else if (!requestType) {
       showAlert(t('support.qna.validation.requestType'));
       return;
     }
-    else if(!requestName){
+    else if (!requestName) {
       showAlert(t('support.qna.validation.requestName'));
       return;
     }
-    else if(!requestTel){
+    else if (!requestTel) {
       showAlert(t('support.qna.validation.requestTel'));
       return;
     }
-    else if(requestEmail && !checkEmail(requestEmail)){
+    else if (requestEmail && !checkEmail(requestEmail)) {
       showAlert(t('support.qna.validation.requestEmail'));
       return;
     }
-    else if(!contents){
+    else if (!contents) {
       showAlert(t('support.qna.validation.contents'));
       return;
     }
@@ -140,7 +142,7 @@ export const QnaRegisterPage = () => {
       alert(t('support.qna.successMessage'));
       navigate(PATHS.support.qna.list);
     }).catch((e: any) => {
-      if(e.response?.data?.error?.message){
+      if (e.response?.data?.error?.message) {
         showAlert(e.response?.data?.error?.message);
         return;
       }
@@ -168,9 +170,10 @@ export const QnaRegisterPage = () => {
                 <div className="inq-control">
                   <input
                     type="text"
-                    value={ title }
-                    required= { true }
-                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.Title) }
+                    value={title}
+                    required={true}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.Title)}
+                    onFocus={handleInputFocus}
                   />
                 </div>
               </div>
@@ -180,9 +183,9 @@ export const QnaRegisterPage = () => {
                 </div>
                 <div className="inq-control">
                   <select
-                    value={ requestType }
-                    required= { true }
-                    onChange={ (e: ChangeEvent<HTMLSelectElement>) => setInputValue(e, QnaRegisterPropsName.RequestType) }
+                    value={requestType}
+                    required={true}
+                    onChange={(e: ChangeEvent<HTMLSelectElement>) => setInputValue(e, QnaRegisterPropsName.RequestType)}
                   >
                     <option value="">{t('support.qna.categories.choose')}</option>
                     <option value="01">{t('support.qna.categories.01')}</option>
@@ -202,9 +205,10 @@ export const QnaRegisterPage = () => {
                 <div className="inq-control">
                   <input
                     type="text"
-                    value={ requestName }
-                    required= { true }
-                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestName) }
+                    value={requestName}
+                    required={true}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestName)}
+                    onFocus={handleInputFocus}
                   />
                 </div>
               </div>
@@ -215,10 +219,11 @@ export const QnaRegisterPage = () => {
                 <div className="inq-control">
                   <PatternFormat
                     placeholder={t('support.qna.formLabels.phonePlaceholder')}
-                    value={ requestTel }
+                    value={requestTel}
                     valueIsNumericString
                     format="###########"
-                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestTel) }
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestTel)}
+                    onFocus={handleInputFocus}
                   ></PatternFormat>
                 </div>
               </div>
@@ -228,20 +233,22 @@ export const QnaRegisterPage = () => {
                   <input
                     type="email"
                     placeholder={t('support.qna.formLabels.emailPlaceholder')}
-                    value={ requestEmail }
-                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestEmail) }
+                    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>
                 <div className="inq-text-body">
                   <textarea
-                    value={ contents }
-                    required= { true }
-                    onChange={ (e: ChangeEvent<HTMLTextAreaElement>) => setInputValue(e, QnaRegisterPropsName.Contents) }
+                    value={contents}
+                    required={true}
+                    onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setInputValue(e, QnaRegisterPropsName.Contents)}
+                    onFocus={handleInputFocus}
                   ></textarea>
                 </div>
               </div>
@@ -249,7 +256,7 @@ export const QnaRegisterPage = () => {
             <div className="apply-row">
               <button
                 className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToRegisterQna() }
+                onClick={() => onClickToRegisterQna()}
               >{t('support.qna.submitButton')}</button>
             </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);
@@ -51,26 +52,26 @@ export const BillingChargePage = () => {
   };
 
   const onClickToBillingCharge = () => {
-    if(!billKey){
+    if (!billKey) {
       showAlert('빌키는 필수 입력 항목입니다.');
       return;
     }
-    else if(!productName){
+    else if (!productName) {
       showAlert('상품명은 필수 입력 항목입니다.');
     }
-    else if(!productAmount){
+    else if (!productAmount) {
       showAlert('상품금액은 필수 입력 항목입니다.');
     }
-    else if(productAmount <= 0){
+    else if (productAmount <= 0) {
       showAlert('상품금액은 0보다 커야 합니다.');
     }
-    else if(!orderNumber){
+    else if (!orderNumber) {
       showAlert('주문번호는 필수 입력 항목입니다.');
     }
-    else if(!buyerName){
+    else if (!buyerName) {
       showAlert('구매자명은 필수 입력 항목입니다.');
     }
-    
+
     let params: BillingChargeParams = {
       billKey: billKey,
       productName: productName,
@@ -81,12 +82,12 @@ export const BillingChargePage = () => {
       installmentMonth: installmentMonth
     };
     billingCharge(params).then((rs: BillingChargeResponse) => {
-      snackBar('결제 신청을 성공하였습니다.', function(){
+      snackBar('결제 신청을 성공하였습니다.', function () {
         navigate(PATHS.transaction.billing.list);
       }, 3000);
-      
+
     }).catch((e: any) => {
-      if(e.response?.data?.error?.message){
+      if (e.response?.data?.error?.message) {
         showAlert(e.response?.data?.error?.message);
         return;
       }
@@ -95,32 +96,32 @@ export const BillingChargePage = () => {
 
   const onChangeBillKey = (value: string) => {
     const pattern = /^[A-Za-z0-9]+$/;
-    if(pattern.test(value) || value === ''){
+    if (pattern.test(value) || value === '') {
       setBillKey(value);
     }
   };
 
   const makeInstallmentMonthSelect = () => {
     let rs = [];
-    
+
     rs.push(
-      <option 
-        key={ `key-installment` }
+      <option
+        key={`key-installment`}
         value=''
       >선택</option>
     );
     rs.push(
-      <option 
-        key={ `key-installment-0` }
+      <option
+        key={`key-installment-0`}
         value='00'
       >일시불</option>
     );
-    for(let i=2;i<=24;i++){
-      let val = (i < 10)? '0'+i: ''+i;
+    for (let i = 2; i <= 24; i++) {
+      let val = (i < 10) ? '0' + i : '' + i;
       rs.push(
-        <option 
-          key={ `key-installment-${i}`}
-          value={ val }
+        <option
+          key={`key-installment-${i}`}
+          value={val}
         >{i}개월</option>
       );
     };
@@ -138,20 +139,22 @@ export const BillingChargePage = () => {
                 <div className="billing-row">
                   <div className="billing-label">빌키 <span>*</span></div>
                   <div className="billing-field">
-                    <input 
-                      type="text" 
-                      value={ billKey }
-                      onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeBillKey(e.target.value) }
+                    <input
+                      type="text"
+                      value={billKey}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeBillKey(e.target.value)}
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
                 <div className="billing-row">
                   <div className="billing-label">상품명 <span>*</span></div>
                   <div className="billing-field">
-                    <input 
-                      type="text" 
-                      value={ productName }
-                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
+                    <input
+                      type="text"
+                      value={productName}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value)}
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
@@ -159,30 +162,33 @@ export const BillingChargePage = () => {
                   <div className="billing-label">상품금액 <span>*</span></div>
                   <div className="billing-field">
                     <NumericFormat
-                      value={ productAmount }
-                      allowNegative={ false }
+                      value={productAmount}
+                      allowNegative={false}
                       displayType="input"
-                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductAmount(parseInt(e.target.value)) }
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setProductAmount(parseInt(e.target.value))}
+                      onFocus={handleInputFocus}
                     ></NumericFormat>
                   </div>
                 </div>
                 <div className="billing-row">
                   <div className="billing-label">주문번호 <span>*</span></div>
                   <div className="billing-field">
-                    <input 
-                      type="text" 
-                      value={ orderNumber }
-                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value) }
+                    <input
+                      type="text"
+                      value={orderNumber}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value)}
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
                 <div className="billing-row">
                   <div className="billing-label">구매자명 <span>*</span></div>
                   <div className="billing-field">
-                    <input 
-                      type="text" 
-                      value={ buyerName }
-                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
+                    <input
+                      type="text"
+                      value={buyerName}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
@@ -194,16 +200,16 @@ export const BillingChargePage = () => {
                       <input
                         type="text"
                         placeholder="날짜 선택"
-                        value={ paymentRequestDate }
-                        readOnly={ true }
+                        value={paymentRequestDate}
+                        readOnly={true}
                       />
                       <button
                         className="date-btn"
                         type="button"
-                        onClick={ () => onClickToOpenCalendar() }
+                        onClick={() => onClickToOpenCalendar()}
                       >
-                        <img 
-                          src={ IMAGE_ROOT + '/ico_date.svg' }
+                        <img
+                          src={IMAGE_ROOT + '/ico_date.svg'}
                           alt="clear"
                         />
                       </button>
@@ -211,33 +217,33 @@ 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
-                      value={ installmentMonth }
-                      onChange={ (e: ChangeEvent<HTMLSelectElement>) => setBuyerName(e.target.value) }
+                      value={installmentMonth}
+                      onChange={(e: ChangeEvent<HTMLSelectElement>) => setBuyerName(e.target.value)}
                     >
-                      { makeInstallmentMonthSelect() }
+                      {makeInstallmentMonthSelect()}
                     </select>
                   </div>
                 </div>
               </div>
             </div>
             <div className="apply-row">
-              <button 
+              <button
                 className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToBillingCharge() }
+                onClick={() => onClickToBillingCharge()}
               >결제 신청</button>
             </div>
           </div>
         </div>
       </main>
       <NiceCalendar
-        calendarOpen={ calendarOpen }
-        setCalendarOpen={ setCalendarOpen }
-        calendarType={ CalendarType.Single }
-        setNewDate={ setNewDate }
+        calendarOpen={calendarOpen}
+        setCalendarOpen={setCalendarOpen}
+        calendarType={CalendarType.Single}
+        setNewDate={setNewDate}
       ></NiceCalendar>
     </>
   );

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