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

2025-09-12 17:36:14 +09:00
parent 7c8873714d 3b89dbdbb6
commit a7c605b984
12 changed files with 782 additions and 144 deletions
--- a/src/entities/additional-service/model/types.ts
+++ b/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;
@@ -311,10 +321,34 @@ export interface SettlementAgencyBottomAgreeProps {
  bottomAgreeOn: boolean;
  setBottomAgreeOn: (bottomAgreeOn: boolean) => void;
 };
-export interface LinkPaymentFilterProps {
+/**
+ * FilterProps
+ */
+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'
--- a/src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx
+++ b/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>
+        </>
+    )
+
+}
--- a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
+++ b/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 { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
+import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/account-holder-search-filter';
+import { AccountHolderSearchProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types';
 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>
    </>
  );
 };
--- a/src/pages/additional-service/account-holder-search/detail-page.tsx
+++ b/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>
+        </>
+    )
+}
--- a/src/pages/additional-service/account-holder-search/request-page.tsx
+++ b/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>
+        </>
+    )
+}
--- a/src/pages/additional-service/additional-service-pages.tsx
+++ b/src/pages/additional-service/additional-service-pages.tsx
@@ -31,6 +31,8 @@ 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 (
@@ -49,7 +51,11 @@ export const AdditionalServicePages = () => {
          <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 />} />
--- a/src/pages/additional-service/key-in-payment/requeset-page.tsx
+++ b/src/pages/additional-service/key-in-payment/requeset-page.tsx
@@ -107,7 +107,7 @@ export const KeyInPaymentRequestPage = () => {
                                    <div className="billing-label">구매자 이메일 <span>*</span></div>
                                    <div className="billing-field">
                                        <input
-                                            type="text"
+                                            type="email"
                                            value=""
                                        />
                                    </div>
@@ -117,7 +117,7 @@ export const KeyInPaymentRequestPage = () => {
                                    <div className="billing-label">구매자 전화번호 <span>*</span></div>
                                    <div className="billing-field">
                                        <input
-                                            type="text"
+                                            type="tel"
                                            value=""
                                            placeholder=" '-' 제외하고 입력"
                                        />
--- a/src/shared/constants/paths.ts
+++ b/src/shared/constants/paths.ts
@@ -173,7 +173,21 @@ export const PATHS: RouteNamesType = {
      ),
    },
    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}`),
--- a/src/shared/constants/route-names.ts
+++ b/src/shared/constants/route-names.ts
@@ -83,7 +83,12 @@ export const ROUTE_NAMES = {
      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/*',
--- a/src/shared/ui/menu/index.tsx
+++ b/src/shared/ui/menu/index.tsx
@@ -85,7 +85,7 @@ export const Menu = ({
        {title: 'ARS 카드결제', path: PATHS.additionalService.arsCardPayment.list},
        {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},