통합 거래내역 필터

src/entities/transaction/model/contant.ts

@@ -1,4 +1,8 @@
 import { 
+  AllTransactionMoidTid,
+  AllTransactionSearchCl,
+  AllTransactionServiceCode,
+  AllTransactionStateCode,
   BillingPaymentMethod, 
   BillingProcessResult,
   BillingRequestStatus,
@@ -11,6 +15,46 @@ import {
   EscrowSettlementStatus
 } from '@/entities/transaction/model/types';
 
+export const FilterMotionVariants = {
+  hidden: {x: '100%' },
+  visible: { x: '0%' },
+};
+export const FilterMotionDuration = {
+  duration: 0.3
+};
+export const FilterMotionStyle = {
+  width: '100%',
+  height: '100%'
+};
+
+export const AllTransactionMoidTidOptionsGroup = [
+  {name: '주문번호', value: AllTransactionMoidTid.MOID},
+  {name: 'TID', value: AllTransactionMoidTid.TID},
+];
+
+export const AllTransactionStateCodeBtnGroup = [
+  {name: '전체', value: AllTransactionStateCode.ALL},
+  {name: '승인/입금완료', value: AllTransactionStateCode.APPROVAL},
+  {name: '전취소/취소', value: AllTransactionStateCode.CANCEL},
+  {name: '후취소/환불', value: AllTransactionStateCode.REFUND}
+];
+export const AllTransactionServiceCodeOptionsGroup = [
+  {name: '전체', value: AllTransactionServiceCode.ALL},
+  {name: '신용카드', value: AllTransactionServiceCode.CREDIT_CARD},
+  {name: '가상계좌', value: AllTransactionServiceCode.VIRTUAL_ACCOUNT},
+  {name: '계좌이체', value: AllTransactionServiceCode.ACCOUNT_TRANSFER},
+  {name: '계좌간편결제', value: AllTransactionServiceCode.ACCOUNT_SIMPLE_TRANSFER},
+  {name: '휴대폰', value: AllTransactionServiceCode.MOBILE_PAYMENT},
+  {name: 'SSG 머니', value: AllTransactionServiceCode.SSGMONEY},
+  {name: 'SSG 은행계좌', value: AllTransactionServiceCode.SSGBANK},
+  {name: '문화상품권', value: AllTransactionServiceCode.CULT},
+  {name: '티머니페이', value: AllTransactionServiceCode.TMONEY},
+
+];
+export const AllTransactionCardBankCodeOptionsGroup = {
+
+};
+
 export const CashReceiptPurposeTypeBtnGroup = [
   {name: '전체', value: CashReceiptPurposeType.ALL},
   {name: '소득공제', value: CashReceiptPurposeType.INCOME_DEDUCTION},
@@ -44,7 +88,7 @@ export const EscrowDeliveryStatusBtnGroup = [
   {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING},
   {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
 ];
-export let EscrowSettlementStatusBtnGroup = [
+export const EscrowSettlementStatusBtnGroup = [
   {name: '전체', value: EscrowSettlementStatus.ALL},
   {name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD},
   {name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT},

src/entities/transaction/model/types.ts

@@ -33,6 +33,44 @@ export enum ProcessStep {
   One = 'One',
   Two = 'Two',
 };
+
+export enum AllTransactionMoidTid {
+  MOID = 'MOID',
+  TID = 'TID'
+};
+export enum AllTransactionStateCode {
+  ALL = '0',
+  APPROVAL = '1',
+  CANCEL = '2',
+  REFUND = '3'
+};
+export enum AllTransactionServiceCode {
+  ALL = 'ALL',
+  CREDIT_CARD = 'CREDIT_CARD',
+  VIRTUAL_ACCOUNT = 'VIRTUAL_ACCOUNT',
+  ACCOUNT_TRANSFER = 'ACCOUNT_TRANSFER',
+  ACCOUNT_SIMPLE_TRANSFER = 'ACCOUNT_SIMPLE_TRANSFER',
+  MOBILE_PAYMENT = 'MOBILE_PAYMENT',
+  SSGMONEY = 'SSGMONEY',
+  SSGBANK = 'SSGBANK',
+  CULT = 'CULT',
+  TMONEY = 'TMONEY '
+};
+
+export enum AllTransactionSearchCl {
+  ALL = 'ALL',
+  CARD_NO = 'CARD_NO',
+  CARD_APPROVAL_NO = 'CARD_APPROVAL_NO',
+  BANK_BUYER_NM = 'BANK_BUYER_NM',
+  VACCT_NO = 'VACCT_NO',
+  VACCT_DEPOSIT_NM = 'VACCT_DEPOSIT_NM',
+  TEL_NO = 'TEL_NO',
+  SSGMONEY_GIFT_NO = 'SSGMONEY_GIFT_NO',
+  SSGBANK_APPROVAL_NO = 'SSGBANK_APPROVAL_NO',
+  CMSBANK_USER_ID = 'CMSBANK_USER_ID',
+  CULT_USER_ID = 'CULT_USER_ID',
+  TMONEY_CARD_NO = 'TMONEY_CARD_NO',
+};
 export enum CashReceiptPurposeType {
   ALL = 'ALL',
   INCOME_DEDUCTION = 'INCOME_DEDUCTION',
@@ -205,14 +243,14 @@ export interface AllTransactionListParams {
   toDate: string;
   stateCode: string;
   serviceCode: string;
-  minAmount: number;
+  minAmount?: number | string;
-  maxAmount: number;
+  maxAmount?: number | string;
   dateCl: string;
   goodsName: string;
-  cardCode: string;
+  cardCode?: string;
-  bankCode: string;
+  bankCode?: string;
-  searchCl: string;
+  searchCl?: AllTransactionSearchCl;
-  searchValue: string;
+  searchValue?: string;
   page?: DefaultRequestPagination;
 };
 
@@ -482,6 +520,30 @@ export interface FilterProps {
   setFilterOn: (filterOn: boolean) => void;
 };
 export interface AllTransactionFilterProps extends FilterProps {
+  mid: string;
+  fromDate: string;
+  toDate: string;
+  stateCode: AllTransactionStateCode;
+  serviceCode: AllTransactionServiceCode;
+  minAmount?: number | string;
+  maxAmount?: number | string;
+  cardCode?: string;
+  bankCode?: string;
+  searchCl?: AllTransactionSearchCl;
+  searchValue?: string;
+  setMid: (mid: string) => void;
+  setMoid: (moid: string) => void;
+  setTid: (tid: string) => void;
+  setFromDate: (fromDate: string) => void;
+  setToDate: (endDate: string) => void;
+  setStateCode: (stateCode: AllTransactionStateCode) => void;
+  setServiceCode: (serviceCode: AllTransactionServiceCode) => void;
+  setMinAmount: (minAmount: string | number) => void;
+  setMaxAmount: (maxAmount: string | number) => void;
+  setCardCode: (cardCode: string | undefined) => void;
+  setBankCode: (bankCode: string | undefined) => void;
+  setSearchCl: (searchCl: AllTransactionSearchCl | undefined) => void;
+  setSearchValue: (searchValue: string | undefined) => void;
 
 };
 export interface CashReceiptFilterProps extends FilterProps {

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

@@ -1,20 +1,157 @@
+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 { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
+import { 
+  FilterMotionVariants,
+  FilterMotionDuration,
+  FilterMotionStyle,
+  AllTransactionMoidTidOptionsGroup,
+  AllTransactionStateCodeBtnGroup,
+  AllTransactionServiceCodeOptionsGroup,
+  AllTransactionCardBankCodeOptionsGroup,
+  
+} from '@/entities/transaction/model/contant';
+import { 
+  AllTransactionFilterProps,
+  AllTransactionSearchCl,
+  AllTransactionStateCode,
+  AllTransactionServiceCode,
+  AllTransactionMoidTid
+} from '../../model/types';
 
 export const AllTransactionFilter = ({
   filterOn,
-  setFilterOn
+  setFilterOn,
-}: FilterProps) => {
+  mid,
+  fromDate,
+  toDate,
+  stateCode,
+  serviceCode,
+  minAmount,
+  maxAmount,
+  cardCode,
+  bankCode,
+  searchCl,
+  searchValue,
+  setMid,
+  setMoid,
+  setTid,
+  setFromDate,
+  setToDate,
+  setStateCode,
+  setServiceCode,
+  setMinAmount,
+  setMaxAmount,
+  setCardCode,
+  setBankCode,
+  setSearchCl,
+  setSearchValue,
+}: AllTransactionFilterProps) => {
 
-  const variants = {
+  const [filterMid, setFilterMid] = useState<string>(mid);
-    hidden: { x: '100%' },
+  const [filterMoidTidType, setFilterMoidTidType] = useState<AllTransactionMoidTid>(AllTransactionMoidTid.MOID);
-    visible: { x: '0%' },
+  const [filterMoidTidValue, setFilterMoidTidValue] = useState<string>('');
-  };
+  const [filterFromDate, setFilterFromDate] = useState<string>(fromDate);
+  const [filterToDate, setFilterToDate] = useState<string>(toDate);
+  const [filterStateCode, setFilterStateCode] = useState<AllTransactionStateCode>(stateCode);
+  const [filterServiceCode, setFilterServiceCode] = useState<AllTransactionServiceCode>(serviceCode);
+  const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+  const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
   
+  const [filterCardCode, setFilterCardCode] = useState<string | undefined>(cardCode);
+  const [filterBankCode, setFilterBankCode] = useState<string | undefined>(bankCode);
+
+  const [filterCardBankCode, setFilterCardBankCode] = useState<string>('');
+
+  const [filterSearchCl, setFilterSearchCl] = useState<AllTransactionSearchCl | undefined>(searchCl);
+  const [filterSearchValue, setFilterSearchValue] = useState<string | undefined>(searchValue);
+
+  const [searchClOptionsGroup, setSearchClOptionsGroup] = useState<Array<Record<string, string>>>([]);
   const onClickToClose = () => {
     setFilterOn(false);
   };
+  
+  const setNewDate = (newDate: any) => {
+    console.log(newDate)
+  };
+
+  const onClickToSetFilter = () => {
+    setMid(filterMid);
+    if(filterMoidTidType === AllTransactionMoidTid.MOID){
+      setMoid(filterMoidTidValue);
+      setTid('');
+    }
+    else if(filterMoidTidType === AllTransactionMoidTid.TID){
+      setMoid('');
+      setTid(filterMoidTidValue);
+    }
+    setFromDate(filterFromDate);
+    setToDate(filterToDate);
+    setStateCode(filterStateCode);
+
+    setServiceCode(filterServiceCode);
+    setMinAmount(filterMinAmount);
+    setMaxAmount(filterMaxAmount);
+    setBankCode(filterBankCode);
+    setCardCode(filterCardCode);
+    setSearchCl(filterSearchCl);
+    setSearchValue(filterSearchValue);
+    onClickToClose();
+  };
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+
+  let setSearchClOptions = (value: AllTransactionServiceCode) => {
+    let options = [];
+    setFilterServiceCode(value);
+    if(value === AllTransactionServiceCode.ALL){
+
+    }
+    else if(value === AllTransactionServiceCode.CREDIT_CARD){
+      options.push({name: '카드번호', value: AllTransactionSearchCl.CARD_NO});
+      options.push({name: '승인번호', value: AllTransactionSearchCl.CARD_APPROVAL_NO});
+    }
+    else if(value === AllTransactionServiceCode.VIRTUAL_ACCOUNT){
+      options.push({name: '가상계좌번호', value: AllTransactionSearchCl.VACCT_NO});
+      options.push({name: '입금자명', value: AllTransactionSearchCl.VACCT_DEPOSIT_NM});
+    }
+    else if(value === AllTransactionServiceCode.ACCOUNT_TRANSFER){
+      options.push({name: '구매자명', value: AllTransactionSearchCl.BANK_BUYER_NM});
+    }
+    else if(value === AllTransactionServiceCode.ACCOUNT_SIMPLE_TRANSFER){
+      
+    }
+    else if(value === AllTransactionServiceCode.MOBILE_PAYMENT){
+      options.push({name: '휴대폰번호', value: AllTransactionSearchCl.TEL_NO});
+    }
+    else if(value === AllTransactionServiceCode.SSGMONEY){
+      options.push({name: '상품권번호', value: AllTransactionSearchCl.SSGMONEY_GIFT_NO}); 
+    }
+    else if(value === AllTransactionServiceCode.SSGBANK){
+      options.push({name: '승인번호', value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO}); 
+    }
+    else if(value === AllTransactionServiceCode.CULT){
+      options.push({name: '컬처랜드ID', value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO}); 
+    }
+    else if(value === AllTransactionServiceCode.TMONEY){
+      options.push({name: '티머니번호', value: AllTransactionSearchCl.TMONEY_CARD_NO}); 
+    }
+    setSearchClOptionsGroup(options);
+  };
+
+  /*
+  useEffect(() => {
+    setFilterDeliveryStatus(deliveryStatus);
+  }, [deliveryStatus]);
+  */
+
   return (
     <>
       <motion.div 
@@ -22,12 +159,9 @@ export const AllTransactionFilter = ({
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }
-        variants={ variants }
+        variants={ FilterMotionVariants }
-        transition={{ duration: 0.3 }}
+        transition={ FilterMotionDuration }
-        style={{
+        style={ FilterMotionStyle }
-          width: '100%',
-          height: '100%',
-        }}
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
@@ -46,139 +180,72 @@ export const AllTransactionFilter = ({
             </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>
+            <FilterSelectInput
-            </div>
+              title='주문번호/TID'
+              selectValue={ filterMoidTidType }
+              selectSetter={ setFilterMoidTidType }
+              selectOptions={ AllTransactionMoidTidOptionsGroup }
+              inputValue={ filterMoidTidValue }
+              inputSetter={ setFilterMoidTidValue }
+            ></FilterSelectInput>
+            <FilterCalendar
+              title='조회기간'
+              startDate={ filterFromDate }
+              endDate={ filterToDate }
+              setStartDate={ setFilterFromDate }
+              setEndDate={ setFilterToDate }
+            ></FilterCalendar>
             
-            <div className="opt-field">
+            <FilterButtonGroups
-              <div className="opt-label">주문번호/ID</div>
+              title='거래상태'
-              <div className="opt-controls">
+              activeValue={ filterStateCode }
-                <select className="w-110">
+              btnGroups={ AllTransactionStateCodeBtnGroup }
-                  <option>주문번호</option>
+              setter={ setFilterStateCode }
-                  <option>ID</option>
+            ></FilterButtonGroups>
-                </select>
+            <FilterSelect
-                <input
+              title='결제수단'
-                  className="flex-1"
+              selectValue={ filterServiceCode }
-                  type="text"
+              selectSetter={ setSearchClOptions }
-                  placeholder=""
+              selectOptions={ AllTransactionServiceCodeOptionsGroup }
-                />
+            ></FilterSelect>
-              </div>
-            </div>
             
-            <div className="opt-field">
+            <FilterRangeAmount
-              <div className="opt-label">조회기간</div>
+              title='거래금액'
-              <div className="opt-controls col below h36">
+              minAmount={ filterMinAmount }
-                <div className="chip-row">
+              maxAmount={ filterMaxAmount }
-                  <span className="keyword-tag active">당일</span>
+              setMinAmount={ setFilterMinAmount }
-                  <span className="keyword-tag">일주일</span>
+              setMaxAmount={ setFilterMaxAmount }
-                  <span className="keyword-tag">1개월</span>
+            ></FilterRangeAmount>
-                  <span className="keyword-tag">직접입력</span>
+            {/*
-                </div>
+            <FilterSelect
-                <div className="range-row">
+              title='카드사/은행'
-                  <div className="input-wrapper date">
+              selectValue={}
-                    <input
+              selectSetter={}
-                      className="date-input"
+              selectOptions={}
-                      type="text"
+            ></FilterSelect>
-                      placeholder="날짜 선택"
+            */}
-                      value="2025.06.08"
+            <FilterSelectInput
-                      readOnly={ true }
+              title='상세조회'
-                    />
+              selectValue={ filterSearchCl }
-                    <button
+              selectSetter={ setFilterSearchCl }
-                      type="button"
+              selectOptions={ searchClOptionsGroup }
-                      className="date-btn"
+              inputValue={ filterSearchValue }
-                    >
+              inputSetter={ setFilterSearchValue }
-                      <img
+            ></FilterSelectInput>
-                        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/billing-filter.tsx

@@ -8,6 +8,9 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import { 
+  FilterMotionDuration,
+  FilterMotionVariants,
+  FilterMotionStyle,
   BillingSearchTypeOptionsGroup,
   BillingRequestStatusBtnGroup, 
   BillingProcessResultBtnGroup,
@@ -57,11 +60,6 @@ export const BillingFilter = ({
   const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
   
-  const variants = {
-    hidden: { x: '100%' },
-    visible: { x: '0%' },
-  };
-
   const onClickToClose = () => {
     setFilterOn(false);
   };
@@ -99,12 +97,9 @@ export const BillingFilter = ({
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }
-        variants={ variants }
+        variants={ FilterMotionVariants }
-        transition={{ duration: 0.3 }}
+        transition={ FilterMotionDuration }
-        style={{
+        style={ FilterMotionStyle }
-          width: '100%',
-          height: '100%',
-        }}
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
@@ -131,7 +126,7 @@ export const BillingFilter = ({
               selectOptions={ MidOptions }
             ></FilterSelect>
             <FilterSelectInput
-              title='주문번호/ID'
+              title='주문번호/TID'
               selectValue={ filterSearchType }
               selectSetter={ setFilterSearchType }
               selectOptions={ BillingSearchTypeOptionsGroup }

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

@@ -7,6 +7,9 @@ import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import {
+  FilterMotionVariants,
+  FilterMotionDuration,
+  FilterMotionStyle,
   CashReceiptPurposeTypeBtnGroup,
   CashReceiptIssueStatusBtnGroup,
   CashReceiptProcessResultBtnGroup
@@ -42,10 +45,12 @@ export const CashReceiptFilter = ({
   const [filterIssueStatus, setFilterIssueStatus] = useState<CashReceiptIssueStatus>(issueStatus);
   const [filterProcessResult, setFilterProcessResult] = useState<CashReceiptProcessResult>(processResult);
 
-  const variants = {
+  const [filterIssueType, setFilterIssueType] = useState<string>('');
-    hidden: { x: '100%' },
+  const [filterIssueNumber, setFilterIssueNumber] = useState<string>('');
-    visible: { x: '0%' },
+  const issueTypeOptionsGroup = [
-  };
+    {name: '승인번호', value: 'issue'},
+    {name: '발행번호', value: 'issue2'},
+  ];
 
   const onClickToClose = () => {
     setFilterOn(false);
@@ -79,12 +84,9 @@ export const CashReceiptFilter = ({
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }
-        variants={ variants }
+        variants={ FilterMotionVariants }
-        transition={{ duration: 0.3 }}
+        transition={ FilterMotionDuration }
-        style={{
+        style={ FilterMotionStyle }
-          width: '100%',
-          height: '100%',
-        }}
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
@@ -136,7 +138,14 @@ export const CashReceiptFilter = ({
               btnGroups={ CashReceiptProcessResultBtnGroup }
               setter={ setFilterProcessResult }
             ></FilterButtonGroups>
-            
+            <FilterSelectInput
+              title='승인번호/발행번호'
+              selectValue={ filterIssueType }
+              selectSetter={ setFilterIssueType }
+              selectOptions={ issueTypeOptionsGroup }
+              inputValue={ filterIssueNumber }
+              inputSetter={ setFilterIssueNumber }
+            ></FilterSelectInput>
           </div>
           <div className="apply-row">
             <button 

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

@@ -8,8 +8,12 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import { 
+  FilterMotionVariants,
+  FilterMotionDuration,
+  FilterMotionStyle,
   EscrowDeliveryStatusBtnGroup,
-  EscrowSettlementStatusBtnGroup
+  EscrowSettlementStatusBtnGroup,
+  EscrowSearchTypeOptionsGroup
 } from '@/entities/transaction/model/contant';
 import { 
   EscrowFilterProps,
@@ -51,11 +55,6 @@ export const EscrowFilter = ({
   const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
   
-  const variants = {
-    hidden: { x: '100%' },
-    visible: { x: '0%' },
-  };
-
   const onClickToClose = () => {
     setFilterOn(false);
   };
@@ -79,10 +78,6 @@ export const EscrowFilter = ({
   let MidOptions = [
     {name: 'nictest001m', value: 'nictest001m'}
   ];
-  let SearchTypeOptions = [
-    {name: '주문번호', value: EscrowSearchType.ORDER_NUMBER },
-    {name: 'TID', value: EscrowSearchType.TID }
-  ];
   
   useEffect(() => {
     setFilterDeliveryStatus(deliveryStatus);
@@ -95,12 +90,9 @@ export const EscrowFilter = ({
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }
-        variants={ variants }
+        variants={ FilterMotionVariants }
-        transition={{ duration: 0.3 }}
+        transition={ FilterMotionDuration }
-        style={{
+        style={ FilterMotionStyle }
-          width: '100%',
-          height: '100%',
-        }}
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
@@ -127,10 +119,10 @@ export const EscrowFilter = ({
               selectOptions={ MidOptions }
             ></FilterSelect>
             <FilterSelectInput
-              title='주문번호/ID'
+              title='주문번호/TID'
               selectValue={ filterSearchType }
               selectSetter={ setSearchType }
-              selectOptions={ SearchTypeOptions }
+              selectOptions={ EscrowSearchTypeOptionsGroup }
               inputValue={ searchKeyword }
               inputSetter={ setSearchKeyword }
             ></FilterSelectInput>

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

@@ -5,12 +5,12 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { AllTransactionList } from '@/entities/transaction/ui/all-transaction-list';
-import { AllTransactionListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { AllTransactionListItem, TransactionCategory, SortByKeys, AllTransactionStateCode, AllTransactionServiceCode, AllTransactionSearchCl } from '@/entities/transaction/model/types';
 import { useAllTransactionListMutation } from '@/entities/transaction/api/use-all-transaction-list-mutation';
 import { useAllTransactionListSummaryMutation } from '@/entities/transaction/api/use-all-transaction-list-summary-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 { AllTransactionFilter } from '@/entities/transaction/ui/filter/all-transaction-filter';
 import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
 import { FooterItemActiveKey } from '@/entities/common/model/types';
 import { HeaderType } from '@/entities/common/model/types';
@@ -27,14 +27,30 @@ export const AllTransactionListPage = () => {
 
   const [serviceCodeOptions, setServiceCodeOptions] = useState<Array<Record<string, any>>>();
   const [selectedServiceCode, setSelectedServiceCode] = useState<string>('st');
+  
   const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
   const [listItems, setListItems] = useState({});
-  const [totalTransactionCount, setTotalTransactionCount] = useState<number>(0);
-  const [totalTransactionAmount, setTotalTransactionAmount] = useState<number>(0);
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-  const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [moid, setMoid] = useState<string>('');
+  const [tid, setTid] = useState<string>('');
+  // const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
+  const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
   const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
+  const [stateCode, setStateCode] = useState<AllTransactionStateCode>(AllTransactionStateCode.ALL);
+  const [serviceCode, setServiceCode] = useState<AllTransactionServiceCode>(AllTransactionServiceCode.ALL);
+  const [minAmount, setMinAmount] = useState<number | string>();
+	const [maxAmount, setMaxAmount] = useState<number | string>();
+  const [cardCode, setCardCode] = useState<string | undefined>();
+  const [bankCode, setBankCode] = useState<string | undefined>();
+  const [searchCl, setSearchCl] = useState<AllTransactionSearchCl | undefined>();
+  const [searchValue, setSearchValue] = useState<string | undefined>();
+
+  const [totalTransactionCount, setTotalTransactionCount] = useState<number>(0);
+  const [totalTransactionAmount, setTotalTransactionAmount] = useState<number>(0);
+  
+  
   
 	useSetHeaderTitle('거래내역 조회');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -53,20 +69,20 @@ export const AllTransactionListPage = () => {
     val?: string
   }) => {
     let listSummaryParams = {
-      moid: 'string',
+      moid: moid,
-      tid: 'string',
+      tid: tid,
       fromDate: fromDate,
       toDate: toDate,
-      stateCode: '0',
+      stateCode: stateCode,
-      serviceCode: (option?.val)? option.val: selectedServiceCode,
+      serviceCode: serviceCode,
-      minAmount: 0,
+      minAmount: minAmount,
-      maxAmount: 0,
+      maxAmount: maxAmount,
       dateCl: 'TRANS',
       goodsName: 'string',
-      cardCode: 'st',
+      cardCode: cardCode,
-      bankCode: 'str',
+      bankCode: bankCode,
-      searchCl: 'CARD_NO',
+      searchCl: searchCl,
-      searchValue: 'string',
+      searchValue: searchValue,
     };
     pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
     setPageParam(pageParam);
@@ -226,10 +242,34 @@ export const AllTransactionListPage = () => {
 					</div>
 				</div>
 			</main>
-      <Filter
+      <AllTransactionFilter
         filterOn={ filterOn }
         setFilterOn={ setFilterOn }
-      ></Filter>
+        mid={ mid }
+        fromDate={ fromDate }
+        toDate={ toDate }
+        stateCode={ stateCode }
+        serviceCode={ serviceCode }
+        minAmount={ minAmount }
+        maxAmount={ maxAmount }
+        cardCode={ cardCode }
+        bankCode={ bankCode }
+        searchCl={ searchCl }
+        searchValue={ searchValue }
+        setMid={ setMid }
+        setMoid={ setMoid }
+        setTid={ setTid }
+        setFromDate={ setFromDate }
+        setToDate={ setToDate }
+        setStateCode={ setStateCode }
+        setServiceCode={ setServiceCode }
+        setMinAmount={ setMinAmount }
+        setMaxAmount={ setMaxAmount }
+        setCardCode={ setCardCode }
+        setBankCode={ setBankCode }
+        setSearchCl={ setSearchCl }
+        setSearchValue={ setSearchValue }
+      ></AllTransactionFilter>
     </>
 	);
 };

src/shared/ui/assets/css/style-fix.css

@@ -37,8 +37,14 @@ main {
 
 }
 
-header{
+.ptr.wrapper{
   padding-top: env(safe-area-inset-top) !important;
+  padding-bottom: env(safe-area-inset-bottom) !important;
+}
+
+/*
+header{
+  
 }
 main {
   padding-top: calc(50px + env(safe-area-inset-top)) !important;
@@ -46,5 +52,6 @@ main {
 }
 .bottom-tabbar{
   height: calc(70px + env(safe-area-inset-bottom)) !important;
-  padding-bottom: env(safe-area-inset-bottom) !important;
+ 
 }
+  */

src/shared/ui/calendar/nice-calendar.tsx

@@ -32,7 +32,7 @@ const NiceCalendar = ({
   };
     
   const onClickToClose = () => {
-    setCalendarOpen(false);
+    // setCalendarOpen(false);
   };
   const setMinMaxValueDate = () => {
     if(calendarType === CalendarType.Start){

src/shared/ui/filter/select-input.tsx

@@ -1,12 +1,12 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useState } from 'react';
 
 export interface FilterSelectInputProps {
   title: string;
-  selectValue: string;
+  selectValue: string | undefined;
-  selectSetter: (value: any) => void;
+  selectSetter?: (value: any) => void;
   selectOptions: Array<Record<string, string>>;
-  inputValue: string;
+  inputValue: string | undefined;
-  inputSetter: (value: any) => void;
+  inputSetter?: (value: any) => void;
 };
 export const FilterSelectInput = ({
   title,
@@ -16,6 +16,8 @@ export const FilterSelectInput = ({
   inputValue,
   inputSetter
 }: FilterSelectInputProps) => {
+  const [selectVal, setSelectVal] = useState();
+  const [inputVal, setInputVal] = useState();
 
   const getSelectOptions = () => {
     let rs = [];
@@ -30,6 +32,20 @@ export const FilterSelectInput = ({
     return rs;
   };
 
+  const onChangeSelect = (e: ChangeEvent<HTMLSelectElement>) => {
+    let value = e.target.value;
+    if(!!selectSetter){
+      selectSetter(value);
+    }
+  };
+
+  const onChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value;
+    if(!!inputSetter){
+      inputSetter(value);
+    }
+  };
+
   return (
     <>
       <div className="opt-field">
@@ -38,7 +54,7 @@ export const FilterSelectInput = ({
           <select 
             className="w-110"
             value={ selectValue } 
-            onChange={ (e: any) => selectSetter(e.target.value)}
+            onChange={ onChangeSelect }
           >
           { getSelectOptions() }
           </select>
@@ -47,7 +63,7 @@ export const FilterSelectInput = ({
             type="text"
             placeholder=""
             value={ inputValue }
-            onChange={ (e: ChangeEvent<HTMLInputElement>) => inputSetter(e.target.value)}
+            onChange={ onChangeInput }
           />
         </div>
       </div>