에스크로 필터

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

@@ -0,0 +1,12 @@
+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/types.ts

@@ -38,7 +38,27 @@ export enum CashReceiptPurpose {
   INCOME_DEDUCTION = 'INCOME_DEDUCTION',
   EXPENSE_PROOF = 'EXPENSE_PROOF',
 };
-
+export enum EscrowSearchType {
+  ALL = 'ALL',
+  ORDER_NUMBER = 'ORDER_NUMBER',
+  TID = 'TID'
+};
+export enum EscrowDeliveryStatus {
+  ALL = 'ALL',
+  PAY_COMPLETE = 'PAY_COMPLETE',
+  DELIVERY_INSERT = 'DELIVERY_INSERT',
+  DELIVERY_COMPLETE = 'DELIVERY_COMPLETE',
+  PURCHASE_CONFIRM = 'PURCHASE_CONFIRM',
+  PURCHASE_REJECT = 'PURCHASE_REJECT',
+  RETURN_PROCESSING = 'RETURN_PROCESSING',
+  DEPOSIT_COMPLETE = 'DEPOSIT_COMPLETE'
+};
+export enum EscrowSettlementStatus {
+  ALL = 'ALL',
+  CREDIT_CARD = 'CREDIT_CARD',
+  REAL_ACCOUNT = 'REAL_ACCOUNT',
+  ACCOUNT_TRANSFER = 'ACCOUNT_TRANSFER'
+};
 export enum BillingSearchType {
   ALL = 'ALL',
   ORDER_NUMBER = 'ORDER_NUMBER',
@@ -200,8 +220,8 @@ export interface EscrowListParams {
   endDate?: string;
   deliveryStatus?: string;
   settlementStatus?: string;
-  minAmount?: number;
-  maxAmount?: number;
+  minAmount?: number | string;
+  maxAmount?: number | string;
   pagination?: DefaultRequestPagination;
 };
 
@@ -214,6 +234,8 @@ export interface BillingListParams {
   requestStatus?: string;
   processResult?: string;
   paymentMethod?: string;
+  minAmount?: number | string;
+  maxAmount?: number | string;
   pagination?: DefaultRequestPagination
 };
 
@@ -452,7 +474,24 @@ export interface CashReceiptFilterProps extends FilterProps {
 
 };
 export interface EscrowFilterProps extends FilterProps {
-
+  mid: string;
+  searchType: EscrowSearchType;
+  searchKeyword: string;
+  startDate: string
+  endDate: string;
+  deliveryStatus: EscrowDeliveryStatus;
+  settlementStatus: EscrowSettlementStatus;
+  minAmount: number;
+  maxAmount: number;
+  setMid: (mid: string) => void;
+  setSearchType: (searchType: EscrowSearchType) => void;
+  setSearchKeyword: (searchKeyword: string) => void;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+  setDeliveryStatus: (deliveryStatus: EscrowDeliveryStatus) => void;
+  setSettlementStatus: (settlementStatus: EscrowSettlementStatus) => void;
+  setMinAmount: (minAmount: string | number) => void;
+  setMaxAmount: (maxAmount: string | number) => void;
 };
 export interface BillingFilterProps extends FilterProps {
   mid: string;

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

@@ -1,4 +1,3 @@
-import moment from 'moment';
 import { useEffect } from 'react';
 import { useState } from 'react';
 import { motion } from 'framer-motion';

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

@@ -1,12 +1,52 @@
+import { useEffect } from 'react';
+import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { FilterProps } from '../../model/types';
+import { FilterSelect } from '@/shared/ui/filter/select';
+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 { 
+  EscrowFilterProps,
+  EscrowSearchType,
+  EscrowDeliveryStatus,
+  EscrowSettlementStatus
+} from '../../model/types';
 
 export const EscrowFilter = ({
   filterOn,
-  setFilterOn
-}: FilterProps) => {
+  setFilterOn,
+  mid,
+  searchType,
+  searchKeyword,
+  startDate,
+  endDate,
+  deliveryStatus,
+  settlementStatus,
+  minAmount,
+  maxAmount,
+  setMid,
+  setSearchType,
+  setSearchKeyword,
+  setStartDate,
+  setEndDate,
+  setDeliveryStatus,
+  setSettlementStatus,
+  setMinAmount,
+  setMaxAmount
+}: EscrowFilterProps) => {
 
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterSearchType, setFilterSearchType] = useState<EscrowSearchType>(searchType);
+  const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
+  const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+  const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+  const [filterDeliveryStatus, setFilterDeliveryStatus] = useState<EscrowDeliveryStatus>(deliveryStatus);
+  const [filterSettlementStatus, setFilterSettlementStatus] = useState<EscrowSettlementStatus>(settlementStatus);
+  const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+  const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+  
   const variants = {
     hidden: { x: '100%' },
     visible: { x: '0%' },
@@ -15,6 +55,52 @@ export const EscrowFilter = ({
   const onClickToClose = () => {
     setFilterOn(false);
   };
+  
+  const setNewDate = (newDate: any) => {
+    console.log(newDate)
+  };
+
+  const onClickToSetFilter = () => {
+    setMid(filterMid);
+    setSearchType(filterSearchType);
+    setSearchKeyword(filterSearchKeyword);
+    setStartDate(filterStartDate);
+    setEndDate(filterEndDate);
+    setDeliveryStatus(filterDeliveryStatus);
+    setSettlementStatus(filterSettlementStatus);
+    setMinAmount(filterMinAmount);
+    setMaxAmount(filterMaxAmount);
+    onClickToClose();
+  };
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+  let SearchTypeOptions = [
+    {name: '주문번호', value: EscrowSearchType.ORDER_NUMBER },
+    {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]);
+
   return (
     <>
       <motion.div 
@@ -46,139 +132,56 @@ export const EscrowFilter = ({
             </div>
           </div>
       
-          <div className="option-list pb-120">
-            <div className="opt-field">
-              <div className="opt-label">가맹점</div>
-              <div className="opt-controls">
-                <select className="flex-1">
-                  <option>nictest001m</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">주문번호/ID</div>
-              <div className="opt-controls">
-                <select className="w-110">
-                  <option>주문번호</option>
-                  <option>ID</option>
-                </select>
-                <input
-                  className="flex-1"
-                  type="text"
-                  placeholder=""
-                />
-              </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 active">당일</span>
-                  <span className="keyword-tag">일주일</span>
-                  <span className="keyword-tag">1개월</span>
-                  <span className="keyword-tag">직접입력</span>
-                </div>
-                <div className="range-row">
-                  <div className="input-wrapper date">
-                    <input
-                      className="date-input"
-                      type="text"
-                      placeholder="날짜 선택"
-                      value="2025.06.08"
-                      readOnly={ true }
-                    />
-                    <button
-                      type="button"
-                      className="date-btn"
-                    >
-                      <img
-                        src={ IMAGE_ROOT + '/ico_date.svg' }
-                        alt="날짜 선택"
-                      />
-                    </button>
-                  </div>
-                  <span className="beetween">~</span>
-                  <div className="input-wrapper date">
-                    <input
-                      className="date-input"
-                      type="text"
-                      placeholder="날짜 선택"
-                      value="2025.06.08"
-                      readOnly={ true }
-                    />
-                    <button 
-                      type="button" 
-                      className="date-btn"
-                    >
-                      <img
-                        src={ IMAGE_ROOT + '/ico_date.svg' }
-                        alt="날짜 선택"
-                      />
-                    </button>
-                  </div>
-                </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 active">전체</span>
-                  <span className="keyword-tag">진행중</span>
-                  <span className="keyword-tag">성공</span>
-                  <span className="keyword-tag">요청취소</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 active">전체</span>
-                  <span className="keyword-tag">성공</span>
-                  <span className="keyword-tag">실패</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">
-                <select className="flex-1">
-                  <option>전체</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">거래금액</div>
-              <div className="opt-controls">
-                <div className="input-wrapper ">
-                  <input
-                    type="text"
-                    placeholder=""
-                  />
-                </div>
-                <span> ~ </span>
-                <div className="input-wrapper date">
-                  <input
-                    type="text"
-                    placeholder=""
-                    />
-                </div>
-              </div>
-            </div>
+          <div className="option-list pt-16">
+            <FilterSelect
+              title='가맹점'
+              selectValue={ filterMid }
+              selectSetter={ setMid }
+              selectOptions={ MidOptions }
+            ></FilterSelect>
+            <FilterSelectInput
+              title='주문번호/ID'
+              selectValue={ filterSearchType }
+              selectSetter={ setSearchType }
+              selectOptions={ SearchTypeOptions }
+              inputValue={ searchKeyword }
+              inputSetter={ setSearchKeyword }
+            ></FilterSelectInput>
+            <FilterCalendar
+              title='조회기간'
+              startDate={ filterStartDate }
+              endDate={ filterEndDate }
+              setStartDate={ setFilterStartDate }
+              setEndDate={ setFilterEndDate }
+            ></FilterCalendar>
+            
+            <FilterButtonGroups
+              title='배송상태'
+              activeValue={ filterDeliveryStatus }
+              btnGroups={ deliveryStatusBtnGroup }
+              setter={ setFilterDeliveryStatus }
+            ></FilterButtonGroups>
+            <FilterButtonGroups
+              title='결제수단'
+              activeValue={ filterSettlementStatus }
+              btnGroups={ settlementStatusBtnGroup }
+              setter={ setFilterSettlementStatus }
+            ></FilterButtonGroups>
+            
+            <FilterRangeAmount
+              title='거래금액'
+              minAmount={ filterMinAmount }
+              maxAmount={ filterMaxAmount }
+              setMinAmount={ setFilterMinAmount }
+              setMaxAmount={ setFilterMaxAmount }
+            ></FilterRangeAmount>
+            
           </div>
           <div className="apply-row">
-            <button className="btn-50 btn-blue flex-1">적용</button>
+            <button 
+              className="btn-50 btn-blue flex-1"
+              onClick={ () => onClickToSetFilter() }
+            >적용</button>
           </div>
         </div>
       </motion.div>

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

@@ -5,11 +5,12 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { EscrowList } from '@/entities/transaction/ui/escrow-list';
-import { EscrowListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { EscrowListItem, TransactionCategory, SortByKeys, EscrowDeliveryStatus, EscrowSearchType, EscrowSettlementStatus } from '@/entities/transaction/model/types';
 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 { deliveryStatusBtnGroup } from '@/entities/additional-service/model/contant';
 import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
@@ -19,23 +20,24 @@ import {
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 
-const serviceCodes = [
-	{name: '전체', key: 'all'},
-	{name: '결제완료', key: 'paid'},
-	{name: '배송등록', key: 'register'},
-];
-
 export const EscrowListPage = () => {
 	const { navigate } = useNavigate();
 	const userInfo = useStore((state) => state.UserStore.UserInfo);
 
-	const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+	const [mid, setMid] = useState<string>('nictest001m');
+	const [searchType, setSearchType] = useState<EscrowSearchType>(EscrowSearchType.ALL);
+	const [searchKeyword, setSearchKeyword] = useState<string>('');
+	//const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+	const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
 	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+	const [deliveryStatus, setDeliveryStatus] = useState<EscrowDeliveryStatus>(EscrowDeliveryStatus.ALL);
+	const [settlementStatus, setSettlementStatus] = useState<EscrowSettlementStatus>(EscrowSettlementStatus.ALL);
+	const [minAmount, setMinAmount] = useState<number | string>();
+	const [maxAmount, setMaxAmount] = useState<number | string>();	
 		
 	useSetHeaderTitle('에스크로');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -51,24 +53,30 @@ export const EscrowListPage = () => {
     sortBy?: string, 
     val?: string
   }) => {
-		// pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
     setPageParam(pageParam);
+		let newMinAmount = minAmount;
+		if(!!minAmount && typeof(minAmount) === 'string'){
+			newMinAmount = parseInt(minAmount);
+		}
+		let newMaxAmount = maxAmount;
+		if(!!maxAmount && typeof(maxAmount) === 'string'){
+			newMaxAmount = parseInt(maxAmount);
+		}
     let listParams = {
-      mid: 'nictest001m',
-  		searchType: 'ORDER_NUMBER',
-  		searchKeyword: '',
+      mid: mid,
+  		searchType: searchType,
+  		searchKeyword: searchKeyword,
   		startDate: startDate,
   		endDate: endDate,
-  		deliveryStatus: 'ALL',
-  		settlementStatus: 'ALL',
-  		minAmount: 0,
-  		maxAmount: 999999999,
+  		deliveryStatus: deliveryStatus,
+  		settlementStatus: settlementStatus,
+  		minAmount: newMinAmount,
+  		maxAmount: newMaxAmount,
 			pagination: pageParam
     };
 
-		console.log(listParams)
-    
-    escrowList(listParams).then((rs) => {
+		escrowList(listParams).then((rs) => {
       setListItems(assembleData(rs.content));
     });
   };
@@ -105,8 +113,8 @@ export const EscrowListPage = () => {
     callList({sortBy: sort});
   };
 	
-	const onClickToServiceCode = (val: string) => {
-    setSelectedServiceCode(val);
+	const onClickToDeliveryStatus = (val: EscrowDeliveryStatus) => {
+    setDeliveryStatus(val);
     callList({val: val});
   };
 
@@ -154,11 +162,11 @@ export const EscrowListPage = () => {
 							<div className="excrow">
 								<div className="full-menu-keywords no-padding">
 								{
-									serviceCodes.map((value, index) => (
+									deliveryStatusBtnGroup.map((value, index) => (
 										<span 
 											key={ `key-service-code=${ index }` }
-											className={ `keyword-tag ${(selectedServiceCode === value.key)? 'active': ''}` }
-											onClick={ () => onClickToServiceCode(value.key) }
+											className={ `keyword-tag ${(deliveryStatus === value.value)? 'active': ''}` }
+											onClick={ () => onClickToDeliveryStatus(value.value) }
 										>{ value.name }</span>
 									))
 								}