KeyIn결제 필터 추가 , range-amount 입력 type : number 변경

2025-09-15 11:24:11 +09:00
parent 42a3892e30
commit 8c918d50dd
8 changed files with 211 additions and 8 deletions
--- a/src/entities/additional-service/model/types.ts
+++ b/src/entities/additional-service/model/types.ts
@@ -28,6 +28,12 @@ export enum ProcessResult {
  SUCCESS = 'SUCCESS',
  FAILURE = 'FAILURE'
 };
+export enum KeyInPaymentTransactionStatus {
+  ALL = 'ALL',
+  APPROVE = 'APPROVE',
+  BF_CANCEL = 'BF_CANCEL',
+  AF_CANCEL = 'AF_CANCEL'
+}
 export enum AccountHolderSearchType {
  ALL = 'ALL',
  ACCOUNT_HOLDER = 'ACCOUNT_HOLDER',
@@ -353,6 +359,20 @@ export interface FilterProps {
  filterOn: boolean;
  setFilterOn: (filterOn: boolean) => void;
 };
+export interface KeyInPaymentFilterProps extends FilterProps {
+  mid: string,
+  startDate: string;
+  endDate: string;
+  transactionStatus: KeyInPaymentTransactionStatus;
+  minAmount?: number | string;
+  maxAmount?: number | string;
+  setMid: (mid: string) => void;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+  setMinAmount: (minAmount: string | number) => void;
+  setMaxAmount: (maxAmount: string | number) => void;
+  setTransactionStatus: (transactionStatus: KeyInPaymentTransactionStatus) => void;
+}
 // 계좌성명 조회 필터
 export interface AccountHolderSearchFilterProps extends FilterProps {
  mid: string;
--- a/src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx
+++ b/src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx
@@ -11,7 +11,7 @@ import {
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterDateOptions } from '@/entities/common/model/types';
-import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';

 export const AccountHolderSearchFilter = ({
--- a/src/entities/additional-service/ui/key-in-payment/key-in-payment-filter.tsx
+++ b/src/entities/additional-service/ui/key-in-payment/key-in-payment-filter.tsx
@@ -0,0 +1,145 @@
+import moment from 'moment';
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+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 {
+    KeyInPaymentFilterProps,
+    KeyInPaymentTransactionStatus
+} from '../../model/types';
+
+export const KeyInPaymentFilter = ({
+    filterOn,
+    setFilterOn,
+    mid,
+    startDate,
+    endDate,
+    transactionStatus,
+    minAmount,
+    maxAmount,
+    setMid,
+    setStartDate,
+    setEndDate,
+    setTransactionStatus,
+    setMinAmount,
+    setMaxAmount
+}: KeyInPaymentFilterProps) => {
+
+    const [filterMid, setFilterMid] = useState<string>(mid);
+    const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+    const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+    const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTransactionStatus>(transactionStatus);
+    const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+    const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+
+    const variants = {
+        hidden: { x: '100%' },
+        visible: { x: '0%' },
+    };
+
+    const onClickToClose = () => {
+        setFilterOn(false);
+    };
+
+    const setNewDate = (newDate: any) => {
+        console.log(newDate)
+    };
+
+    const onClickToSetFilter = () => {
+        setMid(filterMid);
+        setStartDate(filterStartDate);
+        setEndDate(filterEndDate);
+        setTransactionStatus(filterTransactionStatus);
+        setMinAmount(filterMinAmount);
+        setMaxAmount(filterMaxAmount);
+        onClickToClose();
+    };
+    let MidOptions = [
+        { name: 'nictest001m', value: 'nictest001m' }
+    ];
+
+    let transactionStatusOption = [
+        { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
+        { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
+        { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
+        { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL },
+    ]
+
+    return (
+        <>
+            <motion.div
+                id="fullMenuModal"
+                className="full-menu-modal"
+                initial="hidden"
+                animate={(filterOn) ? 'visible' : 'hidden'}
+                variants={variants}
+                transition={{ duration: 0.3 }}
+                style={{
+                    width: '100%',
+                    height: '100%',
+                }}
+            >
+                <div className="full-menu-container">
+                    <div className="full-menu-header">
+                        <div className="full-menu-title center">필터</div>
+                        <div className="full-menu-actions">
+                            <button
+                                id="closeFullMenu"
+                                className="full-menu-close"
+                            >
+                                <img
+                                    src={IMAGE_ROOT + '/ico_close.svg'}
+                                    alt="닫기"
+                                    onClick={() => onClickToClose()}
+                                />
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="option-list pt-16">
+                        <FilterSelect
+                            title='가맹점'
+                            selectValue={filterMid}
+                            selectSetter={setFilterMid}
+                            selectOptions={MidOptions}
+                        ></FilterSelect>
+                        <FilterCalendar
+                            title='조회기간'
+                            startDate={filterStartDate}
+                            endDate={filterEndDate}
+                            setStartDate={setFilterStartDate}
+                            setEndDate={setFilterEndDate}
+                        ></FilterCalendar>
+
+                        <FilterButtonGroups
+                            title='거래상태'
+                            activeValue={filterTransactionStatus}
+                            btnGroups={transactionStatusOption}
+                            setter={setFilterTransactionStatus}
+                        ></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"
+                            onClick={() => onClickToSetFilter()}
+                        >적용</button>
+                    </div>
+                </div>
+            </motion.div>
+        </>
+    );
+};
--- a/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx
+++ b/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx
@@ -12,7 +12,7 @@ import {
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterDateOptions } from '@/entities/common/model/types';
-import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';

 export const LinkPaymentPendingSendFilter = ({
--- a/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx
+++ b/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx
@@ -13,7 +13,7 @@ import {
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterDateOptions } from '@/entities/common/model/types';
-import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';

 export const LinkPaymentShippingHistoryFilter = ({
--- a/src/entities/transaction/ui/filter/billing-filter.tsx
+++ b/src/entities/transaction/ui/filter/billing-filter.tsx
@@ -74,6 +74,8 @@ export const BillingFilter = ({
    setRequestStatus(filterRequestStatus);
    setProcessResult(filterProcessResult);
    setPaymentMethod(filterPaymentMethod);
+    setMinAmount(filterMinAmount);
+    setMaxAmount(filterMaxAmount);
    onClickToClose();
 	};
  let MidOptions = [
@@ -141,16 +143,16 @@ export const BillingFilter = ({
            <FilterSelect
              title='가맹점'
              selectValue={ filterMid }
-              selectSetter={ setMid }
+              selectSetter={ setFilterMid }
              selectOptions={ MidOptions }
            ></FilterSelect>
            <FilterSelectInput
              title='주문번호/ID'
              selectValue={ filterSearchType }
-              selectSetter={ setSearchType }
+              selectSetter={ setFilterSearchType }
              selectOptions={ SearchTypeOptions }
              inputValue={ searchKeyword }
-              inputSetter={ setSearchKeyword }
+              inputSetter={ setFilterSearchKeyword }
            ></FilterSelectInput>
            <FilterCalendar
              title='조회기간'
--- a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
+++ b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
@@ -1,3 +1,4 @@
+import moment from 'moment';
 import { useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
@@ -8,14 +9,32 @@ import {
  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 import { PATHS } from '@/shared/constants/paths';
+import { KeyInPaymentFilter } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-filter';
+import { KeyInPaymentTransactionStatus,SortByKeys } from '@/entities/additional-service/model/types';

 export const KeyInPaymentPage = () => {
  const { navigate } = useNavigate();

+
+  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [filterOn, setFilterOn] = useState<boolean>(false);
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
+  const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+  const [transactionStatus, setTransactionStatus] = useState<KeyInPaymentTransactionStatus>(KeyInPaymentTransactionStatus.ALL)
+  const [minAmount, setMinAmount] = useState<number | string>();
+  const [maxAmount, setMaxAmount] = useState<number | string>();
+
+
  useSetHeaderTitle('KEY-IN 결제');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);

+
+  const onClickToOpenFilter = () => {
+    setFilterOn(!filterOn);
+  };
+
  const onClickToNavigation = () => {
    navigate(PATHS.additionalService.keyInPayment.request)
  }
@@ -41,6 +60,7 @@ export const KeyInPaymentPage = () => {
                    <img
                      src={IMAGE_ROOT + '/ico_setting.svg'}
                      alt="검색옵션"
+                      onClick={() => onClickToOpenFilter()}
                    />
                  </button>
                </div>
@@ -148,6 +168,22 @@ export const KeyInPaymentPage = () => {
                onClick={() => onClickToNavigation()}
              >결제 신청</button>
            </div>
+            <KeyInPaymentFilter
+              filterOn={filterOn}
+              setFilterOn={setFilterOn}
+              mid={mid}
+              startDate={startDate}
+              endDate={endDate}
+              transactionStatus={transactionStatus}
+              minAmount={minAmount}
+              maxAmount={maxAmount}
+              setMid={setMid}
+              setStartDate={setStartDate}
+              setEndDate={setEndDate}
+              setTransactionStatus={setTransactionStatus}
+              setMinAmount={setMinAmount}
+              setMaxAmount={setMaxAmount}
+            ></KeyInPaymentFilter>
          </div>
        </div>
      </main>
--- a/src/shared/ui/filter/range-amount.tsx
+++ b/src/shared/ui/filter/range-amount.tsx
@@ -22,7 +22,7 @@ export const FilterRangeAmount = ({
        <div className="opt-controls">
          <div className="input-wrapper ">
            <input
-              type="text"
+              type="number"
              placeholder=""
              value={ minAmount }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMinAmount(e.target.value) }
@@ -31,7 +31,7 @@ export const FilterRangeAmount = ({
          <span> ~ </span>
          <div className="input-wrapper date">
            <input
-              type="text"
+              type="number"
              placeholder=""
              value={ maxAmount }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMaxAmount(e.target.value) }