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

- FilterSelectMid 수정

Browse Source 
- 부가서비스 Filter Mid Select 컴포넌트 변경
This commit is contained in:
HyeonJongKim
2025-10-30 13:12:09 +09:00
parent 2b9c782f46
commit 8245e394a3
21 changed files with 145 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter.tsx
View File

@@ -9,6 +9,7 @@ import { authStatusBtnGroup } from '@/entities/additional-service/model/account-
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { useStore } from '@/shared/model/store';
import { AccountHolderAuthFilterProps, AccountHolderAuthStatus } from '@/entities/additional-service/model/account-holder-auth/types';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
export const AccountHolderAuthFilter = ({
filterOn,
@@ -28,8 +29,6 @@ export const AccountHolderAuthFilter = ({
const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYYMMDD'));
const [filterAuthStatus, setFilterAuthStatus] = useState<AccountHolderAuthStatus>(authStatus);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => {
setFilterOn(false);
};
@@ -73,12 +72,11 @@ export const AccountHolderAuthFilter = ({
</div>
<div className="option-list pt-16">
<FilterSelect
<FilterSelectMid
title='가맹점'
selectValue={mid}
selectSetter={setMid}
selectOptions={midOptions}
></FilterSelect>
selectSetter={setFilterMid}
showType={'GID'}
></FilterSelectMid>
<FilterCalendar
startDate={filterStartDate}

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

@@ -10,6 +10,7 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@
import { useStore } from '@/shared/model/store';
import { AccountHolderSearchFilterProps, AccountHolderSearchCl, AccountHolderResultStatus } from '@/entities/additional-service/model/account-holder-search/types';
import { resultStatusBtnGroup, SearchTypeOption } from '@/entities/additional-service/model/account-holder-search/constant';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
export const AccountHolderSearchFilter = ({
filterOn,
@@ -38,7 +39,6 @@ export const AccountHolderSearchFilter = ({
const [filterBank, setFilterBank] = useState<string>(bank)
const [filterResultStatus, setFilterResultStatus] = useState<AccountHolderResultStatus>(resultStatus);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const bankList = useStore.getState().CommonStore.bankList;
const bankOptions = [
{ name: '선택', value: '' },
@@ -94,12 +94,11 @@ export const AccountHolderSearchFilter = ({
</div>
<div className="option-list pt-16">
<FilterSelect
<FilterSelectMid
title='가맹점'
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={midOptions}
></FilterSelect>
showType={'GID'}
></FilterSelectMid>
<FilterSelectInput
title='예금주/계좌번호'

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

@@ -10,6 +10,7 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@
import { useStore } from '@/shared/model/store';
import { FaceAuthFilterProps, FaceAuthResult, FaceAuthTransType } from '@/entities/additional-service/model/face-auth/types';
import { AuthResultBtnGroup, TransactionTypeBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
export const FaceAuthFilter = ({
filterOn,
@@ -35,8 +36,6 @@ export const FaceAuthFilter = ({
const [filterTransType, setFIlterTransType] = useState<FaceAuthTransType>(transType);
const [filterAuthResult, setFilterAuthResult] = useState<FaceAuthResult>(authResult);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
useEffect(() => {
setFilterAuthResult(authResult);
}, [authResult]);
@@ -83,12 +82,11 @@ export const FaceAuthFilter = ({
</div>
<div className="option-list pt-16">
<FilterSelect
<FilterSelectMid
title='가맹점'
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={midOptions}
></FilterSelect>
showType={'GID'}
></FilterSelectMid>
<FilterInput
title='가맹점회원ID'

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

@@ -15,6 +15,7 @@ import { useStore } from '@/shared/model/store';
import { AlimtalkAlimCl, AlimtalkSearchCl, AlimTalkSendCl, AlimtalkSendType, ServiceCode } from '../../model/alimtalk/types';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { AlimtalkAlimClBtnGroupForGeneral, AlimtalkAlimClBtnGroupForVBank, AlimtalkSearchClOptionGroup, AlimtalkSendClBtnGroup, AlimtalkSendTypeBtnGroup, AlimtalkServiceCodeOptionGroup } from '../../model/alimtalk/constant';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
export interface AlimtalkFilterProps {
filterOn: boolean;
@@ -72,8 +73,6 @@ export const AlimtalkFilter = ({
const [filterSendType, setFilterSendType] = useState<AlimtalkSendType>(sendType);
const [filterSendCl, setFilterSendCl] = useState<AlimTalkSendCl>(sendCl);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
// 결제수단에 따라 알림구분 버튼 그룹 선택
const alimClBtnGroup = useMemo(() => {
if (filterServiceCode === ServiceCode.VBANK) {
@@ -135,12 +134,11 @@ export const AlimtalkFilter = ({
</div>
</div>
<div className="option-list pt-16">
<FilterSelect
<FilterSelectMid
title='가맹점'
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={midOptions}
></FilterSelect>
showType={ 'GID' }
></FilterSelectMid>
<FilterSelectInput
title='주문자,TID'
selectValue={filterSearchCl}

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

@@ -15,6 +15,7 @@ import { FilterInput } from '@/shared/ui/filter/input';
import { OrderStatus, PaymentStatus } from '../../model/ars/types';
import { ArsOrderStatusBtnGroup, ArsPaymentStatusBtnGroup } from '../../model/ars/constant';
import { useStore } from '@/shared/model/store';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
export interface ArsFilterProps {
filterOn: boolean;
@@ -67,8 +68,6 @@ export const ArsFilter = ({
const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => {
setFilterOn(false);
};
@@ -116,12 +115,11 @@ export const ArsFilter = ({
</div>
</div>
<div className="option-list pt-16">
<FilterSelect
<FilterSelectMid
title='가맹점'
selectValue={ filterMid }
selectSetter={ setFilterMid }
selectOptions={ midOptions }
></FilterSelect>
showType={ 'GID'}
></FilterSelectMid>
<FilterInput
title='주문번호'
inputValue={ filterMoid }

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

@@ -10,6 +10,7 @@ import { FundAccountResultSearchDateTypeBtnGroup, FundAccountResultStatusBtnGro
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { useStore } from '@/shared/model/store';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
export interface FundAccountResultFilterProps {
filterOn: boolean;
@@ -69,8 +70,6 @@ export const FundAccountResultFilter = ({
.map((bank) => ({ name: bank.desc1, value: bank.code1 }))
];
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => {
setFilterOn(false);
};
@@ -124,12 +123,11 @@ export const FundAccountResultFilter = ({
</div>
</div>
<div className="option-list pt-16">
<FilterSelect
<FilterSelectMid
title='가맹점'
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={midOptions}
></FilterSelect>
showType={'GID'}
></FilterSelectMid>
<FilterSelectInput
title='수취인/계좌번호'
selectValue={filterSearchCl}

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

@@ -10,6 +10,7 @@ import { FundAccountSearchClOptionsGroup, FundAccountStatusBtnGroup } from '../.
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { useStore } from '@/shared/model/store';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
export interface FundAccountTransactionFilterProps {
filterOn: boolean;
@@ -55,8 +56,6 @@ export const FundAccountTransactionFilter = ({
const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYYMMDD'));
const [filterBankCode, setFilterBankCode] = useState<string>(bankCode);
const [filterStatus, setFilterStatus] = useState<FundAccountStatus>(status);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const bankList = useStore.getState().CommonStore.bankList;
const bankOptions = [
{ name: '선택', value: '' },
@@ -118,12 +117,11 @@ export const FundAccountTransactionFilter = ({
</div>
</div>
<div className="option-list pt-16">
<FilterSelect
<FilterSelectMid
title='가맹점'
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={midOptions}
></FilterSelect>
showType={ 'GID' }
></FilterSelectMid>
<FilterSelectInput
title='수취인/계좌번호'
selectValue={filterSearchCl}

10
src/entities/additional-service/ui/filter/payout-filter.tsx
View File

@@ -20,6 +20,7 @@ import {
} from '@/entities/common/model/constant';
import moment from 'moment';
import { useStore } from '@/shared/model/store';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
export interface PayoutFilterProps {
filterOn: boolean;
@@ -67,8 +68,6 @@ export const PayoutFilter = ({
const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => {
setFilterOn(false);
};
@@ -115,12 +114,11 @@ export const PayoutFilter = ({
</div>
</div>
<div className="option-list pt-16">
<FilterSelect
<FilterSelectMid
title='가맹점'
selectValue={ filterMid }
selectSetter={setFilterMid}
selectOptions={ midOptions }
></FilterSelect>
showType={'GID'}
></FilterSelectMid>
<FilterButtonGroups
title='조회기준'
activeValue={filterSearchDateType}

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

@@ -10,6 +10,7 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@
import { useStore } from '@/shared/model/store';
import { KeyInPaymentFilterProps, KeyInPaymentTansactionType } from '@/entities/additional-service/model/key-in/types';
import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
export const KeyInPaymentFilter = ({
filterOn,
@@ -35,8 +36,6 @@ export const KeyInPaymentFilter = ({
const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => {
setFilterOn(false);
};
@@ -79,12 +78,11 @@ export const KeyInPaymentFilter = ({
</div>
<div className="option-list pt-16">
<FilterSelect
<FilterSelectMid
title='가맹점'
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={midOptions}
></FilterSelect>
showType={'GID'}
></FilterSelectMid>
<FilterCalendar
title='조회기간'
startDate={filterStartDate}

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

@@ -14,6 +14,7 @@ import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { useStore } from '@/shared/model/store';
import { LinkPaymentHistoryFilterProps, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '@/entities/additional-service/model/link-pay/types';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
export const LinkPaymentHistoryFilter = ({
filterOn,
@@ -46,8 +47,6 @@ export const LinkPaymentHistoryFilter = ({
const [filterSendStatus, setFilterSendStatus] = useState<LinkPaymentSendStatus>(sendStatus);
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
let searchTypeOption = [
{ name: '휴대폰번호', value: LinkPaymentSearchCl.PHONE },
{ name: '이메일', value: LinkPaymentSearchCl.EMAIL },
@@ -122,12 +121,11 @@ export const LinkPaymentHistoryFilter = ({
</div>
<div className="option-list pt-16">
<FilterSelect
<FilterSelectMid
title='가맹점'
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={midOptions}
></FilterSelect>
showType={'GID'}
></FilterSelectMid>
<FilterSelectInput
title='휴대폰번호/이메일'

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

@@ -11,6 +11,7 @@ import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
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';
export const LinkPaymentWaitSendFilter = ({
filterOn,
@@ -40,8 +41,6 @@ export const LinkPaymentWaitSendFilter = ({
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod)
const [filterProcessStatus, setFilterProcessStatus] = useState<LinkPaymentProcessStatus>(processStatus);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => {
setFilterOn(false);
};
@@ -106,12 +105,11 @@ export const LinkPaymentWaitSendFilter = ({
</div>
<div className="option-list pt-16">
<FilterSelect
<FilterSelectMid
title='가맹점'
selectValue={mid}
selectSetter={setFilterMid}
selectOptions={midOptions}
></FilterSelect>
showType={'GID'}
></FilterSelectMid>
<FilterSelectInput
title='휴대폰번호/이메일'

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

@@ -10,6 +10,7 @@ import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { SmsPaymentFilterProps, SmsPaymentSearchCl, SmsCl } from '../../model/sms-payment/types';
import { useStore } from '@/shared/model/store';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
export const SmsPaymentFilter = ({
filterOn,
setFilterOn,
@@ -34,8 +35,6 @@ export const SmsPaymentFilter = ({
const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYYMMDD'));
const [filterSmsCl, setFilterSmsCl] = useState<SmsCl>(smsCl);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchCl(filterSearchCl);
@@ -94,12 +93,11 @@ export const SmsPaymentFilter = ({
</div>
<div className="option-list pt-16">
<FilterSelect
<FilterSelectMid
title='가맹점'
selectValue={mid}
selectSetter={setMid}
selectOptions={midOptions}
></FilterSelect>
selectSetter={setFilterMid}
showType={'GID'}
></FilterSelectMid>
<FilterSelectInput
title='주문자,수신번호'

6
src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
View File

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

6
src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
View File

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

6
src/pages/additional-service/alimtalk/list-page.tsx
View File

@@ -228,9 +228,9 @@ export const AlimtalkListPage = () => {
sendCl
]);
if (!hasAccess) {
return <AccessDeniedDialog />;
}
// if (!hasAccess) {
// return <AccessDeniedDialog />;
// }
return (
<>

2
src/pages/additional-service/ars/detail-page.tsx
View File

@@ -86,7 +86,7 @@ export const ArsDetailPage = () => {
<div className="pay-top">
<div className="num-amount">
<span className="amount">
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.amount || 0) })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(Number(detail?.amount) || 0) })}
</span>
</div>
<div className="num-store">{ detail?.corpName }</div>

6
src/pages/additional-service/fund-account/transfer-list-page.tsx
View File

@@ -28,9 +28,9 @@ export const FundAccountTransferListPage = () => {
navigate(PATHS.home);
});
if (!hasAccess) {
return <AccessDeniedDialog />;
}
// if (!hasAccess) {
// return <AccessDeniedDialog />;
// }
return (
<>

6
src/pages/additional-service/link-payment/link-payment-history-page.tsx
View File

@@ -35,9 +35,9 @@ export const LinkPaymentHistoryPage = () => {
navigate(PATHS.home);
});
if(!hasAccess){
return <AccessDeniedDialog />;
}
// if(!hasAccess){
// return <AccessDeniedDialog />;
// }
return (
<>

30
src/pages/additional-service/list-page.tsx
View File

@@ -13,12 +13,14 @@ import { useExtensionListMutation } from '@/entities/additional-service/api/use-
import { ExtensionListParams, ExtensionListResponse, SERVICE_MAP } from '@/entities/additional-service/model/types';
import { useStore } from '@/shared/model/store';
import { Dialog } from '@/shared/ui/dialogs/dialog';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
export const ListPage = () => {
const { t } = useTranslation();
const { navigate } = useNavigate();
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const userMid = useStore.getState().UserStore.mid;
const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
const [mid, setMid] = useState<string>(userMid);
const [activeServices, setActiveServices] = useState<string[]>([]);
@@ -44,6 +46,24 @@ export const ListPage = () => {
});
};
const getSelectMidOptions = () => {
let rs = [];
let options = midOptionsWithoutGids;
for (let i = 0; i < options.length; i++) {
rs.push(
<option
key={`key-filter-select-${i}`}
value={options[i]?.value}
>{options[i]?.name}</option>
);
}
return rs;
};
const onChangeMidSelect = (val: string) => {
setMid(val);
};
const getActiveExtensionList = () => {
const filteredServices = SERVICE_MAP.filter(service =>
activeServices.includes(service.code)
@@ -104,16 +124,12 @@ export const ListPage = () => {
<div className="ing-list">
<div className="input-wrapper top-select">
<select
className="flex-1"
value={mid}
onChange={(e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value)}
onChange={(e: ChangeEvent<HTMLSelectElement>) => onChangeMidSelect(e.target.value)}
>
{
midOptions.map((value) => (
<option
key={value.value}
value={value.value}
>{value.name}</option>
))
getSelectMidOptions()
}
</select>
</div>

6
src/pages/additional-service/payout/list-page.tsx
View File

@@ -222,9 +222,9 @@ export const PayoutListPage = () => {
return rs;
};
if (!hasAccess) {
return <AccessDeniedDialog />;
}
// if (!hasAccess) {
// return <AccessDeniedDialog />;
// }
return (
<>

4
src/shared/ui/filter/select-mid.tsx
View File

@@ -35,8 +35,8 @@ export const FilterSelectMid = ({
rs.push(
<option
key={ `key-filter-select-${i}` }
value={ midOptions[i]?.value }
>{ midOptions[i]?.name }</option>
value={ options[i]?.value }
>{ options[i]?.name }</option>
);
}
return rs;