필터

src/entities/additional-service/ui/fund-transfer-request-list-wrap.tsx

@@ -4,7 +4,7 @@ export const FundTransferRequestListWrap = () => {
 
   return (
     <>
-      <section className="summary-section">
+      <section className="summary-section pt-30">
         <div className="credit-controls">
           <div>
             <input 

src/entities/additional-service/ui/fund-transfer-result-inquiry-wrap.tsx

@@ -4,7 +4,7 @@ export const FundTransferResultInquiryWrap = () => {
 
   return (
     <>
-      <section className="summary-section">
+      <section className="summary-section pt-30">
         <div className="credit-controls">
           <div>
             <input 

src/entities/additional-service/ui/settlement-agency-deposit-wrap.tsx

@@ -11,7 +11,7 @@ export const SettlementAgencyDepositWrap = () => {
 
   return (
     <>
-      <div className="summary-section">
+      <div className="summary-section pt-30">
         <div className="credit-controls">
           <div>
             <input 

src/entities/additional-service/ui/settlement-agency-manage-wrap.tsx

@@ -14,7 +14,7 @@ export const SettlementAgencyManageWrap = () => {
   
   return (
     <>
-      <section className="summary-section">
+      <section className="summary-section pt-30">
         <div className="credit-controls">
           <div>
             <input 

src/entities/common/model/types.ts

@@ -2,6 +2,12 @@ export enum SuccessResult {
   SUCCESS = 'SUCCESS',
   FAIL = 'FAIL'
 };
+export enum FilterDateOptions {
+  Today = 'Today',
+  Week = 'Week',
+  Month = 'Month',
+  Input = 'Input'
+};
 export interface DefaultRequestPagination {
   cursor: string;
   size: number;

src/entities/settlement/ui/list-wrap.tsx

@@ -92,7 +92,7 @@ export const ListWrap = () => {
 
   return (
     <>
-      <div className="summary-section">
+      <div className="summary-section pt-30">
         <div className="credit-controls">
           <div>
             <input 

src/entities/tax/ui/invoice-list-wrap.tsx

@@ -30,7 +30,7 @@ export const InvoiceListWrap = () => {
   }, []);
   return (
     <>
-      <div className="summary-section">
+      <div className="summary-section pt-30">
         <div className="credit-controls">
           <div>
             <input 

src/entities/transaction/model/types.ts

@@ -38,6 +38,30 @@ export enum CashReceiptPurpose {
   INCOME_DEDUCTION = 'INCOME_DEDUCTION',
   EXPENSE_PROOF = 'EXPENSE_PROOF',
 };
+
+export enum BillingSearchType {
+  ALL = 'ALL',
+  ORDER_NUMBER = 'ORDER_NUMBER',
+  TID = 'TID'
+};
+export enum BillingRequestStatus {
+  ALL = 'ALL',
+  IN_PROGRESS = 'IN_PROGRESS',
+  SUCCESS = 'SUCCESS',
+  REQUEST_CANCEL = 'REQUEST_CANCEL'
+};
+export enum BillingProcessResult {
+  ALL = 'ALL',
+  SUCCESS = 'SUCCESS',
+  FAILURE = 'FAILURE'
+};
+export enum BillingPaymentMethod {
+  ALL = 'ALL',
+  CREDIT_CARD = 'CREDIT_CARD',
+  VIRTUAL_ACCOUNT = 'VIRTUAL_ACCOUNT',
+  MOBILE_PAYMENT = 'MOBILE_PAYMENT'
+};
+
 export interface SortOptionsBoxProps {
   sortBy: SortByKeys;
   onCliCkToSort: (sortBy: SortByKeys) => void;
@@ -421,6 +445,33 @@ export interface FilterProps {
   filterOn: boolean;
   setFilterOn: (filterOn: boolean) => void;
 };
+export interface AllTransactionFilterProps extends FilterProps {
+
+};
+export interface CashReceiptFilterProps extends FilterProps {
+
+};
+export interface EscrowFilterProps extends FilterProps {
+
+};
+export interface BillingFilterProps extends FilterProps {
+  mid: string;
+  searchType: BillingSearchType;
+  searchKeyword: string;
+  startDate: string;
+  endDate: string;
+  requestStatus: BillingRequestStatus;
+  processResult: BillingProcessResult;
+  paymentMethod: BillingPaymentMethod;
+  setMid: (mid: string) => void;
+  setSearchType: (searchType: BillingSearchType) => void;
+  setSearchKeyword: (searchKeyword: string) => void;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+  setRequestStatus: (requestStatus: BillingRequestStatus) => void;
+  setProcessResult: (processResult: BillingProcessResult) => void;
+  setPaymentMethod: (paymentMethod: BillingPaymentMethod) => void;
+};
 
 export interface CashReceiptPurposeUpdateParams {
   issueNumber: number;

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

@@ -0,0 +1,187 @@
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { FilterProps } from '../../model/types';
+
+export const AllTransactionFilter = ({
+  filterOn,
+  setFilterOn
+}: FilterProps) => {
+
+  const variants = {
+    hidden: { x: '100%' },
+    visible: { x: '0%' },
+  };
+
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
+  return (
+    <>
+      <motion.div 
+        id="fullMenuModal" 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (filterOn)? 'visible': 'hidden' }
+        variants={ variants }
+        transition={{ duration: 0.3 }}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-actions">
+              <button 
+                id="closeFullMenu"
+                className="full-menu-close"
+              >
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                  onClick={ () => onClickToClose() }
+                />
+              </button>
+            </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>
+          <div className="apply-row">
+            <button className="btn-50 btn-blue flex-1">적용</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};

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

@@ -0,0 +1,337 @@
+import { ChangeEvent, useState } from 'react';
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { 
+  BillingFilterProps,
+  BillingPaymentMethod,
+  BillingProcessResult,
+  BillingRequestStatus,
+  BillingSearchType
+} from '../../model/types';
+import { FilterDateOptions } from '@/entities/common/model/types';
+import moment from 'moment';
+import NiceCalendar from '@/shared/ui/calendar';
+
+export const BillingFilter = ({
+  filterOn,
+  setFilterOn,
+  mid,
+  searchType,
+  searchKeyword,
+  startDate,
+  endDate,
+  requestStatus,
+  processResult,
+  paymentMethod,
+  setMid,
+  setSearchType,
+  setSearchKeyword,
+  setStartDate,
+  setEndDate,
+  setRequestStatus,
+  setProcessResult,
+  setPaymentMethod
+}: BillingFilterProps) => {
+
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterSearchType, setFilterSearchType] = useState<BillingSearchType>(searchType);
+  const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
+  const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+  const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+  const [filterRequestStatus, setFilterRequestStatus] = useState<BillingRequestStatus>(requestStatus);
+  const [filterProcessResult, setFilterProcessResult] = useState<BillingProcessResult>(processResult);
+  const [filterPaymentMethod, setFilterPaymentMethod] = useState<BillingPaymentMethod>(paymentMethod);
+
+  const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
+  const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
+
+  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
+
+  const variants = {
+    hidden: { x: '100%' },
+    visible: { x: '0%' },
+  };
+
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
+  const setFilterDate = (dateOptions: FilterDateOptions) => {
+    if(dateOptions === FilterDateOptions.Today){
+      setFilterStartDate(moment().format('YYYY-MM-DD'));
+      setFilterEndDate(moment().format('YYYY-MM-DD'));
+      setDateReadyOnly(true);
+      setFilterDateOptionsBtn(FilterDateOptions.Today);
+    } 
+    else if(dateOptions === FilterDateOptions.Week){
+      setFilterStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
+      setFilterEndDate(moment().format('YYYY-MM-DD'));
+      setDateReadyOnly(true);
+      setFilterDateOptionsBtn(FilterDateOptions.Week);
+    }
+    else if(dateOptions === FilterDateOptions.Month){
+      setFilterStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+      setFilterEndDate(moment().format('YYYY-MM-DD'));
+      setDateReadyOnly(true);
+      setFilterDateOptionsBtn(FilterDateOptions.Month);
+    }
+    else if(dateOptions === FilterDateOptions.Input){
+      setDateReadyOnly(false);
+      setFilterDateOptionsBtn(FilterDateOptions.Input);
+    }
+  };
+  const onClickToOpenCalendar = () => {
+    if(!dateReadOnly){
+      setCalendarOpen(true);
+    }
+    else{
+      setCalendarOpen(false);
+    }
+  };
+
+  const setNewDate = (newDate: any) => {
+    console.log(newDate)
+  };
+
+	const onClickToSetFilter = () => {
+    setMid(filterMid);
+    setSearchType(filterSearchType);
+    setSearchKeyword(filterSearchKeyword);
+    setStartDate(filterStartDate);
+    setEndDate(filterEndDate);
+    setRequestStatus(filterRequestStatus);
+    setProcessResult(filterProcessResult);
+    setPaymentMethod(filterPaymentMethod);
+	};
+  return (
+    <>
+      <motion.div 
+        id="fullMenuModal" 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (filterOn)? 'visible': 'hidden' }
+        variants={ variants }
+        transition={{ duration: 0.3 }}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-actions">
+              <button 
+                id="closeFullMenu"
+                className="full-menu-close"
+              >
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                  onClick={ () => onClickToClose() }
+                />
+              </button>
+            </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"
+                  value={ filterSearchType } 
+                  onChange={ (e: any) => setFilterSearchType(e.target.value)}
+                >
+                  <option value={ BillingSearchType.ORDER_NUMBER }>주문번호</option>
+                  <option value={ BillingSearchType.TID }>ID</option>
+                </select>
+                <input
+                  className="flex-1"
+                  type="text"
+                  placeholder=""
+                  value={ filterSearchKeyword }
+                  onChange={ (e: ChangeEvent<HTMLInputElement>) => setFilterSearchKeyword(e.target.value)}
+                />
+              </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 ${(filterDateOptionsBtn === FilterDateOptions.Today)? 'active': ''}` }
+                    onClick={ () => setFilterDate(FilterDateOptions.Today) }
+                  >당일</span>
+                  <span 
+                    className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Week)? 'active': ''}` }
+                    onClick={ () => setFilterDate(FilterDateOptions.Week) }
+                  >일주일</span>
+                  <span 
+                    className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Month)? 'active': ''}` }
+                    onClick={ () => setFilterDate(FilterDateOptions.Month) }
+                  >1개월</span>
+                  <span 
+                    className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Input)? 'active': ''}` }
+                    onClick={ () => setFilterDate(FilterDateOptions.Input) }
+                  >직접입력</span>
+                </div>
+                <div className="range-row">
+                  <div className="input-wrapper date">
+                    <input
+                      className="date-input"
+                      type="text"
+                      placeholder="날짜 선택"
+                      value={ filterStartDate }
+                      readOnly={ true }
+                    />
+                    <button
+                      type="button"
+                      className="date-btn"
+                      onClick={ () => onClickToOpenCalendar() }
+                    >
+                      <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={ filterEndDate }
+                      readOnly={ true }
+                    />
+                    <button 
+                      type="button" 
+                      className="date-btn"
+                      onClick={ () => onClickToOpenCalendar() }
+                    >
+                      <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 ${(filterRequestStatus === BillingRequestStatus.ALL)? 'active': ''}` }
+                    onClick={ () => setFilterRequestStatus(BillingRequestStatus.ALL) }
+                  >전체</span>
+                  <span 
+                    className={ `keyword-tag ${(filterRequestStatus === BillingRequestStatus.IN_PROGRESS)? 'active': ''}` }
+                    onClick={ () => setFilterRequestStatus(BillingRequestStatus.IN_PROGRESS) }
+                  >진행중</span>
+                  <span 
+                    className={ `keyword-tag ${(filterRequestStatus === BillingRequestStatus.SUCCESS)? 'active': ''}` }
+                    onClick={ () => setFilterRequestStatus(BillingRequestStatus.SUCCESS) }
+                  >성공</span>
+                  <span 
+                    className={ `keyword-tag ${(filterRequestStatus === BillingRequestStatus.REQUEST_CANCEL)? 'active': ''}` }
+                    onClick={ () => setFilterRequestStatus(BillingRequestStatus.REQUEST_CANCEL) }
+                  >요청취소</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 ${(filterProcessResult === BillingProcessResult.ALL)? 'active': ''}` }
+                    onClick={ () => setFilterProcessResult(BillingProcessResult.ALL) }
+                  >전체</span>
+                  <span 
+                    className={ `keyword-tag ${(filterProcessResult === BillingProcessResult.SUCCESS)? 'active': ''}` }
+                    onClick={ () => setFilterProcessResult(BillingProcessResult.SUCCESS) }
+                  >성공</span>
+                  <span 
+                    className={ `keyword-tag ${(filterProcessResult === BillingProcessResult.FAILURE)? 'active': ''}` }
+                    onClick={ () => setFilterProcessResult(BillingProcessResult.FAILURE) }
+                  >실패</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 col below h36">
+                <div className="chip-row">
+                  <span 
+                    className={ `keyword-tag ${(filterPaymentMethod === BillingPaymentMethod.ALL)? 'active': ''}` }
+                    onClick={ () => setFilterPaymentMethod(BillingPaymentMethod.ALL) }
+                  >전체</span>
+                  <span 
+                    className={ `keyword-tag ${(filterPaymentMethod === BillingPaymentMethod.CREDIT_CARD)? 'active': ''}` }
+                    onClick={ () => setFilterPaymentMethod(BillingPaymentMethod.CREDIT_CARD) }
+                  >신용카드</span>
+                  <span 
+                    className={ `keyword-tag ${(filterPaymentMethod === BillingPaymentMethod.VIRTUAL_ACCOUNT)? 'active': ''}` }
+                    onClick={ () => setFilterPaymentMethod(BillingPaymentMethod.VIRTUAL_ACCOUNT) }
+                  >가상계좌</span>
+                  <span 
+                    className={ `keyword-tag ${(filterPaymentMethod === BillingPaymentMethod.MOBILE_PAYMENT)? 'active': ''}` }
+                    onClick={ () => setFilterPaymentMethod(BillingPaymentMethod.MOBILE_PAYMENT) }
+                  >휴대폰</span>
+                </div>
+              </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"
+							onClick={ () => onClickToSetFilter() }
+            >적용</button>
+          </div>
+        </div>
+        <NiceCalendar
+          calendarOpen={ calendarOpen }
+          setNewDate={ setNewDate }
+        ></NiceCalendar>
+      </motion.div>
+    </>
+  );
+};

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

@@ -0,0 +1,187 @@
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { FilterProps } from '../../model/types';
+
+export const CashReceiptFilter = ({
+  filterOn,
+  setFilterOn
+}: FilterProps) => {
+
+  const variants = {
+    hidden: { x: '100%' },
+    visible: { x: '0%' },
+  };
+
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
+  return (
+    <>
+      <motion.div 
+        id="fullMenuModal" 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (filterOn)? 'visible': 'hidden' }
+        variants={ variants }
+        transition={{ duration: 0.3 }}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-actions">
+              <button 
+                id="closeFullMenu"
+                className="full-menu-close"
+              >
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                  onClick={ () => onClickToClose() }
+                />
+              </button>
+            </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>
+          <div className="apply-row">
+            <button className="btn-50 btn-blue flex-1">적용</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};

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

@@ -0,0 +1,187 @@
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { FilterProps } from '../../model/types';
+
+export const EscrowFilter = ({
+  filterOn,
+  setFilterOn
+}: FilterProps) => {
+
+  const variants = {
+    hidden: { x: '100%' },
+    visible: { x: '0%' },
+  };
+
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
+  return (
+    <>
+      <motion.div 
+        id="fullMenuModal" 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (filterOn)? 'visible': 'hidden' }
+        variants={ variants }
+        transition={{ duration: 0.3 }}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-actions">
+              <button 
+                id="closeFullMenu"
+                className="full-menu-close"
+              >
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                  onClick={ () => onClickToClose() }
+                />
+              </button>
+            </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>
+          <div className="apply-row">
+            <button className="btn-50 btn-blue flex-1">적용</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};