필터 수정

2025-09-12 17:08:05 +09:00
parent 7cb48133e5
commit 65bbfc12b9
7 changed files with 134 additions and 86 deletions
--- a/src/entities/common/model/types.ts
+++ b/src/entities/common/model/types.ts
@@ -1,3 +1,9 @@
+import { 
+  BillingPaymentMethod, 
+  BillingProcessResult, 
+  BillingRequestStatus 
+} from '@/entities/transaction/model/types';
+
 export enum SuccessResult {
  SUCCESS = 'SUCCESS',
  FAIL = 'FAIL'
@@ -27,6 +33,23 @@ export enum HeaderType {
  LeftArrow = 'LeftArrow',
  RightClose = 'RightClose',
 };
+export interface FilterRangeAmountProps {
+  title?: string;
+  minAmount?: number | string;
+  maxAmount?: number | string;
+  setMinAmount: (minAmount: number | string) => void;
+  setMaxAmount: (maxAmount: number | string) => void;
+};
+export interface FilterButtonGroupsProps {
+  title: string;
+  activeValue?: string;
+  btnGroups?: Array<ButtonItemProp>
+  setter: (value: any) => void;
+};
+export interface ButtonItemProp {
+  name?: string;
+  value?: string;
+};
 export interface HeaderNavigationProps {
  onBack?: (() => void) | undefined;
  headerTitle?: string;
--- a/src/entities/transaction/model/types.ts
+++ b/src/entities/transaction/model/types.ts
@@ -463,6 +463,8 @@ export interface BillingFilterProps extends FilterProps {
  requestStatus: BillingRequestStatus;
  processResult: BillingProcessResult;
  paymentMethod: BillingPaymentMethod;
+  minAmount?: number | string;
+  maxAmount?: number | string;
  setMid: (mid: string) => void;
  setSearchType: (searchType: BillingSearchType) => void;
  setSearchKeyword: (searchKeyword: string) => void;
@@ -471,6 +473,8 @@ export interface BillingFilterProps extends FilterProps {
  setRequestStatus: (requestStatus: BillingRequestStatus) => void;
  setProcessResult: (processResult: BillingProcessResult) => void;
  setPaymentMethod: (paymentMethod: BillingPaymentMethod) => void;
+  setMinAmount: (minAmount: string | number) => void;
+  setMaxAmount: (maxAmount: string | number) => void;
 };

 export interface CashReceiptPurposeUpdateParams {
--- a/src/entities/transaction/ui/filter/billing-filter.tsx
+++ b/src/entities/transaction/ui/filter/billing-filter.tsx
@@ -12,6 +12,8 @@ import {
 import { FilterDateOptions } from '@/entities/common/model/types';
 import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
+import { useEffect } from 'react';

 export const BillingFilter = ({
  filterOn,
@@ -24,6 +26,8 @@ export const BillingFilter = ({
  requestStatus,
  processResult,
  paymentMethod,
+  minAmount,
+  maxAmount,
  setMid,
  setSearchType,
  setSearchKeyword,
@@ -31,7 +35,9 @@ export const BillingFilter = ({
  setEndDate,
  setRequestStatus,
  setProcessResult,
-  setPaymentMethod
+  setPaymentMethod,
+  setMinAmount,
+  setMaxAmount
 }: BillingFilterProps) => {

  const [filterMid, setFilterMid] = useState<string>(mid);
@@ -42,7 +48,8 @@ export const BillingFilter = ({
  const [filterRequestStatus, setFilterRequestStatus] = useState<BillingRequestStatus>(requestStatus);
  const [filterProcessResult, setFilterProcessResult] = useState<BillingProcessResult>(processResult);
  const [filterPaymentMethod, setFilterPaymentMethod] = useState<BillingPaymentMethod>(paymentMethod);
-
+  const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+  const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
  const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
  const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);

@@ -56,38 +63,6 @@ export const BillingFilter = ({
  const onClickToClose = () => {
    setFilterOn(false);
  };
-  const setFilterDate = (dateOptions: FilterDateOptions) => {
-    if(dateOptions === FilterDateOptions.Today){
-      setFilterStartDate(moment().format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
-      setDateReadyOnly(true);
-      setFilterDateOptionsBtn(FilterDateOptions.Today);
-    } 
-    else if(dateOptions === FilterDateOptions.Week){
-      setFilterStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
-      setDateReadyOnly(true);
-      setFilterDateOptionsBtn(FilterDateOptions.Week);
-    }
-    else if(dateOptions === FilterDateOptions.Month){
-      setFilterStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
-      setDateReadyOnly(true);
-      setFilterDateOptionsBtn(FilterDateOptions.Month);
-    }
-    else if(dateOptions === FilterDateOptions.Input){
-      setDateReadyOnly(false);
-      setFilterDateOptionsBtn(FilterDateOptions.Input);
-    }
-  };
-  const onClickToOpenCalendar = () => {
-    if(!dateReadOnly){
-      setCalendarOpen(true);
-    }
-    else{
-      setCalendarOpen(false);
-    }
-  };
  
  const setNewDate = (newDate: any) => {
    console.log(newDate)
@@ -102,6 +77,7 @@ export const BillingFilter = ({
    setRequestStatus(filterRequestStatus);
    setProcessResult(filterProcessResult);
    setPaymentMethod(filterPaymentMethod);
+    onClickToClose();
 	};

  let requestStatusBtnGroup = [
@@ -121,6 +97,11 @@ export const BillingFilter = ({
    {name: '가상계좌', value: BillingPaymentMethod.VIRTUAL_ACCOUNT},
    {name: '휴대폰', value: BillingPaymentMethod.MOBILE_PAYMENT},
  ];
+
+  useEffect(() => {
+    setFilterRequestStatus(requestStatus);
+  }, [requestStatus]);
+
  return (
    <>
      <motion.div 
@@ -208,24 +189,14 @@ export const BillingFilter = ({
              setter={ setFilterPaymentMethod }
            ></FilterButtonGroups>
            
-            <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>
+            <FilterRangeAmount
+              title='거래금액'
+              minAmount={ filterMinAmount }
+              maxAmount={ filterMaxAmount }
+              setMinAmount={ setFilterMinAmount }
+              setMaxAmount={ setFilterMaxAmount }
+            ></FilterRangeAmount>
+            
          </div>
          <div className="apply-row">
            <button 
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/src/pages/transaction/billing/list-page.tsx
@@ -19,18 +19,17 @@ import {
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';

-const serviceCodes = [
-	{name: '전체', key: 'all'},
-	{name: '진행중', key: 'process'},
-	{name: '성공', key: 'success'},
-	{name: '요청취소', key: 'cancel'}
+const requestStatusBtnGroup = [
+	{name: '전체', value: BillingRequestStatus.ALL},
+	{name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
+	{name: '성공', value: BillingRequestStatus.SUCCESS},
+	{name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL}
 ];

 export const BillingListPage = () => {
 	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);
@@ -44,6 +43,8 @@ export const BillingListPage = () => {
 	const [requestStatus, setRequestStatus] = useState<BillingRequestStatus>(BillingRequestStatus.ALL);
 	const [processResult, setProcessResult] = useState<BillingProcessResult>(BillingProcessResult.ALL);
 	const [paymentMethod, setPaymentMethod] = useState<BillingPaymentMethod>(BillingPaymentMethod.ALL);
+	const [minAmount, setMinAmount] = useState<number | string>();
+	const [maxAmount, setMaxAmount] = useState<number | string>();

 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -61,6 +62,14 @@ export const BillingListPage = () => {
  }) => {
 		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: mid,
      searchType: searchType,
@@ -70,6 +79,8 @@ export const BillingListPage = () => {
      requestStatus: requestStatus,
      processResult: processResult,
      paymentMethod: paymentMethod,
+			minAmount: newMinAmount,
+			maxAmount: newMaxAmount,
 			pagination: pageParam
    };    
    
@@ -110,8 +121,8 @@ export const BillingListPage = () => {
    callList({sortBy: sort});
  };

-	const onClickToServiceCode = (val: string) => {
-    setSelectedServiceCode(val);
+	const onClickToRequestStatus = (val: BillingRequestStatus) => {
+    setRequestStatus(val);
    callList({val: val});
  };

@@ -159,11 +170,11 @@ export const BillingListPage = () => {
 							<div className="excrow">
 								<div className="full-menu-keywords no-padding">
 								{
-									serviceCodes.map((value, index) => (
+									requestStatusBtnGroup.map((value, index) => (
 										<span 
 											key={ `key-service-code=${ index }` }
-											className={ `keyword-tag ${(selectedServiceCode === value.key)? 'active': ''}` }
-											onClick={ () => onClickToServiceCode(value.key) }
+											className={ `keyword-tag ${(requestStatus === value.value)? 'active': ''}` }
+											onClick={ () => onClickToRequestStatus(value.value) }
 										>{ value.name }</span>
 									))
 								}
@@ -188,6 +199,8 @@ export const BillingListPage = () => {
 				requestStatus={ requestStatus }
 				processResult={ processResult }
 				paymentMethod={ paymentMethod }
+				minAmount={ minAmount }
+				maxAmount={ maxAmount }
 				setMid={ setMid }
 				setSearchType={ setSearchType }
 				setSearchKeyword={ setSearchKeyword }
@@ -196,6 +209,8 @@ export const BillingListPage = () => {
 				setRequestStatus={ setRequestStatus }
 				setProcessResult={ setProcessResult }
 				setPaymentMethod={ setPaymentMethod }
+				setMinAmount={ setMinAmount }
+				setMaxAmount={ setMaxAmount }
      ></BillingFilter>
 		</>
 	);
--- a/src/shared/ui/filter/button-groups.tsx
+++ b/src/shared/ui/filter/button-groups.tsx
@@ -1,13 +1,5 @@
-interface FilterButtonGroupsProps {
-  title: string;
-  activeValue?: string;
-  btnGroups?: Array<ButtonItemProp>
-  setter: any;
-};
-interface ButtonItemProp {
-  name?: string;
-  value?: string;
-};
+import { FilterButtonGroupsProps } from '@/entities/common/model/types';
+
 export const FilterButtonGroups = ({
  title,
  activeValue,
@@ -23,7 +15,7 @@ export const FilterButtonGroups = ({
        rs.push(
          <span 
            className={ `keyword-tag flex-1 ${(activeValue === btnGroups[i]?.value)? 'active': ''}` }
-            onClick={ () => setter(btnGroups[i]?.value) }
+            onClick={ () => setter(btnGroups[i]?.value || '') }
          >{ btnGroups[i]?.name }</span>
        )
      }
--- a/src/shared/ui/filter/filter-calendar.tsx
+++ b/src/shared/ui/filter/filter-calendar.tsx
@@ -23,26 +23,24 @@ export const FilterCalendar = ({
  const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간');
  const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
  const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
-  const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
-  const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
  
  const setFilterDate = (dateOptions: FilterDateOptions) => {
    if(dateOptions === FilterDateOptions.Today){
-      setFilterStartDate(moment().format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
+      setStartDate(moment().format('YYYY-MM-DD'));
+      setEndDate(moment().format('YYYY-MM-DD'));
      setDateReadyOnly(true);
      setFilterDateOptionsBtn(FilterDateOptions.Today);
    } 
    else if(dateOptions === FilterDateOptions.Week){
-      setFilterStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
+      setStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
+      setEndDate(moment().format('YYYY-MM-DD'));
      setDateReadyOnly(true);
      setFilterDateOptionsBtn(FilterDateOptions.Week);
    }
    else if(dateOptions === FilterDateOptions.Month){
-      setFilterStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
+      setStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+      setEndDate(moment().format('YYYY-MM-DD'));
      setDateReadyOnly(true);
      setFilterDateOptionsBtn(FilterDateOptions.Month);
    }
@@ -50,6 +48,7 @@ export const FilterCalendar = ({
      setDateReadyOnly(false);
      setFilterDateOptionsBtn(FilterDateOptions.Input);
    }
+    
  };

  const onClickToOpenCalendar = () => {
@@ -93,7 +92,7 @@ export const FilterCalendar = ({
                className="date-input"
                type="text"
                placeholder="날짜 선택"
-                value={ filterStartDate }
+                value={ startDate }
                readOnly={ true }
              />
              <button
@@ -113,7 +112,7 @@ export const FilterCalendar = ({
                className="date-input"
                type="text"
                placeholder="날짜 선택"
-                value={ filterEndDate }
+                value={ endDate }
                readOnly={ true }
              />
              <button 
--- a/src/shared/ui/filter/range-amount.tsx
+++ b/src/shared/ui/filter/range-amount.tsx
@@ -0,0 +1,44 @@
+import { FilterRangeAmountProps } from '@/entities/common/model/types';
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { ChangeEvent } from 'react';
+
+export const FilterRangeAmount = ({
+  title,
+  minAmount,
+  maxAmount,
+  setMinAmount,
+  setMaxAmount,
+}: FilterRangeAmountProps) => {
+  const [filterTitle, setFilterTitle] = useState<string>(title || '거래금액');
+
+  useEffect(() => {
+    setFilterTitle(title || '거래금액');
+  }, [title])
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ filterTitle }</div>
+        <div className="opt-controls">
+          <div className="input-wrapper ">
+            <input
+              type="text"
+              placeholder=""
+              value={ minAmount }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMinAmount(e.target.value) }
+            />
+          </div>
+          <span> ~ </span>
+          <div className="input-wrapper date">
+            <input
+              type="text"
+              placeholder=""
+              value={ maxAmount }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMaxAmount(e.target.value) }
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+};