필터

2025-09-12 14:03:12 +09:00
parent 84288188dc
commit a2a3d6af9b
26 changed files with 2813 additions and 1770 deletions
--- a/package.json
+++ b/package.json
@@ -21,62 +21,63 @@
    "@headlessui/react": "^2.2.7",
    "@lottiefiles/react-lottie-player": "^3.6.0",
    "@lukemorales/query-key-factory": "^1.3.4",
-    "@mui/material": "^7.3.1",
+    "@mui/material": "^7.3.2",
    "@remix-run/router": "^1.23.0",
    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@sentry/react": "^10.4.0",
-    "@sentry/vite-plugin": "^4.1.0",
-    "@tanstack/react-query": "^5.84.2",
-    "@tanstack/react-query-devtools": "^5.84.2",
-    "@tanstack/react-router": "^1.131.7",
-    "@tanstack/react-router-devtools": "^1.131.7",
-    "@tanstack/router-devtools": "^1.131.7",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@sentry/react": "^10.11.0",
+    "@sentry/vite-plugin": "^4.3.0",
+    "@tanstack/react-query": "^5.87.4",
+    "@tanstack/react-query-devtools": "^5.87.4",
+    "@tanstack/react-router": "^1.131.41",
+    "@tanstack/react-router-devtools": "^1.131.41",
+    "@tanstack/router-devtools": "^1.131.41",
+    "@testing-library/jest-dom": "^6.8.0",
    "@testing-library/react": "^16.3.0",
    "@testing-library/user-event": "^14.6.1",
    "@types/jest": "^30.0.0",
    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.2.1",
+    "@types/node": "^24.3.1",
    "@vitejs/plugin-legacy": "^7.2.1",
    "@vitejs/plugin-react-swc": "^3.11.0",
    "@webview-bridge/react": "^1.7.8",
    "@webview-bridge/react-native": "^1.7.8",
    "@webview-bridge/web": "^1.7.8",
    "animate.css": "^4.1.1",
-    "axios": "^1.11.0",
+    "axios": "^1.12.0",
    "babel-plugin-styled-components": "^2.1.4",
    "clsx": "^2.1.1",
    "compare-versions": "^6.1.1",
    "date-fns": "^4.1.0",
-    "dotenv": "^17.2.1",
+    "dotenv": "^17.2.2",
    "env-cmd": "^10.1.0",
    "eslint-webpack-plugin": "^5.0.2",
    "express": "^5.1.0",
    "framer-motion": "^12.23.12",
    "glob": "^11.0.3",
    "http-proxy-middleware": "^3.0.5",
-    "i18next": "^25.3.4",
+    "i18next": "^25.5.2",
    "i18next-browser-languagedetector": "^8.2.0",
-    "immer": "^10.1.1",
+    "immer": "^10.1.3",
    "jsdom": "^26.1.0",
    "lodash-es": "^4.17.21",
    "module-resolver": "^1.0.0",
    "moment": "^2.30.1",
-    "overlay-kit": "^1.8.4",
+    "overlay-kit": "^1.8.5",
    "path": "^0.12.7",
-    "pnpm": "^10.14.0",
+    "pnpm": "^10.15.1",
    "prettier": "^3.6.2",
    "react": "^19.1.1",
+    "react-calendar": "^6.0.0",
    "react-cookie": "^8.0.1",
    "react-dom": "^19.1.1",
    "react-error-boundary": "^6.0.0",
    "react-hook-form": "^7.62.0",
-    "react-i18next": "^15.6.1",
+    "react-i18next": "^15.7.3",
    "react-intersection-observer": "^9.16.0",
    "react-number-format": "^5.4.4",
-    "react-player": "^3.3.1",
-    "react-router": "^7.8.0",
-    "react-router-dom": "^7.8.0",
+    "react-player": "^3.3.2",
+    "react-router": "^7.8.2",
+    "react-router-dom": "^7.8.2",
    "react-tabs": "^6.1.0",
    "react-toastify": "^11.0.5",
    "react-tooltip": "^5.29.1",
@@ -88,33 +89,33 @@
    "source-map-loader": "^5.0.0",
    "styled-components": "^6.1.19",
    "swiper": "^11.2.10",
-    "ts-loader": "^9.5.2",
+    "ts-loader": "^9.5.4",
    "tsconfig-paths-webpack-plugin": "^4.2.0",
    "use-local-storage-state": "^19.5.0",
-    "vite-plugin-checker": "^0.10.2",
+    "vite-plugin-checker": "^0.10.3",
    "vite-tsconfig-paths": "^5.1.4",
    "vitest": "^3.2.4",
-    "zustand": "^5.0.7"
+    "zustand": "^5.0.8"
  },
  "devDependencies": {
-    "@eslint/js": "^9.33.0",
-    "@tanstack/router-plugin": "^1.131.7",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.39.1",
-    "@typescript-eslint/parser": "^8.39.1",
+    "@eslint/js": "^9.35.0",
+    "@tanstack/router-plugin": "^1.131.41",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "@typescript-eslint/eslint-plugin": "^8.43.0",
+    "@typescript-eslint/parser": "^8.43.0",
    "@vitejs/plugin-react": "^4.7.0",
    "autoprefixer": "^10.4.21",
-    "eslint": "^9.33.0",
+    "eslint": "^9.35.0",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "jiti": "^2.5.1",
    "openapi-typescript": "^7.9.1",
    "postcss": "^8.5.6",
-    "sass-embedded": "^1.90.0",
+    "sass-embedded": "^1.92.1",
    "tailwindcss": "^3.4.17",
    "typescript": "^5.9.2",
-    "vite": "^7.1.2"
+    "vite": "^7.1.5"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/entities/additional-service/ui/fund-transfer-request-list-wrap.tsx
+++ b/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 
--- a/src/entities/additional-service/ui/fund-transfer-result-inquiry-wrap.tsx
+++ b/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 
--- a/src/entities/additional-service/ui/settlement-agency-deposit-wrap.tsx
+++ b/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 
--- a/src/entities/additional-service/ui/settlement-agency-manage-wrap.tsx
+++ b/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 
--- a/src/entities/common/model/types.ts
+++ b/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;
--- a/src/entities/settlement/ui/list-wrap.tsx
+++ b/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 
--- a/src/entities/tax/ui/invoice-list-wrap.tsx
+++ b/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 
--- a/src/entities/transaction/model/types.ts
+++ b/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;
--- a/src/entities/transaction/ui/filter/all-transaction-filter.tsx
+++ b/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>
+    </>
+  );
+};
--- a/src/entities/transaction/ui/filter/billing-filter.tsx
+++ b/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>
+    </>
+  );
+};
--- a/src/entities/transaction/ui/filter/cash-receipt-filter.tsx
+++ b/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>
+    </>
+  );
+};
--- a/src/entities/transaction/ui/filter/escrow-filter.tsx
+++ b/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>
+    </>
+  );
+};
--- a/src/pages/account/password/manage-page.tsx
+++ b/src/pages/account/password/manage-page.tsx
@@ -27,7 +27,7 @@ export const PasswordManagePage = () => {
    <>
      <main>
        <div className="tab-content">
-          <div className="tab-pane sub active">
+          <div className="tab-pane pt-46 active">
            <AccountTab activeTab={ activeTab }></AccountTab>
            <PasswordManageWrap></PasswordManageWrap>
          </div>
--- a/src/pages/account/user/manage-page.tsx
+++ b/src/pages/account/user/manage-page.tsx
@@ -30,7 +30,7 @@ export const UserManagePage = () => {
    <>
      <main>
        <div className="tab-content">
-          <div className="tab-pane sub active">
+          <div className="tab-pane pt-46 active">
            <AccountTab activeTab={ activeTab }></AccountTab>
            <UserManageWrap></UserManageWrap>
          </div>
--- a/src/pages/additional-service/fund-transfer/request-list-page.tsx
+++ b/src/pages/additional-service/fund-transfer/request-list-page.tsx
@@ -28,7 +28,7 @@ export const FundTransferRequestListPage = () => {
    <>
      <main>
        <div className="tab-content">
-          <div className="tab-pane sub active">
+          <div className="tab-pane pt-46 active">
            <FundTransferTab activeTab={ activeTab }></FundTransferTab>
            <FundTransferRequestListWrap></FundTransferRequestListWrap>
          </div>
--- a/src/pages/business-member/info/info-page.tsx
+++ b/src/pages/business-member/info/info-page.tsx
@@ -28,7 +28,7 @@ export const InfoPage = () => {
    <>
      <main>
        <div className="tab-content">
-          <div className="tab-pane sub active">
+          <div className="tab-pane pt-46 active">
            <BusinessMemberTab activeTab={ activeTab }></BusinessMemberTab>
            <InfoWrap></InfoWrap>
          </div>
--- a/src/pages/business-member/registration-status/registration-status-page.tsx
+++ b/src/pages/business-member/registration-status/registration-status-page.tsx
@@ -28,7 +28,7 @@ export const RegistrationStatusPage = () => {
    <>
      <main>
        <div className="tab-content">
-          <div className="tab-pane sub active">
+          <div className="tab-pane pt-46 active">
            <BusinessMemberTab activeTab={ activeTab }></BusinessMemberTab>
            <RegistrationStatusWrap></RegistrationStatusWrap>
          </div>
--- a/src/pages/payment/data-notification/data-notification-page.tsx
+++ b/src/pages/payment/data-notification/data-notification-page.tsx
@@ -28,7 +28,7 @@ export const DataNotificationPage = () => {
    <>
      <main>
        <div className="tab-content">
-          <div className="tab-pane sub active">
+          <div className="tab-pane pt-46 active">
            <PaymentTab activeTab={ activeTab }></PaymentTab>
            <DataNotificationWrap></DataNotificationWrap>
          </div>
--- a/src/pages/payment/info/info-page.tsx
+++ b/src/pages/payment/info/info-page.tsx
@@ -28,7 +28,7 @@ export const InfoPage = () => {
    <>
      <main>
        <div className="tab-content">
-          <div className="tab-pane sub active">
+          <div className="tab-pane pt-46 active">
            <PaymentTab activeTab={ activeTab }></PaymentTab>
            <InfoWrap></InfoWrap>
          </div>
--- a/src/pages/settlement/calendar/calendar-page.tsx
+++ b/src/pages/settlement/calendar/calendar-page.tsx
@@ -28,7 +28,7 @@ export const CalendarPage = () => {
    <>
      <main>
        <div className="tab-content">
-          <div className="tab-pane sub active">
+          <div className="tab-pane pt-46 active">
            <SettlementTab activeTab={ activeTab }></SettlementTab>
            <CalendarWrap></CalendarWrap>
          </div>
--- a/src/pages/settlement/list/list-page.tsx
+++ b/src/pages/settlement/list/list-page.tsx
@@ -31,7 +31,7 @@ export const ListPage = () => {
    <>
      <main>
        <div className="tab-content">
-          <div className="tab-pane sub active">
+          <div className="tab-pane pt-46 active">
            <SettlementTab activeTab={ activeTab }></SettlementTab>
            <ListWrap></ListWrap>
          </div>
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/src/pages/transaction/billing/list-page.tsx
@@ -5,11 +5,11 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { BillingList } from '@/entities/transaction/ui/billing-list';
-import { BillingListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { BillingListItem, TransactionCategory, SortByKeys, BillingRequestStatus, BillingProcessResult, BillingPaymentMethod, BillingSearchType } from '@/entities/transaction/model/types';
 import { useBillingListMutation } from '@/entities/transaction/api/use-billing-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
-import { Filter } from '@/entities/transaction/ui/filter';
+import { BillingFilter } from '@/entities/transaction/ui/filter/billing-filter';
 import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
@@ -35,8 +35,15 @@ export const BillingListPage = () => {
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+	const [mid, setMid] = useState<string>('nictest001m');
+	const [searchType, setSearchType] = useState<BillingSearchType>(BillingSearchType.ALL);
+	const [searchKeyword, setSearchKeyword] = useState<string>('');
+	// const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+	const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
 	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+	const [requestStatus, setRequestStatus] = useState<BillingRequestStatus>(BillingRequestStatus.ALL);
+	const [processResult, setProcessResult] = useState<BillingProcessResult>(BillingProcessResult.ALL);
+	const [paymentMethod, setPaymentMethod] = useState<BillingPaymentMethod>(BillingPaymentMethod.ALL);
 		
 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -55,14 +62,14 @@ export const BillingListPage = () => {
 		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
    setPageParam(pageParam);
    let listParams = {
-      mid: 'nictest001m',
-      searchType: 'ALL',
-			searchKeyword: '',
+      mid: mid,
+      searchType: searchType,
+			searchKeyword: searchKeyword,
      startDate: startDate,
      endDate: endDate,
-      requestStatus: 'ALL',
-      processResult: 'ALL',
-      paymentMethod: 'ALL',
+      requestStatus: requestStatus,
+      processResult: processResult,
+      paymentMethod: paymentMethod,
 			pagination: pageParam
    };    
    
@@ -170,10 +177,26 @@ export const BillingListPage = () => {
 					</div>
 				</div>
 			</main>
-			<Filter
+			<BillingFilter
        filterOn={ filterOn }
        setFilterOn={ setFilterOn }
-      ></Filter>
+				mid={ mid }
+				searchType={ searchType }
+				searchKeyword={searchKeyword }
+				startDate={ startDate }
+				endDate={ endDate }
+				requestStatus={ requestStatus }
+				processResult={ processResult }
+				paymentMethod={ paymentMethod }
+				setMid={ setMid }
+				setSearchType={ setSearchType }
+				setSearchKeyword={ setSearchKeyword }
+				setStartDate={ setStartDate }
+				setEndDate={ setEndDate }
+				setRequestStatus={ setRequestStatus }
+				setProcessResult={ setProcessResult }
+				setPaymentMethod={ setPaymentMethod }
+      ></BillingFilter>
 		</>
 	);
 };
--- a/src/pages/transaction/escrow/detail-page.tsx
+++ b/src/pages/transaction/escrow/detail-page.tsx
@@ -1,8 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
-import { Dialog } from '@/shared/ui/dialogs/dialog';
-import { overlay } from 'overlay-kit';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useEscrowDetailMutation } from '@/entities/transaction/api/use-escrow-detail-mutation';
 import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';
--- a/src/shared/ui/calendar/index.tsx
+++ b/src/shared/ui/calendar/index.tsx
@@ -0,0 +1,43 @@
+import moment from 'moment';
+import styled from "styled-components";
+import { useState } from 'react';
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+
+const NiceCalendar = ({
+  setNewDate
+}: any) => {
+  const [calendarDate, setCalendarDate] = useState<string>(moment().format('YYYY-MM-DD'));
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  
+  const onchangeToDate = (selectedDate: any) => {
+    setNewDate(selectedDate)
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <CalendarContainer>
+        <CalendarWrapper isOpen={isOpen}>
+          <Calendar
+            onChange={ onchangeToDate }
+            value={ calendarDate }
+          ></Calendar>
+        </CalendarWrapper>
+      </CalendarContainer>
+    </>
+  );
+};
+
+const CalendarContainer = styled.div`
+  position: relative;
+`;
+const CalendarWrapper: any = styled.div`
+  z-index: 11;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  display: ${(props: any) => ((props.isOpen)? 'block': 'none')};
+`;
+
+export default NiceCalendar;