ars 상세 페이지 추가 및 경로 설ㄹ정 추가 ars 필터 리스트 및 필터 완료

src/pages/additional-service/ars/list-page.tsx

@@ -17,7 +17,8 @@ import { useExtensionArsDownloadExcelMutation } from '@/entities/additional-serv
 import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
 import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
 import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
-import { PaymentStatusBtnGroup } from '@/entities/additional-service/model/ars/constant';
+import { ArsPaymentStatusBtnGroup } from '@/entities/additional-service/model/ars/constant';
+import { ArsFilter } from '@/entities/additional-service/ui/filter/ars-filter';
 
 export const ArsListPage = () => {
   const { navigate } = useNavigate();
@@ -32,8 +33,8 @@ export const ArsListPage = () => {
   const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
   const [paymentStatus, setPaymentStatus] = useState<PaymentStatus>(PaymentStatus.ALL);
   const [orderStatus, setOrderStatus] = useState<OrderStatus>(OrderStatus.ALL);
-  const [minAmount, setMinAmount] = useState<number>(0);
-  const [maxAmount, setMaxAmount] = useState<number>(0);
+  const [minAmount, setMinAmount] = useState<number>();
+  const [maxAmount, setMaxAmount] = useState<number>();
 
   const { mutateAsync: extensionArsList } = useExtensionArsListMutation();
   const { mutateAsync: extensionArsDownloadExcel } = useExtensionArsDownloadExcelMutation();
@@ -188,7 +189,7 @@ export const ArsListPage = () => {
               <div className="excrow mr-0">
                 <div className="full-menu-keywords no-padding">
                   {
-                    PaymentStatusBtnGroup.map((value, index) => (
+                    ArsPaymentStatusBtnGroup.map((value, index) => (
                       <span 
                         key={ `key-service-code=${ index }` }
                         className={ `keyword-tag ${(paymentStatus === value.value)? 'active': ''}` }
@@ -212,6 +213,26 @@ export const ArsListPage = () => {
           </div>
         </div>
       </main>
+      <ArsFilter
+        filterOn={ filterOn }
+        setFilterOn={ setFilterOn }
+        mid={ mid }
+        moid={ moid }
+        fromDate={ fromDate }
+        toDate={ toDate }
+        paymentStatus={ paymentStatus }
+        orderStatus={ orderStatus }
+        minAmount={ minAmount }
+        maxAmount={ maxAmount }
+        setMid={ setMid }
+        setMoid={ setMoid }
+        setFromDate={ setFromDate }
+        setToDate={ setToDate }
+        setPaymentStatus={ setPaymentStatus }
+        setOrderStatus={ setOrderStatus }
+        setMinAmount={ setMinAmount }
+        setMaxAmount={ setMaxAmount }
+      ></ArsFilter>
     </>
   );
 };