현금영수증 필터

2025-09-15 16:21:06 +09:00
parent 75d82a0184
commit 14005a7e9b
12 changed files with 247 additions and 224 deletions
--- a/src/entities/transaction/model/contant.ts
+++ b/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},
--- a/src/entities/transaction/model/types.ts
+++ b/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;
-  afterPurposeType: CashReceiptPurpose;
+  beforePurposeType: CashReceiptPurposeType;
+  afterPurposeType: CashReceiptPurposeType;
  updateDateTime: string;
 };
 export interface CashReceiptManualIssueParams {
  businessNumber: string,
-  purpose: CashReceiptPurpose
+  purpose: CashReceiptPurposeType
  productName: string,
  buyerName: string,
  issueNumber: string,
--- a/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx
+++ b/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>
--- a/src/entities/transaction/ui/filter/billing-filter.tsx
+++ b/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, 
-  processResultBtnGroup,
-  paymentMethodBtnGroup 
+  BillingSearchTypeOptionsGroup,
+  BillingRequestStatusBtnGroup, 
+  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>
            
--- a/src/entities/transaction/ui/filter/cash-receipt-filter.tsx
+++ b/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
-}: FilterProps) => {
+  setFilterOn,
+  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="opt-field">
-              <div className="opt-label">가맹점</div>
-              <div className="opt-controls">
-                <select className="flex-1">
-                  <option>nictest001m</option>
-                </select>
-              </div>
-            </div>
+          <div className="option-list pt-16">
+            <FilterSelect
+              title='가맹점'
+              selectValue={ filterMid }
+              selectSetter={ setMid }
+              selectOptions={ MidOptions }
+            ></FilterSelect>
+            <FilterCalendar
+              title='발행일자'
+              startDate={ filterStartDate }
+              endDate={ filterEndDate }
+              setStartDate={ setFilterStartDate }
+              setEndDate={ setFilterEndDate }
+            ></FilterCalendar>
            
-            <div className="opt-field">
-              <div className="opt-label">주문번호/ID</div>
-              <div className="opt-controls">
-                <select className="w-110">
-                  <option>주문번호</option>
-                  <option>ID</option>
-                </select>
-                <input
-                  className="flex-1"
-                  type="text"
-                  placeholder=""
-                />
-              </div>
-            </div>
+            <FilterButtonGroups
+              title='용도'
+              activeValue={ filterPurposeType }
+              btnGroups={ CashReceiptPurposeTypeBtnGroup }
+              setter={ setFilterPurposeType }
+            ></FilterButtonGroups>
+            <FilterButtonGroups
+              title='거래구분'
+              activeValue={ filterIssueStatus }
+              btnGroups={ CashReceiptIssueStatusBtnGroup }
+              setter={ setFilterIssueStatus }
+            ></FilterButtonGroups>
+            <FilterButtonGroups
+              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>
--- a/src/entities/transaction/ui/filter/escrow-filter.tsx
+++ b/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,
-  settlementStatusBtnGroup
+  EscrowDeliveryStatusBtnGroup,
+  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>
            
--- a/src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx
+++ b/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>
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/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': ''}` }
--- a/src/pages/transaction/cash-receipt/detail-page.tsx
+++ b/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)
-      ? CashReceiptPurpose.INCOME_DEDUCTION: CashReceiptPurpose.EXPENSE_PROOF;
+    let newPurpose = (purposeType === CashReceiptPurposeType.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
--- a/src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx
+++ b/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 }
--- a/src/pages/transaction/cash-receipt/list-page.tsx
+++ b/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);
@@ -53,12 +51,12 @@ export const CashReceiptListPage = () => {
 		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
+			<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>
 		</>
 	);
 };
--- a/src/pages/transaction/escrow/list-page.tsx
+++ b/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': ''}` }