현금영수증 필터

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="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>
-
-            <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 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>
+            
+            <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>
          <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>