- FilterSelectMid 수정

- 부가서비스 Filter Mid Select 컴포넌트 변경
2025-10-30 13:12:09 +09:00
parent 2b9c782f46
commit 8245e394a3
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
@@ -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,21 +70,19 @@ 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);  
+      setSearchValue(filterSearchValue);
    }
    setSearchDateType(filterSearchDateType);
    setFromDate(filterFromDate);
@@ -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
@@ -5,21 +5,22 @@ import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
-import { 
+import {
  PayoutDisbursementStatus,
  PayoutSearchDateType
 } from '../../model/payout/types';
-import { 
+import {
  PayoutSearchClBtnGroup,
  PayoutDisbursementStatusBtnGroup
 } from '../../model/payout/constant';
-import { 
-  FilterMotionDuration, 
-  FilterMotionStyle, 
+import {
+  FilterMotionDuration,
+  FilterMotionStyle,
  FilterMotionVariants
 } 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;
@@ -66,8 +67,6 @@ export const PayoutFilter = ({
  const [filterStatus, setFilterStatus] = useState<PayoutDisbursementStatus>(status);
  const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
  const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
-  
-  const midOptions = useStore.getState().UserStore.selectOptionsMids;

  const onClickToClose = () => {
    setFilterOn(false);
@@ -90,68 +89,67 @@ export const PayoutFilter = ({

  return (
    <>
-      <motion.div 
-        className="full-menu-modal" 
+      <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">
            <div className="full-menu-title center">필터</div>
            <div className="full-menu-actions">
-              <button 
+              <button
                id="closeFullMenu"
                className="full-menu-close"
              >
-                <img 
-                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                <img
+                  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 
+            <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,
@@ -33,8 +34,6 @@ export const SmsPaymentFilter = ({
  const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYYMMDD'));
  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);
@@ -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='주문자,수신번호'