Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

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

@@ -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);
 	};
@@ -51,9 +50,9 @@ export const AccountHolderAuthFilter = ({
 				className="full-menu-modal"
 				initial="hidden"
 				animate={(filterOn) ? 'visible' : 'hidden'}
-				variants={ FilterMotionVariants }
+				variants={FilterMotionVariants}
-				transition={ FilterMotionDuration }
+				transition={FilterMotionDuration}
-				style={ FilterMotionStyle }
+				style={FilterMotionStyle}
 			>
 				<div className="full-menu-container">
 					<div className="full-menu-header">
@@ -73,12 +72,11 @@ export const AccountHolderAuthFilter = ({
 					</div>
 
 					<div className="option-list pt-16">
-						<FilterSelect
+						<FilterSelectMid
 							title='가맹점'
-							selectValue={mid}
+							selectSetter={setFilterMid}
-							selectSetter={setMid}
+							showType={'GID'}
-							selectOptions={midOptions}
+						></FilterSelectMid>
-						></FilterSelect>
 
 						<FilterCalendar
 							startDate={filterStartDate}

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

@@ -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}
+							showType={'GID'}
-						></FilterSelect>
+						></FilterSelectMid>
 
 						<FilterSelectInput
 							title='예금주/계좌번호'

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

@@ -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]);
@@ -61,9 +60,9 @@ export const FaceAuthFilter = ({
 				className="full-menu-modal"
 				initial="hidden"
 				animate={(filterOn) ? 'visible' : 'hidden'}
-				variants={ FilterMotionVariants }
+				variants={FilterMotionVariants}
-				transition={ FilterMotionDuration }
+				transition={FilterMotionDuration}
-				style={ FilterMotionStyle }
+				style={FilterMotionStyle}
 			>
 				<div className="full-menu-container">
 					<div className="full-menu-header">
@@ -83,12 +82,11 @@ export const FaceAuthFilter = ({
 					</div>
 
 					<div className="option-list pt-16">
-						<FilterSelect
+						<FilterSelectMid
 							title='가맹점'
-							selectValue={filterMid}
 							selectSetter={setFilterMid}
-							selectOptions={midOptions}
+							showType={'GID'}
-						></FilterSelect>
+						></FilterSelectMid>
 
 						<FilterInput
 							title='가맹점회원ID'

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

@@ -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}
+              showType={ 'GID' }
-            ></FilterSelect>
+            ></FilterSelectMid>
             <FilterSelectInput
               title='주문자,TID'
               selectValue={filterSearchCl}

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

@@ -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 }
+              showType={ 'GID'}
-            ></FilterSelect>
+            ></FilterSelectMid>
             <FilterInput
               title='주문번호'
               inputValue={ filterMoid }

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

@@ -6,10 +6,11 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
-import {  FundAccountResultSearchDateTypeBtnGroup, FundAccountResultStatusBtnGroup, FundAccountSearchClOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
+import { FundAccountResultSearchDateTypeBtnGroup, FundAccountResultStatusBtnGroup, FundAccountSearchClOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
 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,19 +70,17 @@ export const FundAccountResultFilter = ({
       .map((bank) => ({ name: bank.desc1, value: bank.code1 }))
   ];
 
-  const midOptions = useStore.getState().UserStore.selectOptionsMids;
-
   const onClickToClose = () => {
     setFilterOn(false);
   };
 
   const onClickToSetFilter = () => {
     setMid(filterMid);
-    if(filterSearchCl === FundAccountSearchCl.ACCOUNT_NAME){
+    if (filterSearchCl === FundAccountSearchCl.ACCOUNT_NAME) {
       setSearchCl(filterSearchCl);
       setSearchValue(filterSearchValue);
     }
-    else if(filterSearchCl === FundAccountSearchCl.ACCOUNT_NO){
+    else if (filterSearchCl === FundAccountSearchCl.ACCOUNT_NO) {
       setSearchCl(filterSearchCl);
       setSearchValue(filterSearchValue);
     }
@@ -124,12 +123,11 @@ export const FundAccountResultFilter = ({
             </div>
           </div>
           <div className="option-list pt-16">
-            <FilterSelect
+            <FilterSelectMid
               title='가맹점'
-              selectValue={filterMid}
               selectSetter={setFilterMid}
-              selectOptions={midOptions}
+              showType={'GID'}
-            ></FilterSelect>
+            ></FilterSelectMid>
             <FilterSelectInput
               title='수취인/계좌번호'
               selectValue={filterSearchCl}

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

@@ -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}
+              showType={ 'GID' }
-            ></FilterSelect>
+            ></FilterSelectMid>
             <FilterSelectInput
               title='수취인/계좌번호'
               selectValue={filterSearchCl}

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

@@ -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);
   };
@@ -93,10 +92,10 @@ export const PayoutFilter = ({
       <motion.div
         className="full-menu-modal"
         initial="hidden"
-        animate={ (filterOn)? 'visible': 'hidden' }
+        animate={(filterOn) ? 'visible' : 'hidden'}
-        variants={ FilterMotionVariants }
+        variants={FilterMotionVariants}
-        transition={ FilterMotionDuration }
+        transition={FilterMotionDuration}
-        style={ FilterMotionStyle }
+        style={FilterMotionStyle}
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
@@ -107,51 +106,50 @@ export const PayoutFilter = ({
                 className="full-menu-close"
               >
                 <img
-                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  src={IMAGE_ROOT + '/ico_close.svg'}
                   alt="닫기"
-                  onClick={ () => onClickToClose() }
+                  onClick={() => onClickToClose()}
                 />
               </button>
             </div>
           </div>
           <div className="option-list pt-16">
-            <FilterSelect
+            <FilterSelectMid
               title='가맹점'
-              selectValue={ filterMid }
+              selectSetter={setFilterMid}
-              selectSetter={ setFilterMid }
+              showType={'GID'}
-              selectOptions={ midOptions }
+            ></FilterSelectMid>
-            ></FilterSelect>
             <FilterButtonGroups
               title='조회기준'
-              activeValue={ filterSearchDateType }
+              activeValue={filterSearchDateType}
-              btnGroups={ PayoutSearchClBtnGroup }
+              btnGroups={PayoutSearchClBtnGroup}
-              setter={ setFilterSearchDateType }
+              setter={setFilterSearchDateType}
             ></FilterButtonGroups>
             <FilterCalendar
               title='조회기간'
-              startDate={ filterFromDate }
+              startDate={filterFromDate}
-              endDate={ filterToDate }
+              endDate={filterToDate}
-              setStartDate={ setFilterFromDate }
+              setStartDate={setFilterFromDate}
-              setEndDate={ setFilterToDate }
+              setEndDate={setFilterToDate}
             ></FilterCalendar>
             <FilterButtonGroups
               title='지급상태'
-              activeValue={ filterStatus }
+              activeValue={filterStatus}
-              btnGroups={ PayoutDisbursementStatusBtnGroup }
+              btnGroups={PayoutDisbursementStatusBtnGroup}
-              setter={ setFilterStatus }
+              setter={setFilterStatus}
             ></FilterButtonGroups>
             <FilterRangeAmount
               title='거래금액'
-              minAmount={ filterMinAmount }
+              minAmount={filterMinAmount}
-              maxAmount={ filterMaxAmount }
+              maxAmount={filterMaxAmount}
-              setMinAmount={ setFilterMinAmount }
+              setMinAmount={setFilterMinAmount}
-              setMaxAmount={ setFilterMaxAmount }
+              setMaxAmount={setFilterMaxAmount}
             ></FilterRangeAmount>
           </div>
           <div className="apply-row">
             <button
               className="btn-50 btn-blue flex-1"
-              onClick={ () => onClickToSetFilter() }
+              onClick={() => onClickToSetFilter()}
             >적용</button>
           </div>
         </div>

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

@@ -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);
 	};
@@ -57,9 +56,9 @@ export const KeyInPaymentFilter = ({
 				className="full-menu-modal"
 				initial="hidden"
 				animate={(filterOn) ? 'visible' : 'hidden'}
-				variants={ FilterMotionVariants }
+				variants={FilterMotionVariants}
-				transition={ FilterMotionDuration }
+				transition={FilterMotionDuration}
-				style={ FilterMotionStyle }
+				style={FilterMotionStyle}
 			>
 				<div className="full-menu-container">
 					<div className="full-menu-header">
@@ -79,12 +78,11 @@ export const KeyInPaymentFilter = ({
 					</div>
 
 					<div className="option-list pt-16">
-						<FilterSelect
+						<FilterSelectMid
 							title='가맹점'
-							selectValue={filterMid}
 							selectSetter={setFilterMid}
-							selectOptions={midOptions}
+							showType={'GID'}
-						></FilterSelect>
+						></FilterSelectMid>
 						<FilterCalendar
 							title='조회기간'
 							startDate={filterStartDate}

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

@@ -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}
+							showType={'GID'}
-						></FilterSelect>
+						></FilterSelectMid>
 
 						<FilterSelectInput
 							title='휴대폰번호/이메일'

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

@@ -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);
 	};
@@ -84,9 +83,9 @@ export const LinkPaymentWaitSendFilter = ({
 				className="full-menu-modal"
 				initial="hidden"
 				animate={(filterOn) ? 'visible' : 'hidden'}
-				variants={ FilterMotionVariants }
+				variants={FilterMotionVariants}
-				transition={ FilterMotionDuration }
+				transition={FilterMotionDuration}
-				style={ FilterMotionStyle }
+				style={FilterMotionStyle}
 			>
 				<div className="full-menu-container">
 					<div className="full-menu-header">
@@ -106,12 +105,11 @@ export const LinkPaymentWaitSendFilter = ({
 					</div>
 
 					<div className="option-list pt-16">
-						<FilterSelect
+						<FilterSelectMid
 							title='가맹점'
-							selectValue={mid}
 							selectSetter={setFilterMid}
-							selectOptions={midOptions}
+							showType={'GID'}
-						></FilterSelect>
+						></FilterSelectMid>
 
 						<FilterSelectInput
 							title='휴대폰번호/이메일'

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

@@ -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);
@@ -72,9 +71,9 @@ export const SmsPaymentFilter = ({
         className="full-menu-modal"
         initial="hidden"
         animate={(filterOn) ? 'visible' : 'hidden'}
-        variants={ FilterMotionVariants }
+        variants={FilterMotionVariants}
-        transition={ FilterMotionDuration }
+        transition={FilterMotionDuration}
-        style={ FilterMotionStyle }
+        style={FilterMotionStyle}
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
@@ -94,12 +93,11 @@ export const SmsPaymentFilter = ({
           </div>
 
           <div className="option-list pt-16">
-            <FilterSelect
+            <FilterSelectMid
               title='가맹점'
-              selectValue={mid}
+              selectSetter={setFilterMid}
-              selectSetter={setMid}
+              showType={'GID'}
-              selectOptions={midOptions}
+            ></FilterSelectMid>
-            ></FilterSelect>
 
             <FilterSelectInput
               title='주문자,수신번호'

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

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

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

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

src/pages/additional-service/alimtalk/list-page.tsx

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

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

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

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

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

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

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

src/pages/additional-service/list-page.tsx

@@ -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) => (
+                    getSelectMidOptions()
-                      <option
-                        key={value.value}
-                        value={value.value}
-                      >{value.name}</option>
-                    ))
                   }
                 </select>
               </div>

src/pages/additional-service/payout/list-page.tsx

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

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

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