KeyIn 결제 Sort 컴포넌트 추가

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
@@ -9,15 +9,28 @@ import {
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 import { PATHS } from '@/shared/constants/paths';
+import { useExtensionKeyinDownloadExcelMutation } from '@/entities/additional-service/api/use-extension-keyin-download-excel-mutation';
 import { KeyInPaymentFilter } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-filter';
-import { KeyInPaymentTransactionStatus,SortByKeys } from '@/entities/additional-service/model/types';
+import { KeyInPaymentTransactionStatus, SortByKeys } from '@/entities/additional-service/model/types';
+import { SortOptionsBox } from '@/entities/additional-service/ui/link-payment/sort-options-box';
+import { useExtensionKeyinListMutation } from '@/entities/additional-service/api/use-extension-keyin-list-mutation';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
+
+const requestStatusBtnGroup = [
+  { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
+  { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
+  { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
+  { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL }
+];
 
 export const KeyInPaymentPage = () => {
   const { navigate } = useNavigate();
 
 
   const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [listItems, setListItems] = useState({});
   const [filterOn, setFilterOn] = useState<boolean>(false);
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>('nictest001m');
   const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
   const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
@@ -30,21 +43,50 @@ export const KeyInPaymentPage = () => {
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
 
+  const { mutateAsync: keyinList } = useExtensionKeyinListMutation();
+  const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation();
 
   const onClickToOpenFilter = () => {
     setFilterOn(!filterOn);
   };
 
+  const onClickToDownloadExcel = () => {
+    // downloadExcel({
+    //   mid,
+    //   fromDate: '',
+    //   toDate: '',
+    //   paymentStatus: '',
+    //   minAmount: 0,
+    //   maxAmount: 0
+    // }).then((rs) => {
+
+    // });
+  };
+
+  const onClickToSort = (sort: SortByKeys) => {
+    setSortBy(sort);
+    // TODO : callList 구현
+  };
+
+  const onClickToTransactionStatus = (val: KeyInPaymentTransactionStatus) => {
+    setTransactionStatus(val);
+    // TODO : callList 구현
+  };
+
   const onClickToNavigation = () => {
     navigate(PATHS.additionalService.keyInPayment.request)
   }
 
+  useEffect(() => {
+    // TODO : callList();
+  }, []);
+
   return (
     <>
       <main>
         <div className="tab-content">
           <div className="tab-pane sub active">
-            <section className="summary-section no-border">
+            <section className="summary-section">
               <div className="credit-controls">
                 <div>
                   <input
@@ -71,26 +113,31 @@ export const KeyInPaymentPage = () => {
                   <img
                     src={IMAGE_ROOT + '/ico_download.svg'}
                     alt="다운로드"
+                    onClick={() => onClickToDownloadExcel()}
                   />
                 </button>
               </div>
             </section>
 
-            <section className="filter-section">
-              <div className="sort-options">
-                <button className="sort-btn active">최신순</button>
-                <span className="sort-divider">|</span>
-                <button className="sort-btn">고액순</button>
-              </div>
+            <div className="filter-section">
+              <SortOptionsBox
+                sortBy={sortBy}
+                onClickToSort={onClickToSort}
+              ></SortOptionsBox>
               <div className="excrow">
                 <div className="full-menu-keywords no-padding">
-                  <span className="keyword-tag active">전체</span>
-                  <span className="keyword-tag">승인</span>
-                  <span className="keyword-tag">전취소</span>
-                  <span className="keyword-tag">후취소</span>
+                  {
+                    requestStatusBtnGroup.map((value, index) => (
+                      <span
+                        key={`key-service-code=${index}`}
+                        className={`keyword-tag ${(transactionStatus === value.value) ? 'active' : ''}`}
+                        onClick={() => onClickToTransactionStatus(value.value)}
+                      >{value.name}</span>
+                    ))
+                  }
                 </div>
               </div>
-            </section>
+            </div>
 
             <section className="transaction-list">
               <div className="date-group">