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/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>
+        </>
+    );
+};