- 부가서비스 각 요청 페이지 키패드 높이 만큼 패딩 삽입 hook 추가

- 각 요청 페이지 자동 패딩 적용

src/pages/additional-service/ars/request-page.tsx

@@ -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()}