버튼그룹

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

src/shared/ui/assets/css/style-fix.css

@@ -29,4 +29,6 @@ main {
 .kv-list{
   padding-bottom: 20px;
   z-index: 10;
-}
+}
+
+/* calendar */

src/shared/ui/filter/button-groups.tsx

@@ -0,0 +1,53 @@
+interface FilterButtonGroupsProps {
+  title: string;
+  activeValue?: string;
+  btnGroups?: Array<ButtonItemProp>
+  setter: any;
+};
+interface ButtonItemProp {
+  name?: string;
+  value?: string;
+};
+export const FilterButtonGroups = ({
+  title,
+  activeValue,
+  btnGroups,
+  setter,
+}: FilterButtonGroupsProps) => {
+
+  const getBtns = () => {
+    let rs = [];
+    if(!!btnGroups && btnGroups.length > 0){
+      let emptySpanCnt = 4 % btnGroups.length;
+      for(let i=0;i<btnGroups.length;i++){
+        rs.push(
+          <span 
+            className={ `keyword-tag flex-1 ${(activeValue === btnGroups[i]?.value)? 'active': ''}` }
+            onClick={ () => setter(btnGroups[i]?.value) }
+          >{ btnGroups[i]?.name }</span>
+        )
+      }
+      for(let i=0;i<emptySpanCnt;i++){
+        rs.push(
+          <span 
+            className="keyword-tag flex-1" 
+            style={{ visibility: 'hidden' }}
+          ></span>
+        );
+      }
+    }
+    return rs;
+  };
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ title }</div>
+        <div className="opt-controls col below h36">
+          <div className="chip-row">
+            { getBtns() }
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};