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

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>