nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
HyeonJongKim
2025-11-20 18:51:50 +09:00
parent e0e22920cd
commit 61993298a7
22 changed files with 103 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

6
src/entities/additional-service/ui/ars/filter/ars-filter.tsx
View File

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

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

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

7
src/entities/additional-service/ui/filter/alimtalk-filter.tsx
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

4
src/entities/common/model/types.ts
View File

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

7
src/entities/transaction/ui/filter/all-transaction-filter.tsx
View File

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

8
src/entities/transaction/ui/filter/billing-filter.tsx
View File

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

6
src/entities/transaction/ui/filter/cash-receipt-filter.tsx
View File

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

6
src/entities/transaction/ui/filter/escrow-filter.tsx
View File

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

16
src/pages/account/user/add-account-page.tsx
View File

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

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

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

4
src/shared/lib/hooks/use-keyboard-aware.ts
View File

@@ -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 || {};

7
src/shared/ui/filter/input.tsx
View File

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

8
src/shared/ui/filter/range-amount.tsx
View File

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

16
src/shared/ui/filter/select-input.tsx
View File

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

1
src/shared/ui/filter/select.tsx
View File

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