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

2025-10-30 13:12:10 +09:00
parent 57ec72a11c 8245e394a3
commit f44c4400cf
21 changed files with 145 additions and 152 deletions
--- a/src/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter.tsx
+++ b/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 }
-				transition={ FilterMotionDuration }
-				style={ FilterMotionStyle }
+				variants={FilterMotionVariants}
+				transition={FilterMotionDuration}
+				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={setMid}
-							selectOptions={midOptions}
-						></FilterSelect>
+							selectSetter={setFilterMid}
+							showType={'GID'}
+						></FilterSelectMid>

 						<FilterCalendar
 							startDate={filterStartDate}
--- 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
@@ -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='예금주/계좌번호'
--- 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
@@ -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 }
-				transition={ FilterMotionDuration }
-				style={ FilterMotionStyle }
+				variants={FilterMotionVariants}
+				transition={FilterMotionDuration}
+				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}
-						></FilterSelect>
+							showType={'GID'}
+						></FilterSelectMid>

 						<FilterInput
 							title='가맹점회원ID'
--- a/src/entities/additional-service/ui/filter/alimtalk-filter.tsx
+++ b/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}
-            ></FilterSelect>
+              showType={ 'GID' }
+            ></FilterSelectMid>
            <FilterSelectInput
              title='주문자,TID'
              selectValue={filterSearchCl}
--- a/src/entities/additional-service/ui/filter/ars-filter.tsx
+++ b/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 }
-            ></FilterSelect>
+              showType={ 'GID'}
+            ></FilterSelectMid>
            <FilterInput
              title='주문번호'
              inputValue={ filterMoid }
--- a/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx
+++ b/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx
@@ -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,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}
-            ></FilterSelect>
+              showType={'GID'}
+            ></FilterSelectMid>
            <FilterSelectInput
              title='수취인/계좌번호'
              selectValue={filterSearchCl}
--- a/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx
+++ b/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}
-            ></FilterSelect>
+              showType={ 'GID' }
+            ></FilterSelectMid>
            <FilterSelectInput
              title='수취인/계좌번호'
              selectValue={filterSearchCl}
--- a/src/entities/additional-service/ui/filter/payout-filter.tsx
+++ b/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' }
-        variants={ FilterMotionVariants }
-        transition={ FilterMotionDuration }
-        style={ FilterMotionStyle }
+        animate={(filterOn) ? 'visible' : 'hidden'}
+        variants={FilterMotionVariants}
+        transition={FilterMotionDuration}
+        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 }
-              selectOptions={ midOptions }
-            ></FilterSelect>
+              selectSetter={setFilterMid}
+              showType={'GID'}
+            ></FilterSelectMid>
            <FilterButtonGroups
              title='조회기준'
-              activeValue={ filterSearchDateType }
-              btnGroups={ PayoutSearchClBtnGroup }
-              setter={ setFilterSearchDateType }
+              activeValue={filterSearchDateType}
+              btnGroups={PayoutSearchClBtnGroup}
+              setter={setFilterSearchDateType}
            ></FilterButtonGroups>
            <FilterCalendar
              title='조회기간'
-              startDate={ filterFromDate }
-              endDate={ filterToDate }
-              setStartDate={ setFilterFromDate }
-              setEndDate={ setFilterToDate }
+              startDate={filterFromDate}
+              endDate={filterToDate}
+              setStartDate={setFilterFromDate}
+              setEndDate={setFilterToDate}
            ></FilterCalendar>
            <FilterButtonGroups
              title='지급상태'
-              activeValue={ filterStatus }
-              btnGroups={ PayoutDisbursementStatusBtnGroup }
-              setter={ setFilterStatus }
+              activeValue={filterStatus}
+              btnGroups={PayoutDisbursementStatusBtnGroup}
+              setter={setFilterStatus}
            ></FilterButtonGroups>
            <FilterRangeAmount
              title='거래금액'
-              minAmount={ filterMinAmount }
-              maxAmount={ filterMaxAmount }
-              setMinAmount={ setFilterMinAmount }
-              setMaxAmount={ setFilterMaxAmount }
+              minAmount={filterMinAmount}
+              maxAmount={filterMaxAmount}
+              setMinAmount={setFilterMinAmount}
+              setMaxAmount={setFilterMaxAmount}
            ></FilterRangeAmount>
          </div>
          <div className="apply-row">
            <button
              className="btn-50 btn-blue flex-1"
-              onClick={ () => onClickToSetFilter() }
+              onClick={() => onClickToSetFilter()}
            >적용</button>
          </div>
        </div>
--- a/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx
+++ b/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 }
-				transition={ FilterMotionDuration }
-				style={ FilterMotionStyle }
+				variants={FilterMotionVariants}
+				transition={FilterMotionDuration}
+				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}
-						></FilterSelect>
+							showType={'GID'}
+						></FilterSelectMid>
 						<FilterCalendar
 							title='조회기간'
 							startDate={filterStartDate}
--- 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
@@ -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='휴대폰번호/이메일'
--- a/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx
+++ b/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 }
-				transition={ FilterMotionDuration }
-				style={ FilterMotionStyle }
+				variants={FilterMotionVariants}
+				transition={FilterMotionDuration}
+				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}
-						></FilterSelect>
+							showType={'GID'}
+						></FilterSelectMid>

 						<FilterSelectInput
 							title='휴대폰번호/이메일'
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx
+++ b/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 }
-        transition={ FilterMotionDuration }
-        style={ FilterMotionStyle }
+        variants={FilterMotionVariants}
+        transition={FilterMotionDuration}
+        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={setMid}
-              selectOptions={midOptions}
-            ></FilterSelect>
+              selectSetter={setFilterMid}
+              showType={'GID'}
+            ></FilterSelectMid>

            <FilterSelectInput
              title='주문자,수신번호'
--- a/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
+++ b/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
@@ -162,9 +162,9 @@ export const AccountHolderAuthPage = () => {
    sortType
  ]);

-  if (!hasAccess) {
-    return <AccessDeniedDialog />;
-  }
+  // if (!hasAccess) {
+  //   return <AccessDeniedDialog />;
+  // }

  return (
    <>
--- a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
+++ b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
@@ -174,9 +174,9 @@ export const AccountHolderSearchPage = () => {
    sortType
  ]);

-  if (!hasAccess) {
-    return <AccessDeniedDialog />;
-  }
+  // if (!hasAccess) {
+  //   return <AccessDeniedDialog />;
+  // }

  return (
    <>
--- a/src/pages/additional-service/alimtalk/list-page.tsx
+++ b/src/pages/additional-service/alimtalk/list-page.tsx
@@ -228,9 +228,9 @@ export const AlimtalkListPage = () => {
    sendCl
  ]);

-  if (!hasAccess) {
-    return <AccessDeniedDialog />;
-  }
+  // if (!hasAccess) {
+  //   return <AccessDeniedDialog />;
+  // }

  return (
    <>
--- a/src/pages/additional-service/ars/detail-page.tsx
+++ b/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>
--- a/src/pages/additional-service/fund-account/transfer-list-page.tsx
+++ b/src/pages/additional-service/fund-account/transfer-list-page.tsx
@@ -28,9 +28,9 @@ export const FundAccountTransferListPage = () => {
    navigate(PATHS.home);
  });

-  if (!hasAccess) {
-    return <AccessDeniedDialog />;
-  }
+  // if (!hasAccess) {
+  //   return <AccessDeniedDialog />;
+  // }

  return (
    <>
--- a/src/pages/additional-service/link-payment/link-payment-history-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-history-page.tsx
@@ -35,9 +35,9 @@ export const LinkPaymentHistoryPage = () => {
 		navigate(PATHS.home);
 	});

-	if(!hasAccess){
-		return <AccessDeniedDialog />;
-	}
+	// if(!hasAccess){
+	// 	return <AccessDeniedDialog />;
+	// }

 	return (
 		<>
--- a/src/pages/additional-service/list-page.tsx
+++ b/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) => (
-                      <option
-                        key={value.value}
-                        value={value.value}
-                      >{value.name}</option>
-                    ))
+                    getSelectMidOptions()
                  }
                </select>
              </div>
--- a/src/pages/additional-service/payout/list-page.tsx
+++ b/src/pages/additional-service/payout/list-page.tsx
@@ -222,9 +222,9 @@ export const PayoutListPage = () => {
    return rs;
  };

-  if (!hasAccess) {
-    return <AccessDeniedDialog />;
-  }
+  // if (!hasAccess) {
+  //   return <AccessDeniedDialog />;
+  // }

  return (
    <>
--- a/src/shared/ui/filter/select-mid.tsx
+++ b/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 }
-        >{ midOptions[i]?.name }</option>
+          value={ options[i]?.value }
+        >{ options[i]?.name }</option>
      );
    }
    return rs;