Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

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/react": "^10.11.0",
-    "@sentry/vite-plugin": "^4.1.0",
+    "@sentry/vite-plugin": "^4.3.0",
-    "@tanstack/react-query": "^5.84.2",
+    "@tanstack/react-query": "^5.87.4",
-    "@tanstack/react-query-devtools": "^5.84.2",
+    "@tanstack/react-query-devtools": "^5.87.4",
-    "@tanstack/react-router": "^1.131.7",
+    "@tanstack/react-router": "^1.131.41",
-    "@tanstack/react-router-devtools": "^1.131.7",
+    "@tanstack/react-router-devtools": "^1.131.41",
-    "@tanstack/router-devtools": "^1.131.7",
+    "@tanstack/router-devtools": "^1.131.41",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@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-player": "^3.3.2",
-    "react-router": "^7.8.0",
+    "react-router": "^7.8.2",
-    "react-router-dom": "^7.8.0",
+    "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",
+    "@eslint/js": "^9.35.0",
-    "@tanstack/router-plugin": "^1.131.7",
+    "@tanstack/router-plugin": "^1.131.41",
-    "@types/react": "^19.1.10",
+    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.7",
+    "@types/react-dom": "^19.1.9",
-    "@typescript-eslint/eslint-plugin": "^8.39.1",
+    "@typescript-eslint/eslint-plugin": "^8.43.0",
-    "@typescript-eslint/parser": "^8.39.1",
+    "@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"
   }
 }

src/app/index.tsx

@@ -5,10 +5,12 @@ import { App } from './app';
 import { initAxios } from '@/shared/configs/axios';
 import { initSentry } from '@/shared/configs/sentry';
 import { AppProvider } from './providers/app-provider';
+// import appBridge from '@/shared/lib/appBridge';
 
 const initApp = async () => {
   initAxios();
   initSentry();
+  // appBridge.sendMessage('login')
 };
 
 (async () => {

src/entities/additional-service/api/use-extension-keyin-apply-mutation.ts

@@ -17,7 +17,7 @@ export const extensionKeyinApply = (params: ExtensionKeyinApplyParams) => {
   );
 };
 
-export const useExtensionKeyinListMutation = (options?: UseMutationOptions<ExtensionKeyinApplyResponse, CBDCAxiosError, ExtensionKeyinApplyParams>) => {
+export const useExtensionKeyinApplyMutation = (options?: UseMutationOptions<ExtensionKeyinApplyResponse, CBDCAxiosError, ExtensionKeyinApplyParams>) => {
   const mutation = useMutation<ExtensionKeyinApplyResponse, CBDCAxiosError, ExtensionKeyinApplyParams>({
     ...options,
     mutationFn: (params: ExtensionKeyinApplyParams) => extensionKeyinApply(params),

src/entities/additional-service/model/types.ts

@@ -23,6 +23,16 @@ export enum SortByKeys {
   New = 'New',
   Amount = 'Amount',
 };
+export enum AccountHolderSearchType {
+  ALL = 'ALL',
+  ACCOUNT_HOLDER = 'ACCOUNT_HOLDER',
+  ACCOUNT_NUMBER = 'ACCOUNT_NUMBER'
+};
+export enum AccountHolderSearchProcessResult {
+  ALL = 'ALL',
+  SUCCESS = 'SUCCESS',
+  FAILURE = 'FAILURE'
+};
 export interface SortOptionsBoxProps {
   sortBy: SortByKeys;
   onClickToSort: (sortBy: SortByKeys) => void;
@@ -232,7 +242,7 @@ export interface ExtensionAlimtalkSettingSaveResponse {
 
 };
 export interface ExtensionAlimtalkSettingDetailParams extends ExtensionRequestParams {
-  
+
 };
 export interface ExtensionAlimtalkSettingDetailItem {
   sendMerchantInfo: SendMerchantInfoItem;
@@ -311,10 +321,34 @@ export interface SettlementAgencyBottomAgreeProps {
   bottomAgreeOn: boolean;
   setBottomAgreeOn: (bottomAgreeOn: boolean) => void;
 };
-export interface LinkPaymentFilterProps {
+/**
-    filterOn: boolean;
+ * FilterProps
-     setFilterOn: (filterOn: boolean) => void;
+ */
+export interface FilterProps {
+  filterOn: boolean;
+  setFilterOn: (filterOn: boolean) => void;
 };
+
+export interface AccountHolderSearchFilterProps extends FilterProps {
+  mid: string;
+  searchType: AccountHolderSearchType;
+  searchKeyword: string;
+  startDate: string;
+  endDate: string;
+  bank: string;
+  processResult: AccountHolderSearchProcessResult;
+  setMid: (mid: string) => void;
+  setSearchType: (searchType: AccountHolderSearchType) => void;
+  setSearchKeyword: (searchKeyWorld: string) => void;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+  setBank: (bank: string) => void;
+  setProcessResult: (processResult: AccountHolderSearchProcessResult) => void;
+}
+export interface LinkPaymentFilterProps extends FilterProps {
+
+};
+
 export enum DetailInfoSectionKeys {
   Payment = 'Payment',
   Deets = 'Deets'

src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx

@@ -0,0 +1,210 @@
+import moment from 'moment';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
+import { ChangeEvent, useState } from 'react';
+import {
+    AccountHolderSearchType,
+    AccountHolderSearchFilterProps,
+    AccountHolderSearchProcessResult
+} from '../../model/types';
+import { FilterDateOptions } from '@/entities/common/model/types';
+import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+
+export const AccountHolderSearchFilter = ({
+    filterOn,
+    setFilterOn,
+    mid,
+    searchType,
+    searchKeyword,
+    startDate,
+    endDate,
+    bank,
+    processResult,
+    setMid,
+    setSearchType,
+    setSearchKeyword,
+    setStartDate,
+    setEndDate,
+    setBank,
+    setProcessResult
+}: AccountHolderSearchFilterProps) => {
+
+    const [filterMid, setFilterMid] = useState<string>(mid);
+    const [filterSearchType, setFilterSearchType] = useState<AccountHolderSearchType>(searchType);
+    const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
+    const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+    const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+    const [filterBank, setFilterBank] = useState<string>(bank)
+    const [filterProcessResult, setFilterProcessResult] = useState<AccountHolderSearchProcessResult>(processResult);
+    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);
+        setBank(filterBank);
+        setProcessResult(filterProcessResult);
+    };
+
+    let processResultBtnGroup = [
+        { name: '전체', value: AccountHolderSearchProcessResult.ALL },
+        { name: '성공', value: AccountHolderSearchProcessResult.SUCCESS },
+        { name: '실패', value: AccountHolderSearchProcessResult.FAILURE },
+    ];
+    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 pt-16">
+                        <div className="opt-field">
+                            <div className="opt-label">가맹점</div>
+                            <div className="opt-controls">
+                                <select
+                                    className="flex-1"
+                                    value={filterMid}
+                                    onChange={(e: any) => setFilterMid(e.target.value)}
+                                >
+                                    <option>nictest001m</option>
+                                    <option>nictest002m</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div className="opt-field">
+                            <div className="opt-label">예금주/계좌번호</div>
+                            <div className="opt-controls">
+                                <select
+                                    className="w-110"
+                                    value={filterSearchType}
+                                    onChange={(e: any) => setFilterSearchType(e.target.value)}
+                                >
+                                    <option value={AccountHolderSearchType.ACCOUNT_HOLDER}>예금주</option>
+                                    <option value={AccountHolderSearchType.ACCOUNT_NUMBER}>계좌번호</option>
+                                </select>
+                                <input
+                                    className="flex-1"
+                                    type="text"
+                                    placeholder=""
+                                    value={filterSearchKeyword}
+                                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterSearchKeyword(e.target.value)}
+                                />
+                            </div>
+                        </div>
+                        <FilterCalendar
+                            startDate={filterStartDate}
+                            endDate={filterEndDate}
+                            setStartDate={setFilterStartDate}
+                            setEndDate={setFilterEndDate}
+                        ></FilterCalendar>
+
+                        <div className="opt-field">
+                            <div className="opt-label">은행</div>
+                            <div className="opt-controls">
+                                <select
+                                    className="flex-1"
+                                    value={filterBank}
+                                    onChange={(e: any) => setFilterBank(e.target.value)}
+                                >
+                                    <option>선택</option>
+                                    <option>우리은행</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <FilterButtonGroups
+                            title='조회결과'
+                            activeValue={filterProcessResult}
+                            btnGroups={processResultBtnGroup}
+                            setter={setFilterProcessResult}
+                        ></FilterButtonGroups>
+                    </div>
+                    <div className="apply-row">
+                        <button
+                            className="btn-50 btn-blue flex-1"
+                            onClick={() => onClickToSetFilter()}
+                        >적용</button>
+                    </div>
+                </div>
+            </motion.div>
+        </>
+    )
+
+}

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/link-payment/apply/link-payment-step1.tsx

@@ -36,7 +36,7 @@ export const LinkPaymentStep1 = () => {
         <div className="issue-row gap-10">
           <div className="issue-label">가맹점</div>
           <div className="issue-field">
-            <select 
+            <select
               className="wid-100"
               value={formData.merchant}
               onChange={(e) => handleInputChange('merchant', e.target.value)}
@@ -50,19 +50,19 @@ export const LinkPaymentStep1 = () => {
           <div className="issue-label">발송 수단</div>
           <div className="issue-field">
             <div className="chip-row">
-              <span 
+              <span
                 className={`keyword-tag flex-1 ${selectedPaymentMethod === 'SMS' ? 'active' : ''}`}
                 onClick={() => handlePaymentMethodChange('SMS')}
               >
                 SMS
               </span>
-              <span 
+              <span
                 className={`keyword-tag flex-1 ${selectedPaymentMethod === '이메일' ? 'active' : ''}`}
                 onClick={() => handlePaymentMethodChange('이메일')}
               >
                 이메일
               </span>
-              <span 
+              <span
                 className={`keyword-tag flex-1 ${selectedPaymentMethod === '카카오' ? 'active' : ''}`}
                 onClick={() => handlePaymentMethodChange('카카오')}
               >
@@ -75,9 +75,9 @@ export const LinkPaymentStep1 = () => {
         <div className="issue-row gap-10">
           <div className="issue-label">상품명</div>
           <div className="issue-field">
-            <input 
+            <input
-              type="text" 
+              type="text"
-              placeholder="" 
+              placeholder=""
               value={formData.productName}
               onChange={(e) => handleInputChange('productName', e.target.value)}
             />
@@ -87,9 +87,9 @@ export const LinkPaymentStep1 = () => {
         <div className="issue-row gap-10">
           <div className="issue-label">상품가격</div>
           <div className="issue-field">
-            <input 
+            <input
-              type="text" 
+              type="text"
-              placeholder="" 
+              placeholder=""
               value={formData.productPrice}
               onChange={(e) => handleInputChange('productPrice', e.target.value)}
             />
@@ -99,9 +99,9 @@ export const LinkPaymentStep1 = () => {
         <div className="issue-row gap-10">
           <div className="issue-label">상품 주문번호</div>
           <div className="issue-field">
-            <input 
+            <input
-              type="text" 
+              type="text"
-              placeholder="" 
+              placeholder=""
               value={formData.orderNumber}
               onChange={(e) => handleInputChange('orderNumber', e.target.value)}
             />
@@ -113,15 +113,15 @@ export const LinkPaymentStep1 = () => {
           <div className="issue-field">
             <div className="link-apply-date">
               <div className="input-wrapper date">
-                <input 
+                <input
-                  type="text" 
+                  type="text"
-                  value={formData.validDate} 
+                  value={formData.validDate}
                   className="date-input"
                   onChange={(e) => handleInputChange('validDate', e.target.value)}
                 />
                 <button type="button" className="date-btn">
-                  <img 
+                  <img
-                    src={IMAGE_ROOT + '/ico_date.svg'} 
+                    src={IMAGE_ROOT + '/ico_date.svg'}
                     alt="날짜 선택"
                   />
                 </button>

src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx

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

src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx

@@ -64,7 +64,7 @@ export const LinkPaymentPendingSendWrap = () => {
     }, []);
     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

@@ -1,7 +1,19 @@
+import { 
+  BillingPaymentMethod, 
+  BillingProcessResult, 
+  BillingRequestStatus 
+} from '@/entities/transaction/model/types';
+
 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;
@@ -21,6 +33,23 @@ export enum HeaderType {
   LeftArrow = 'LeftArrow',
   RightClose = 'RightClose',
 };
+export interface FilterRangeAmountProps {
+  title?: string;
+  minAmount?: number | string;
+  maxAmount?: number | string;
+  setMinAmount: (minAmount: number | string) => void;
+  setMaxAmount: (maxAmount: number | string) => void;
+};
+export interface FilterButtonGroupsProps {
+  title: string;
+  activeValue?: string;
+  btnGroups?: Array<ButtonItemProp>
+  setter: (value: any) => void;
+};
+export interface ButtonItemProp {
+  name?: string;
+  value?: string;
+};
 export interface HeaderNavigationProps {
   onBack?: (() => void) | undefined;
   headerTitle?: string;

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,37 @@ 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;
+  minAmount?: number | string;
+  maxAmount?: number | string;
+  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;
+  setMinAmount: (minAmount: string | number) => void;
+  setMaxAmount: (maxAmount: string | number) => 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,201 @@
+import moment from 'moment';
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterSelectInput } from '@/shared/ui/filter/select-input';
+import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
+import { 
+  BillingFilterProps,
+  BillingPaymentMethod,
+  BillingProcessResult,
+  BillingRequestStatus,
+  BillingSearchType
+} from '../../model/types';
+
+export const BillingFilter = ({
+  filterOn,
+  setFilterOn,
+  mid,
+  searchType,
+  searchKeyword,
+  startDate,
+  endDate,
+  requestStatus,
+  processResult,
+  paymentMethod,
+  minAmount,
+  maxAmount,
+  setMid,
+  setSearchType,
+  setSearchKeyword,
+  setStartDate,
+  setEndDate,
+  setRequestStatus,
+  setProcessResult,
+  setPaymentMethod,
+  setMinAmount,
+  setMaxAmount
+}: 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 [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);
+  };
+  
+  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);
+    onClickToClose();
+	};
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+  let SearchTypeOptions = [
+    {name: '주문번호', value: BillingSearchType.ORDER_NUMBER },
+    {name: 'TID', value: BillingSearchType.TID }
+  ];
+
+  let requestStatusBtnGroup = [
+    {name: '전체', value: BillingRequestStatus.ALL},
+    {name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
+    {name: '성공', value: BillingRequestStatus.SUCCESS},
+    {name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL},
+  ];
+  let processResultBtnGroup = [
+    {name: '전체', value: BillingProcessResult.ALL},
+    {name: '성공', value: BillingProcessResult.SUCCESS},
+    {name: '실패', value: BillingProcessResult.FAILURE},
+  ];
+  let paymentMethodBtnGroup = [
+    {name: '전체', value: BillingPaymentMethod.ALL},
+    {name: '신용카드', value: BillingPaymentMethod.CREDIT_CARD},
+    {name: '가상계좌', value: BillingPaymentMethod.VIRTUAL_ACCOUNT},
+    {name: '휴대폰', value: BillingPaymentMethod.MOBILE_PAYMENT},
+  ];
+
+  useEffect(() => {
+    setFilterRequestStatus(requestStatus);
+  }, [requestStatus]);
+
+  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 pt-16">
+            <FilterSelect
+              title='가맹점'
+              selectValue={ mid }
+              selectSetter={ setMid }
+              selectOptions={ MidOptions }
+            ></FilterSelect>
+            <FilterSelectInput
+              title='주문번호/ID'
+              selectValue={ searchType }
+              selectSetter={ setSearchType }
+              selectOptions={ SearchTypeOptions }
+              inputValue={ searchKeyword }
+              inputSetter={ setSearchKeyword }
+            ></FilterSelectInput>
+            <FilterCalendar
+              title='조회기간'
+              startDate={ filterStartDate }
+              endDate={ filterEndDate }
+              setStartDate={ setFilterStartDate }
+              setEndDate={ setFilterEndDate }
+            ></FilterCalendar>
+            
+            <FilterButtonGroups
+              title='요청상태'
+              activeValue={ filterRequestStatus }
+              btnGroups={ requestStatusBtnGroup }
+              setter={ setFilterRequestStatus }
+            ></FilterButtonGroups>
+            <FilterButtonGroups
+              title='처리결과'
+              activeValue={ filterProcessResult }
+              btnGroups={ processResultBtnGroup }
+              setter={ setFilterProcessResult }
+            ></FilterButtonGroups>
+            <FilterButtonGroups
+              title='결제수단'
+              activeValue={ filterPaymentMethod }
+              btnGroups={ paymentMethodBtnGroup }
+              setter={ setFilterPaymentMethod }
+            ></FilterButtonGroups>
+            
+            <FilterRangeAmount
+              title='거래금액'
+              minAmount={ filterMinAmount }
+              maxAmount={ filterMaxAmount }
+              setMinAmount={ setFilterMinAmount }
+              setMaxAmount={ setFilterMaxAmount }
+            ></FilterRangeAmount>
+            
+          </div>
+          <div className="apply-row">
+            <button 
+              className="btn-50 btn-blue flex-1"
+							onClick={ () => onClickToSetFilter() }
+            >적용</button>
+          </div>
+        </div>
+      </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>
+    </>
+  );
+};

src/entities/transaction/ui/list-item.tsx

@@ -112,18 +112,25 @@ export const ListItem = ({
     let rs = [];
     if(transactionCategory === TransactionCategory.AllTransaction){
       rs.push(
-        <>
+        <div className="transaction-details">
           <span>{ getTime() }</span>
           <span className="separator">|</span>
           <span>{ stateName }</span>
           <span className="separator">|</span>
           <span>{ mid }</span>
-        </>
+          {
+            (!!installmentMonth && parseInt(installmentMonth) > 1) && 
+              <>
+                <span className="separator">|</span>
+                <span>{ installmentMonth }개월 할부</span>
+              </>
+          }
+        </div>
       );
     }
     else if(transactionCategory === TransactionCategory.CashReceipt){
       rs.push(
-        <>
+        <div className="transaction-details">
           <span>{ getTime() }</span>
           <span className="separator">|</span>
           <span>{ issueStatus }</span>
@@ -131,12 +138,12 @@ export const ListItem = ({
           <span>{ paymentMethod }</span>
           <span className="separator">|</span>
           <span>{ processResult }</span>
-        </>
+        </div>
       );
     }
     else if(transactionCategory === TransactionCategory.Escrow){
       rs.push(
-        <>
+        <div className="transaction-details">
           <span>{ getTime() }</span>
           <span className="separator">|</span>
           <span>{ deliveryStatus }</span>
@@ -144,18 +151,25 @@ export const ListItem = ({
           <span>{ settlementStatus }</span>
           <span className="separator">|</span>
           <span>{ cancelStatus }</span>
-        </>
+          {
+            (!!installmentMonth && parseInt(installmentMonth) > 1) && 
+              <>
+                <span className="separator">|</span>
+                <span>{ installmentMonth }개월 할부</span>
+              </>
+          }
+        </div>
       );
     }
     else if(transactionCategory === TransactionCategory.Billing){
       rs.push(
-        <>
+        <div className="transaction-details">
           <span>{ getTime() }</span>
           <span className="separator">|</span>
           <span>{ processResult }</span>
           <span className="separator">|</span>
           <span>{ paymentMethod }</span>
-        </>
+        </div>
       );
     }
     return rs;
@@ -172,15 +186,7 @@ export const ListItem = ({
         </div>
         <div className="transaction-content">
           <div className="transaction-title">{ getTitle() }</div>
-          <div className="transaction-details">
+          { getDetail() }
-            { getDetail() }
-            { (!!installmentMonth && parseInt(installmentMonth) > 1) && 
-              <>
-                <span className="separator">|</span>
-                <span>{ installmentMonth }개월 할부</span>
-              </>
-            }
-          </div>
         </div>
         <div className="transaction-amount">
           <NumericFormat

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>

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>

src/pages/additional-service/account-holder-search/account-holder-search-page.tsx

@@ -1,18 +1,212 @@
+import moment from 'moment';
+import { PATHS } from '@/shared/constants/paths';
+import { useEffect, useState } from 'react';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
 import { HeaderType } from '@/entities/common/model/types';
-import { 
+import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
-	useSetHeaderTitle,
+import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/account-holder-search-filter';
-	useSetHeaderType,
+import { AccountHolderSearchProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types';
-	useSetFooterMode
+import {
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 
+
 export const AccountHolderSearchPage = () => {
+  const { navigate } = useNavigate();
+
+  const [filterOn, setFilterOn] = useState<boolean>(false);
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [searchType, setSearchType] = useState<AccountHolderSearchType>(AccountHolderSearchType.ALL)
+  const [searchKeyword, setSearchKeyword] = useState<string>('');
+  const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
+  const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+  const [bank, setBank] = useState<string>('');
+  const [processResult, setProcessResult] = useState<AccountHolderSearchProcessResult>(AccountHolderSearchProcessResult.ALL);
+
   useSetHeaderTitle('계좌성명조회');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);
 
+  const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
+
+  const transactionData = [
+    {
+      id: '1',
+      accountNumber: '10002464******',
+      time: '20:00',
+      bank: '우리은행',
+      status: 'success',
+      statusColor: 'blue',
+      className: 'approved'
+    },
+    {
+      id: '2',
+      accountNumber: '10002464******',
+      time: '20:00',
+      details: '결제완료ㅣ결제성공ㅣ호전환',
+      status: 'success',
+      statusColor: 'gray',
+      className: 'refund'
+    },
+    {
+      id: '3',
+      accountNumber: '10002464******',
+      time: '20:00',
+      details: '결제완료ㅣ결제성공ㅣ호전환',
+      status: 'success',
+      statusColor: 'blue',
+      className: 'approved'
+    },
+    {
+      id: '4',
+      accountNumber: '10002464******',
+      time: '20:00',
+      details: '미결제ㅣ취소완료ㅣSMS',
+      status: 'success',
+      statusColor: 'gray',
+      className: 'refund'
+    },
+    {
+      id: '5',
+      accountNumber: '10002464******',
+      time: '20:00',
+      details: '미결제ㅣ기간만료ㅣSMS',
+      status: 'fail',
+      statusColor: 'blue',
+      className: 'approved'
+    }
+  ];
+
+  const onClickToOpenFilter = () => {
+    setFilterOn(!filterOn);
+  };
+
+  const onClickToDownloadExcel = () => {
+    // tid??? 확인 필요
+    downloadExcel({
+      // tid: tid
+    }).then((rs) => {
+
+    });
+  };
+
+  const onClickToNavigation = () => {
+    navigate(PATHS.additionalService.accountHolderSearch.request);
+  };
+
+  const onClickToGoDetail = (tid?: string) => {
+    navigate(PATHS.additionalService.accountHolderSearch.detail);
+  };
+
   return (
     <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <section className="summary-section">
+              <div className="credit-controls">
+                <div>
+                  <input
+                    className="credit-period"
+                    type="text"
+                    value="2025.06.01 ~ 2025.06.30"
+                    readOnly={true}
+                  />
+                  <button
+                    className="filter-btn"
+                    aria-label="필터"
+                  >
+                    <img
+                      src={IMAGE_ROOT + '/ico_setting.svg'}
+                      alt="검색옵션"
+                      onClick={() => onClickToOpenFilter()}
+                    />
+                  </button>
+                </div>
+                <button
+                  className="download-btn"
+                  aria-label="다운로드"
+                >
+                  <img
+                    src={IMAGE_ROOT + '/ico_download.svg'}
+                    alt="다운로드"
+                  />
+                </button>
+              </div>
+            </section>
 
+            <section className="filter-section">
+              <div className="sort-options">
+                <button className="sort-btn active">최신순</button>
+                <span className="sort-divider">|</span>
+                <button className="sort-btn">고액순</button>
+              </div>
+              <div className="excrow">
+                <div className="full-menu-keywords no-padding">
+                  <span className="keyword-tag active">전체</span>
+                  <span className="keyword-tag">성공</span>
+                  <span className="keyword-tag">실패</span>
+                </div>
+              </div>
+            </section>
+
+            <section className="transaction-list">
+              <div className="date-group">
+                <div className="date-header">25.06.08(일)</div>
+                {transactionData.map((item) => (
+                  <div
+                    key={item.id}
+                    className={`transaction-item ${item.className}`}
+                    onClick={() => onClickToGoDetail(item.id)}
+                  >
+                    <div className="transaction-status">
+                      <div className={`status-dot ${item.statusColor}`}></div>
+                    </div>
+                    <div className="transaction-content">
+                      <div className="transaction-title">{item.accountNumber}</div>
+                      <div className="transaction-details">
+                        <span>
+                          {item.time}ㅣ{item.bank || item.details}
+                        </span>
+                      </div>
+                    </div>
+                    <div className={`status-label ${item.status}`}>
+                      {item.status === 'success' ? '성공' : '실패'}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+            <div className="apply-row">
+              <button
+                className="btn-50 btn-blue flex-1"
+                onClick={() => onClickToNavigation()}
+              >조회 신청</button>
+            </div>
+          </div>
+        </div>
+      </main>
+      <AccountHolderSearchFilter
+        filterOn={filterOn}
+        setFilterOn={setFilterOn}
+        mid={mid}
+        searchType={searchType}
+        searchKeyword={searchKeyword}
+        startDate={startDate}
+        endDate={endDate}
+        bank={bank}
+        processResult={processResult}
+        setMid={setMid}
+        setSearchType={setSearchType}
+        setSearchKeyword={setSearchKeyword}
+        setStartDate={setStartDate}
+        setEndDate={setEndDate}
+        setBank={setBank}
+        setProcessResult={setProcessResult}
+      ></AccountHolderSearchFilter>
     </>
   );
 };

src/pages/additional-service/account-holder-search/detail-page.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { HeaderType } from '@/entities/common/model/types';
+import {
+    useSetHeaderTitle,
+    useSetHeaderType,
+    useSetFooterMode,
+    useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const AccountHolderSearchDetailPage = () => {
+    const { navigate } = useNavigate();
+
+    useSetHeaderTitle('계좌성명조회 상세');
+    useSetHeaderType(HeaderType.LeftArrow);
+    useSetFooterMode(false);
+    useSetOnBack(() => {
+        navigate(PATHS.additionalService.accountHolderSearch.list);
+    });
+
+    return (
+        <>
+            <main className="full-height">
+                <div className="tab-content">
+                    <div className="tab-pane sub active">
+                        <div className="pay-top">
+                            <div className="num-amount">
+                                <span className="amount">10002464******</span>
+                            </div>
+                            <div className="num-store">기업은행</div>
+                            <div className="num-day">2025.09.12 16:12:37</div>
+                        </div>
+                        <div className="detail-divider"></div>
+                        <div className="pay-detail">
+                            <div className="detail-title">상세 정보</div>
+                            <ul className="kv-list">
+                                <li className="kv-row">
+                                    <span className="k">예금주</span>
+                                    <span className="v">&nbsp;</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">조회 일시</span>
+                                    <span className="v">2025.09.12 16:12:37</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">결과</span>
+                                    <span className="v">실패</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">실패사유</span>
+                                    <span className="v">기관미개시</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">은행</span>
+                                    <span className="v">기업은행</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">계좌번호</span>
+                                    <span className="v">1002464642587</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">요청구분</span>
+                                    <span className="v">API</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </>
+    )
+}

src/pages/additional-service/account-holder-search/request-page.tsx

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { HeaderType } from '@/entities/common/model/types';
+import {
+    useSetHeaderTitle,
+    useSetHeaderType,
+    useSetFooterMode,
+    useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const AccountHolderSearchRequestPage = () => {
+    const { navigate } = useNavigate();
+
+
+    useSetHeaderTitle('계좌성명조회_신청');
+    useSetHeaderType(HeaderType.LeftArrow);
+    useSetFooterMode(false);
+    useSetOnBack(() => {
+        navigate(PATHS.additionalService.accountHolderSearch.list);
+    });
+
+    const [formData, setFormData] = useState({
+        mid: 'nictest001m',
+        bank: '',
+        accountNum: ''
+    })
+
+    const handleInputChange = (field: string, value: string) => {
+        setFormData(prev => ({
+            ...prev,
+            [field]: value
+        }));
+    };
+
+    useSetOnBack(() => {
+        navigate(PATHS.additionalService.accountHolderSearch.list);
+    });
+
+    const onClickToRequest = () => {
+        navigate(PATHS.additionalService.accountHolderSearch.list)
+    };
+
+    return (
+        <>
+            <main>
+                <div className="tab-content">
+                    <div className="tab-pane sub active">
+                        <div className="option-list">
+                            <div className="billing-form gap-16">
+                                <div className="billing-row">
+                                    <div className="billing-label">가맹점</div>
+                                    <div className="billing-field">
+                                        <select
+                                            className="wid-100"
+                                            value={formData.mid}
+                                            onChange={(e) => handleInputChange('mid', e.target.value)}
+                                        >
+                                            <option>nictest001m</option>
+                                        </select>
+                                    </div>
+                                </div>
+
+                                <div className="billing-row">
+                                    <div className="billing-label">은행</div>
+                                    <div className="billing-field">
+                                        <select
+                                            className="wid-100"
+                                            value={formData.bank}
+                                            onChange={(e) => handleInputChange('bank', e.target.value)}
+                                        >
+                                            <option>우리은행</option>
+                                            <option>카카오뱅크</option>
+                                        </select>
+                                    </div>
+                                </div>
+
+                                <div className="billing-row">
+                                    <div className="billing-label">계좌번호</div>
+                                    <div className="billing-field">
+                                        <input
+                                            type="number"
+                                            value="10002464******"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="apply-row">
+                            <button
+                                className="btn-50 btn-blue flex-1"
+                                onClick={() => onClickToRequest() }
+                            >신청</button>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </>
+    )
+}

src/pages/additional-service/additional-service-pages.tsx

@@ -29,6 +29,10 @@ import { LinkPaymentApplyConfirmPage } from './link-payment/apply/link-payment-a
 import { LinkPaymentApplySuccessPage } from './link-payment/apply/link-payment-apply-success-page';
 import { LinkPaymentDetailPage } from './link-payment/link-payment-detail-page';
 import { LinkPaymentPendingDetailPage } from './link-payment/link-payment-pending-detail-page';
+import { KeyInPaymentRequestPage } from './key-in-payment/requeset-page';
+import { KeyInPaymentRequestSuccessPage } from './key-in-payment/request-success-page';
+import { AccountHolderSearchRequestPage } from './account-holder-search/request-page';
+import { AccountHolderSearchDetailPage } from './account-holder-search/detail-page';
 
 export const AdditionalServicePages = () => {
   return (
@@ -41,12 +45,20 @@ export const AdditionalServicePages = () => {
           <Route path={ROUTE_NAMES.additionalService.arsCardPayment.request} element={<ArsCardPaymentRequestPage />} />
           <Route path={ROUTE_NAMES.additionalService.arsCardPayment.requestSuccess} element={<ArsCardPaymentRequestSuccessPage />} />
         </Route>
-        <Route path={ROUTE_NAMES.additionalService.keyInPayment} element={<KeyInPaymentPage />} />
+        <Route path={ROUTE_NAMES.additionalService.keyInPayment.base}>
+          <Route path={ROUTE_NAMES.additionalService.keyInPayment.list} element={<KeyInPaymentPage />} />
+          <Route path={ROUTE_NAMES.additionalService.keyInPayment.request} element={<KeyInPaymentRequestPage />} />
+          <Route path={ROUTE_NAMES.additionalService.keyInPayment.requestSuccess} element={<KeyInPaymentRequestSuccessPage />} />
+        </Route>
         <Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentNotificationPage />} />
-        <Route path={ROUTE_NAMES.additionalService.accountHolderSearch} element={<AccountHolderSearchPage />} />
+        <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.base}>
+          <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.list} element={<AccountHolderSearchPage />} />
+          <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.detail} element={<AccountHolderSearchDetailPage />} />
+          <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.request} element={<AccountHolderSearchRequestPage />} />
+        </Route>
         <Route path={ROUTE_NAMES.additionalService.accountHolderAuth} element={<AccountHolderAuthPage />} />
         <Route path={ROUTE_NAMES.additionalService.linkPayment.base}>
-          <Route path={ROUTE_NAMES.additionalService.linkPayment.dispatchList} element={<LinkPaymentDispatchListPage/>} />
+          <Route path={ROUTE_NAMES.additionalService.linkPayment.dispatchList} element={<LinkPaymentDispatchListPage />} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.pendingSend} element={<LinkPaymentPendingSendPage />} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.request} element={<LinkPaymentApplyPage />} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.requestConfirm} element={<LinkPaymentApplyConfirmPage />} />
@@ -73,7 +85,7 @@ export const AdditionalServicePages = () => {
         <Route path={ROUTE_NAMES.additionalService.paymentAgency.base}>
           <Route path={ROUTE_NAMES.additionalService.paymentAgency.list} element={<PaymentAgencyListPage />} />
           <Route path={ROUTE_NAMES.additionalService.paymentAgency.detail} element={<PaymentAgencyDetailPage />} />
-          <Route path={ROUTE_NAMES.additionalService.paymentAgency.request} element={<PaymentAgencyRequestPage />} />        
+          <Route path={ROUTE_NAMES.additionalService.paymentAgency.request} element={<PaymentAgencyRequestPage />} />
         </Route>
       </SentryRoutes>
     </>

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>

src/pages/additional-service/intro/intro-page.tsx

@@ -31,11 +31,11 @@ export const IntroPage = () => {
     },
     {
       className: 'list-wrap01', serviceName: 'KEY-IN 결제', serviceDesc: '상담 중 카드정보 입력으로 간편한 결제 지원',
-      icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment
+      icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment.list
     },
     {
       className: 'list-wrap01', serviceName: '계좌성명조회', serviceDesc: '예금주 정보 입력으로 즉시 예금주 확인',
-      icon: IMAGE_ROOT + '/icon_ing04.svg', path: PATHS.additionalService.accountHolderSearch
+      icon: IMAGE_ROOT + '/icon_ing04.svg', path: PATHS.additionalService.accountHolderSearch.list
     },
   ];
   const requestList = [

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -1,18 +1,156 @@
+import { useState } from 'react';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
-import { 
+import {
-	useSetHeaderTitle,
+  useSetHeaderTitle,
-	useSetHeaderType,
+  useSetHeaderType,
-	useSetFooterMode
+  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { PATHS } from '@/shared/constants/paths';
 
 export const KeyInPaymentPage = () => {
+  const { navigate } = useNavigate();
+
   useSetHeaderTitle('KEY-IN 결제');
   useSetHeaderType(HeaderType.LeftArrow);
-  useSetFooterMode(true);
+  useSetFooterMode(false);
+
+  const onClickToNavigation = () => {
+    navigate(PATHS.additionalService.keyInPayment.request)
+  }
 
   return (
     <>
-    
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <section className="summary-section no-border">
+              <div className="credit-controls">
+                <div>
+                  <input
+                    className="credit-period"
+                    type="text"
+                    value="2025.06.01 ~ 2025.06.31"
+                    readOnly={true}
+                  />
+                  <button
+                    className="filter-btn"
+                    aria-label="필터"
+                  >
+                    <img
+                      src={IMAGE_ROOT + '/ico_setting.svg'}
+                      alt="검색옵션"
+                    />
+                  </button>
+                </div>
+                <button
+                  className="download-btn"
+                  aria-label="다운로드"
+                >
+                  <img
+                    src={IMAGE_ROOT + '/ico_download.svg'}
+                    alt="다운로드"
+                  />
+                </button>
+              </div>
+            </section>
+
+            <section className="filter-section">
+              <div className="sort-options">
+                <button className="sort-btn active">최신순</button>
+                <span className="sort-divider">|</span>
+                <button className="sort-btn">고액순</button>
+              </div>
+              <div className="excrow">
+                <div className="full-menu-keywords no-padding">
+                  <span className="keyword-tag active">전체</span>
+                  <span className="keyword-tag">승인</span>
+                  <span className="keyword-tag">전취소</span>
+                  <span className="keyword-tag">후취소</span>
+                </div>
+              </div>
+            </section>
+
+            <section className="transaction-list">
+              <div className="date-group">
+                <div className="date-header">2025.06.08(일)</div>
+
+                <div className="transaction-item approved">
+                  <div className="transaction-status">
+                    <div className="status-dot blue"></div>
+                  </div>
+                  <div className="transaction-content">
+                    <div className="transaction-title">김*환(7000)</div>
+                    <div className="transaction-details">
+                      <span>20:00ㅣ승인</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">5,254,000원</div>
+                </div>
+
+                <div className="transaction-item refund">
+                  <div className="transaction-status">
+                    <div className="status-dot gray"></div>
+                  </div>
+                  <div className="transaction-content">
+                    <div className="transaction-title">최*길(7000)</div>
+                    <div className="transaction-details">
+                      <span>08:35ㅣ승인</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">23,845,000원</div>
+                </div>
+
+                <div className="transaction-item approved">
+                  <div className="transaction-status">
+                    <div className="status-dot blue"></div>
+                  </div>
+                  <div className="transaction-content">
+                    <div className="transaction-title">김*환(7000)</div>
+                    <div className="transaction-details">
+                      <span>20:00ㅣ승인</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">5,254,000원</div>
+                </div>
+
+                <div className="transaction-item approved">
+                  <div className="transaction-status">
+                    <div className="status-dot blue"></div>
+                  </div>
+                  <div className="transaction-content">
+                    <div className="transaction-title">김*환(7000)</div>
+                    <div className="transaction-details">
+                      <span>20:00ㅣ후취소</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">5,254,000원</div>
+                </div>
+
+                <div className="transaction-item refund">
+                  <div className="transaction-status">
+                    <div className="status-dot gray"></div>
+                  </div>
+                  <div className="transaction-content">
+                    <div className="transaction-title">최*길(7000)</div>
+                    <div className="transaction-details">
+                      <span>20:00ㅣ후취소</span>
+                    </div>
+                  </div>
+                  <div className="transaction-amount">23,845,000원</div>
+                </div>
+              </div>
+            </section>
+            <div className="apply-row">
+              <button
+                className="btn-50 btn-blue flex-1"
+                onClick={() => onClickToNavigation()}
+              >결제 신청</button>
+            </div>
+          </div>
+        </div>
+      </main>
     </>
   );
 };

src/pages/additional-service/key-in-payment/requeset-page.tsx

@@ -0,0 +1,199 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { HeaderType } from '@/entities/common/model/types';
+import { useExtensionKeyinApplyMutation } from '@/entities/additional-service/api/use-extension-keyin-apply-mutation';
+import {
+    useSetHeaderTitle,
+    useSetHeaderType,
+    useSetFooterMode,
+    useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+import { number } from 'framer-motion';
+
+export const KeyInPaymentRequestPage = () => {
+    const { navigate } = useNavigate();
+
+    const { mutateAsync: keyInApply } = useExtensionKeyinApplyMutation();
+
+    useSetHeaderTitle('KEY-IN 결제');
+    useSetHeaderType(HeaderType.LeftArrow);
+    useSetFooterMode(false);
+    useSetOnBack(() => {
+        navigate(PATHS.additionalService.keyInPayment.list);
+    });
+
+    const callKeyInPaymentRequest = () => {
+        let keyInApplyParams = {
+            mid: 'string',
+            goodsName: 'string',
+            amount: 0,
+            buyerName: 'string',
+            email: 'string',
+            phoneNumber: 'string',
+            cardNo: 'string',
+            cardExpirationDate: 'string',
+            instmntMonth: 'string',
+            moid: 'SMS',
+        };
+        keyInApply(keyInApplyParams).then((rs) => {
+            navigate(PATHS.additionalService.arsCardPayment.requestSuccess);
+            console.log(rs)
+        }).catch(() => {
+
+        }).finally(() => {
+
+        });
+
+    };
+
+
+
+
+    const onClickToRequest = () => {
+        callKeyInPaymentRequest();
+    };
+
+    return (
+        <>
+            <main>
+                <div className="tab-content">
+                    <div className="tab-pane sub active">
+                        <div className="option-list">
+                            <div className="billing-form gap-16">
+                                <div className="billing-row">
+                                    <div className="billing-label">가맹점 <span>*</span></div>
+                                    <div className="billing-field">
+                                        <select
+                                            className="wid-100"
+                                        >
+                                            <option>nictest001m</option>
+                                        </select>
+                                    </div>
+                                </div>
+
+                                <div className="billing-row">
+                                    <div className="billing-label">상품명 <span>*</span></div>
+                                    <div className="billing-field">
+                                        <input
+                                            type="text"
+                                            value=""
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className="billing-row">
+                                    <div className="billing-label">상품가격 <span>*</span></div>
+                                    <div className="billing-field">
+                                        <input
+                                            type="text"
+                                            value=""
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className="billing-row">
+                                    <div className="billing-label">구매자명 <span>*</span></div>
+                                    <div className="billing-field">
+                                        <input
+                                            type="text"
+                                            value=""
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className="billing-row">
+                                    <div className="billing-label">구매자 이메일 <span>*</span></div>
+                                    <div className="billing-field">
+                                        <input
+                                            type="email"
+                                            value=""
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className="billing-row">
+                                    <div className="billing-label">구매자 전화번호 <span>*</span></div>
+                                    <div className="billing-field">
+                                        <input
+                                            type="tel"
+                                            value=""
+                                            placeholder=" '-' 제외하고 입력"
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className="billing-row">
+                                    <div className="billing-label">카드번호 <span>*</span></div>
+                                    <div className="billing-field">
+                                        <input
+                                            type="text"
+                                            value=""
+                                        />
+                                    </div>
+                                    <div className="billing-field">
+                                        <input
+                                            type="text"
+                                            value=""
+                                        />
+                                    </div>
+                                    <div className="billing-field">
+                                        <input
+                                            type="text"
+                                            value=""
+                                        />
+                                    </div>
+                                    <div className="billing-field">
+                                        <input
+                                            type="text"
+                                            value=""
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className="billing-row">
+                                    <div className="billing-label">유효기간(월/년)<span>*</span></div>
+                                    <div className="billing-field">
+                                        <input
+                                            type="text"
+                                            value=""
+                                            placeholder='MM/YY'
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className="billing-row">
+                                    <div className="billing-label">할부 기간<span>*</span></div>
+                                    <div className="billing-field">
+                                        <select
+                                            className="wid-100"
+                                        >
+                                            <option>일시불</option>
+                                        </select>
+                                    </div>
+                                </div>
+
+                                <div className="billing-row">
+                                    <div className="billing-label">주문번호</div>
+                                    <div className="billing-field">
+                                        <input
+                                            type="text"
+                                            value=""
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="apply-row">
+                            <button
+                                className="btn-50 btn-blue flex-1"
+                                onClick={() => onClickToRequest() }
+                            >결제 신청</button>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </>
+    )
+}

src/pages/additional-service/key-in-payment/request-success-page.tsx

@@ -0,0 +1,43 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+  useSetHeaderType,
+  useSetFooterMode,
+} from '@/widgets/sub-layout/use-sub-layout';
+export const KeyInPaymentRequestSuccessPage = () => {
+  const { navigate } = useNavigate();
+
+  useSetHeaderType(HeaderType.NoHeader);
+  useSetFooterMode(false);
+
+  const onClickToNavigate = () => {
+    navigate(PATHS.additionalService.keyInPayment.list);
+  };
+
+  return (
+    <>
+      <div className="success-page" >
+        <div className="success-body">
+          <div 
+            className="success-icon"
+            aria-hidden="true"
+          ></div>
+          <h1 className="success-title">
+            <span>KEY-IN 결제</span><br/>
+            <span>결제 신청이 완료되었습니다.</span>
+          </h1>
+          <div className="success-result">
+            <p className="result-text">결과 : [0000] ARS 요청 처리 완료</p>
+          </div>
+        </div>
+        <div className="apply-row">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToNavigate() }
+          >확인</button>
+        </div>
+      </div>
+    </>
+  );
+};

src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx

@@ -13,6 +13,9 @@ import {
     useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 
+/**
+ * 발송내역 탭 화면
+ */
 
 export const LinkPaymentDispatchListPage = () => {
     const { navigate } = useNavigate();
@@ -30,7 +33,7 @@ export const LinkPaymentDispatchListPage = () => {
         <>
             <main>
                 <div className="tab-content">
-                    <div className="tab-pane sub active">
+                    <div className="tab-pane pt-46 active">
                         <LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
                         <LinkPaymentDispatchListWrap></LinkPaymentDispatchListWrap>
                     </div>

src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx

@@ -14,6 +14,9 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment/link-payment-filter';
 
+/**
+ * 발송대기 탭 화면
+ */
 export const LinkPaymentPendingSendPage = () => {
     const { navigate } = useNavigate();
 
@@ -30,7 +33,7 @@ export const LinkPaymentPendingSendPage = () => {
         <>
             <main>
                 <div className="tab-content">
-                    <div className="tab-pane sub active">
+                    <div className="tab-pane pt-46 active">
                         <LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
                         <LinkPaymentPendingSendWrap></LinkPaymentPendingSendWrap>
                     </div>

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>

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>

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>

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>

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>

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>

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 { 
@@ -19,25 +19,33 @@ import {
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 
-const serviceCodes = [
+const requestStatusBtnGroup = [
-	{name: '전체', key: 'all'},
+	{name: '전체', value: BillingRequestStatus.ALL},
-	{name: '진행중', key: 'process'},
+	{name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
-	{name: '성공', key: 'success'},
+	{name: '성공', value: BillingRequestStatus.SUCCESS},
-	{name: '요청취소', key: 'cancel'}
+	{name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL}
 ];
 
 export const BillingListPage = () => {
 	const { navigate } = useNavigate();
 	const userInfo = useStore((state) => state.UserStore.UserInfo);
 
-	const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	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);
+	const [minAmount, setMinAmount] = useState<number | string>();
+	const [maxAmount, setMaxAmount] = useState<number | string>();
+
 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);
 	useSetOnBack(() => {
@@ -54,15 +62,25 @@ export const BillingListPage = () => {
   }) => {
 		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
     setPageParam(pageParam);
+		let newMinAmount = minAmount;
+		if(!!minAmount && typeof(minAmount) === 'string'){
+			newMinAmount = parseInt(minAmount);
+		}
+		let newMaxAmount = maxAmount;
+		if(!!maxAmount && typeof(maxAmount) === 'string'){
+			newMaxAmount = parseInt(maxAmount);
+		}
     let listParams = {
-      mid: 'nictest001m',
+      mid: mid,
-      searchType: 'ALL',
+      searchType: searchType,
-			searchKeyword: '',
+			searchKeyword: searchKeyword,
       startDate: startDate,
       endDate: endDate,
-      requestStatus: 'ALL',
+      requestStatus: requestStatus,
-      processResult: 'ALL',
+      processResult: processResult,
-      paymentMethod: 'ALL',
+      paymentMethod: paymentMethod,
+			minAmount: newMinAmount,
+			maxAmount: newMaxAmount,
 			pagination: pageParam
     };    
     
@@ -103,8 +121,8 @@ export const BillingListPage = () => {
     callList({sortBy: sort});
   };
 
-	const onClickToServiceCode = (val: string) => {
+	const onClickToRequestStatus = (val: BillingRequestStatus) => {
-    setSelectedServiceCode(val);
+    setRequestStatus(val);
     callList({val: val});
   };
 
@@ -152,11 +170,11 @@ export const BillingListPage = () => {
 							<div className="excrow">
 								<div className="full-menu-keywords no-padding">
 								{
-									serviceCodes.map((value, index) => (
+									requestStatusBtnGroup.map((value, index) => (
 										<span 
 											key={ `key-service-code=${ index }` }
-											className={ `keyword-tag ${(selectedServiceCode === value.key)? 'active': ''}` }
+											className={ `keyword-tag ${(requestStatus === value.value)? 'active': ''}` }
-											onClick={ () => onClickToServiceCode(value.key) }
+											onClick={ () => onClickToRequestStatus(value.value) }
 										>{ value.name }</span>
 									))
 								}
@@ -170,10 +188,30 @@ 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 }
+				minAmount={ minAmount }
+				maxAmount={ maxAmount }
+				setMid={ setMid }
+				setSearchType={ setSearchType }
+				setSearchKeyword={ setSearchKeyword }
+				setStartDate={ setStartDate }
+				setEndDate={ setEndDate }
+				setRequestStatus={ setRequestStatus }
+				setProcessResult={ setProcessResult }
+				setPaymentMethod={ setPaymentMethod }
+				setMinAmount={ setMinAmount }
+				setMaxAmount={ setMaxAmount }
+      ></BillingFilter>
 		</>
 	);
 };

src/pages/transaction/cash-receipt/list-page.tsx

@@ -12,7 +12,7 @@ import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
 import { Filter } from '@/entities/transaction/ui/filter';
 import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
 import { HeaderType } from '@/entities/common/model/types';
-import { 
+import {
 	useSetOnBack,
 	useSetHeaderTitle,
 	useSetHeaderType,
@@ -20,22 +20,22 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 
 const serviceCodes = [
-	{name: '전체', key: 'all'},
+	{ name: '전체', key: 'all' },
-	{name: '승인', key: 'approval'},
+	{ name: '승인', key: 'approval' },
-	{name: '취소', key: 'cancel'}
+	{ name: '취소', key: 'cancel' }
 ];
 
 export const CashReceiptListPage = () => {
 	const { navigate } = useNavigate();
 
-  const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
+	const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	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('YYYYMMDD'));
 	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
-		
+
 	useSetHeaderTitle('현금영수증');
 	useSetHeaderType(HeaderType.LeftArrow);
 	useSetOnBack(() => {
@@ -45,70 +45,70 @@ export const CashReceiptListPage = () => {
 
 	const { mutateAsync: cashReceiptList } = useCashReceiptListMutation();
 	const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
-	
+
 	const callList = (option?: {
-    sortBy?: string, 
+		sortBy?: string,
-    val?: string
+		val?: string
-  }) => {
+	}) => {
-		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+		pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
-    setPageParam(pageParam);
+		setPageParam(pageParam);
 		let listParams = {
-      mid: 'string',
+			mid: 'string',
-      startDate: '2025-06-08',
+			startDate: '2025-06-08',
-  		endDate: '2025-06-08',
+			endDate: '2025-06-08',
-  		purposeType: 'ALL',
+			purposeType: 'ALL',
-  		issueStatus: 'ALL',
+			issueStatus: 'ALL',
-  		processResult: 'ALL',
+			processResult: 'ALL',
 			pagination: pageParam
-    };
+		};
-    
+
-    cashReceiptList(listParams).then((rs) => {
+		cashReceiptList(listParams).then((rs) => {
 			console.log(rs)
-      setListItems(assembleData(rs.content));
+			setListItems(assembleData(rs.content));
-    });
+		});
-    
+
-  };
+	};
 
 	const assembleData = (content: Array<CashReceiptListItem>) => {
-    let data: any = {};
+		let data: any = {};
-    if(content && content.length > 0){
+		if (content && content.length > 0) {
-      for(let i=0;i<content?.length;i++){
+			for (let i = 0; i < content?.length; i++) {
-       let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
+				let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
-        if(!!groupDate && !data.hasOwnProperty(groupDate)){
+				if (!!groupDate && !data.hasOwnProperty(groupDate)) {
-          data[groupDate] = [];
+					data[groupDate] = [];
-        }
+				}
-        if(!!groupDate && data.hasOwnProperty(groupDate)){
+				if (!!groupDate && data.hasOwnProperty(groupDate)) {
-          data[groupDate].push(content[i]);
+					data[groupDate].push(content[i]);
-        }
+				}
-      }
+			}
-    }
+		}
-    return data;
+		return data;
-  };
+	};
 
 	const onClickToOpenFilter = () => {
-    setFilterOn(!filterOn);
+		setFilterOn(!filterOn);
-  };
+	};
-  const onClickToDownloadExcel = () => {
+	const onClickToDownloadExcel = () => {
-    // tid??? 확인 필요
+		// tid??? 확인 필요
-    downloadExcel({
+		downloadExcel({
-      // tid: tid
+			// tid: tid
-    }).then((rs) => {
+		}).then((rs) => {
+
+		});
+	};
+	const onCliCkToSort = (sort: SortByKeys) => {
+		setSortBy(sort);
+		callList({ sortBy: sort });
+	};
 
-    });
-  };
-  const onCliCkToSort = (sort: SortByKeys) => {
-    setSortBy(sort);
-    callList({sortBy: sort});
-  };
-	
 	const onClickToServiceCode = (val: string) => {
-    setSelectedServiceCode(val);
+		setSelectedServiceCode(val);
-    callList({val: val});
+		callList({ val: val });
-  };
+	};
 
-  useEffect(() => {
+	useEffect(() => {
-    callList();
+		callList();
-  }, []);
+	}, []);
 
 	return (
 		<>
@@ -118,26 +118,26 @@ export const CashReceiptListPage = () => {
 						<div className="summary-section">
 							<div className="credit-controls">
 								<div>
-									<input 
+									<input
-										type="text" 
+										type="text"
-										className="credit-period" 
+										className="credit-period"
-										value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') } 
+										value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
-										readOnly={ true } 
+										readOnly={true}
 									/>
 									<button className="filter-btn">
-										<img 
+										<img
-                      src={ IMAGE_ROOT + '/ico_setting.svg' } 
+											src={IMAGE_ROOT + '/ico_setting.svg'}
-                      alt="검색옵션"
+											alt="검색옵션"
-                      onClick={ () => onClickToOpenFilter() }
+											onClick={() => onClickToOpenFilter()}
-                    />
+										/>
 									</button>
 								</div>
 								<button className="download-btn">
-									<img 
+									<img
-										src={ IMAGE_ROOT + '/ico_download.svg' } 
+										src={IMAGE_ROOT + '/ico_download.svg'}
 										alt="다운로드"
-										onClick={ () => onClickToDownloadExcel() }
+										onClick={() => onClickToDownloadExcel()}
-                  />
+									/>
 								</button>
 							</div>
 							<div className="credit-summary">
@@ -145,19 +145,19 @@ export const CashReceiptListPage = () => {
 									<span className="label">승인</span>
 									<strong className="amount22">
 										<NumericFormat
-											value={ 83745200 } 
+											value={83745200}
 											thousandSeparator
 											displayType="text"
-											suffix={ '원' }
+											suffix={'원'}
-										></NumericFormat> 
+										></NumericFormat>
 									</strong>
 									<span className="count">
 										<NumericFormat
-											value={ 2745 } 
+											value={2745}
 											thousandSeparator
 											displayType="text"
-											prefix={ '(' }
+											prefix={'('}
-											suffix={ '건)' }
+											suffix={'건)'}
 										></NumericFormat>
 									</span>
 								</div>
@@ -165,55 +165,55 @@ export const CashReceiptListPage = () => {
 									<span className="label">취소</span>
 									<strong className="amount19">
 										<NumericFormat
-											value={ 534407 } 
+											value={534407}
 											thousandSeparator
 											displayType="text"
-											suffix={ '원' }
+											suffix={'원'}
 										></NumericFormat>
 									</strong>
 									<span className="count">
 										<NumericFormat
-											value={ 32 } 
+											value={32}
 											thousandSeparator
 											displayType="text"
-											prefix={ '(' }
+											prefix={'('}
-											suffix={ '건)' }
+											suffix={'건)'}
 										></NumericFormat>
 									</span>
 								</div>
 							</div>
 						</div>
-							
+
 						<div className="filter-section">
 							<SortOptionsBox
-                sortBy={ sortBy }
+								sortBy={sortBy}
-                onCliCkToSort={ onCliCkToSort }
+								onCliCkToSort={onCliCkToSort}
-              ></SortOptionsBox>
+							></SortOptionsBox>
-              <div>
+							<div>
 								<div className="full-menu-keywords no-padding">
-								{
+									{
-									serviceCodes.map((value, index) => (
+										serviceCodes.map((value, index) => (
-										<span 
+											<span
-											key={ `key-service-code=${ index }` }
+												key={`key-service-code=${index}`}
-											className={ `keyword-tag ${(selectedServiceCode === value.key)? 'active': ''}` }
+												className={`keyword-tag ${(selectedServiceCode === value.key) ? 'active' : ''}`}
-											onClick={ () => onClickToServiceCode(value.key) }
+												onClick={() => onClickToServiceCode(value.key)}
-										>{ value.name }</span>
+											>{value.name}</span>
-									))
+										))
-								}
+									}
 								</div>
 							</div>
 						</div>
-						<CashReceiptList 
+						<CashReceiptList
-							listItems={ listItems }
+							listItems={listItems}
-							transactionCategory={ TransactionCategory.CashReceipt }
+							transactionCategory={TransactionCategory.CashReceipt}
-						></CashReceiptList> 
+						></CashReceiptList>
 					</div>
 				</div>
 			</main>
 			<Filter
-        filterOn={ filterOn }
+				filterOn={filterOn}
-        setFilterOn={ setFilterOn }
+				setFilterOn={setFilterOn}
-      ></Filter>
+			></Filter>
 		</>
 	);
 };

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';

src/shared/constants/paths.ts

@@ -157,9 +157,37 @@ export const PATHS: RouteNamesType = {
         ROUTE_NAMES.additionalService.arsCardPayment.requestSuccess,
       ),
     },
-    keyInPayment: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.keyInPayment),
+    keyInPayment: {
+      base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.keyInPayment.base}`),
+      list: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.keyInPayment.base}`,
+        ROUTE_NAMES.additionalService.keyInPayment.list
+      ),
+      request: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.keyInPayment.base}`,
+        ROUTE_NAMES.additionalService.keyInPayment.request,
+      ),
+      requestSuccess: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.keyInPayment.base}`,
+        ROUTE_NAMES.additionalService.keyInPayment.requestSuccess,
+      ),
+    },
     smsPaymentNotification: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.smsPaymentNotification),
-    accountHolderSearch: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderSearch),
+    accountHolderSearch: {
+      base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.accountHolderSearch.base}`),
+      list: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.accountHolderSearch.base}`,
+        ROUTE_NAMES.additionalService.accountHolderSearch.list
+      ),
+      detail: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.accountHolderSearch.base}`,
+        ROUTE_NAMES.additionalService.accountHolderSearch.detail
+      ),
+      request: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.accountHolderSearch.base}`,
+        ROUTE_NAMES.additionalService.accountHolderSearch.request,
+      )
+    },
     accountHolderAuth: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderAuth),
     linkPayment: {
       base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`),

src/shared/constants/route-names.ts

@@ -76,9 +76,19 @@ export const ROUTE_NAMES = {
       request: 'request',
       requestSuccess: 'request-success',
     },
-    keyInPayment: 'key-in-payment',
+    keyInPayment: {
+      base: '/key-in-payment/*',
+      list: 'list',
+      request: 'request',
+      requestSuccess: 'request-success',
+    },
     smsPaymentNotification: 'sms-payment-notification',
-    accountHolderSearch: 'account-holder-search',
+    accountHolderSearch: {
+      base: '/account-holder-search/*',
+      list: 'list',
+      detail: 'detail',
+      request: 'request'
+    },
     accountHolderAuth: 'account-holder-auth',
     linkPayment: {
       base: '/link-payment/*',
@@ -107,7 +117,7 @@ export const ROUTE_NAMES = {
       deposit: 'deposit',
       member: 'member',
       register: 'register',
-      detail: 'detail',      
+      detail: 'detail',
     },
     paymentAgency: {
       base: '/payment-agency/*',
@@ -115,7 +125,7 @@ export const ROUTE_NAMES = {
       detail: 'detail',
       request: 'request',
     },
-    
+
   },
   support: {
     base: '/support/*',

src/shared/lib/appBridge.ts

@@ -0,0 +1,255 @@
+import {
+  AppBridgeMessage,
+  AppBridgeResponse,
+  BridgeMessageType,
+  DeviceInfo,
+  ShareContent
+} from '@/types';
+import { LoginCredentials, UserInfo } from '@/types/auth';
+
+class AppBridge {
+  private static instance: AppBridge;
+  private messageId = 0;
+  private pendingCallbacks = new Map<string, (response: AppBridgeResponse) => void>();
+  private responseListeners: Set<(response: AppBridgeResponse) => void> = new Set();
+
+  private constructor() {
+    this.setupMessageListener();
+  }
+
+  // 외부에서 네이티브 응답을 구독할 수 있도록 리스너 등록/해제 메서드 추가
+  public addResponseListener(listener: (response: AppBridgeResponse) => void) {
+    this.responseListeners.add(listener);
+  }
+
+  public removeResponseListener(listener: (response: AppBridgeResponse) => void) {
+    this.responseListeners.delete(listener);
+  }
+
+  static getInstance(): AppBridge {
+    if (!AppBridge.instance) {
+      AppBridge.instance = new AppBridge();
+    }
+    return AppBridge.instance;
+  }
+
+  private setupMessageListener(): void {
+    window.addEventListener('message', (event) => {
+      try {
+        const response: AppBridgeResponse & { callbackId?: string } = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+        console.log('response', response);
+        if (response.callbackId && this.pendingCallbacks.has(response.callbackId)) {
+          const callback = this.pendingCallbacks.get(response.callbackId);
+          if (callback) {
+            callback(response);
+            this.pendingCallbacks.delete(response.callbackId);
+          }
+        }
+        // 등록된 리스너들에게 모든 응답 전달
+        this.responseListeners.forEach(listener => listener(response));
+      } catch (error) {
+        console.error('Failed to parse bridge message:', error);
+      }
+    });
+  }
+
+  private generateMessageId(): string {
+    return `bridge_${++this.messageId}_${Date.now()}`;
+  }
+
+  private sendMessage<T>(type: BridgeMessageType, data?: unknown): Promise<T> {
+    return new Promise((resolve, reject) => {
+      const callbackId = this.generateMessageId();
+      const message: AppBridgeMessage & { callbackId: string } = {
+        type,
+        data,
+        callbackId
+      };
+
+      this.pendingCallbacks.set(callbackId, (response: AppBridgeResponse) => {
+        if (response.success) {
+          resolve(response.data);
+        } else {
+          reject(new Error(response.error || 'Bridge call failed'));
+        }
+      });
+
+      // Android WebView 인터페이스
+      if (window.AndroidBridge && window.AndroidBridge.postMessage) {
+        console.log('Android postMessage', message);
+        window.AndroidBridge.postMessage(JSON.stringify(message));
+        return;
+      }
+      
+      // iOS WKWebView 인터페이스
+      if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.bridge) {
+        console.log('iOS postMessage', message);
+        window.webkit.messageHandlers.bridge.postMessage(message);
+        return;
+      }
+
+      // 네이티브 환경이 아닌 경우 에러 발생
+      setTimeout(() => {
+        this.pendingCallbacks.delete(callbackId);
+        reject(new Error('Native bridge not available'));
+      }, 100);
+    });
+  }
+
+  // 앱 정보 관련
+  async getAppInfo(): Promise<{ version: string; buildNumber: string }> {
+    return this.sendMessage(BridgeMessageType.GET_APP_INFO);
+  }
+
+  async getDeviceInfo(): Promise<DeviceInfo> {
+    return this.sendMessage(BridgeMessageType.GET_DEVICE_INFO);
+  }
+
+  // 네비게이션 관련
+  async navigateBack(): Promise<void> {
+    return this.sendMessage(BridgeMessageType.NAVIGATE_BACK);
+  }
+
+  async navigateTo(path: string): Promise<void> {
+    return this.sendMessage(BridgeMessageType.NAVIGATE_TO, { path });
+  }
+
+  async navigateToLogin(): Promise<void> {
+    return this.sendMessage(BridgeMessageType.NAVIGATE_TO_LOGIN);
+  }
+
+  async closeWebView(): Promise<void> {
+    return this.sendMessage(BridgeMessageType.CLOSE_WEBVIEW);
+  }
+
+  // 알림 관련
+  async showToast(message: string, duration: number = 3000): Promise<void> {
+    return this.sendMessage(BridgeMessageType.SHOW_TOAST, { message, duration });
+  }
+
+  async showAlert(title: string, message: string): Promise<void> {
+    return this.sendMessage(BridgeMessageType.SHOW_ALERT, { title, message });
+  }
+
+  async showConfirm(title: string, message: string): Promise<boolean> {
+    return this.sendMessage(BridgeMessageType.SHOW_CONFIRM, { title, message });
+  }
+
+  // 저장소 관련
+  async setStorage(key: string, value: unknown): Promise<void> {
+    return this.sendMessage(BridgeMessageType.SET_STORAGE, { key, value: JSON.stringify(value) });
+  }
+
+  async getStorage<T>(key: string): Promise<T | null> {
+    try {
+      const result = await this.sendMessage<string>(BridgeMessageType.GET_STORAGE, { key });
+      return result ? JSON.parse(result) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  async removeStorage(key: string): Promise<void> {
+    return this.sendMessage(BridgeMessageType.REMOVE_STORAGE, { key });
+  }
+
+  // 공유 관련
+  async shareContent(content: ShareContent): Promise<void> {
+    return this.sendMessage(BridgeMessageType.SHARE_CONTENT, content);
+  }
+
+  // 로그인 요청
+  async login(credentials?: LoginCredentials): Promise<UserInfo> {
+    return this.sendMessage(BridgeMessageType.LOGIN, credentials);
+  }
+
+  async logout(): Promise<void> {
+    return this.sendMessage(BridgeMessageType.LOGOUT);
+  }
+
+  // 언어 설정
+  async setLanguage(language: string): Promise<void> {
+    return this.sendMessage(BridgeMessageType.SET_LANGUAGE, { language });
+  }
+
+  async getLanguage(): Promise<string> {
+    return this.sendMessage(BridgeMessageType.GET_LANGUAGE);
+  }
+
+  // 메시지 카운트 업데이트
+  async updateMessageCount(count: number): Promise<void> {
+    return this.sendMessage(BridgeMessageType.UPDATE_MESSAGE_COUNT, { count });
+  }
+
+  // 네이티브 환경 체크
+  isNativeEnvironment(): boolean {
+    return !!(
+      (window.AndroidBridge && window.AndroidBridge.postMessage) ||
+      (window.Android && window.Android.processMessage) ||
+      (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.bridge)
+    );
+  }
+
+  isAndroid(): boolean {
+    return !!(
+      (window.AndroidBridge && window.AndroidBridge.postMessage) ||
+      (window.Android && window.Android.processMessage)
+    );
+  }
+
+  isIOS(): boolean {
+    return !!(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.bridge);
+  }
+
+  // 에러 핸들링을 위한 래퍼 메소드들
+  async safeCall<T>(
+    bridgeMethod: () => Promise<T>,
+    fallback?: T,
+    onError?: (error: Error) => void
+  ): Promise<T | undefined> {
+    try {
+      return await bridgeMethod();
+    } catch (error) {
+      console.error('Bridge call failed:', error);
+      if (onError) {
+        onError(error as Error);
+      }
+      return fallback;
+    }
+  }
+
+  // 타임아웃을 가진 브리지 호출
+  async callWithTimeout<T>(
+    bridgeMethod: () => Promise<T>,
+    timeout: number = 5000
+  ): Promise<T> {
+    return Promise.race([
+      bridgeMethod(),
+      new Promise<never>((_, reject) => 
+        setTimeout(() => reject(new Error('Bridge call timeout')), timeout)
+      )
+    ]);
+  }
+}
+
+// 글로벌 타입 선언 확장
+declare global {
+  interface Window {
+    AndroidBridge?: {
+      postMessage: (message: string) => void;
+    };
+    Android?: {
+      processMessage: (message: string) => void;
+    };
+    webkit?: {
+      messageHandlers?: {
+        bridge?: {
+          postMessage: (message: unknown) => void;
+        };
+      };
+    };
+  }
+}
+
+export const appBridge = AppBridge.getInstance();
+export default appBridge;

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

@@ -29,4 +29,10 @@ main {
 .kv-list{
   padding-bottom: 20px;
   z-index: 10;
+}
+
+/* calendar */
+.react-calendar{
+  margin: 10% auto;
+
 }

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

@@ -0,0 +1,54 @@
+import moment from 'moment';
+import styled from "styled-components";
+import { useState } from 'react';
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+import { useEffect } from 'react';
+
+interface NiceCalendarProps {
+  calendarOpen: boolean;
+  setNewDate: (date: string) => void;
+};
+
+const NiceCalendar = ({
+  calendarOpen,
+  setNewDate
+}: NiceCalendarProps) => {
+  const [calendarDate, setCalendarDate] = useState<string>(moment().format('YYYY-MM-DD'));
+   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const onchangeToDate = (selectedDate: any) => {
+    setNewDate(moment(selectedDate).format('YYYY-MM-DD'));
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    console.log(calendarOpen)
+    setIsOpen(calendarOpen);
+  }, [calendarOpen])
+
+  return (
+    <>
+      { (isOpen) && 
+        <>
+        <div className="bg-dim"></div>
+        <CalendarWrapper>
+          <Calendar
+            onChange={ onchangeToDate }
+            value={ calendarDate }
+          ></Calendar>
+        </CalendarWrapper>
+        </>
+      }
+    </>
+  );
+};
+const CalendarWrapper = styled.div`
+  z-index: 1100;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+`;
+
+export default NiceCalendar;

src/shared/ui/filter/button-groups.tsx

@@ -0,0 +1,47 @@
+import { FilterButtonGroupsProps } from '@/entities/common/model/types';
+
+export const FilterButtonGroups = ({
+  title,
+  activeValue,
+  btnGroups,
+  setter,
+}: FilterButtonGroupsProps) => {
+
+  const getBtns = () => {
+    let rs = [];
+    if(!!btnGroups && btnGroups.length > 0){
+      let emptySpanCnt = 4 % btnGroups.length;
+      for(let i=0;i<btnGroups.length;i++){
+        rs.push(
+          <span 
+            key={ `key-btngroup-span-${i}` }
+            className={ `keyword-tag flex-1 ${(activeValue === btnGroups[i]?.value)? 'active': ''}` }
+            onClick={ () => setter(btnGroups[i]?.value || '') }
+          >{ btnGroups[i]?.name }</span>
+        )
+      }
+      for(let i=0;i<emptySpanCnt;i++){
+        rs.push(
+          <span 
+            key={ `key-btngroup-span-nodata-${i}` }
+            className="keyword-tag flex-1" 
+            style={{ visibility: 'hidden' }}
+          ></span>
+        );
+      }
+    }
+    return rs;
+  };
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ title }</div>
+        <div className="opt-controls col below h36">
+          <div className="chip-row">
+            { getBtns() }
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,153 @@
+import moment from 'moment';
+import { ChangeEvent, useState } from 'react';
+import { FilterDateOptions } from '@/entities/common/model/types';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import NiceCalendar from '../calendar/nice-calendar';
+import { useEffect } from 'react';
+
+interface FilterCalendarProps {
+  title?: string;
+  startDate: string;
+  endDate: string;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+};
+
+export const FilterCalendar = ({
+  title,
+  startDate,
+  endDate,
+  setStartDate,
+  setEndDate
+}: FilterCalendarProps) => {
+  const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간');
+  const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false);
+  const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
+  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
+  const [activceCalendar, setActiveCalendar] = useState<string>();
+  
+  const setFilterDate = (dateOptions: FilterDateOptions) => {
+    if(dateOptions === FilterDateOptions.Today){
+      setStartDate(moment().format('YYYY-MM-DD'));
+      setEndDate(moment().format('YYYY-MM-DD'));
+      setDateReadyOnly(true);
+      setFilterDateOptionsBtn(FilterDateOptions.Today);
+    } 
+    else if(dateOptions === FilterDateOptions.Week){
+      setStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
+      setEndDate(moment().format('YYYY-MM-DD'));
+      setDateReadyOnly(true);
+      setFilterDateOptionsBtn(FilterDateOptions.Week);
+    }
+    else if(dateOptions === FilterDateOptions.Month){
+      setStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+      setEndDate(moment().format('YYYY-MM-DD'));
+      setDateReadyOnly(true);
+      setFilterDateOptionsBtn(FilterDateOptions.Month);
+    }
+    else if(dateOptions === FilterDateOptions.Input){
+      setDateReadyOnly(false);
+      setFilterDateOptionsBtn(FilterDateOptions.Input);
+    }
+    
+  };
+
+  const onClickToOpenCalendar = (key: string) => {
+    if(!dateReadOnly){
+      setCalendarOpen(true);
+      setActiveCalendar(key);
+    }
+    else{
+      setCalendarOpen(false);
+      setActiveCalendar('');
+    }
+  };
+
+  const setNewDate = (date: string) => {
+    if(activceCalendar === 'start'){
+      setStartDate(date);
+    }
+    else if(activceCalendar === 'end'){
+      setEndDate(date);
+    }
+    setCalendarOpen(false);
+  }
+
+  useEffect(() => {
+    
+  }, []);
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ filterTitle }</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
+                id="startDate"
+                className="date-input"
+                type="text"
+                placeholder="날짜 선택"
+                value={ startDate }
+                readOnly={ true }
+              />
+              <button
+                type="button"
+                className="date-btn"
+                onClick={ () => onClickToOpenCalendar('start') }
+              >
+                <img
+                  src={ IMAGE_ROOT + '/ico_date.svg' }
+                  alt="날짜 선택"
+                />
+              </button>
+            </div>
+            <span className="beetween">~</span>
+            <div className="input-wrapper date">
+              <input
+                id="endDate"
+                className="date-input"
+                type="text"
+                placeholder="날짜 선택"
+                value={ endDate }
+                readOnly={ true }
+              />
+              <button 
+                type="button" 
+                className="date-btn"
+                onClick={ () => onClickToOpenCalendar('end') }
+              >
+                <img
+                  src={ IMAGE_ROOT + '/ico_date.svg' }
+                  alt="날짜 선택"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <NiceCalendar
+        calendarOpen={ calendarOpen }
+        setNewDate={ setNewDate }
+      ></NiceCalendar>
+    </>
+  );
+};

src/shared/ui/filter/input.tsx

@@ -0,0 +1,30 @@
+import { ChangeEvent } from 'react';
+
+export interface FilterInputProps {
+  title: string;
+  inputValue: string;
+  inputSetter: (value: any) => void;
+};
+export const FilterInput = ({
+  title,
+  inputValue,
+  inputSetter
+}: FilterInputProps) => {
+
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ title }</div>
+        <div className="opt-controls">
+          <input
+            className="flex-1"
+            type="text"
+            placeholder=""
+            value={ inputValue }
+            onChange={ (e: ChangeEvent<HTMLInputElement>) => inputSetter(e.target.value)}
+          />
+        </div>
+      </div>
+    </>
+  );
+};

src/shared/ui/filter/range-amount.tsx

@@ -0,0 +1,44 @@
+import { FilterRangeAmountProps } from '@/entities/common/model/types';
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { ChangeEvent } from 'react';
+
+export const FilterRangeAmount = ({
+  title,
+  minAmount,
+  maxAmount,
+  setMinAmount,
+  setMaxAmount,
+}: FilterRangeAmountProps) => {
+  const [filterTitle, setFilterTitle] = useState<string>(title || '거래금액');
+
+  useEffect(() => {
+    setFilterTitle(title || '거래금액');
+  }, [title])
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ filterTitle }</div>
+        <div className="opt-controls">
+          <div className="input-wrapper ">
+            <input
+              type="text"
+              placeholder=""
+              value={ minAmount }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMinAmount(e.target.value) }
+            />
+          </div>
+          <span> ~ </span>
+          <div className="input-wrapper date">
+            <input
+              type="text"
+              placeholder=""
+              value={ maxAmount }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMaxAmount(e.target.value) }
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,56 @@
+import { ChangeEvent } from 'react';
+
+export interface FilterSelectInputProps {
+  title: string;
+  selectValue: string;
+  selectSetter: (value: any) => void;
+  selectOptions: Array<Record<string, string>>;
+  inputValue: string;
+  inputSetter: (value: any) => void;
+};
+export const FilterSelectInput = ({
+  title,
+  selectValue,
+  selectSetter,
+  selectOptions,
+  inputValue,
+  inputSetter
+}: FilterSelectInputProps) => {
+  
+  const getSelectOptions = () => {
+    let rs = [];
+    for(let i=0;i<selectOptions.length;i++){
+      rs.push(
+        <option
+          key={ `key-filter-select-input-${i}` }
+          value={ selectOptions[i]?.value }
+        >{ selectOptions[i]?.name }</option>
+      );
+    }
+    return rs;
+  };
+
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ title }</div>
+        <div className="opt-controls">
+          <select 
+            className="w-110"
+            value={ selectValue } 
+            onChange={ (e: any) => selectSetter(e.target.value)}
+          >
+          { getSelectOptions() }
+          </select>
+          <input
+            className="flex-1"
+            type="text"
+            placeholder=""
+            value={ inputValue }
+            onChange={ (e: ChangeEvent<HTMLInputElement>) => inputSetter(e.target.value)}
+          />
+        </div>
+      </div>
+    </>
+  );
+};

src/shared/ui/filter/select.tsx

@@ -0,0 +1,43 @@
+export interface FilterSelectProps {
+  title: string;
+  selectValue: string;
+  selectSetter: (value: any) => void;
+  selectOptions: Array<Record<string, string>>;
+};
+export const FilterSelect = ({
+  title,
+  selectValue,
+  selectSetter,
+  selectOptions,
+}: FilterSelectProps) => {
+
+  const getSelectOptions = () => {
+    let rs = [];
+    for(let i=0;i<selectOptions.length;i++){
+      rs.push(
+        <option
+          key={ `key-filter-select-${i}` }
+          value={ selectOptions[i]?.value }
+        >{ selectOptions[i]?.name }</option>
+      );
+    }
+    return rs;
+  };
+  
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ title }</div>
+        <div className="opt-controls">
+          <select 
+            className="flex-1"
+            value={ selectValue } 
+            onChange={ (e: any) => selectSetter(e.target.value)}
+          >
+            { getSelectOptions() }
+          </select>
+        </div>
+      </div>
+    </>
+  );
+};

src/shared/ui/menu/index.tsx

@@ -83,9 +83,9 @@ export const Menu = ({
       items: [
         {title: '부가서비스소개', path: PATHS.additionalService.intro},
         {title: 'ARS 카드결제', path: PATHS.additionalService.arsCardPayment.list},
-        {title: 'KEY-IN 결제', path: PATHS.additionalService.keyInPayment},
+        {title: 'KEY-IN 결제', path: PATHS.additionalService.keyInPayment.list},
         {title: 'SMS 결제 통보', path: PATHS.additionalService.smsPaymentNotification},
-        {title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch},
+        {title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch.list},
         {title: '계좌점유인증', path: PATHS.additionalService.accountHolderAuth},
         {title: '링크결제', path: PATHS.additionalService.linkPayment.dispatchList},
         {title: '알림톡 결제통보', path: PATHS.additionalService.kakaoPaymentNotification.list},