현금영수증 필터

src/pages/transaction/cash-receipt/list-page.tsx

@@ -5,11 +5,11 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { CashReceiptList } from '@/entities/transaction/ui/cash-receipt-list';
-import { CashReceiptListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { CashReceiptListItem, TransactionCategory, SortByKeys, CashReceiptPurposeType, CashReceiptIssueStatus, CashReceiptProcessResult } from '@/entities/transaction/model/types';
 import { useCashReceiptListMutation } from '@/entities/transaction/api/use-cash-receipt-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
-import { Filter } from '@/entities/transaction/ui/filter';
+import { CashReceiptFilter } from '@/entities/transaction/ui/filter/cash-receipt-filter';
 import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
 import { HeaderType } from '@/entities/common/model/types';
 import {
@@ -18,23 +18,21 @@ import {
 	useSetHeaderType,
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
-
-const serviceCodes = [
-	{ name: '전체', key: 'all' },
-	{ name: '승인', key: 'approval' },
-	{ name: '취소', key: 'cancel' }
-];
+import { CashReceiptIssueStatusBtnGroup } from '@/entities/transaction/model/contant';
 
 export const CashReceiptListPage = () => {
 	const { navigate } = useNavigate();
 
-	const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
 	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 [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
-	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
+	const [mid, setMid] = useState<string>('nictest001m');
+	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+	const [purposeType, setPurposeType] = useState<CashReceiptPurposeType>(CashReceiptPurposeType.ALL);
+	const [issueStatus, setIssueStatus] = useState<CashReceiptIssueStatus>(CashReceiptIssueStatus.ALL);
+	const [processResult, setProcessResult] = useState<CashReceiptProcessResult>(CashReceiptProcessResult.ALL);
 
 	useSetHeaderTitle('현금영수증');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -50,15 +48,15 @@ export const CashReceiptListPage = () => {
 		sortBy?: string,
 		val?: string
 	}) => {
-		pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
-		setPageParam(pageParam);
+		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+    setPageParam(pageParam);
 		let listParams = {
-			mid: 'string',
-			startDate: '2025-06-08',
-			endDate: '2025-06-08',
-			purposeType: 'ALL',
-			issueStatus: 'ALL',
-			processResult: 'ALL',
+			mid: mid,
+			startDate: startDate,
+			endDate: endDate,
+			purposeType: purposeType,
+			issueStatus: issueStatus,
+			processResult: processResult,
 			pagination: pageParam
 		};
 
@@ -101,8 +99,8 @@ export const CashReceiptListPage = () => {
 		callList({ sortBy: sort });
 	};
 
-	const onClickToServiceCode = (val: string) => {
-		setSelectedServiceCode(val);
+	const onClickToIssueStatus = (val: CashReceiptIssueStatus) => {
+		setIssueStatus(val);
 		callList({ val: val });
 	};
 
@@ -192,11 +190,11 @@ export const CashReceiptListPage = () => {
 							<div>
 								<div className="full-menu-keywords no-padding">
 									{
-										serviceCodes.map((value, index) => (
+										CashReceiptIssueStatusBtnGroup.map((value, index) => (
 											<span
 												key={`key-service-code=${index}`}
-												className={`keyword-tag ${(selectedServiceCode === value.key) ? 'active' : ''}`}
-												onClick={() => onClickToServiceCode(value.key)}
+												className={`keyword-tag ${(issueStatus === value.value) ? 'active' : ''}`}
+												onClick={() => onClickToIssueStatus(value.value)}
 											>{value.name}</span>
 										))
 									}
@@ -210,10 +208,22 @@ export const CashReceiptListPage = () => {
 					</div>
 				</div>
 			</main>
-			<Filter
-				filterOn={filterOn}
-				setFilterOn={setFilterOn}
-			></Filter>
+			<CashReceiptFilter
+				filterOn={ filterOn }
+				setFilterOn={ setFilterOn }
+				mid={ mid }
+				startDate={ startDate }
+				endDate={ endDate }
+				purposeType={ purposeType }
+				issueStatus={ issueStatus }
+				processResult={ processResult }
+				setMid={ setMid }
+				setStartDate={ setStartDate }
+				setEndDate={ setEndDate }
+				setPurposeType={ setPurposeType }
+				setIssueStatus={ setIssueStatus }
+				setProcessResult={ setProcessResult }
+			></CashReceiptFilter>
 		</>
 	);
 };