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

수정

Browse Source
This commit is contained in:
focp212@naver.com
2025-10-26 01:28:47 +09:00
parent 7e5f1e71a7
commit 00aec7656e
34 changed files with 930 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -54,6 +54,7 @@
"express": "^5.1.0",
"framer-motion": "^12.23.12",
"glob": "^11.0.3",
"html-to-image": "^1.11.13",
"http-proxy-middleware": "^3.0.5",
"i18next": "^25.5.2",
"i18next-browser-languagedetector": "^8.2.0",

8
pnpm-lock.yaml generated
View File

@@ -137,6 +137,9 @@ importers:
glob:
specifier: ^11.0.3
version: 11.0.3
html-to-image:
specifier: ^1.11.13
version: 1.11.13
http-proxy-middleware:
specifier: ^3.0.5
version: 3.0.5
@@ -3659,6 +3662,9 @@ packages:
html-parse-stringify@3.0.1:
resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
html-to-image@1.11.13:
resolution: {integrity: sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==}
http-errors@2.0.0:
resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
engines: {node: '>= 0.8'}
@@ -10047,6 +10053,8 @@ snapshots:
dependencies:
void-elements: 3.1.0
html-to-image@1.11.13: {}
http-errors@2.0.0:
dependencies:
depd: 2.0.0

1
src/app/app.tsx
View File

@@ -6,6 +6,7 @@ import { RouterProvider } from 'react-router-dom';
export const App = () => {
useInitTheme();
return (
<>
<RouterProvider router={router} />

78
src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
View File

@@ -17,12 +17,14 @@ import { FundAccountResultStatusBtnGroup, FundAccountStatusBtnGroup } from '../.
import { FundAccountResultFilter } from '../filter/fund-account-result-filter';
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const FundAccountResultListWrap = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<FundAccountResultContentItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -49,12 +51,28 @@ export const FundAccountResultListWrap = () => {
const { mutateAsync: extensionFundAccountResultList } = useExtensionFundAccountResultListMutation();
const { mutateAsync: extensionFundAccountResultExcel } = useExtensionFundAccountResultExcelMutation();
const { mutateAsync: extensionFundAccountResultSummary } = useExtensionFundAccountResultSummaryMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const callList = (option?: {
sortType?: SortTypeKeys,
resultStatus?: FundAccountResultStatus
}) => {
let listSummaryParams: ExtensionFundAccountResultListParams = {
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: ExtensionFundAccountResultListParams = {
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
@@ -62,18 +80,39 @@ export const FundAccountResultListWrap = () => {
fromDate: fromDate,
toDate: toDate,
bankCode: bankCode,
resultStatus: option?.resultStatus ?? resultStatus,
page: pageParam
resultStatus: resultStatus,
page: {
...pageParam,
...{ sortType: sortType }
}
};
if (listSummaryParams.page) {
listSummaryParams.page.sortType = option?.sortType || sortType;
setPageParam(listSummaryParams.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
extensionFundAccountResultList(listSummaryParams).then((rs: any) => {
console.log(rs);
setListItems(rs.content);
extensionFundAccountResultList(listParams).then((rs: any) => {
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
};
@@ -119,9 +158,6 @@ export const FundAccountResultListWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
});
};
const onClickToStatus = (val: FundAccountResultStatus) => {
setResultStatus(val);
@@ -187,7 +223,8 @@ export const FundAccountResultListWrap = () => {
fromDate,
toDate,
bankCode,
resultStatus
resultStatus,
sortType
]);
const onClickToNavigate = () => {
@@ -318,12 +355,13 @@ export const FundAccountResultListWrap = () => {
</section>
<section className="transaction-list">
{getListDateGroup()}
{ getListDateGroup() }
<div ref={ setTarget }></div>
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={onClickToNavigate}
onClick={ onClickToNavigate }
>이체 등록</button>
</div>
<FundAccountResultFilter

75
src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
View File

@@ -26,12 +26,14 @@ import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction
import { PATHS } from '@/shared/constants/paths';
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const FundAccountTransferListWrap = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<FundAccountTransferContentItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -50,29 +52,67 @@ export const FundAccountTransferListWrap = () => {
const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
const { mutateAsync: extensionFundAccountTransferExcel } = useExtensionFundAccountTransferExcelMutation();
const { mutateAsync: extensionFundAccountBalance } = useExtensionFundAccountBalanceMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const callList = (option?: {
sortType?: SortTypeKeys,
status?: FundAccountStatus
}) => {
let listSummaryParams: ExtensionFundAccountTransferListParams = {
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: ExtensionFundAccountTransferListParams = {
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
bankCode: bankCode,
fromDate: fromDate,
toDate: toDate,
resultStatus: option?.status ?? status,
page: pageParam
resultStatus: status,
page: {
...pageParam,
...{ sortType: sortType }
}
};
if (listSummaryParams.page) {
listSummaryParams.page.sortType = option?.sortType || sortType;
setPageParam(listSummaryParams.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
extensionFundAccountTransferList(listSummaryParams).then((rs: any) => {
setListItems(rs.content);
extensionFundAccountTransferList(listParams).then((rs: any) => {
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
callBalance();
};
@@ -111,9 +151,6 @@ export const FundAccountTransferListWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
});
};
const onClickToStatus = (val: FundAccountStatus) => {
@@ -174,7 +211,8 @@ export const FundAccountTransferListWrap = () => {
fromDate,
toDate,
bankCode,
status
status,
sortType
]);
const onClickToNavigate = () => {
@@ -254,7 +292,8 @@ export const FundAccountTransferListWrap = () => {
</section>
<section className="transaction-list pb-86">
{getListDateGroup()}
{ getListDateGroup() }
<div ref={ setTarget }></div>
</section>
<div className="apply-row">
<button

71
src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
View File

@@ -14,6 +14,7 @@ import { useExtensionLinkPayHistoryDownloadExcelMutation } from '../../api/link-
import { useStore } from '@/shared/model/store';
import { ExtensionLinkPayHistoryListParams, LinkPaymentHistoryListItem, LinkPaymentPaymentMethod, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '../../model/link-pay/types';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
const paymentResultBtnGroup = [
{ name: '전체', value: LinkPaymentPaymentStatus.ALL },
@@ -28,6 +29,7 @@ export const LinkPaymentHistoryWrap = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<LinkPaymentHistoryListItem>>([]);
@@ -46,34 +48,72 @@ export const LinkPaymentHistoryWrap = () => {
const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation();
const { mutateAsync: downloadExcel } = useExtensionLinkPayHistoryDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const onClickToNavigate = () => {
navigate(PATHS.additionalService.linkPayment.request)
};
const callList = (option?: {
sortType?: SortTypeKeys,
status?: LinkPaymentPaymentStatus
}) => {
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: ExtensionLinkPayHistoryListParams = {
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
fromDate: fromDate,
toDate: toDate,
paymentStatus: option?.status ?? paymentStatus,
paymentStatus: paymentStatus,
sendStatus: sendStatus,
sendMethod: sendMethod,
page: pageParam
page: {
...pageParam,
...{ sortType: sortType }
}
};
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
}
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
linkPayHistoryList(listParams).then((rs) => {
setListItems(rs.content);
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
};
@@ -107,9 +147,6 @@ export const LinkPaymentHistoryWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
});
};
const onClickToOpenFilter = () => {
@@ -127,7 +164,8 @@ export const LinkPaymentHistoryWrap = () => {
toDate,
paymentStatus,
sendStatus,
sendMethod
sendMethod,
sortType
]);
return (
@@ -189,6 +227,7 @@ export const LinkPaymentHistoryWrap = () => {
additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
mid={mid}
></LinkPaymentHistoryList>
<div ref={ setTarget }></div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"

71
src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
View File

@@ -16,6 +16,7 @@ import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, L
import { ProcessStatusBtnGrouup } from '../../model/link-pay/constant';
import { useExtensionLinkPayWaitDeleteMutation } from '../../api/link-payment/use-extension-link-pay-wait-delete-mutation';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
@@ -23,6 +24,7 @@ export const LinkPaymentWaitSendWrap = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [mid, setMid] = useState<string>(userMid);
@@ -38,6 +40,24 @@ export const LinkPaymentWaitSendWrap = () => {
const { mutateAsync: pendingSendList } = useExtensionLinkPayWaitListMutation();
const { mutateAsync: downloadExcel } = useExtensionLinkPayWaitDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const onClickToOpenFilter = () => {
setFilterOn(!filterOn);
@@ -46,10 +66,8 @@ export const LinkPaymentWaitSendWrap = () => {
navigate(PATHS.additionalService.linkPayment.request)
}
const callList = (option?: {
sortType?: SortTypeKeys,
status?: LinkPaymentProcessStatus
}) => {
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams = {
mid: mid,
searchCl: searchType,
@@ -57,17 +75,39 @@ export const LinkPaymentWaitSendWrap = () => {
fromDate: startDate,
toDate: endDate,
sendMethod: sendMethod,
processStatus: option?.status ?? processStatus,
page: pageParam
processStatus: processStatus,
page: {
...pageParam,
...{ sortType: sortType }
}
}
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
pendingSendList(listParams).then((rs) => {
setListItems(rs.content);
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
};
@@ -95,9 +135,6 @@ export const LinkPaymentWaitSendWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
});
};
const onClickSendingStatus = (val: LinkPaymentProcessStatus) => {
@@ -113,7 +150,8 @@ export const LinkPaymentWaitSendWrap = () => {
startDate,
endDate,
sendMethod,
processStatus
processStatus,
sortType
]);
return (
@@ -174,6 +212,7 @@ export const LinkPaymentWaitSendWrap = () => {
additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
mid={mid}
></LinkPaymentWaitList>
<div ref={ setTarget }></div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"

1
src/entities/common/model/constant.ts
View File

@@ -5,7 +5,6 @@ export const DEFAULT_PAGE_PARAM = {
cursor: null,
size: 20,
sortType: SortTypeKeys.LATEST,
limit: 0
};
export const FilterMotionVariants = {

1
src/entities/common/model/types.ts
View File

@@ -23,7 +23,6 @@ export interface DefaultRequestPagination {
cursor: string | null;
size: number;
sortType: SortTypeKeys;
limit: number;
};
export interface DefaulResponsePagination {
nextCursor: string | null;

28
src/entities/common/ui/email-bottom-sheet.tsx
View File

@@ -3,6 +3,8 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { useStore } from '@/shared/model/store';
import { motion } from 'framer-motion';
import { ChangeEvent, useState } from 'react';
import { toPng } from 'html-to-image';
import { snackBar } from '@/shared/lib';
export interface EmailBottomSheetProps {
bottomSheetOn: boolean;
@@ -30,6 +32,22 @@ export const EmailBottomSheet = ({
sendRequest(userEmail);
};
const downloadImage = () => {
const app = document.getElementById('root') as HTMLElement;
toPng(app).then((image) => {
const link = document.createElement('a');
link.download = 'downloadImage.png';
link.href = image;
link.click();
snackBar('이미지가 요청 되었습니다.');
});
};
const onDownloadImage = () => {
downloadImage();
setTimeout(() => {
onClickToClose();
}, 1000);
};
return (
<>
@@ -62,7 +80,10 @@ export const EmailBottomSheet = ({
<div className="bottomsheet-content">
<div className="email-section">
{ !!imageSave &&
<div className="email-label mb-10">
<div
className="email-label mb-10"
onClick={ onDownloadImage }
>
<div className="mail-icon">
<div className="mail-icon-bg"></div>
<img
@@ -93,7 +114,10 @@ export const EmailBottomSheet = ({
>
{
optionsEmails.map((value, index) => (
<option value={ value.value }>{ value.value }</option>
<option
key={ value.value }
value={ value.value }
>{ value.value }</option>
))
}
</select>

4
src/entities/settlement/model/types.ts
View File

@@ -65,12 +65,13 @@ export interface SettlementsTransactionListResponse extends DefaulResponsePagina
export interface SettlementsTransactionListContent {
approvalNumber?: string;
mid?: string;
tid?: string;
approvalDate?: string;
settlementDate?: string;
transactionAmount?: number;
};
export interface SettlementsTransactionDetailParams {
approvalNumber: string;
tid: string;
};
export interface SettlementsTransactionDetailResponse {
transactionAmount: number;
@@ -194,6 +195,7 @@ export interface ListItemProps extends SettlementsHistoryContent, SettlementsTra
export interface AmountInfoWrapProps {
periodType: SettlementPeriodType;
amountInfo?: AmountInfo;
settlementAmount?: number | null;
};
export interface SettlementInfoWrapProps {
settlementInfo?: SettlementInfo;

9
src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
View File

@@ -8,6 +8,7 @@ import {
export const AmountInfoWrap = ({
periodType,
amountInfo,
settlementAmount
}: AmountInfoWrapProps) => {
return (
@@ -156,7 +157,13 @@ export const AmountInfoWrap = ({
</li>
<li className="kv-row bolder">
<span className="k">정산금액</span>
<span className="v">5,731,742</span>
<span className="v">
<NumericFormat
value={ settlementAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
</ul>
}

6
src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx
View File

@@ -47,7 +47,11 @@ export const SettlementInfoWrap = ({
</li>
<li className="kv-row bolder">
<span className="k">이체시간</span>
<span className="v">{ moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss') }</span>
<span className="v">
{ settlementInfo?.transferTime &&
moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss')
}
</span>
</li>
<li className="kv-row bolder">
<span className="k">은행명</span>

1
src/entities/settlement/ui/list-date-group.tsx
View File

@@ -26,6 +26,7 @@ export const ListDateGroup = ({
settlementDate={ items[i]?.settlementDate }
merchantName={ items[i]?.merchantName }
mid={ items[i]?.mid }
tid={ items[i]?.tid }
settlementAmount={ items[i]?.settlementAmount }
approvalNumber={ items[i]?.approvalNumber }
approvalDate={ items[i]?.approvalDate }

4
src/entities/settlement/ui/list-item.tsx
View File

@@ -10,6 +10,7 @@ export const ListItem = ({
settlementDate,
merchantName,
mid,
tid,
settlementAmount,
approvalNumber,
approvalDate,
@@ -30,6 +31,7 @@ export const ListItem = ({
periodType: periodType,
settlementId: settlementId,
approvalNumber: approvalNumber,
tid: tid,
}
});
};
@@ -66,7 +68,7 @@ export const ListItem = ({
value={ settlementAmount || transactionAmount }
thousandSeparator
displayType="text"
suffix={ '원' }
suffix='원'
></NumericFormat>
}
</div>

1
src/entities/transaction/model/types.ts
View File

@@ -192,6 +192,7 @@ export interface EscrowListItem {
issueNumber?: string;
transactionAmount?: number;
deliveryStatus?: EscrowDeliveryStatus;
serviceCode?: string;
settlementStatus?: string;
cancelStatus?: string;
};

3
src/entities/transaction/ui/list-item.tsx
View File

@@ -65,7 +65,8 @@ export const ListItem = ({
else if(transactionCategory === TransactionCategory.Escrow){
navigate(PATHS.transaction.escrow.detail, {
state: {
tid: tid
tid: tid,
serviceCode: serviceCode
}
});
}

30
src/entities/transaction/ui/section/important-info-section.tsx
View File

@@ -170,18 +170,24 @@ export const ImportantInfoSection = ({
<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">{ }</span>
</li>
{ serviceCode === '01' &&
<li className="kv-row">
<span className="k">승인일</span>
<span className="v">{ }</span>
</li>
}
{ serviceCode === '02' &&
<li className="kv-row">
<span className="k">거래일</span>
<span className="v">{ }</span>
</li>
}
{ serviceCode === '03' &&
<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>

208
src/entities/transaction/ui/section/payment-info-section.tsx
View File

@@ -152,102 +152,118 @@ export const PaymentInfoSection = ({
}
{ (transactionCategory === TransactionCategory.Escrow) &&
<>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인매입</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인반송(횟수)</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인재매입(횟수)</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인VAN</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소매입</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소반송</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소재매입</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;매입VAN</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;매입사(발급사)</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;카드번호</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인번호</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;할부기간</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;인증</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;유형</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;은행명</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;계좌번호</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금금융기관명</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금자명</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금기한</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금일</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불예정일</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불은행명</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불계좌번호</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;예금주</span>
<span className="v">{ }</span>
</li>
{ (serviceCode === '01') &&
<>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인매입</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인반송(횟수)</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인재매입(횟수)</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인VAN</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소매입</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소반송</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소재매입</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;매입VAN</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;매입사(발급사)</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;카드번호</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인번호</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;할부기간</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;인증</span>
<span className="v">{ }</span>
</li>
</>
}
{ (serviceCode === '02') &&
<>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;유형</span>
<span className="v">{ }</span>
</li>
</>
}
{ (serviceCode === '02' || serviceCode === '03') &&
<>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;은행명</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;계좌번호</span>
<span className="v">{ }</span>
</li>
</>
}
{ (serviceCode === '03') &&
<>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금금융기관명</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금자명</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금기한</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금일</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불예정일</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불은행명</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불계좌번호</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;예금주</span>
<span className="v">{ }</span>
</li>
</>
}
</>
}
</ul>

3
src/entities/transaction/ui/section/transaction-info-section.tsx
View File

@@ -144,11 +144,12 @@ export const TransactionInfoSection = ({
<span className="k">·&nbsp;&nbsp;부분취소</span>
<span className="v">{ }</span>
</li>
{ /* 계좌이체 혹은 가상계좌 */ }
{ (serviceCode === '02' || serviceCode === '03') &&
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;현금영수증발행</span>
<span className="v">{ }</span>
</li>
}
</>
}
</ul>

4
src/entities/vat-return/model/types.ts
View File

@@ -14,8 +14,8 @@ export enum VatReturnReceiptType {
BILL = 'BILL '
};
export enum VatReturnPayTax {
TAX = 'RECEIPT',
NOTAX = 'REQUEST'
TAX = 'TAXABLE',
NOTAX = 'TAX_EXEMPT'
};
export enum VatReturnTargetType {
ALL = 'ALL',

77
src/pages/additional-service/ars/list-page.tsx
View File

@@ -22,6 +22,7 @@ import { ArsFilter } from '@/entities/additional-service/ui/filter/ars-filter';
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const ArsListPage = () => {
const { navigate } = useNavigate();
@@ -33,6 +34,7 @@ export const ArsListPage = () => {
extensionCode: 'ARS'
});
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<ArsListContent>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -49,6 +51,24 @@ export const ArsListPage = () => {
const { mutateAsync: extensionArsList } = useExtensionArsListMutation();
const { mutateAsync: extensionArsDownloadExcel } = useExtensionArsDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
useSetHeaderTitle('신용카드 ARS 결제');
useSetHeaderType(HeaderType.LeftArrow);
@@ -57,29 +77,49 @@ export const ArsListPage = () => {
navigate(PATHS.home);
});
const callList = (option?: {
sortType?: SortTypeKeys,
paymentStatus?: PaymentStatus
}) => {
let params: ExtensionArsListParams = {
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: ExtensionArsListParams = {
mid: mid,
moid: moid,
fromDate: fromDate,
toDate: toDate,
paymentStatus: option?.paymentStatus ?? paymentStatus,
paymentStatus: paymentStatus,
orderStatus: orderStatus,
minAmount: minAmount,
maxAmount: maxAmount,
page: pageParam
page: {
...pageParam,
...{ sortType: sortType }
}
};
if (params.page) {
params.page.sortType = option?.sortType || sortType;
setPageParam(params.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
extensionArsList(params).then((rs: ExtensionArsListResponse) => {
setListItems(rs.content);
extensionArsList(listParams).then((rs: ExtensionArsListResponse) => {
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
};
@@ -117,9 +157,6 @@ export const ArsListPage = () => {
};
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
});
};
const onClickToPaymentStatus = (val: PaymentStatus) => {
setPaymentStatus(val);
@@ -135,7 +172,8 @@ export const ArsListPage = () => {
paymentStatus,
orderStatus,
minAmount,
maxAmount
maxAmount,
sortType
]);
const getListDateGroup = () => {
@@ -247,7 +285,8 @@ export const ArsListPage = () => {
</section>
<section className="transaction-list">
{getListDateGroup()}
{ getListDateGroup() }
<div ref={ setTarget }></div>
</section>
<div className="apply-row">
<button

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

@@ -23,6 +23,7 @@ import { KeyInPaymentListItem, KeyInPaymentPaymentStatus } from '@/entities/addi
import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const KeyInPaymentPage = () => {
const { navigate } = useNavigate();
@@ -33,6 +34,7 @@ export const KeyInPaymentPage = () => {
extensionCode: 'KEYIN'
});
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<KeyInPaymentListItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -54,36 +56,66 @@ export const KeyInPaymentPage = () => {
const { mutateAsync: keyinList } = useExtensionKeyinListMutation();
const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const callList = (option?: {
sortType?: SortTypeKeys,
status?: KeyInPaymentPaymentStatus
}) => {
let newMinAmount = minAmount;
if (!!minAmount && typeof (minAmount) === 'string') {
newMinAmount = parseInt(minAmount);
}
let newMaxAmount = maxAmount;
if (!!maxAmount && typeof (maxAmount) === 'string') {
newMaxAmount = parseInt(maxAmount);
}
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams = {
mid: mid,
fromDate: startDate,
toDate: endDate,
paymentStatus: paymentStatus,
minAmount: newMinAmount,
maxAmount: newMaxAmount,
page: pageParam
minAmount: minAmount,
maxAmount: maxAmount,
page: {
...pageParam,
...{ sortType: sortType }
}
};
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
keyinList(listParams).then((rs) => {
setListItems(rs.content);
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
}
@@ -97,21 +129,13 @@ export const KeyInPaymentPage = () => {
const onSendRequest = (selectedEmail?: string) => {
if (selectedEmail) {
let newMinAmount = minAmount;
if (!!minAmount && typeof (minAmount) === 'string') {
newMinAmount = parseInt(minAmount);
}
let newMaxAmount = maxAmount;
if (!!maxAmount && typeof (maxAmount) === 'string') {
newMaxAmount = parseInt(maxAmount);
}
downloadExcel({
mid: mid,
fromDate: startDate,
toDate: endDate,
paymentStatus: paymentStatus,
minAmount: newMinAmount,
maxAmount: newMaxAmount,
minAmount: minAmount,
maxAmount: maxAmount,
//email: selectedEmail
}).then((rs) => {
console.log('Excel Download Status:', rs.status);
@@ -122,9 +146,6 @@ export const KeyInPaymentPage = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
});
};
const onClickToPaymentStatus = (val: KeyInPaymentPaymentStatus) => {
@@ -139,7 +160,8 @@ export const KeyInPaymentPage = () => {
endDate,
paymentStatus,
minAmount,
maxAmount
maxAmount,
sortType
]);
// if (!hasAccess) {
@@ -209,6 +231,7 @@ export const KeyInPaymentPage = () => {
additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
mid={mid}
></KeyInPaymentList>
<div ref={ setTarget }></div>
</div>
</div>
</main>

62
src/pages/additional-service/link-payment/link-payment-history-page.tsx
View File

@@ -6,10 +6,10 @@ import { HeaderType } from '@/entities/common/model/types';
import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab';
import { LinkPaymentHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-history-wrap';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { LinkPaymentTabKeys } from '@/entities/additional-service/model/link-pay/types';
import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
@@ -19,36 +19,36 @@ import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access
*/
export const LinkPaymentHistoryPage = () => {
const { navigate } = useNavigate();
const { navigate } = useNavigate();
// 권한 체크
const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
extensionCode: 'LINKPAY'
});
// 권한 체크
const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
extensionCode: 'LINKPAY'
});
const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.ShippingHistory)
const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.ShippingHistory)
useSetHeaderTitle('링크결제')
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
useSetHeaderTitle('링크결제')
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
if (!hasAccess) {
return <AccessDeniedDialog />;
}
if(!hasAccess){
return <AccessDeniedDialog />;
}
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane pt-46 active">
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
<LinkPaymentHistoryWrap></LinkPaymentHistoryWrap>
</div>
</div>
</main>
</>
)
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane pt-46 active">
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
<LinkPaymentHistoryWrap></LinkPaymentHistoryWrap>
</div>
</div>
</main>
</>
);
}

48
src/pages/additional-service/link-payment/link-payment-wait-send-page.tsx
View File

@@ -6,10 +6,10 @@ import { HeaderType } from '@/entities/common/model/types';
import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab';
import { LinkPaymentWaitSendWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-wait-send-wrap';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { LinkPaymentTabKeys } from '@/entities/additional-service/model/link-pay/types';
@@ -17,27 +17,27 @@ import { LinkPaymentTabKeys } from '@/entities/additional-service/model/link-pay
* 발송대기 탭 화면
*/
export const LinkPaymentWaitSendPage = () => {
const { navigate } = useNavigate();
const { navigate } = useNavigate();
const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.PendingSend)
const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.PendingSend)
useSetHeaderTitle('링크결제')
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
useSetHeaderTitle('링크결제')
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane pt-46 active">
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
<LinkPaymentWaitSendWrap></LinkPaymentWaitSendWrap>
</div>
</div>
</main>
</>
)
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane pt-46 active">
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
<LinkPaymentWaitSendWrap></LinkPaymentWaitSendWrap>
</div>
</div>
</main>
</>
);
}

78
src/pages/additional-service/payout/list-page.tsx
View File

@@ -30,6 +30,7 @@ import { AdditionalServiceCategory } from '@/entities/additional-service/model/t
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const PayoutListPage = () => {
// 권한 체크
@@ -39,6 +40,7 @@ export const PayoutListPage = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<PayoutContent>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -54,6 +56,24 @@ export const PayoutListPage = () => {
const { mutateAsync: extensionPayoutList } = useExtensionPayoutListMutation();
const { mutateAsync: extensionPayoutExcel } = useExtensionPayoutExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
useSetHeaderTitle('지급대행');
useSetHeaderType(HeaderType.LeftArrow);
@@ -66,29 +86,48 @@ export const PayoutListPage = () => {
navigate(PATHS.additionalService.payout.request);
};
const callExtensionPayoutList = (option?: {
sortType?: SortTypeKeys,
status?: PayoutDisbursementStatus
}) => {
let params: ExtensionPayoutListParams = {
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: ExtensionPayoutListParams = {
mid: mid,
searchDateType: searchDateType,
fromDate: fromDate,
toDate: toDate,
status: option?.status ?? status,
status: status,
minAmount: minAmount,
maxAmount: maxAmount,
page: pageParam
page: {
...pageParam,
...{ sortType: sortType }
}
};
if (params.page) {
params.page.sortType = option?.sortType || sortType;
setPageParam(params.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
extensionPayoutList(params).then((rs: ExtensionPayoutListResponse) => {
setListItems(rs.content);
extensionPayoutList(listParams).then((rs: ExtensionPayoutListResponse) => {
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
};
@@ -115,16 +154,13 @@ export const PayoutListPage = () => {
};
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callExtensionPayoutList({
sortType: sort
});
};
const onClickToDisbursementStatus = (val: PayoutDisbursementStatus) => {
setStatus(val);
};
useEffect(() => {
callExtensionPayoutList();
callList();
}, [
mid,
searchDateType,
@@ -132,7 +168,8 @@ export const PayoutListPage = () => {
toDate,
status,
minAmount,
maxAmount
maxAmount,
sortType
]);
const getListDateGroup = () => {
@@ -253,7 +290,8 @@ export const PayoutListPage = () => {
</div>
</section>
<section className="transaction-list">
{getListDateGroup()}
{ getListDateGroup() }
<div ref={ setTarget }></div>
</section>
<div className="apply-row">
<button

4
src/pages/settlement/list/detail-page.tsx
View File

@@ -49,6 +49,7 @@ export const DetailPage = () => {
const settlementId = location.state.settlementId;
const approvalNumber = location.state.approvalNumber;
const periodType = location.state.periodType;
const tid = location.state.tid;
useSetHeaderTitle('정산내역 상세');
@@ -72,7 +73,7 @@ export const DetailPage = () => {
};
const callTransactionDetail = () => {
let params: SettlementsTransactionDetailParams = {
approvalNumber: approvalNumber
tid: tid
};
settlementsTransactionDetail(params).then((rs: SettlementsTransactionDetailResponse) => {
@@ -141,6 +142,7 @@ export const DetailPage = () => {
<AmountInfoWrap
periodType={ periodType }
amountInfo={ amountInfo }
settlementAmount={ settlementAmount }
></AmountInfoWrap>
<div className="txn-divider"></div>
{ (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&

217
src/pages/tax-invoice/sample/sample-page.tsx Normal file
View File

@@ -0,0 +1,217 @@
export const SamplePage = () => {
return (
<>
<div className="mail-page">
<div className="wrap">
<div className="header">
<div className="header-top">
<img
className="logo"
src="../images/mail_nicepay_logo.svg"
alt="NICEPAY"
/>
<img
className="close-ic"
src="../images/ico_close.svg"
alt="닫기"
/>
</div>
<div className="email-row">
<div className="label">이메일 발송</div>
<input
className="input40"
type="email"
placeholder="test@abc.com"
aria-label="수신 이메일 주소 입력"
/>
<a
className="btn btn-dark"
style={{ width: '46px' }}
>발송</a>
<a className="btn btn-primary">인쇄</a>
</div>
<div className="divider"></div>
<div className="title-row">
<div className="title">신용카드 매출전표</div>
<select
className="select-outline"
aria-label="작업 선택"
>
<option value="cancel">취소</option>
<option value="reprint">재출력</option>
</select>
</div>
</div>
<div className="section">
<div className="head">
<div className="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="16"
viewBox="0 0 20 16"
fill="none"
>
<path d="M5.23633 0.378906C5.54719 0.379069 5.82854 0.555366 5.95898 0.825195L6.00488 0.946289L6.00586 0.947266L8.24023 8.89258H16.3174L17.4688 4.49805H8.92188C8.48682 4.49805 8.12402 4.15788 8.12402 3.72559C8.12427 3.2935 8.48697 2.9541 8.92188 2.9541H18.4941C18.7367 2.95411 18.9686 3.06058 19.1211 3.24805C19.2743 3.4358 19.3284 3.6835 19.2676 3.91602L17.7119 9.85449V9.85547C17.6207 10.2013 17.3001 10.4374 16.9385 10.4375H7.62891C7.27229 10.4375 6.95384 10.2072 6.8584 9.86719L4.62695 1.92383H1.64844C1.21341 1.92383 0.849609 1.58369 0.849609 1.15137C0.849699 0.719302 1.21267 0.37915 1.64746 0.378906H5.23633Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.3"/>
<path d="M8.92133 11.1777C10.187 11.1779 11.2279 12.1683 11.228 13.3984C11.228 14.6285 10.1872 15.6199 8.92133 15.6201C7.65619 15.6201 6.61469 14.6287 6.61469 13.3984C6.61473 12.1683 7.65601 11.1769 8.92133 11.1777ZM8.9223 12.7227C8.52551 12.7227 8.21141 13.0313 8.21136 13.3984C8.21136 13.7659 8.52494 14.0752 8.9223 14.0752C9.31966 14.075 9.63324 13.7656 9.63324 13.3984C9.6332 13.0312 9.31954 12.7221 8.9223 12.7227Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.3"/>
<path d="M15.6186 11.1777C16.8843 11.1779 17.9252 12.169 17.9252 13.3984C17.9252 14.6285 16.8844 15.6199 15.6186 15.6201C14.3535 15.6201 13.312 14.6287 13.312 13.3984C13.312 12.1691 14.3526 11.1777 15.6186 11.1777ZM15.6186 12.7236C15.2218 12.7236 14.9077 13.0322 14.9077 13.3994C14.9077 13.7669 15.2212 14.0762 15.6186 14.0762C16.016 14.076 16.3295 13.7666 16.3295 13.3994C16.3295 13.0331 16.0161 12.7238 15.6186 12.7236Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.3"/>
</svg>
</div>
<div className="h-title">상점정보</div>
</div>
<div className="row">
<div className="k">상호</div>
<div className="v">아이스 페이먼츠 주식회사</div>
</div>
<div className="row">
<div className="k">대표자</div>
<div className="v">김광철</div>
</div>
<div className="row">
<div className="k">사업자등록번호</div>
<div className="v">815-81-00527</div>
</div>
<div className="row">
<div className="k">전화번호</div>
<div className="v">1661-7335</div>
</div>
<div className="row">
<div className="k">주소</div>
<div className="v">서울 마포구 아현동 크레디트센터빌딩 217 11</div>
</div>
<div className="row">
<div className="k">URL</div>
<div className="v">home.nicepay.co.kr</div>
</div>
</div>
<div className="divider"></div>
<div className="section">
<div className="head">
<div className="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="20"
viewBox="0 0 16 20"
fill="none"
>
<path d="M13.7656 0.799805C14.839 0.800034 15.7001 1.70434 15.7002 2.7998V17.2002C15.7001 18.2957 14.839 19.2 13.7656 19.2002H2.23438C1.16097 19.2 0.299907 18.2957 0.299805 17.2002V2.7998C0.299907 1.70434 1.16097 0.800034 2.23438 0.799805H13.7656ZM2.23438 2.40039C2.03318 2.40062 1.85655 2.57273 1.85645 2.7998V17.2002C1.85655 17.4273 2.03318 17.5994 2.23438 17.5996H13.7656C13.9674 17.5994 14.1435 17.4274 14.1436 17.2002V2.7998C14.1435 2.57257 13.9674 2.40062 13.7656 2.40039H2.23438Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.4"/>
<path d="M11.9355 3.7998C12.3344 3.79989 12.7002 4.09119 12.7002 4.5C12.7002 4.90881 12.3344 5.20011 11.9355 5.2002H4.06445C3.66564 5.20011 3.2998 4.90881 3.2998 4.5C3.2998 4.09119 3.66564 3.79989 4.06445 3.7998H11.9355Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.4"/>
<path d="M11.9355 6.7998C12.3344 6.79989 12.7002 7.09119 12.7002 7.5C12.7002 7.90881 12.3344 8.20011 11.9355 8.2002H4.06445C3.66564 8.20011 3.2998 7.90881 3.2998 7.5C3.2998 7.09119 3.66564 6.79989 4.06445 6.7998H11.9355Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.4"/>
<path d="M6.91504 9.7998C7.31807 9.7998 7.7002 10.085 7.7002 10.5C7.7002 10.9157 7.31789 11.2002 6.91504 11.2002H4.08496C3.68193 11.2002 3.2998 10.915 3.2998 10.5C3.2998 10.085 3.68193 9.7998 4.08496 9.7998H6.91504Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.4"/>
<path d="M10.9414 14.7998C11.3391 14.7998 11.7002 15.093 11.7002 15.5C11.7002 15.907 11.3391 16.2002 10.9414 16.2002H6.05859C5.66094 16.2002 5.2998 15.907 5.2998 15.5C5.2998 15.093 5.66094 14.7998 6.05859 14.7998H10.9414Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.4"/>
</svg>
</div>
<div className="h-title">결제정보</div>
<img
src="../images/ico_sign.png"
alt=""
/>
</div>
<div className="amount-row">
<div className="k">총 결제금액</div>
<div className="v">4,552,000원</div>
</div>
<div className="row">
<div className="k">금액</div>
<div className="v">343,940원</div>
</div>
<div className="row">
<div className="k">부가세</div>
<div className="v">343,940원</div>
</div>
<div className="row split"></div>
<div className="row">
<div className="k">카드종류</div>
<div className="v">신한</div>
</div>
<div className="row">
<div className="k">카드번호</div>
<div className="v">489023******0070</div>
</div>
<div className="row">
<div className="k">구매자</div>
<div className="v">홍*동</div>
</div>
<div className="row">
<div className="k">상품명</div>
<div className="v">곰인형</div>
</div>
<div className="row">
<div className="k">거래유형</div>
<div className="v">전취소</div>
</div>
<div className="row">
<div className="k">일반/할부</div>
<div className="v">일시불</div>
</div>
<div className="row">
<div className="k">승인번호</div>
<div className="v">14219606</div>
</div>
<div className="row">
<div className="k">거래일시</div>
<div className="v">2025.09.22 | 11:32:29</div>
</div>
<div className="row">
<div className="k">취소일시</div>
<div className="v">2025.09.22 | 23:10:16</div>
</div>
</div>
<div className="divider"></div>
<div className="section">
<div className="head">
<div className="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path d="M18.4004 0.849609C18.8129 0.849821 19.1502 1.18707 19.1504 1.59961V18.4004C19.1502 18.8129 18.8129 19.1502 18.4004 19.1504H1.59961C1.18707 19.1502 0.849821 18.8129 0.849609 18.4004V11.2002C0.849609 10.7875 1.18694 10.4504 1.59961 10.4502H8.0498V1.59961C8.05002 1.18701 8.38718 0.849716 8.7998 0.849609H18.4004ZM9.5498 17.6504H17.6504V2.34961H9.5498V17.6504ZM2.34961 17.6504H8.0498V11.9502H2.34961V17.6504Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.3"/>
<path d="M12.5496 4.44922V6.5498H11.0496V4.44922H12.5496Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.3"/>
<path d="M16.1496 4.44922V6.5498H14.6496V4.44922H16.1496Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.3"/>
<path d="M12.5496 7.44922V9.5498H11.0496V7.44922H12.5496Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.3"/>
<path d="M16.1496 7.44922V9.5498H14.6496V7.44922H16.1496Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.3"/>
<path d="M12.5496 10.4492V12.5498H11.0496V10.4492H12.5496Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.3"/>
<path d="M16.1496 10.4492V12.5498H14.6496V10.4492H16.1496Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.3"/>
<path d="M6.15039 13.8496V15.1504H3.84961V13.8496H6.15039Z" fill="#2D3436" stroke="#2D3436" stroke-width="0.3"/>
</svg>
</div>
<div className="h-title">결제대행사 정보</div>
</div>
<div className="row">
<div className="k">상호</div>
<div className="v">나이스페이먼츠 주식회사</div>
</div>
<div className="row">
<div className="k">대표자명</div>
<div className="v">김광철</div>
</div>
<div className="row">
<div className="k">사업자등록번호</div>
<div className="v">815-81-00527</div>
</div>
<div className="row">
<div className="k">전화번호</div>
<div className="v">1661-0808</div>
</div>
<div className="row">
<div className="k">주소</div>
<div className="v">서울특별시 영등포구 문래로28길 25 (문래동3가)</div>
</div>
</div>
<div className="notice">신용카드 청구서에는 NICE로 표기됩니다.<br />* 부가세법 제 46조에 따라 신용카드 매출전표를 이용하여 매입세액 공제가 가능합니다.<br />(동법 제 33조 2항에 근거하여 신용카드 매출전표를 발행한 경우에는 세금계산서를 발급하지 아니합니다.)</div>
</div>
</div>
</>
);
};

14
src/pages/tax-invoice/tax-invoice-pages.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { Route } from 'react-router-dom';
import { SentryRoutes } from '@/shared/configs/sentry';
import { ROUTE_NAMES } from '@/shared/constants/route-names';
import { SamplePage } from './sample/sample-page';
export const VatReturnPages = () => {
return (
<>
<SentryRoutes>
<Route path={ROUTE_NAMES.taxInvoice.sample} element={<SamplePage />} />
</SentryRoutes>
</>
);
};

1
src/pages/transaction/escrow/detail-page.tsx
View File

@@ -35,6 +35,7 @@ export const EscrowDetailPage = () => {
const { navigate } = useNavigate();
const location = useLocation();
const paramTid = location?.state.tid;
const serviceCode = location?.state.serviceCode;
const [amountInfo, setAmountInfo] = useState<ImportantInfo>();
const [importantInfo, setImportantInfo] = useState<ImportantInfo>();

2
src/shared/configs/sentry/index.tsx
View File

@@ -86,6 +86,7 @@ const SettingPage = lazyLoad('/src/pages/setting/setting-page');
const AlarmPages = lazyLoad('/src/pages/alarm/alarm-pages');
const XkeypadPage = lazyLoad('/src/pages/xkeypad/xkeypad-page');
const XkeypadSample = lazyLoad('/src/pages/xkeypad/xkeypad-sample');
const TaxInvoicePages = lazyLoad('/src/pages/tax-invoice/tax-invoice-pages');
export const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
const Pages = () => {
@@ -109,6 +110,7 @@ const Pages = () => {
<Route path={ROUTE_NAMES.alarm.base} element={<AlarmPages />} />
<Route path={ROUTE_NAMES.xkeypad} element={<XkeypadPage />} />
<Route path={ROUTE_NAMES.xkeypadSample} element={<XkeypadSample />} />
<Route path={ROUTE_NAMES.taxInvoice.base} element={<TaxInvoicePages />} />
</Route>
<Route path="*" element={<NotFoundError />} />
</Route>

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

@@ -364,6 +364,10 @@ export const PATHS: RouteNamesType = {
},
xkeypad: generatePath(ROUTE_NAMES.xkeypad),
xkeypadSample: generatePath(ROUTE_NAMES.xkeypadSample),
taxInvoice: {
base: generatePath(ROUTE_NAMES.taxInvoice.base),
sample: generatePath(ROUTE_NAMES.taxInvoice.base, ROUTE_NAMES.taxInvoice.sample),
}
};
export const BACK_BLOCKED_PATHS = {

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

@@ -164,6 +164,10 @@ export const ROUTE_NAMES = {
},
xkeypad: '/xkeypad',
xkeypadSample: '/xkeypad-sample',
taxInvoice: {
base: '/tax-invoice/*',
sample: 'sample'
}
};
export type RouteNamesType = typeof ROUTE_NAMES;

39
src/shared/ui/assets/css/style-tax-invoice.css Normal file
View File

@@ -0,0 +1,39 @@
body { margin: 0; padding: 0; background: #FAFAFA; }
.mail-page { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 0 0 30px 0; }
.wrap { width: 100%; min-width: 320px; background: #FFFFFF; padding: 0 20px; box-sizing: border-box; }
/* header */
.header { padding: 20px 0 0 0; }
.header-top { display: flex; height: 40px; align-items: center; justify-content: space-between; padding-bottom: 20px; padding-left: 48px; background: url("../images/receip_logo.png") no-repeat top 0 left 0; }
.logo { display: inline-block; width: 109px; height: 29px; }
.close-ic { width: 26px; height: 26px; display: block; }
.email-row { display: flex; align-items: center; gap: 6px; }
.label { display: inline-flex; align-items: center; white-space: nowrap; font-family: Pretendard, Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.5; color: #2D3436; }
.input40 { width: 150px; flex: 1; height: 30px; border: 1px solid #D9D9D9; border-radius: 6px; padding: 6px 12px; box-sizing: border-box; font-family: Pretendard, Arial, Helvetica, sans-serif; font-size: 15px; color: #2D3436; background: #FFFFFF; }
.input40::placeholder { color: #999999; }
.input40:focus { outline: none; border-color: #3E6AFC; }
.btn { display: inline-flex; min-width: 46px; align-items: center; justify-content: center; border-radius: 6px; height: 30px; padding: 0 10px; font-family: Pretendard, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 700; text-decoration: none; box-sizing: border-box; }
.btn-dark { background: #043465; color: #F4F8FF; }
.btn-primary { background: #3E6AFC; color: #F4F8FF; }
.divider { height: 0; border-top: 1px solid #D6D6D6; margin: 16px 0; }
/* title + cancel */
.title-row { display: flex; align-items: center; justify-content: space-between; padding: 0 0 5px 0; }
.title { font-family: Pretendard, Arial, Helvetica, sans-serif; font-size: 22px; font-weight: 700; color: #2D3436; line-height: 1.5; }
.btn-outline { display: inline-flex; min-width: 70px; align-items: center; gap: 10px; height: 30px; border: 1px solid #D9D9D9; border-radius: 6px; padding: 0 10px; font-family: Pretendard, Arial, Helvetica, sans-serif; font-size: 14px; color: #2D3436; text-decoration: none; }
.select-outline { min-width: 100px; height: 30px; border: 1px solid #D9D9D9; border-radius: 6px; padding: 0 30px 0 10px; box-sizing: border-box; background: #FFFFFF url('../images/select_arrow.svg') no-repeat right 10px center; font-family: Pretendard, Arial, Helvetica, sans-serif; font-size: 14px; color: #2D3436; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; }
.chev { width: 8px; height: 4px; display: inline-block; }
/* list sections */
.section { padding: 0; }
.section .head { position: relative; display: flex; align-items: center; gap: 1px; justify-content: flex-start; padding: 10px 0; }
.section .head .icon { position: relative; top: -2px; width: 18px; height: 18px; margin-right: 8px; }
.section .head .h-title { font-family: Pretendard, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 700; color: #2D3436; line-height: 1.5; }
.section .head .h-title + img { position: absolute; right: 0; }
.row { display: flex; align-items: center; justify-content: center; padding: 0; height: 28px; }
.k { flex: 1; font-family: Pretendard, Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.5; color: #2D3436; }
.v { text-align: right; font-family: Pretendard, Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.5; color: #2D3436; }
.row.split { height: 0; border-top: 1px dashed #D6D6D6; margin: 10px 0;}
/* amount block */
.amount-row { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.amount-row .k { font-size: 20px; font-weight: 700; }
.amount-row .v { font-size: 20px; font-weight: 700; }
/* notice */
.notice { padding: 16px; background: #F3F3F3; border-radius: 6px; margin: 30px 0 0 0; font-family: Pretendard, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; color: #2D3436; }