현금영수증 필터

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/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>