- 각 필터 키패드 가림 현상 수정

src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx

@@ -13,6 +13,7 @@ import { getResultStatusBtnGroup, getSearchTypeOption } from '@/entities/additio
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 
 export const AccountHolderSearchFilter = ({
 	filterOn,
@@ -33,7 +34,7 @@ export const AccountHolderSearchFilter = ({
 	setResultStatus
 }: AccountHolderSearchFilterProps) => {
 	const { t } = useTranslation();
-
+	const { handleInputFocus } = useKeyboardAware();
 	const [filterMid, setFilterMid] = useState<string>(mid);
 	const [filterSearchType, setFilterSearchType] = useState<AccountHolderSearchCl>(searchType);
 	const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
@@ -85,7 +86,7 @@ export const AccountHolderSearchFilter = ({
 						<div className="full-menu-actions">
 							<FullMenuClose
 								addClass='full-menu-close'
-								onClickToCallback={ onClickToClose }
+								onClickToCallback={onClickToClose}
 							></FullMenuClose>
 						</div>
 					</div>
@@ -104,6 +105,7 @@ export const AccountHolderSearchFilter = ({
 							selectOptions={getSearchTypeOption(t)}
 							inputValue={filterSearchKeyword}
 							inputSetter={setFilterSearchKeyword}
+							handleInputFocus={handleInputFocus}
 						></FilterSelectInput>
 						<FilterCalendar
 							startDate={filterStartDate}

src/entities/additional-service/ui/ars/filter/ars-filter.tsx

@@ -18,6 +18,7 @@ import { getArsOrderStatusBtnGroup, getArsPaymentStatusBtnGroup } from '../../..
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
 
 export interface ArsFilterProps {
   filterOn: boolean;
@@ -60,7 +61,7 @@ export const ArsFilter = ({
   setMinAmount,
   setMaxAmount
 }: ArsFilterProps) => {
-
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterMoid, setFilterMoid] = useState<string>(moid);
   const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYYMMDD'));
@@ -122,6 +123,7 @@ export const ArsFilter = ({
               title={t('transaction.constants.orderNumber')}
               inputValue={ filterMoid }
               inputSetter={ setFilterMoid }
+              handleInputFocus={ handleInputFocus }
             ></FilterInput>
             <FilterCalendar
               title={t('filter.period')}
@@ -148,6 +150,8 @@ export const ArsFilter = ({
               maxAmount={ filterMaxAmount }
               setMinAmount={ setFilterMinAmount }
               setMaxAmount={ setFilterMaxAmount }
+              handleInputFocus={ handleInputFocus }
+              keyboardAwarePadding={ keyboardAwarePadding }
             ></FilterRangeAmount>
           </div>
           <div className="apply-row">

src/entities/additional-service/ui/face-auth/filter/face-auth-filter.tsx

@@ -13,6 +13,7 @@ import { getAuthResultBtnGroup, getTransactionTypeBtnGroup } from '@/entities/ad
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 
 export const FaceAuthFilter = ({
 	filterOn,
@@ -31,6 +32,7 @@ export const FaceAuthFilter = ({
 	setAuthResult
 }: FaceAuthFilterProps) => {
 	const { t } = useTranslation();
+	const { handleInputFocus } = useKeyboardAware();
 
 	const [filterMid, setFilterMid] = useState<string>(mid);
 	const [filterMemberId, setFilterMemberId] = useState<string>(userMallId);
@@ -89,6 +91,7 @@ export const FaceAuthFilter = ({
 							title={t('additionalService.faceAuth.merchantMemberId')}
 							inputValue={filterMemberId}
 							inputSetter={setFilterMemberId}
+							handleInputFocus={ handleInputFocus }
 						></FilterInput>
 
 						<FilterCalendar

src/entities/additional-service/ui/filter/alimtalk-filter.tsx

@@ -18,6 +18,7 @@ import { getAlimtalkAlimClBtnGroupForGeneral, getAlimtalkAlimClBtnGroupForVBank,
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 
 export interface AlimtalkFilterProps {
   filterOn: boolean;
@@ -65,6 +66,7 @@ export const AlimtalkFilter = ({
   setSendCl
 }: AlimtalkFilterProps) => {
   const { t } = useTranslation();
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
 
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterSearchCl, setFilterSearchCl] = useState<AlimtalkSearchCl>(searchCl);
@@ -126,7 +128,7 @@ export const AlimtalkFilter = ({
             <div className="full-menu-actions">
               <FullMenuClose
                 addClass='full-menu-close'
-                onClickToCallback={ onClickToClose }
+                onClickToCallback={onClickToClose}
               ></FullMenuClose>
             </div>
           </div>
@@ -134,7 +136,7 @@ export const AlimtalkFilter = ({
             <FilterSelectMid
               title={t('filter.merchant')}
               selectSetter={setFilterMid}
-              showType={ 'GID' }
+              showType={'GID'}
             ></FilterSelectMid>
             <FilterSelectInput
               title={t('additionalService.alimtalk.orderOrTid')}
@@ -143,6 +145,7 @@ export const AlimtalkFilter = ({
               selectOptions={getAlimtalkSearchClOptionGroup(t)}
               inputValue={filterSearchValue}
               inputSetter={setFilterSearchValue}
+              handleInputFocus={handleInputFocus}
             ></FilterSelectInput>
             <FilterSelect
               title={t('filter.paymentMethod')}

src/entities/additional-service/ui/filter/fund-account-result-filter.tsx

@@ -13,6 +13,7 @@ import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 
 export interface FundAccountResultFilterProps {
   filterOn: boolean;
@@ -55,7 +56,7 @@ export const FundAccountResultFilter = ({
   setResultStatus
 }: FundAccountResultFilterProps) => {
   const { t } = useTranslation();
-
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterSearchCl, setFilterSearchCl] = useState<FundAccountSearchCl>(searchCl);
   const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
@@ -132,6 +133,7 @@ export const FundAccountResultFilter = ({
               selectOptions={getFundAccountSearchClOptionsGroup(t)}
               inputValue={filterSearchValue}
               inputSetter={setFilterSearchValue}
+              handleInputFocus={ handleInputFocus }
             ></FilterSelectInput>
             <FilterButtonGroups
               title={t('additionalService.fundAccount.searchCriteria')}

src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx

@@ -13,6 +13,7 @@ import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 
 export interface FundAccountTransactionFilterProps {
   filterOn: boolean;
@@ -51,7 +52,7 @@ export const FundAccountTransactionFilter = ({
   setStatus
 }: FundAccountTransactionFilterProps) => {
   const { t } = useTranslation();
-
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterSearchCl, setFilterSearchCl] = useState<FundAccountSearchCl>(searchCl);
   const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
@@ -126,6 +127,7 @@ export const FundAccountTransactionFilter = ({
               selectOptions={getFundAccountSearchClOptionsGroup(t)}
               inputValue={filterSearchValue}
               inputSetter={setFilterSearchValue}
+              handleInputFocus={ handleInputFocus }
             ></FilterSelectInput>
             <FilterCalendar
               title={t('filter.period')}

src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx

@@ -13,6 +13,7 @@ import { getKeyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-serv
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 
 export const KeyInPaymentFilter = ({
 	filterOn,
@@ -31,6 +32,7 @@ export const KeyInPaymentFilter = ({
 	setMaxAmount
 }: KeyInPaymentFilterProps) => {
 	const { t } = useTranslation();
+	const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
 
 	const [filterMid, setFilterMid] = useState<string>(mid);
 	const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
@@ -69,7 +71,7 @@ export const KeyInPaymentFilter = ({
 						<div className="full-menu-actions">
 							<FullMenuClose
 								addClass='full-menu-close'
-								onClickToCallback={ onClickToClose }
+								onClickToCallback={onClickToClose}
 							></FullMenuClose>
 						</div>
 					</div>
@@ -101,6 +103,8 @@ export const KeyInPaymentFilter = ({
 							maxAmount={filterMaxAmount}
 							setMinAmount={setFilterMinAmount}
 							setMaxAmount={setFilterMaxAmount}
+							handleInputFocus={handleInputFocus}
+							keyboardAwarePadding={keyboardAwarePadding}
 						></FilterRangeAmount>
 					</div>
 					<div className="apply-row">

src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx

@@ -17,6 +17,7 @@ import { LinkPaymentHistoryFilterProps, LinkPaymentPaymentStatus, LinkPaymentSea
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 
 export const LinkPaymentHistoryFilter = ({
 	filterOn,
@@ -39,7 +40,7 @@ export const LinkPaymentHistoryFilter = ({
 	setSendMethod
 }: LinkPaymentHistoryFilterProps) => {
 	const { t } = useTranslation();
-
+	const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
 	const [filterMid, setFilterMid] = useState<string>(mid);
 	const [filterSearchCl, setFilterSearchCl] = useState<LinkPaymentSearchCl>(searchCl);
 	const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
@@ -130,6 +131,7 @@ export const LinkPaymentHistoryFilter = ({
 							selectOptions={searchTypeOption}
 							inputValue={filterSearchValue}
 							inputSetter={setFilterSearchValue}
+							handleInputFocus={ handleInputFocus }
 						></FilterSelectInput>
 						<FilterCalendar
 							startDate={filterStartDate}

src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx

@@ -14,6 +14,7 @@ import { useStore } from '@/shared/model/store';
 import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitFilterProps } from '@/entities/additional-service/model/link-pay/types';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 
 export const LinkPaymentWaitSendFilter = ({
 	filterOn,
@@ -34,7 +35,7 @@ export const LinkPaymentWaitSendFilter = ({
 	setProcessStatus
 }: LinkPaymentWaitFilterProps) => {
 	const { t } = useTranslation();
-
+	const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
 	const [filterMid, setFilterMid] = useState<string>(mid);
 	const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchCl>(searchCl);
 	const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
@@ -114,6 +115,7 @@ export const LinkPaymentWaitSendFilter = ({
 							selectOptions={searchTypeOption}
 							inputValue={filterSearchKeyword}
 							inputSetter={setFilterSearchKeyword}
+							handleInputFocus={ handleInputFocus }
 						></FilterSelectInput>
 						<FilterCalendar
 							startDate={filterStartDate}

src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx

@@ -13,6 +13,7 @@ import { useStore } from '@/shared/model/store';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 export const SmsPaymentFilter = ({
   filterOn,
   setFilterOn,
@@ -30,6 +31,7 @@ export const SmsPaymentFilter = ({
   setSmsCl
 }: SmsPaymentFilterProps) => {
   const { t } = useTranslation();
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
 
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterSearchCl, setFilterSearchCl] = useState<SmsPaymentSearchCl>(searchCl);
@@ -84,7 +86,7 @@ export const SmsPaymentFilter = ({
             <div className="full-menu-actions">
               <FullMenuClose
                 addClass='full-menu-close'
-                onClickToCallback={ onClickToClose }
+                onClickToCallback={onClickToClose}
               ></FullMenuClose>
             </div>
           </div>
@@ -103,6 +105,7 @@ export const SmsPaymentFilter = ({
               selectOptions={searchTypeOption}
               inputValue={filterSearchValue}
               inputSetter={setFilterSearchValue}
+              handleInputFocus={handleInputFocus}
             ></FilterSelectInput>
             <FilterCalendar
               startDate={filterFromDate}

src/entities/common/model/types.ts

@@ -1,3 +1,5 @@
+import { CSSProperties, FocusEvent } from 'react';
+
 export enum AppLanguage {
   // DEVICE = 'DEVICE',
   KO = 'ko',
@@ -54,6 +56,8 @@ export interface FilterRangeAmountProps {
   maxAmount?: number;
   setMinAmount: (minAmount?: number) => void;
   setMaxAmount: (maxAmount?: number) => void;
+  handleInputFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+  keyboardAwarePadding?: CSSProperties;
 };
 export interface FilterButtonGroupsProps {
   title: string;

src/entities/transaction/ui/filter/all-transaction-filter.tsx

@@ -24,6 +24,7 @@ import {
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
 
 export const AllTransactionFilter = ({
   filterOn,
@@ -79,7 +80,7 @@ export const AllTransactionFilter = ({
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
   const [statusCodeBtns, setStatusCodeBtns] = useState<Array<Record<string, string>>>();
-
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
   const moidTidOptionsGroup = getAllTransactionMoidTidOptionsGroup(t);
   const allTransactionStatusCode = getAllTransactionStatusCode(t);
 
@@ -243,6 +244,7 @@ export const AllTransactionFilter = ({
               selectOptions={ moidTidOptionsGroup }
               inputValue={ filterMoidTidValue }
               inputSetter={ setFilterMoidTidValue }
+              handleInputFocus={ handleInputFocus }
             ></FilterSelectInput>
             <FilterCalendar
               title={t('filter.period')}
@@ -274,6 +276,7 @@ export const AllTransactionFilter = ({
               maxAmount={ filterMaxAmount }
               setMinAmount={ setFilterMinAmount }
               setMaxAmount={ setFilterMaxAmount }
+              handleInputFocus={ handleInputFocus }
             ></FilterRangeAmount>
             {/*
             <FilterSelect
@@ -290,6 +293,8 @@ export const AllTransactionFilter = ({
               selectOptions={ searchClOptionsGroup }
               inputValue={ filterSearchValue }
               inputSetter={ setFilterSearchValue }
+              handleInputFocus={ handleInputFocus}
+              keyboardAwarePadding={ keyboardAwarePadding }
             ></FilterSelectInput>
 
           </div>

src/entities/transaction/ui/filter/billing-filter.tsx

@@ -29,6 +29,7 @@ import {
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 
 export const BillingFilter = ({
   filterOn,
@@ -55,7 +56,7 @@ export const BillingFilter = ({
   setMaxAmount
 }: BillingFilterProps) => {
   const { t } = useTranslation();
-
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterSearchType, setFilterSearchType] = useState<BillingSearchType>(searchType);
   const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
@@ -124,7 +125,7 @@ export const BillingFilter = ({
           <div className="option-list pt-16 pb-86">
             <FilterSelectMid
               title={t('filter.merchant')}
-              selectSetter={ setMid }
+              selectSetter={ setFilterMid }
               showType={ 'GID' }
             ></FilterSelectMid>
             <FilterSelectInput
@@ -134,6 +135,7 @@ export const BillingFilter = ({
               selectOptions={ searchTypeOptionsGroup }
               inputValue={ searchKeyword }
               inputSetter={ setFilterSearchKeyword }
+              handleInputFocus={ handleInputFocus }
             ></FilterSelectInput>
             <FilterCalendar
               title={t('filter.period')}
@@ -168,6 +170,8 @@ export const BillingFilter = ({
               maxAmount={ filterMaxAmount }
               setMinAmount={ setFilterMinAmount }
               setMaxAmount={ setFilterMaxAmount }
+              handleInputFocus={ handleInputFocus }
+              keyboardAwarePadding={ keyboardAwarePadding }
             ></FilterRangeAmount>
 
           </div>

src/entities/transaction/ui/filter/cash-receipt-filter.tsx

@@ -27,6 +27,7 @@ import {
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 
 export const CashReceiptFilter = ({
   filterOn,
@@ -49,7 +50,8 @@ export const CashReceiptFilter = ({
   setSearchNumber
 }: CashReceiptFilterProps) => {
   const { t } = useTranslation();
-
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
+  
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
   const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
@@ -153,6 +155,8 @@ export const CashReceiptFilter = ({
               selectOptions={ issueTypeOptionsGroup }
               inputValue={ filterSearchNumber }
               inputSetter={ setFilterSearchNumber }
+              handleInputFocus={ handleInputFocus }
+              keyboardAwarePadding={ keyboardAwarePadding }
             ></FilterSelectInput>
           </div>
           <div className="apply-row">

src/entities/transaction/ui/filter/escrow-filter.tsx

@@ -27,6 +27,7 @@ import {
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 
 export const EscrowFilter = ({
   filterOn,
@@ -51,7 +52,7 @@ export const EscrowFilter = ({
   setMaxAmount
 }: EscrowFilterProps) => {
   const { t } = useTranslation();
-
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterSearchType, setFilterSearchType] = useState<EscrowSearchType>(searchType);
   const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
@@ -127,6 +128,7 @@ export const EscrowFilter = ({
               selectOptions={ searchTypeOptionsGroup }
               inputValue={ filterSearchKeyword }
               inputSetter={ setFilterSearchKeyword }
+              handleInputFocus={ handleInputFocus }
             ></FilterSelectInput>
             <FilterCalendar
               title={t('filter.period')}
@@ -155,6 +157,8 @@ export const EscrowFilter = ({
               maxAmount={ filterMaxAmount }
               setMinAmount={ setFilterMinAmount }
               setMaxAmount={ setFilterMaxAmount }
+              handleInputFocus={ handleInputFocus }
+              keyboardAwarePadding={ keyboardAwarePadding }
             ></FilterRangeAmount>
 
           </div>

src/pages/account/user/add-account-page.tsx

@@ -16,6 +16,7 @@ import { useLocation } from 'react-router';
 import { snackBar } from '@/shared/lib/toast';
 import { maskEmail, maskPhoneNumber } from '@/shared/lib/masking';
 import { validatePassword } from '@/shared/lib/password-validation';
+import { useKeyboardAware } from '@/shared/lib/hooks';
 
 export const UserAddAccountPage = () => {
   const { t } = useTranslation();
@@ -23,6 +24,7 @@ export const UserAddAccountPage = () => {
   const location = useLocation();
   const { mid } = location.state || {};
 
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
   const { mutateAsync: userCreate, isPending } = useUserCreateMutation({
     onError: (error) => {
       type ErrorDetail = {
@@ -555,7 +557,10 @@ export const UserAddAccountPage = () => {
                           placeholder="example@domain.com"
                           value={displayValue}
                           onChange={(e) => handleNewEmailChange(index, e.target.value)}
-                          onFocus={() => setEditableEmailIndex(index)}
+                          onFocus={(e) => {
+                            handleInputFocus(e);
+                            setEditableEmailIndex(index);
+                          }}
                           onBlur={() => {
                             if (email && isValidEmail(email)) {
                               setEditableEmailIndex(-1);
@@ -591,14 +596,19 @@ export const UserAddAccountPage = () => {
                     const displayValue = isReadOnly && phone ? maskPhoneNumber(phone) : phone;
 
                     return (
-                      <div className="ua-input-row" key={index}>
+                      <div className="ua-input-row" key={index}
+                      style={keyboardAwarePadding}
+                      >
                         <input
                           className="wid-100"
                           type="tel"
                           placeholder="01012345678"
                           value={displayValue}
                           onChange={(e) => handleNewPhoneChange(index, e.target.value)}
-                          onFocus={() => setEditablePhoneIndex(index)}
+                          onFocus={(e) => {
+                            handleInputFocus(e);
+                            setEditablePhoneIndex(index);
+                          }}
                           onBlur={() => {
                             if (phone && isValidPhone(phone)) {
                               setEditablePhoneIndex(-1);

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -221,9 +221,9 @@ export const KeyInPaymentPage = () => {
     sortType
   ]);
 
-  if (!hasAccess) {
+  // if (!hasAccess) {
-    return <AccessDeniedDialog />;
+  //   return <AccessDeniedDialog />;
-  }
+  // }
 
   return (
     <>

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

@@ -9,9 +9,9 @@ export interface UseKeyboardAwareOptions {
 
 export const useKeyboardAware = (options?: UseKeyboardAwareOptions) => {
     const {
-        defaultPadding = 60,
+        defaultPadding = 0,
         heightRatio = 0.7,
-        maxPadding = 300,
+        maxPadding = 320,
         transition = 'padding-bottom 0.2s ease'
     } = options || {};
 

src/shared/ui/filter/input.tsx

@@ -1,14 +1,16 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, FocusEvent } from 'react';
 
 export interface FilterInputProps {
   title: string;
   inputValue: string;
   inputSetter: (value: any) => void;
+  handleInputFocus?: (e: FocusEvent<HTMLInputElement>) => void;
 };
 export const FilterInput = ({
   title,
   inputValue,
-  inputSetter
+  inputSetter,
+  handleInputFocus
 }: FilterInputProps) => {
 
   return (
@@ -25,6 +27,7 @@ export const FilterInput = ({
             placeholder=""
             value={ inputValue }
             onChange={ (e: ChangeEvent<HTMLInputElement>) => inputSetter(e.target.value)}
+            onFocus={ handleInputFocus }
           />
         </div>
       </div>

src/shared/ui/filter/range-amount.tsx

@@ -1,4 +1,5 @@
 import { FilterRangeAmountProps } from '@/entities/common/model/types';
+import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
 import { useEffect } from 'react';
 import { useState } from 'react';
 import { ChangeEvent } from 'react';
@@ -10,9 +11,10 @@ export const FilterRangeAmount = ({
   maxAmount,
   setMinAmount,
   setMaxAmount,
+  handleInputFocus,
+  keyboardAwarePadding
 }: FilterRangeAmountProps) => {
   const [filterTitle, setFilterTitle] = useState<string>(title || '거래금액');
-
   const onChangeMinAmount = (val?: number) => {
     setMinAmount(val || undefined);
   };
@@ -30,13 +32,14 @@ export const FilterRangeAmount = ({
           className="opt-label"
           style={{ fontSize: 'var(--fs-14)' }}
         >{ filterTitle }</div>
-        <div className="opt-controls">
+        <div className="opt-controls" style={keyboardAwarePadding}>
           <div className="input-wrapper ">
             <NumericFormat
               value={ minAmount }
               allowNegative={ false }
               displayType="input"
               onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeMinAmount(parseInt(e.target.value)) }
+              onFocus={handleInputFocus}
             ></NumericFormat>
           </div>
           <span> ~ </span>
@@ -46,6 +49,7 @@ export const FilterRangeAmount = ({
               allowNegative={ false }
               displayType="input"
               onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeMaxAmount(parseInt(e.target.value)) }
+              onFocus={handleInputFocus}
             ></NumericFormat>
           </div>
         </div>

src/shared/ui/filter/select-input.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, CSSProperties, FocusEvent } from 'react';
 
 export interface FilterSelectInputProps {
   title: string;
@@ -7,6 +7,8 @@ export interface FilterSelectInputProps {
   selectOptions: Array<Record<string, string>>;
   inputValue: string | undefined;
   inputSetter?: (value: any) => void;
+  handleInputFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+  keyboardAwarePadding?: CSSProperties;
 };
 export const FilterSelectInput = ({
   title,
@@ -14,11 +16,10 @@ export const FilterSelectInput = ({
   selectSetter,
   selectOptions,
   inputValue,
-  inputSetter
+  inputSetter,
+  handleInputFocus,
+  keyboardAwarePadding
 }: FilterSelectInputProps) => {
-  const [selectVal, setSelectVal] = useState();
-  const [inputVal, setInputVal] = useState();
-
   const getSelectOptions = () => {
     let rs = [];
     for (let i = 0; i < selectOptions.length; i++) {
@@ -53,10 +54,10 @@ export const FilterSelectInput = ({
           className="opt-label"
           style={{ fontSize: 'var(--fs-14)' }}
         >{ title }</div>
-        <div className="opt-controls">
+        <div className="opt-controls" style={keyboardAwarePadding}>
           <select
             className="w-110"
-            value={ selectValue } 
+            value={ selectValue }
             onChange={ onChangeSelect }
           >
           { getSelectOptions() }
@@ -67,6 +68,7 @@ export const FilterSelectInput = ({
             style={{ height: '38px' }}
             value={inputValue}
             onChange={onChangeInput}
+            onFocus={handleInputFocus}
           />
         </div>
       </div>

src/shared/ui/filter/select.tsx

@@ -5,6 +5,7 @@ export interface FilterSelectProps {
   selectValue: string;
   selectSetter: (value: any) => void;
   selectOptions: Array<Record<string, string>>;
+  
 };
 export const FilterSelect = ({
   title,