nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

계좌성명 조회 페이지 UI 추가 (내역,상세,요청,필터)

Browse Source
This commit is contained in:
HyeonJongKim
2025-09-12 17:32:48 +09:00
parent 65bbfc12b9
commit 3b89dbdbb6
12 changed files with 782 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/entities/additional-service/model/types.ts
View File

@@ -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;
setFilterOn: (filterOn: boolean) => void;
/**
* 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'

210
src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx Normal file
View File

@@ -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>
</>
)
}

36
src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx
View File

@@ -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
type="text"
placeholder=""
<input
type="text"
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
type="text"
placeholder=""
<input
type="text"
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
type="text"
placeholder=""
<input
type="text"
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
type="text"
value={formData.validDate}
<input
type="text"
value={formData.validDate}
className="date-input"
onChange={(e) => handleInputChange('validDate', e.target.value)}
/>
<button type="button" className="date-btn">
<img
src={IMAGE_ROOT + '/ico_date.svg'}
<img
src={IMAGE_ROOT + '/ico_date.svg'}
alt="날짜 선택"
/>
</button>

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

@@ -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 {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
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>
</>
);
};

74
src/pages/additional-service/account-holder-search/detail-page.tsx Normal file
View File

@@ -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>
</>
)
}

101
src/pages/additional-service/account-holder-search/request-page.tsx Normal file
View File

@@ -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>
</>
)
}

18
src/pages/additional-service/additional-service-pages.tsx
View File

@@ -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 (
@@ -44,15 +46,19 @@ export const AdditionalServicePages = () => {
<Route path={ROUTE_NAMES.additionalService.arsCardPayment.requestSuccess} element={<ArsCardPaymentRequestSuccessPage />} />
</Route>
<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 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 />} />
@@ -79,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>
</>

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

@@ -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=" '-' 제외하고 입력"
/>

210
src/pages/transaction/cash-receipt/list-page.tsx
View File

@@ -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: 'approval'},
{name: '취소', key: 'cancel'}
{ name: '전체', key: 'all' },
{ name: '승인', key: 'approval' },
{ 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,
val?: string
}) => {
pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
setPageParam(pageParam);
sortBy?: string,
val?: string
}) => {
pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
setPageParam(pageParam);
let listParams = {
mid: 'string',
startDate: '2025-06-08',
endDate: '2025-06-08',
purposeType: 'ALL',
issueStatus: 'ALL',
processResult: 'ALL',
mid: 'string',
startDate: '2025-06-08',
endDate: '2025-06-08',
purposeType: 'ALL',
issueStatus: '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 = {};
if(content && content.length > 0){
for(let i=0;i<content?.length;i++){
let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
if(!!groupDate && !data.hasOwnProperty(groupDate)){
data[groupDate] = [];
}
if(!!groupDate && data.hasOwnProperty(groupDate)){
data[groupDate].push(content[i]);
}
}
}
return data;
};
let data: any = {};
if (content && content.length > 0) {
for (let i = 0; i < content?.length; i++) {
let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
if (!!groupDate && !data.hasOwnProperty(groupDate)) {
data[groupDate] = [];
}
if (!!groupDate && data.hasOwnProperty(groupDate)) {
data[groupDate].push(content[i]);
}
}
}
return data;
};
const onClickToOpenFilter = () => {
setFilterOn(!filterOn);
};
const onClickToDownloadExcel = () => {
// tid??? 확인 필요
downloadExcel({
// tid: tid
}).then((rs) => {
setFilterOn(!filterOn);
};
const onClickToDownloadExcel = () => {
// tid??? 확인 필요
downloadExcel({
// tid: tid
}).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);
callList({val: val});
};
setSelectedServiceCode(val);
callList({ val: val });
};
useEffect(() => {
callList();
}, []);
useEffect(() => {
callList();
}, []);
return (
<>
@@ -118,26 +118,26 @@ export const CashReceiptListPage = () => {
<div className="summary-section">
<div className="credit-controls">
<div>
<input
type="text"
className="credit-period"
value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') }
readOnly={ true }
<input
type="text"
className="credit-period"
value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
readOnly={true}
/>
<button className="filter-btn">
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt="검색옵션"
onClick={ () => onClickToOpenFilter() }
/>
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt="검색옵션"
onClick={() => onClickToOpenFilter()}
/>
</button>
</div>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
<img
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={ '원' }
></NumericFormat>
suffix={'원'}
></NumericFormat>
</strong>
<span className="count">
<NumericFormat
value={ 2745 }
value={2745}
thousandSeparator
displayType="text"
prefix={ '(' }
suffix={ '건)' }
prefix={'('}
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={ '(' }
suffix={ '건)' }
prefix={'('}
suffix={'건)'}
></NumericFormat>
</span>
</div>
</div>
</div>
<div className="filter-section">
<SortOptionsBox
sortBy={ sortBy }
onCliCkToSort={ onCliCkToSort }
></SortOptionsBox>
<div>
sortBy={sortBy}
onCliCkToSort={onCliCkToSort}
></SortOptionsBox>
<div>
<div className="full-menu-keywords no-padding">
{
serviceCodes.map((value, index) => (
<span
key={ `key-service-code=${ index }` }
className={ `keyword-tag ${(selectedServiceCode === value.key)? 'active': ''}` }
onClick={ () => onClickToServiceCode(value.key) }
>{ value.name }</span>
))
}
{
serviceCodes.map((value, index) => (
<span
key={`key-service-code=${index}`}
className={`keyword-tag ${(selectedServiceCode === value.key) ? 'active' : ''}`}
onClick={() => onClickToServiceCode(value.key)}
>{value.name}</span>
))
}
</div>
</div>
</div>
<CashReceiptList
listItems={ listItems }
transactionCategory={ TransactionCategory.CashReceipt }
></CashReceiptList>
<CashReceiptList
listItems={listItems}
transactionCategory={TransactionCategory.CashReceipt}
></CashReceiptList>
</div>
</div>
</main>
<Filter
filterOn={ filterOn }
setFilterOn={ setFilterOn }
></Filter>
filterOn={filterOn}
setFilterOn={setFilterOn}
></Filter>
</>
);
};

16
src/shared/constants/paths.ts
View File

@@ -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}`),

11
src/shared/constants/route-names.ts
View File

@@ -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/*',
@@ -112,7 +117,7 @@ export const ROUTE_NAMES = {
deposit: 'deposit',
member: 'member',
register: 'register',
detail: 'detail',
detail: 'detail',
},
paymentAgency: {
base: '/payment-agency/*',
@@ -120,7 +125,7 @@ export const ROUTE_NAMES = {
detail: 'detail',
request: 'request',
},
},
support: {
base: '/support/*',

2
src/shared/ui/menu/index.tsx
View File

@@ -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},