현금영수증 필터

src/entities/transaction/model/contant.ts

@@ -2,11 +2,39 @@ import {
   BillingPaymentMethod, 
   BillingProcessResult,
   BillingRequestStatus,
+  BillingSearchType,
+  CashReceiptIssueStatus,
+  CashReceiptProcessResult,
+  CashReceiptPurposeType,
   EscrowDeliveryStatus,
+  EscrowSearchType,
   EscrowSettlementStatus
 } from '@/entities/transaction/model/types';
 
-export const deliveryStatusBtnGroup = [
+export const CashReceiptPurposeTypeBtnGroup = [
+  {name: '전체', value: CashReceiptPurposeType.ALL},
+  {name: '소득공제', value: CashReceiptPurposeType.INCOME_DEDUCTION},
+  {name: '지출증빙', value: CashReceiptPurposeType.EXPENSE_PROOF},
+];
+export const CashReceiptIssueStatusBtnGroup = [
+  {name: '전체', value: CashReceiptIssueStatus.ALL},
+  {name: '승인', value: CashReceiptIssueStatus.APPROVAL},
+  {name: '취소', value: CashReceiptIssueStatus.CANCEL},
+];
+export const CashReceiptProcessResultBtnGroup = [
+  {name: '전체', value: CashReceiptProcessResult.ALL},
+  {name: '요청', value: CashReceiptProcessResult.REQUEST},
+  {name: '요청취소', value: CashReceiptProcessResult.REQUEST_CANCEL},
+  {name: '요청완료', value: CashReceiptProcessResult.REQUEST_COMPLETE},
+  {name: '발급완료', value: CashReceiptProcessResult.ISSUE_COMPLETE},
+  {name: '요청실패', value: CashReceiptProcessResult.REQUEST_FAIL},
+  {name: '발급실패', value: CashReceiptProcessResult.ISSUE_FAIL},
+];
+export const EscrowSearchTypeOptionsGroup = [
+  {name: '주문번호', value: EscrowSearchType.ORDER_NUMBER },
+  {name: 'TID', value: EscrowSearchType.TID }
+];
+export const EscrowDeliveryStatusBtnGroup = [
   {name: '전체', value: EscrowDeliveryStatus.ALL},
   {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE},
   {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT},
@@ -16,24 +44,28 @@ export const deliveryStatusBtnGroup = [
   {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING},
   {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
 ];
-export let settlementStatusBtnGroup = [
+export let EscrowSettlementStatusBtnGroup = [
   {name: '전체', value: EscrowSettlementStatus.ALL},
   {name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD},
   {name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT},
   {name: '계좌이체', value: EscrowSettlementStatus.ACCOUNT_TRANSFER},
 ];
-export const requestStatusBtnGroup = [
+export const BillingSearchTypeOptionsGroup = [
+  {name: '주문번호', value: BillingSearchType.ORDER_NUMBER },
+  {name: 'TID', value: BillingSearchType.TID }
+];
+export const BillingRequestStatusBtnGroup = [
   {name: '전체', value: BillingRequestStatus.ALL},
   {name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
   {name: '성공', value: BillingRequestStatus.SUCCESS},
   {name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL},
 ];
-export const processResultBtnGroup = [
+export const BillingProcessResultBtnGroup = [
   {name: '전체', value: BillingProcessResult.ALL},
   {name: '성공', value: BillingProcessResult.SUCCESS},
   {name: '실패', value: BillingProcessResult.FAILURE},
 ];
-export const paymentMethodBtnGroup = [
+export const BillingPaymentMethodBtnGroup = [
   {name: '전체', value: BillingPaymentMethod.ALL},
   {name: '신용카드', value: BillingPaymentMethod.CREDIT_CARD},
   {name: '가상계좌', value: BillingPaymentMethod.VIRTUAL_ACCOUNT},

src/entities/transaction/model/types.ts

@@ -33,11 +33,25 @@ export enum ProcessStep {
   One = 'One',
   Two = 'Two',
 };
-export enum CashReceiptPurpose {
+export enum CashReceiptPurposeType {
   ALL = 'ALL',
   INCOME_DEDUCTION = 'INCOME_DEDUCTION',
   EXPENSE_PROOF = 'EXPENSE_PROOF',
 };
+export enum CashReceiptIssueStatus {
+  ALL = 'ALL',
+  APPROVAL = 'APPROVAL',
+  CANCEL = 'CANCEL',
+};
+export enum CashReceiptProcessResult {
+  ALL = 'ALL',
+  REQUEST = 'REQUEST',
+  REQUEST_CANCEL = 'REQUEST_CANCEL',
+  REQUEST_COMPLETE = 'REQUEST_COMPLETE',
+  ISSUE_COMPLETE = 'ISSUE_COMPLETE',
+  REQUEST_FAIL = 'REQUEST_FAIL',
+  ISSUE_FAIL = 'ISSUE_FAIL',
+};
 export enum EscrowSearchType {
   ALL = 'ALL',
   ORDER_NUMBER = 'ORDER_NUMBER',
@@ -206,7 +220,7 @@ export interface CashReceiptListParams {
   mid: string;
   startDate: string;
   endDate: string;
-  purposeType: string;
+  purposeType: CashReceiptPurposeType;
   issueStatus: string;
   processResult: string;
   pagination: DefaultRequestPagination
@@ -352,7 +366,7 @@ export interface IssueInfo {
   approvalNumber?: number;
   issueNumber?: number;
   issueDateTime?: string;
-  purpose?: CashReceiptPurpose;
+  purpose?: CashReceiptPurposeType;
   paymentMethod?: string;
   productName?: string;
   transmissionStatus?: string;
@@ -416,7 +430,7 @@ export interface DetailInfoProps extends DetailResponse {
   show?: boolean;
   tid?: string;
   serviceCode?: string;
-  purpose?: CashReceiptPurpose;
+  purposeType?: CashReceiptPurposeType;
   onClickToShowInfo?: (info: InfoWrapKeys) => void;
 }
 export interface DetailArrowProps {
@@ -471,13 +485,24 @@ export interface AllTransactionFilterProps extends FilterProps {
 
 };
 export interface CashReceiptFilterProps extends FilterProps {
-
+  mid : string;
+  startDate: string;
+  endDate: string;
+  purposeType: CashReceiptPurposeType;
+  issueStatus: CashReceiptIssueStatus;
+  processResult: CashReceiptProcessResult;
+  setMid: (mid: string) => void;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+  setPurposeType: (purposeType: CashReceiptPurposeType) => void;
+  setIssueStatus: (issueStatus: CashReceiptIssueStatus) => void;
+  setProcessResult: (processResult: CashReceiptProcessResult) => void;
 };
 export interface EscrowFilterProps extends FilterProps {
   mid: string;
   searchType: EscrowSearchType;
   searchKeyword: string;
-  startDate: string
+  startDate: string;
   endDate: string;
   deliveryStatus: EscrowDeliveryStatus;
   settlementStatus: EscrowSettlementStatus;
@@ -522,13 +547,13 @@ export interface CashReceiptPurposeUpdateParams {
 };
 export interface CashReceiptPurposeUpdateResponse {
   issueNumber: number;
-  beforePurposeType: CashReceiptPurpose;
+  beforePurposeType: CashReceiptPurposeType;
-  afterPurposeType: CashReceiptPurpose;
+  afterPurposeType: CashReceiptPurposeType;
   updateDateTime: string;
 };
 export interface CashReceiptManualIssueParams {
   businessNumber: string,
-  purpose: CashReceiptPurpose
+  purpose: CashReceiptPurposeType
   productName: string,
   buyerName: string,
   issueNumber: string,

src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx

@@ -2,18 +2,18 @@ import { ChangeEvent } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
-import { CashReceiptPurpose } from '../model/types';
+import { CashReceiptPurposeType } from '../model/types';
 
 export interface CashReceiptHandWrittenIssuanceStep1Props {
   businessNumber?: string;
-  purpose?: CashReceiptPurpose;
+  purposeType?: CashReceiptPurposeType;
   productName?: string;
   buyerName?: string;
   issueNumber?: string;
   email?: string;
   phoneNumber?: string;
   setBusinessNumber: (businessNumber: string) => void;
-  setPurpose: (purpose: CashReceiptPurpose) => void;
+  setPurposeType: (purposeType: CashReceiptPurposeType) => void;
   setProductName: (productName: string) => void;
   setBuyerName: (buyerName: string) => void;
   setIssueNumber: (issueNumber: string) => void;
@@ -23,14 +23,14 @@ export interface CashReceiptHandWrittenIssuanceStep1Props {
 
 export const CashReceiptHandWrittenIssuanceStep1 = ({
   businessNumber,
-  purpose,
+  purposeType,
   productName,
   buyerName,
   issueNumber,
   email,
   phoneNumber,
   setBusinessNumber,
-  setPurpose,
+  setPurposeType,
   setProductName,
   setBuyerName,
   setIssueNumber,
@@ -63,14 +63,14 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
           <div className="issue-field">
             <div className="seg-buttons">
               <button
-                className={ `btn-40 ${(purpose === CashReceiptPurpose.INCOME_DEDUCTION)? 'btn-blue': 'btn-white'}` }
+                className={ `btn-40 ${(purposeType === CashReceiptPurposeType.INCOME_DEDUCTION)? 'btn-blue': 'btn-white'}` }
                 type="button"
-                onClick={ () => setPurpose(CashReceiptPurpose.INCOME_DEDUCTION) }
+                onClick={ () => setPurposeType(CashReceiptPurposeType.INCOME_DEDUCTION) }
               >소득공제</button>
               <button
-                className={ `btn-40 ${(purpose === CashReceiptPurpose.EXPENSE_PROOF)? 'btn-blue': 'btn-white'}` }
+                className={ `btn-40 ${(purposeType === CashReceiptPurposeType.EXPENSE_PROOF)? 'btn-blue': 'btn-white'}` }
                 type="button"
-                onClick={ () => setPurpose(CashReceiptPurpose.EXPENSE_PROOF) }
+                onClick={ () => setPurposeType(CashReceiptPurposeType.EXPENSE_PROOF) }
               >지출증빙</button>
             </div>
           </div>

src/entities/transaction/ui/filter/billing-filter.tsx

@@ -8,9 +8,10 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import { 
-  requestStatusBtnGroup, 
+  BillingSearchTypeOptionsGroup,
-  processResultBtnGroup,
+  BillingRequestStatusBtnGroup, 
-  paymentMethodBtnGroup 
+  BillingProcessResultBtnGroup,
+  BillingPaymentMethodBtnGroup 
 } from '@/entities/transaction/model/contant';
 import { 
   BillingFilterProps,
@@ -85,10 +86,7 @@ export const BillingFilter = ({
   let MidOptions = [
     {name: 'nictest001m', value: 'nictest001m'}
   ];
-  let SearchTypeOptions = [
+  
-    {name: '주문번호', value: BillingSearchType.ORDER_NUMBER },
-    {name: 'TID', value: BillingSearchType.TID }
-  ];
 
   useEffect(() => {
     setFilterRequestStatus(requestStatus);
@@ -136,7 +134,7 @@ export const BillingFilter = ({
               title='주문번호/ID'
               selectValue={ filterSearchType }
               selectSetter={ setFilterSearchType }
-              selectOptions={ SearchTypeOptions }
+              selectOptions={ BillingSearchTypeOptionsGroup }
               inputValue={ searchKeyword }
               inputSetter={ setFilterSearchKeyword }
             ></FilterSelectInput>
@@ -151,19 +149,19 @@ export const BillingFilter = ({
             <FilterButtonGroups
               title='요청상태'
               activeValue={ filterRequestStatus }
-              btnGroups={ requestStatusBtnGroup }
+              btnGroups={ BillingRequestStatusBtnGroup }
               setter={ setFilterRequestStatus }
             ></FilterButtonGroups>
             <FilterButtonGroups
               title='처리결과'
               activeValue={ filterProcessResult }
-              btnGroups={ processResultBtnGroup }
+              btnGroups={ BillingProcessResultBtnGroup }
               setter={ setFilterProcessResult }
             ></FilterButtonGroups>
             <FilterButtonGroups
               title='결제수단'
               activeValue={ filterPaymentMethod }
-              btnGroups={ paymentMethodBtnGroup }
+              btnGroups={ BillingPaymentMethodBtnGroup }
               setter={ setFilterPaymentMethod }
             ></FilterButtonGroups>
             

src/entities/transaction/ui/filter/cash-receipt-filter.tsx

@@ -1,11 +1,46 @@
+import { useEffect } from 'react';
+import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { FilterProps } from '../../model/types';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterSelectInput } from '@/shared/ui/filter/select-input';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import {
+  CashReceiptPurposeTypeBtnGroup,
+  CashReceiptIssueStatusBtnGroup,
+  CashReceiptProcessResultBtnGroup
+} from '@/entities/transaction/model/contant';
+import { 
+  CashReceiptFilterProps,
+  CashReceiptPurposeType,
+  CashReceiptIssueStatus,
+  CashReceiptProcessResult
+} from '../../model/types';
 
 export const CashReceiptFilter = ({
   filterOn,
-  setFilterOn
+  setFilterOn,
-}: FilterProps) => {
+  mid,
+  startDate,
+  endDate,
+  purposeType,
+  issueStatus,
+  processResult,
+  setMid,
+  setStartDate,
+  setEndDate,
+  setPurposeType,
+  setIssueStatus,
+  setProcessResult
+}: CashReceiptFilterProps) => {
+
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+  const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+  const [filterPurposeType, setFilterPurposeType] = useState<CashReceiptPurposeType>(purposeType);
+  const [filterIssueStatus, setFilterIssueStatus] = useState<CashReceiptIssueStatus>(issueStatus);
+  const [filterProcessResult, setFilterProcessResult] = useState<CashReceiptProcessResult>(processResult);
 
   const variants = {
     hidden: { x: '100%' },
@@ -15,6 +50,28 @@ export const CashReceiptFilter = ({
   const onClickToClose = () => {
     setFilterOn(false);
   };
+  
+  const setNewDate = (newDate: any) => {
+    console.log(newDate)
+  };
+
+  const onClickToSetFilter = () => {
+    setMid(filterMid);
+    setStartDate(filterStartDate);
+    setEndDate(filterEndDate);
+    setPurposeType(filterPurposeType);
+    setIssueStatus(filterIssueStatus);
+    setProcessResult(filterProcessResult);
+    onClickToClose();
+  };
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+  
+  useEffect(() => {
+    setFilterIssueStatus(issueStatus);
+  }, [issueStatus]);
+
   return (
     <>
       <motion.div 
@@ -46,139 +103,46 @@ export const CashReceiptFilter = ({
             </div>
           </div>
       
-          <div className="option-list pb-120">
+          <div className="option-list pt-16">
-            <div className="opt-field">
+            <FilterSelect
-              <div className="opt-label">가맹점</div>
+              title='가맹점'
-              <div className="opt-controls">
+              selectValue={ filterMid }
-                <select className="flex-1">
+              selectSetter={ setMid }
-                  <option>nictest001m</option>
+              selectOptions={ MidOptions }
-                </select>
+            ></FilterSelect>
-              </div>
+            <FilterCalendar
-            </div>
+              title='발행일자'
+              startDate={ filterStartDate }
+              endDate={ filterEndDate }
+              setStartDate={ setFilterStartDate }
+              setEndDate={ setFilterEndDate }
+            ></FilterCalendar>
             
-            <div className="opt-field">
+            <FilterButtonGroups
-              <div className="opt-label">주문번호/ID</div>
+              title='용도'
-              <div className="opt-controls">
+              activeValue={ filterPurposeType }
-                <select className="w-110">
+              btnGroups={ CashReceiptPurposeTypeBtnGroup }
-                  <option>주문번호</option>
+              setter={ setFilterPurposeType }
-                  <option>ID</option>
+            ></FilterButtonGroups>
-                </select>
+            <FilterButtonGroups
-                <input
+              title='거래구분'
-                  className="flex-1"
+              activeValue={ filterIssueStatus }
-                  type="text"
+              btnGroups={ CashReceiptIssueStatusBtnGroup }
-                  placeholder=""
+              setter={ setFilterIssueStatus }
-                />
+            ></FilterButtonGroups>
-              </div>
+            <FilterButtonGroups
-            </div>
+              title='진행상태'
+              activeValue={ filterProcessResult }
+              btnGroups={ CashReceiptProcessResultBtnGroup }
+              setter={ setFilterProcessResult }
+            ></FilterButtonGroups>
             
-            <div className="opt-field">
-              <div className="opt-label">조회기간</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span className="keyword-tag active">당일</span>
-                  <span className="keyword-tag">일주일</span>
-                  <span className="keyword-tag">1개월</span>
-                  <span className="keyword-tag">직접입력</span>
-                </div>
-                <div className="range-row">
-                  <div className="input-wrapper date">
-                    <input
-                      className="date-input"
-                      type="text"
-                      placeholder="날짜 선택"
-                      value="2025.06.08"
-                      readOnly={ true }
-                    />
-                    <button
-                      type="button"
-                      className="date-btn"
-                    >
-                      <img
-                        src={ IMAGE_ROOT + '/ico_date.svg' }
-                        alt="날짜 선택"
-                      />
-                    </button>
-                  </div>
-                  <span className="beetween">~</span>
-                  <div className="input-wrapper date">
-                    <input
-                      className="date-input"
-                      type="text"
-                      placeholder="날짜 선택"
-                      value="2025.06.08"
-                      readOnly={ true }
-                    />
-                    <button 
-                      type="button" 
-                      className="date-btn"
-                    >
-                      <img
-                        src={ IMAGE_ROOT + '/ico_date.svg' }
-                        alt="날짜 선택"
-                      />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-           <div className="opt-field">
-              <div className="opt-label">요청상태</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span className="keyword-tag active">전체</span>
-                  <span className="keyword-tag">진행중</span>
-                  <span className="keyword-tag">성공</span>
-                  <span className="keyword-tag">요청취소</span>
-                </div>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">저리결과</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span className="keyword-tag active">전체</span>
-                  <span className="keyword-tag">성공</span>
-                  <span className="keyword-tag">실패</span>
-                  <span 
-                    className="keyword-tag" 
-                    style={{ visibility: 'hidden' }}
-                  ></span>
-                </div>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">결제수단</div>
-              <div className="opt-controls">
-                <select className="flex-1">
-                  <option>전체</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">거래금액</div>
-              <div className="opt-controls">
-                <div className="input-wrapper ">
-                  <input
-                    type="text"
-                    placeholder=""
-                  />
-                </div>
-                <span> ~ </span>
-                <div className="input-wrapper date">
-                  <input
-                    type="text"
-                    placeholder=""
-                    />
-                </div>
-              </div>
-            </div>
           </div>
           <div className="apply-row">
-            <button className="btn-50 btn-blue flex-1">적용</button>
+            <button 
+              className="btn-50 btn-blue flex-1"
+              onClick={ () => onClickToSetFilter() }
+            >적용</button>
           </div>
         </div>
       </motion.div>

src/entities/transaction/ui/filter/escrow-filter.tsx

@@ -8,8 +8,8 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import { 
-  deliveryStatusBtnGroup,
+  EscrowDeliveryStatusBtnGroup,
-  settlementStatusBtnGroup
+  EscrowSettlementStatusBtnGroup
 } from '@/entities/transaction/model/contant';
 import { 
   EscrowFilterProps,
@@ -145,13 +145,13 @@ export const EscrowFilter = ({
             <FilterButtonGroups
               title='배송상태'
               activeValue={ filterDeliveryStatus }
-              btnGroups={ deliveryStatusBtnGroup }
+              btnGroups={ EscrowDeliveryStatusBtnGroup }
               setter={ setFilterDeliveryStatus }
             ></FilterButtonGroups>
             <FilterButtonGroups
               title='결제수단'
               activeValue={ filterSettlementStatus }
-              btnGroups={ settlementStatusBtnGroup }
+              btnGroups={ EscrowSettlementStatusBtnGroup }
               setter={ setFilterSettlementStatus }
             ></FilterButtonGroups>
             

src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx

@@ -5,7 +5,7 @@ import moment from 'moment';
 export const IssueInfoWrap = ({
   transactionCategory,
   issueInfo,
-  purpose,
+  purposeType,
 }: DetailInfoProps) => {
  
   return (
@@ -27,7 +27,7 @@ export const IssueInfoWrap = ({
           </li>
           <li className="kv-row">
             <span className="k">용도</span>
-            <span className="v">{ purpose }</span>
+            <span className="v">{ purposeType }</span>
           </li>
           <li className="kv-row">
             <span className="k">결제수단</span>

src/pages/transaction/billing/list-page.tsx

@@ -11,6 +11,7 @@ import { useDownloadExcelMutation } from '@/entities/transaction/api/use-downloa
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
 import { BillingFilter } from '@/entities/transaction/ui/filter/billing-filter';
 import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
+import { BillingRequestStatusBtnGroup } from '@/entities/transaction/model/contant';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
 	useSetOnBack,
@@ -19,13 +20,6 @@ import {
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 
-const requestStatusBtnGroup = [
-	{name: '전체', value: BillingRequestStatus.ALL},
-	{name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
-	{name: '성공', value: BillingRequestStatus.SUCCESS},
-	{name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL}
-];
-
 export const BillingListPage = () => {
 	const { navigate } = useNavigate();
 	const userInfo = useStore((state) => state.UserStore.UserInfo);
@@ -170,7 +164,7 @@ export const BillingListPage = () => {
 							<div className="excrow">
 								<div className="full-menu-keywords no-padding">
 								{
-									requestStatusBtnGroup.map((value, index) => (
+									BillingRequestStatusBtnGroup.map((value, index) => (
 										<span 
 											key={ `key-service-code=${ index }` }
 											className={ `keyword-tag ${(requestStatus === value.value)? 'active': ''}` }

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

@@ -13,7 +13,7 @@ import {
   IssueInfo,
   DetailInfo,
   InfoWrapKeys,
-  CashReceiptPurpose
+  CashReceiptPurposeType
 } from '@/entities/transaction/model/types';
 import {
   useSetOnBack, 
@@ -32,7 +32,7 @@ export const CashReceiptDetailPage = () => {
   const [detailInfo, setDetailInfo] = useState<DetailInfo>();
   const [showDetailInfo, setShowDetailInfo] = useState<boolean>(false);
   const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
-  const [purpose, setPurpose] = useState<CashReceiptPurpose>();
+  const [purposeType, setPurposeType] = useState<CashReceiptPurposeType>();
   
   useSetHeaderTitle('현금영수증 상세');
   useSetHeaderType(HeaderType.RightClose);
@@ -47,14 +47,14 @@ export const CashReceiptDetailPage = () => {
   const { mutateAsync: cashReceiptPurposeUpdate } = useCashReceiptPurposeUpdateMutation();
   
   const callPurposeUpdate = () => {
-    let newPurpose = (purpose === CashReceiptPurpose.EXPENSE_PROOF)
+    let newPurpose = (purposeType === CashReceiptPurposeType.EXPENSE_PROOF)
-      ? CashReceiptPurpose.INCOME_DEDUCTION: CashReceiptPurpose.EXPENSE_PROOF;
+      ? CashReceiptPurposeType.INCOME_DEDUCTION: CashReceiptPurposeType.EXPENSE_PROOF;
     let params = {
       issueNumber: issueNumber,
       newPurpose: newPurpose
     };
     cashReceiptPurposeUpdate(params).then((rs) => {
-      setPurpose(rs.afterPurposeType);
+      setPurposeType(rs.afterPurposeType);
       setBottomSheetOn(false);
       alert('toast : 용도 변경을 성공하였습니다.')
     });  
@@ -68,7 +68,7 @@ export const CashReceiptDetailPage = () => {
       setIssueInfo(rs.issueInfo);
       setDetailInfo(rs.detailInfo);
       if(rs.issueInfo){
-        setPurpose(rs.issueInfo.purpose);
+        setPurposeType(rs.issueInfo.purpose);
       }
     });
   };
@@ -96,7 +96,7 @@ export const CashReceiptDetailPage = () => {
                 <IssueInfoWrap
                   transactionCategory={ TransactionCategory.CashReceipt }
                   issueInfo={ issueInfo }
-                  purpose={ purpose }
+                  purposeType={ purposeType }
                 ></IssueInfoWrap>
                 <div className="txn-divider minus"></div>
                 <DetailInfoWrap

src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx

@@ -3,7 +3,7 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { CashReceiptHandWrittenIssuanceStep1 } from '@/entities/transaction/ui/cash-receipt-hand-written-issuance-step1';
 import { CashReceiptHandWrittenIssuanceStep2 } from '@/entities/transaction/ui/cash-receipt-hand-written-issuance-step2';
-import { CashReceiptPurpose, ProcessStep } from '@/entities/transaction/model/types';
+import { CashReceiptPurposeType, ProcessStep } from '@/entities/transaction/model/types';
 import { HeaderType} from '@/entities/common/model/types';
 import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout';
 import { useCashReceiptManualIssueMutation } from '@/entities/transaction/api/use-cash-receipt-manual-issue';
@@ -14,7 +14,7 @@ export const CashReceitHandWrittenIssuancePage = () => {
   // 1 or 2
   const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
   const [businessNumber, setBusinessNumber] = useState<string>('5459577852');
-  const [purpose, setPurpose] = useState<CashReceiptPurpose>(CashReceiptPurpose.INCOME_DEDUCTION);
+  const [purposeType, setPurposeType] = useState<CashReceiptPurposeType>(CashReceiptPurposeType.INCOME_DEDUCTION);
   const [productName, setProductName] = useState<string>('상품명');
   const [buyerName, setBuyerName] = useState<string>('구매자명');
   const [issueNumber, setIssueNumber] = useState<string>('01012341234');
@@ -34,7 +34,7 @@ export const CashReceitHandWrittenIssuancePage = () => {
   const callManualIssue = () => {
     let params = {
       businessNumber: businessNumber,
-      purpose: purpose,
+      purpose: purposeType,
       productName: productName,
       buyerName: buyerName,
       issueNumber: issueNumber,
@@ -89,14 +89,14 @@ export const CashReceitHandWrittenIssuancePage = () => {
               { (processStep === ProcessStep.One) &&
                 <CashReceiptHandWrittenIssuanceStep1
                   businessNumber={ businessNumber }
-                  purpose={ purpose }
+                  purposeType={ purposeType }
                   productName={ productName }
                   buyerName={ buyerName }
                   issueNumber={ issueNumber }
                   email={ email }
                   phoneNumber={ phoneNumber }
                   setBusinessNumber={ setBusinessNumber }
-                  setPurpose={ setPurpose }
+                  setPurposeType={ setPurposeType }
                   setProductName={ setProductName }
                   setBuyerName={ setBuyerName }
                   setIssueNumber={ setIssueNumber }

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';
-
+import { CashReceiptIssueStatusBtnGroup } from '@/entities/transaction/model/contant';
-const serviceCodes = [
-	{ name: '전체', key: 'all' },
-	{ name: '승인', key: 'approval' },
-	{ name: '취소', key: 'cancel' }
-];
 
 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 [mid, setMid] = useState<string>('nictest001m');
-	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
+	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);
@@ -53,12 +51,12 @@ export const CashReceiptListPage = () => {
 		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
     setPageParam(pageParam);
 		let listParams = {
-			mid: 'string',
+			mid: mid,
-			startDate: '2025-06-08',
+			startDate: startDate,
-			endDate: '2025-06-08',
+			endDate: endDate,
-			purposeType: 'ALL',
+			purposeType: purposeType,
-			issueStatus: 'ALL',
+			issueStatus: issueStatus,
-			processResult: 'ALL',
+			processResult: processResult,
 			pagination: pageParam
 		};
 
@@ -101,8 +99,8 @@ export const CashReceiptListPage = () => {
 		callList({ sortBy: sort });
 	};
 
-	const onClickToServiceCode = (val: string) => {
+	const onClickToIssueStatus = (val: CashReceiptIssueStatus) => {
-		setSelectedServiceCode(val);
+		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' : ''}`}
+												className={`keyword-tag ${(issueStatus === value.value) ? 'active' : ''}`}
-												onClick={() => onClickToServiceCode(value.key)}
+												onClick={() => onClickToIssueStatus(value.value)}
 											>{value.name}</span>
 										))
 									}
@@ -210,10 +208,22 @@ export const CashReceiptListPage = () => {
 					</div>
 				</div>
 			</main>
-			<Filter
+			<CashReceiptFilter
 				filterOn={ filterOn }
 				setFilterOn={ setFilterOn }
-			></Filter>
+				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>
 		</>
 	);
 };

src/pages/transaction/escrow/list-page.tsx

@@ -10,7 +10,7 @@ import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-lis
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
 import { EscrowFilter } from '@/entities/transaction/ui/filter/escrow-filter';
-import { deliveryStatusBtnGroup } from '@/entities/transaction/model/contant';
+import { EscrowDeliveryStatusBtnGroup } from '@/entities/transaction/model/contant';
 import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
@@ -162,7 +162,7 @@ export const EscrowListPage = () => {
 							<div className="excrow">
 								<div className="full-menu-keywords no-padding">
 								{
-									deliveryStatusBtnGroup.map((value, index) => (
+									EscrowDeliveryStatusBtnGroup.map((value, index) => (
 										<span 
 											key={ `key-service-code=${ index }` }
 											className={ `keyword-tag ${(deliveryStatus === value.value)? 'active': ''}` }