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

AOS: 링크결제 탭 별 페이지 생성, 필터 적용 -> 링크결제 신청 페이지 연계

Browse Source
This commit is contained in:
HyeonJongKim
2025-09-09 15:49:41 +09:00
parent 0df4fab5ad
commit d91fb758ba
13 changed files with 674 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,8 @@ import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page';
import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payment-notification-page';
import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page';
import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page';
import { LinkPaymentPage } from './link-payment/link-payment-page';
import { LinkPaymentDispatchListPage } from './link-payment/link-payment-dispatch-list-page';
import { LinkPaymentPendingSendPage } from './link-payment/link-payment-pending-send-page';
import { KakaoPaymentNotificationListPage } from './kakao-payment-notification/list-page';
import { KakaoPaymentNotificationSettingPage } from './kakao-payment-notification/setting-page';
import { FundTransferRequestListPage } from './fund-transfer/request-list-page';
@@ -23,6 +24,7 @@ import { SettlementAgencyDetailPage } from './settlement-agency/detail-page';
import { PaymentAgencyListPage } from './payment-agency/list-page';
import { PaymentAgencyDetailPage } from './payment-agency/detail-page';
import { PaymentAgencyRequestPage } from './payment-agency/request-page';
import { LinkPaymentApplyPage } from './link-payment/link-payment-apply-page';
export const AdditionalServicePages = () => {
return (
@@ -39,7 +41,12 @@ export const AdditionalServicePages = () => {
<Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentNotificationPage />} />
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch} element={<AccountHolderSearchPage />} />
<Route path={ROUTE_NAMES.additionalService.accountHolderAuth} element={<AccountHolderAuthPage />} />
<Route path={ROUTE_NAMES.additionalService.linkPayment} element={<LinkPaymentPage />} />
<Route path={ROUTE_NAMES.additionalService.linkPayment.base}>
<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.requestSuccess} element={<LinkPaymentApplyPage />} />
</Route>
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}>
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.list} element={<KakaoPaymentNotificationListPage />} />
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.setting} element={<KakaoPaymentNotificationSettingPage />} />

2
src/pages/additional-service/intro/intro-page.tsx
View File

@@ -49,7 +49,7 @@ export const IntroPage = () => {
},
{
className: 'list-wrap02', serviceName: '링크 결제', serviceDesc: '결제 링크 전송만으로 어디서든 결제 가능 서비스',
icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment
icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment.dispatchList
},
{
className: 'list-wrap02', serviceName: '자금이체', serviceDesc: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능',

3
src/pages/additional-service/link-payment/link-payment-page.tsx → src/pages/additional-service/link-payment/link-payment-apply-page.tsx
View File

@@ -7,8 +7,9 @@ import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/s
import {useNavigate} from '@/shared/lib/hooks/use-navigate';
import {PATHS} from "@/shared/constants/paths";
export const LinkPaymentPage = () => {
export const LinkPaymentApplyPage = () => {
const { navigate } = useNavigate();
const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
useSetHeaderTitle('링크결제 신청');

41
src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx Normal file
View File

@@ -0,0 +1,41 @@
import { PATHS } from '@/shared/constants/paths';
import { 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 { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment-tab';
import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types';
import { LinkPaymentDispatchListWrap } from '../../../entities/additional-service/ui/link-payment-dispatch-list-wrap';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const LinkPaymentDispatchListPage = () => {
const { navigate } = useNavigate();
const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.DispatchList)
useSetHeaderTitle('링크결제')
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
<LinkPaymentDispatchListWrap></LinkPaymentDispatchListWrap>
</div>
</div>
</main>
</>
)
}

40
src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { PATHS } from '@/shared/constants/paths';
import { 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 { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment-tab';
import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types';
import { LinkPaymentPendingSendWrap } from '../../../entities/additional-service/ui/link-payment-pending-send-wrap';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const LinkPaymentPendingSendPage = () => {
const { navigate } = useNavigate();
const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.PendingSend)
useSetHeaderTitle('링크결제')
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
<LinkPaymentPendingSendWrap></LinkPaymentPendingSendWrap>
</div>
</div>
</main>
</>
)
}