From 61993298a75b910572b4a4d75e1833948fa61c94 Mon Sep 17 00:00:00 2001 From: HyeonJongKim Date: Thu, 20 Nov 2025 18:51:50 +0900 Subject: [PATCH] =?UTF-8?q?-=20=EA=B0=81=20=ED=95=84=ED=84=B0=20=ED=82=A4?= =?UTF-8?q?=ED=8C=A8=EB=93=9C=20=EA=B0=80=EB=A6=BC=20=ED=98=84=EC=83=81=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../filter/account-holder-search-filter.tsx | 6 ++++-- .../ui/ars/filter/ars-filter.tsx | 6 +++++- .../ui/face-auth/filter/face-auth-filter.tsx | 3 +++ .../ui/filter/alimtalk-filter.tsx | 7 +++++-- .../ui/filter/fund-account-result-filter.tsx | 4 +++- .../filter/fund-account-trnasaction-filter.tsx | 4 +++- .../filter/key-in-payment-filter.tsx | 6 +++++- .../filter/link-payment-history-filter.tsx | 4 +++- .../filter/link-payment-pending-send-filter.tsx | 4 +++- .../ui/sms-payment/sms-payment-filter.tsx | 5 ++++- src/entities/common/model/types.ts | 4 ++++ .../ui/filter/all-transaction-filter.tsx | 7 ++++++- .../transaction/ui/filter/billing-filter.tsx | 8 ++++++-- .../ui/filter/cash-receipt-filter.tsx | 6 +++++- .../transaction/ui/filter/escrow-filter.tsx | 6 +++++- src/pages/account/user/add-account-page.tsx | 16 +++++++++++++--- .../key-in-payment/key-in-payment-page.tsx | 6 +++--- src/shared/lib/hooks/use-keyboard-aware.ts | 4 ++-- src/shared/ui/filter/input.tsx | 7 +++++-- src/shared/ui/filter/range-amount.tsx | 8 ++++++-- src/shared/ui/filter/select-input.tsx | 16 +++++++++------- src/shared/ui/filter/select.tsx | 1 + 22 files changed, 103 insertions(+), 35 deletions(-) diff --git a/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx b/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx index d2bed21..1e8a3c3 100644 --- a/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx +++ b/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(mid); const [filterSearchType, setFilterSearchType] = useState(searchType); const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); @@ -85,7 +86,7 @@ export const AccountHolderSearchFilter = ({
@@ -104,6 +105,7 @@ export const AccountHolderSearchFilter = ({ selectOptions={getSearchTypeOption(t)} inputValue={filterSearchKeyword} inputSetter={setFilterSearchKeyword} + handleInputFocus={handleInputFocus} > { - + const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware(); const [filterMid, setFilterMid] = useState(mid); const [filterMoid, setFilterMoid] = useState(moid); const [filterFromDate, setFilterFromDate] = useState(moment(fromDate).format('YYYYMMDD')); @@ -122,6 +123,7 @@ export const ArsFilter = ({ title={t('transaction.constants.orderNumber')} inputValue={ filterMoid } inputSetter={ setFilterMoid } + handleInputFocus={ handleInputFocus } >
diff --git a/src/entities/additional-service/ui/face-auth/filter/face-auth-filter.tsx b/src/entities/additional-service/ui/face-auth/filter/face-auth-filter.tsx index 12d66da..205e6be 100644 --- a/src/entities/additional-service/ui/face-auth/filter/face-auth-filter.tsx +++ b/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(mid); const [filterMemberId, setFilterMemberId] = useState(userMallId); @@ -89,6 +91,7 @@ export const FaceAuthFilter = ({ title={t('additionalService.faceAuth.merchantMemberId')} inputValue={filterMemberId} inputSetter={setFilterMemberId} + handleInputFocus={ handleInputFocus } > { const { t } = useTranslation(); + const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware(); const [filterMid, setFilterMid] = useState(mid); const [filterSearchCl, setFilterSearchCl] = useState(searchCl); @@ -126,7 +128,7 @@ export const AlimtalkFilter = ({
@@ -134,7 +136,7 @@ export const AlimtalkFilter = ({ { const { t } = useTranslation(); - + const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware(); const [filterMid, setFilterMid] = useState(mid); const [filterSearchCl, setFilterSearchCl] = useState(searchCl); const [filterSearchValue, setFilterSearchValue] = useState(searchValue); @@ -132,6 +133,7 @@ export const FundAccountResultFilter = ({ selectOptions={getFundAccountSearchClOptionsGroup(t)} inputValue={filterSearchValue} inputSetter={setFilterSearchValue} + handleInputFocus={ handleInputFocus } > { const { t } = useTranslation(); - + const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware(); const [filterMid, setFilterMid] = useState(mid); const [filterSearchCl, setFilterSearchCl] = useState(searchCl); const [filterSearchValue, setFilterSearchValue] = useState(searchValue); @@ -126,6 +127,7 @@ export const FundAccountTransactionFilter = ({ selectOptions={getFundAccountSearchClOptionsGroup(t)} inputValue={filterSearchValue} inputSetter={setFilterSearchValue} + handleInputFocus={ handleInputFocus } > { const { t } = useTranslation(); + const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware(); const [filterMid, setFilterMid] = useState(mid); const [filterStartDate, setFilterStartDate] = useState(startDate); @@ -69,7 +71,7 @@ export const KeyInPaymentFilter = ({
@@ -101,6 +103,8 @@ export const KeyInPaymentFilter = ({ maxAmount={filterMaxAmount} setMinAmount={setFilterMinAmount} setMaxAmount={setFilterMaxAmount} + handleInputFocus={handleInputFocus} + keyboardAwarePadding={keyboardAwarePadding} >
diff --git a/src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx b/src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx index e0a47da..13dbecd 100644 --- a/src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx +++ b/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(mid); const [filterSearchCl, setFilterSearchCl] = useState(searchCl); const [filterSearchValue, setFilterSearchValue] = useState(searchValue); @@ -130,6 +131,7 @@ export const LinkPaymentHistoryFilter = ({ selectOptions={searchTypeOption} inputValue={filterSearchValue} inputSetter={setFilterSearchValue} + handleInputFocus={ handleInputFocus } > { const { t } = useTranslation(); - + const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware(); const [filterMid, setFilterMid] = useState(mid); const [filterSearchType, setFilterSearchType] = useState(searchCl); const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); @@ -114,6 +115,7 @@ export const LinkPaymentWaitSendFilter = ({ selectOptions={searchTypeOption} inputValue={filterSearchKeyword} inputSetter={setFilterSearchKeyword} + handleInputFocus={ handleInputFocus } > { const { t } = useTranslation(); + const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware(); const [filterMid, setFilterMid] = useState(mid); const [filterSearchCl, setFilterSearchCl] = useState(searchCl); @@ -84,7 +86,7 @@ export const SmsPaymentFilter = ({
@@ -103,6 +105,7 @@ export const SmsPaymentFilter = ({ selectOptions={searchTypeOption} inputValue={filterSearchValue} inputSetter={setFilterSearchValue} + handleInputFocus={handleInputFocus} > void; setMaxAmount: (maxAmount?: number) => void; + handleInputFocus?: (e: FocusEvent) => void; + keyboardAwarePadding?: CSSProperties; }; export interface FilterButtonGroupsProps { title: string; diff --git a/src/entities/transaction/ui/filter/all-transaction-filter.tsx b/src/entities/transaction/ui/filter/all-transaction-filter.tsx index 046d987..77be604 100644 --- a/src/entities/transaction/ui/filter/all-transaction-filter.tsx +++ b/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>>(); - + 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 } > {/* diff --git a/src/entities/transaction/ui/filter/billing-filter.tsx b/src/entities/transaction/ui/filter/billing-filter.tsx index d3fb325..895473d 100644 --- a/src/entities/transaction/ui/filter/billing-filter.tsx +++ b/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(mid); const [filterSearchType, setFilterSearchType] = useState(searchType); const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); @@ -124,7 +125,7 @@ export const BillingFilter = ({
diff --git a/src/entities/transaction/ui/filter/cash-receipt-filter.tsx b/src/entities/transaction/ui/filter/cash-receipt-filter.tsx index ae75c20..6f3ef08 100644 --- a/src/entities/transaction/ui/filter/cash-receipt-filter.tsx +++ b/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(mid); const [filterStartDate, setFilterStartDate] = useState(startDate); const [filterEndDate, setFilterEndDate] = useState(endDate); @@ -153,6 +155,8 @@ export const CashReceiptFilter = ({ selectOptions={ issueTypeOptionsGroup } inputValue={ filterSearchNumber } inputSetter={ setFilterSearchNumber } + handleInputFocus={ handleInputFocus } + keyboardAwarePadding={ keyboardAwarePadding } >
diff --git a/src/entities/transaction/ui/filter/escrow-filter.tsx b/src/entities/transaction/ui/filter/escrow-filter.tsx index dde9569..fb9995d 100644 --- a/src/entities/transaction/ui/filter/escrow-filter.tsx +++ b/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(mid); const [filterSearchType, setFilterSearchType] = useState(searchType); const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); @@ -127,6 +128,7 @@ export const EscrowFilter = ({ selectOptions={ searchTypeOptionsGroup } inputValue={ filterSearchKeyword } inputSetter={ setFilterSearchKeyword } + handleInputFocus={ handleInputFocus } >
diff --git a/src/pages/account/user/add-account-page.tsx b/src/pages/account/user/add-account-page.tsx index 9bf0e05..89e0cdb 100644 --- a/src/pages/account/user/add-account-page.tsx +++ b/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 ( -
+
handleNewPhoneChange(index, e.target.value)} - onFocus={() => setEditablePhoneIndex(index)} + onFocus={(e) => { + handleInputFocus(e); + setEditablePhoneIndex(index); + }} onBlur={() => { if (phone && isValidPhone(phone)) { setEditablePhoneIndex(-1); diff --git a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx index 2245305..d6a832e 100644 --- a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx +++ b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx @@ -221,9 +221,9 @@ export const KeyInPaymentPage = () => { sortType ]); - if (!hasAccess) { - return ; - } + // if (!hasAccess) { + // return ; + // } return ( <> diff --git a/src/shared/lib/hooks/use-keyboard-aware.ts b/src/shared/lib/hooks/use-keyboard-aware.ts index f3139e6..41d063c 100644 --- a/src/shared/lib/hooks/use-keyboard-aware.ts +++ b/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 || {}; diff --git a/src/shared/ui/filter/input.tsx b/src/shared/ui/filter/input.tsx index 2a84798..c8b20bb 100644 --- a/src/shared/ui/filter/input.tsx +++ b/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) => void; }; export const FilterInput = ({ title, inputValue, - inputSetter + inputSetter, + handleInputFocus }: FilterInputProps) => { return ( @@ -25,6 +27,7 @@ export const FilterInput = ({ placeholder="" value={ inputValue } onChange={ (e: ChangeEvent) => inputSetter(e.target.value)} + onFocus={ handleInputFocus } />
diff --git a/src/shared/ui/filter/range-amount.tsx b/src/shared/ui/filter/range-amount.tsx index 7dc49f7..810a4ca 100644 --- a/src/shared/ui/filter/range-amount.tsx +++ b/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(title || '거래금액'); - const onChangeMinAmount = (val?: number) => { setMinAmount(val || undefined); }; @@ -30,13 +32,14 @@ export const FilterRangeAmount = ({ className="opt-label" style={{ fontSize: 'var(--fs-14)' }} >{ filterTitle } -
+
) => onChangeMinAmount(parseInt(e.target.value)) } + onFocus={handleInputFocus} >
~ @@ -46,6 +49,7 @@ export const FilterRangeAmount = ({ allowNegative={ false } displayType="input" onChange={(e: ChangeEvent) => onChangeMaxAmount(parseInt(e.target.value)) } + onFocus={handleInputFocus} >
diff --git a/src/shared/ui/filter/select-input.tsx b/src/shared/ui/filter/select-input.tsx index 3acd5f8..1ea2c0e 100644 --- a/src/shared/ui/filter/select-input.tsx +++ b/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>; inputValue: string | undefined; inputSetter?: (value: any) => void; + handleInputFocus?: (e: FocusEvent) => 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 } -
+