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

src/pages/additional-service/additional-service-pages.tsx

@@ -3,6 +3,7 @@ import { SentryRoutes } from '@/shared/configs/sentry';
 import { ROUTE_NAMES } from '@/shared/constants/route-names';
 import { IntroPage } from './intro/intro-page';
 import { ArsListPage } from './ars/list-page';
+import { ArsDetailPage } from './ars/detail-page';
 import { ArsRequestPage } from './ars/request-page';
 import { ArsRequestSuccessPage } from './ars/request-success-page';
 import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page';
@@ -45,6 +46,7 @@ export const AdditionalServicePages = () => {
 
         <Route path={ROUTE_NAMES.additionalService.ars.base}>
           <Route path={ROUTE_NAMES.additionalService.ars.list} element={<ArsListPage />} />
+          <Route path={ROUTE_NAMES.additionalService.ars.detail} element={<ArsDetailPage />} />
           <Route path={ROUTE_NAMES.additionalService.ars.request} element={<ArsRequestPage />} />
           <Route path={ROUTE_NAMES.additionalService.ars.requestSuccess} element={<ArsRequestSuccessPage />} />
         </Route>

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

@@ -0,0 +1,6 @@
+export const ArsDetailPage = () => {
+
+  return (
+    <></>
+  );
+};

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