버튼그룹

src/entities/transaction/ui/filter/billing-filter.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../model/types';
 import { FilterDateOptions } from '@/entities/common/model/types';
 import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 
 export const BillingFilter = ({
   filterOn,
@@ -102,6 +103,24 @@ export const BillingFilter = ({
     setProcessResult(filterProcessResult);
     setPaymentMethod(filterPaymentMethod);
 	};
+
+  let requestStatusBtnGroup = [
+    {name: '전체', value: BillingRequestStatus.ALL},
+    {name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
+    {name: '성공', value: BillingRequestStatus.SUCCESS},
+    {name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL},
+  ];
+  let processResultBtnGroup = [
+    {name: '전체', value: BillingProcessResult.ALL},
+    {name: '성공', value: BillingProcessResult.SUCCESS},
+    {name: '실패', value: BillingProcessResult.FAILURE},
+  ];
+  let paymentMethodBtnGroup = [
+    {name: '전체', value: BillingPaymentMethod.ALL},
+    {name: '신용카드', value: BillingPaymentMethod.CREDIT_CARD},
+    {name: '가상계좌', value: BillingPaymentMethod.VIRTUAL_ACCOUNT},
+    {name: '휴대폰', value: BillingPaymentMethod.MOBILE_PAYMENT},
+  ];
   return (
     <>
       <motion.div 
@@ -133,7 +152,7 @@ export const BillingFilter = ({
             </div>
           </div>
       
-          <div className="option-list pb-120">
+          <div className="option-list pt-16">
             <div className="opt-field">
               <div className="opt-label">가맹점</div>
               <div className="opt-controls">
@@ -169,78 +188,26 @@ export const BillingFilter = ({
               setStartDate={ setFilterStartDate }
               setEndDate={ setFilterEndDate }
             ></FilterCalendar>
-            <div className="opt-field">
-              <div className="opt-label">요청상태</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span 
-                    className={ `keyword-tag ${(filterRequestStatus === BillingRequestStatus.ALL)? 'active': ''}` }
-                    onClick={ () => setFilterRequestStatus(BillingRequestStatus.ALL) }
-                  >전체</span>
-                  <span 
-                    className={ `keyword-tag ${(filterRequestStatus === BillingRequestStatus.IN_PROGRESS)? 'active': ''}` }
-                    onClick={ () => setFilterRequestStatus(BillingRequestStatus.IN_PROGRESS) }
-                  >진행중</span>
-                  <span 
-                    className={ `keyword-tag ${(filterRequestStatus === BillingRequestStatus.SUCCESS)? 'active': ''}` }
-                    onClick={ () => setFilterRequestStatus(BillingRequestStatus.SUCCESS) }
-                  >성공</span>
-                  <span 
-                    className={ `keyword-tag ${(filterRequestStatus === BillingRequestStatus.REQUEST_CANCEL)? 'active': ''}` }
-                    onClick={ () => setFilterRequestStatus(BillingRequestStatus.REQUEST_CANCEL) }
-                  >요청취소</span>
-                </div>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">처리결과</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span 
-                    className={ `keyword-tag ${(filterProcessResult === BillingProcessResult.ALL)? 'active': ''}` }
-                    onClick={ () => setFilterProcessResult(BillingProcessResult.ALL) }
-                  >전체</span>
-                  <span 
-                    className={ `keyword-tag ${(filterProcessResult === BillingProcessResult.SUCCESS)? 'active': ''}` }
-                    onClick={ () => setFilterProcessResult(BillingProcessResult.SUCCESS) }
-                  >성공</span>
-                  <span 
-                    className={ `keyword-tag ${(filterProcessResult === BillingProcessResult.FAILURE)? 'active': ''}` }
-                    onClick={ () => setFilterProcessResult(BillingProcessResult.FAILURE) }
-                  >실패</span>
-                  <span 
-                    className="keyword-tag" 
-                    style={{ visibility: 'hidden' }}
-                  ></span>
-                </div>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">결제수단</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span 
-                    className={ `keyword-tag ${(filterPaymentMethod === BillingPaymentMethod.ALL)? 'active': ''}` }
-                    onClick={ () => setFilterPaymentMethod(BillingPaymentMethod.ALL) }
-                  >전체</span>
-                  <span 
-                    className={ `keyword-tag ${(filterPaymentMethod === BillingPaymentMethod.CREDIT_CARD)? 'active': ''}` }
-                    onClick={ () => setFilterPaymentMethod(BillingPaymentMethod.CREDIT_CARD) }
-                  >신용카드</span>
-                  <span 
-                    className={ `keyword-tag ${(filterPaymentMethod === BillingPaymentMethod.VIRTUAL_ACCOUNT)? 'active': ''}` }
-                    onClick={ () => setFilterPaymentMethod(BillingPaymentMethod.VIRTUAL_ACCOUNT) }
-                  >가상계좌</span>
-                  <span 
-                    className={ `keyword-tag ${(filterPaymentMethod === BillingPaymentMethod.MOBILE_PAYMENT)? 'active': ''}` }
-                    onClick={ () => setFilterPaymentMethod(BillingPaymentMethod.MOBILE_PAYMENT) }
-                  >휴대폰</span>
-                </div>
-              </div>
-            </div>
-
+            
+            <FilterButtonGroups
+              title='요청상태'
+              activeValue={ filterRequestStatus }
+              btnGroups={ requestStatusBtnGroup }
+              setter={ setFilterRequestStatus }
+            ></FilterButtonGroups>
+            <FilterButtonGroups
+              title='처리결과'
+              activeValue={ filterProcessResult }
+              btnGroups={ processResultBtnGroup }
+              setter={ setFilterProcessResult }
+            ></FilterButtonGroups>
+            <FilterButtonGroups
+              title='결제수단'
+              activeValue={ filterPaymentMethod }
+              btnGroups={ paymentMethodBtnGroup }
+              setter={ setFilterPaymentMethod }
+            ></FilterButtonGroups>
+            
             <div className="opt-field">
               <div className="opt-label">거래금액</div>
               <div className="opt-controls">