필터 4개 이상 다중 버튼 처리

src/entities/additional-service/model/contant.ts

@@ -1,12 +0,0 @@
-import { EscrowDeliveryStatus } from '@/entities/transaction/model/types';
-
-export const deliveryStatusBtnGroup = [
-  {name: '전체', value: EscrowDeliveryStatus.ALL},
-  {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE},
-  {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT},
-  {name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE},
-  {name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM},
-  {name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT},
-  {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING},
-  {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
-];

src/entities/transaction/model/contant.ts

@@ -0,0 +1,41 @@
+import { 
+  BillingPaymentMethod, 
+  BillingProcessResult,
+  BillingRequestStatus,
+  EscrowDeliveryStatus,
+  EscrowSettlementStatus
+} from '@/entities/transaction/model/types';
+
+export const deliveryStatusBtnGroup = [
+  {name: '전체', value: EscrowDeliveryStatus.ALL},
+  {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE},
+  {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT},
+  {name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE},
+  {name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM},
+  {name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT},
+  {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING},
+  {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
+];
+export let settlementStatusBtnGroup = [
+  {name: '전체', value: EscrowSettlementStatus.ALL},
+  {name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD},
+  {name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT},
+  {name: '계좌이체', value: EscrowSettlementStatus.ACCOUNT_TRANSFER},
+];
+export const requestStatusBtnGroup = [
+  {name: '전체', value: BillingRequestStatus.ALL},
+  {name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
+  {name: '성공', value: BillingRequestStatus.SUCCESS},
+  {name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL},
+];
+export const processResultBtnGroup = [
+  {name: '전체', value: BillingProcessResult.ALL},
+  {name: '성공', value: BillingProcessResult.SUCCESS},
+  {name: '실패', value: BillingProcessResult.FAILURE},
+];
+export const paymentMethodBtnGroup = [
+  {name: '전체', value: BillingPaymentMethod.ALL},
+  {name: '신용카드', value: BillingPaymentMethod.CREDIT_CARD},
+  {name: '가상계좌', value: BillingPaymentMethod.VIRTUAL_ACCOUNT},
+  {name: '휴대폰', value: BillingPaymentMethod.MOBILE_PAYMENT},
+];

src/entities/transaction/model/types.ts

@@ -481,8 +481,8 @@ export interface EscrowFilterProps extends FilterProps {
   endDate: string;
   deliveryStatus: EscrowDeliveryStatus;
   settlementStatus: EscrowSettlementStatus;
-  minAmount: number;
+  minAmount?: number | string;
-  maxAmount: number;
+  maxAmount?: number | string;
   setMid: (mid: string) => void;
   setSearchType: (searchType: EscrowSearchType) => void;
   setSearchKeyword: (searchKeyword: string) => void;

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

@@ -7,6 +7,11 @@ import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
+import { 
+  requestStatusBtnGroup, 
+  processResultBtnGroup,
+  paymentMethodBtnGroup 
+} from '@/entities/transaction/model/contant';
 import { 
   BillingFilterProps,
   BillingPaymentMethod,
@@ -85,24 +90,6 @@ export const BillingFilter = ({
     {name: 'TID', value: BillingSearchType.TID }
   ];
 
-  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},
-  ];
-
   useEffect(() => {
     setFilterRequestStatus(requestStatus);
   }, [requestStatus]);

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

@@ -7,6 +7,10 @@ import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
+import { 
+  deliveryStatusBtnGroup,
+  settlementStatusBtnGroup
+} from '@/entities/transaction/model/contant';
 import { 
   EscrowFilterProps,
   EscrowSearchType,
@@ -80,23 +84,6 @@ export const EscrowFilter = ({
     {name: 'TID', value: EscrowSearchType.TID }
   ];
 
-  let deliveryStatusBtnGroup = [
-    {name: '전체', value: EscrowDeliveryStatus.ALL},
-    {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE},
-    {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT},
-    {name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE},
-    {name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM},
-    {name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT},
-    {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING},
-    {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
-  ];
-  let settlementStatusBtnGroup = [
-    {name: '전체', value: EscrowSettlementStatus.ALL},
-    {name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD},
-    {name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT},
-    {name: '계좌이체', value: EscrowSettlementStatus.ACCOUNT_TRANSFER},
-  ];
- 
   useEffect(() => {
     setFilterDeliveryStatus(deliveryStatus);
   }, [deliveryStatus]);

src/pages/transaction/escrow/list-page.tsx

@@ -9,8 +9,8 @@ import { EscrowListItem, TransactionCategory, SortByKeys, EscrowDeliveryStatus,
 import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
-import { Filter } from '@/entities/transaction/ui/filter';
+import { EscrowFilter } from '@/entities/transaction/ui/filter/escrow-filter';
-import { deliveryStatusBtnGroup } from '@/entities/additional-service/model/contant';
+import { deliveryStatusBtnGroup } from '@/entities/transaction/model/contant';
 import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
@@ -65,7 +65,7 @@ export const EscrowListPage = () => {
 		}
     let listParams = {
       mid: mid,
-  		searchType: searchType,
+  		searchType: 'ORDER_NUMBER',
   		searchKeyword: searchKeyword,
   		startDate: startDate,
   		endDate: endDate,
@@ -180,10 +180,28 @@ export const EscrowListPage = () => {
 					</div>
 				</div>
 			</main>
-			<Filter
+			<EscrowFilter
         filterOn={ filterOn }
         setFilterOn={ setFilterOn }
-      ></Filter>
+				mid={ mid }
+				searchType={ searchType }
+				searchKeyword={searchKeyword }
+				startDate={ startDate }
+				endDate={ endDate }
+				deliveryStatus={ deliveryStatus }
+				settlementStatus={ settlementStatus }
+				minAmount={ minAmount }
+				maxAmount={ maxAmount }
+				setMid={ setMid }
+				setSearchType={ setSearchType }
+				setSearchKeyword={ setSearchKeyword }
+				setStartDate={ setStartDate }
+				setEndDate={ setEndDate }
+				setDeliveryStatus={ setDeliveryStatus }
+				setSettlementStatus={ setSettlementStatus }
+				setMinAmount={ setMinAmount }
+				setMaxAmount={ setMaxAmount }
+      ></EscrowFilter>
 		</>
 	);
 };

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

@@ -9,19 +9,30 @@ export const FilterButtonGroups = ({
 
   const getBtns = () => {
     let rs = [];
+    
     if(!!btnGroups && btnGroups.length > 0){
-      let emptySpanCnt = 4 % btnGroups.length;
+      console.log(' btnGroups.length : ',  btnGroups.length)
+      let emptySpanCnt = 4 - (btnGroups.length % 4);
+      let innerList = [];
+
       for(let i=0;i<btnGroups.length;i++){
-        rs.push(
+        innerList.push(
           <span 
             key={ `key-btngroup-span-${i}` }
             className={ `keyword-tag flex-1 ${(activeValue === btnGroups[i]?.value)? 'active': ''}` }
             onClick={ () => setter(btnGroups[i]?.value || '') }
           >{ btnGroups[i]?.name }</span>
-        )
+        );
-      }
+        if((i % 4) === 3 ){
-      for(let i=0;i<emptySpanCnt;i++){
           rs.push(
+            <div className="chip-row">{ innerList }</div>
+          );
+          innerList = [];
+        }
+      }
+      if(emptySpanCnt > 0 && emptySpanCnt < 4){
+        for(let i=0;i<emptySpanCnt;i++){
+          innerList.push(
             <span 
               key={ `key-btngroup-span-nodata-${i}` }
               className="keyword-tag flex-1" 
@@ -29,6 +40,10 @@ export const FilterButtonGroups = ({
             ></span>
           );
         }
+        rs.push(
+          <div className="chip-row">{ innerList }</div>
+        );
+      }
     }
     return rs;
   };
@@ -37,11 +52,9 @@ export const FilterButtonGroups = ({
       <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>
     </>
   );
 };