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

부가서비스 관련 1

Browse Source
This commit is contained in:
focp212@naver.com
2025-09-05 18:02:07 +09:00
parent 556ea4d7f2
commit 73bd36d6ec
14 changed files with 878 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/pages/additional-service/payment-agency/detail-page.tsx Normal file
View File

@@ -0,0 +1,93 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const PaymentAgencyDetailPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('지급대행 상세');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.additionalService.paymentAgency.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">10,000,000원</span>
</div>
<div className="num-store">나이스테스트가맹점</div>
<div className="num-day">2025.08.19</div>
<div className="receipt-row">
<button
className="receipt-btn"
type="button"
>
<span className="icon-24 download"></span>
<span>입출금 확인증</span>
</button>
</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">요청</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">2025.06.05</span>
</li>
<li className="kv-row">
<span className="k">지급일시</span>
<span className="v">2025.06.08 11:00:00</span>
</li>
<li className="kv-row">
<span className="k">사업자번호</span>
<span className="v">'123456789'</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">'1123456789'</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">&nbsp;</span>
</li>
</ul>
</div>
</div>
</div>
</main>
</>
);
};

170
src/pages/additional-service/payment-agency/list-page.tsx Normal file
View File

@@ -0,0 +1,170 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const PaymentAgencyListPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('지급대행');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
const onClickToNavigation = () => {
navigate(PATHS.additionalService.paymentAgency.request);
};
const onClickToGoDetail = (tid?: string) => {
navigate(PATHS.additionalService.paymentAgency.detail, {
state: {
tid: 'A123456'
}
});
};
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="검색옵션"
/>
</button>
</div>
<button
className="download-btn"
aria-label="다운로드"
>
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt="다운로드"
/>
</button>
</div>
<div className="account-frame">
<div className="credit-summary">
<div className="row">
<span className="label">예치금 잔액</span>
<span className="amount22">
50,000,000<span className="unit">원</span>
</span>
</div>
</div>
</div>
</section>
<section className="filter-section">
<div className="sort-options">
<button className="sort-btn active">최신순</button>
<span className="sort-divider">|</span>
<button className="sort-btn">고액순</button>
</div>
<div className="excrow">
<div className="full-menu-keywords no-padding">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">요청</span>
<span className="keyword-tag">성공</span>
<span className="keyword-tag">실패</span>
</div>
</div>
</section>
<section className="transaction-list">
<div className="date-header">25.06.08(일)</div>
<div
className="transaction-item approved"
onClick={ () => onClickToGoDetail() }
>
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">카카오스타일</div>
<div className="transaction-details gap-0">
<span>요청</span>
<span className="separator">ㅣ</span>
<span>cruiquis01m</span>
</div>
</div>
<div className="transaction-amount">5,254,000원</div>
</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">카카오스타일</div>
<div className="transaction-details gap-0">
<span>요청</span>
<span className="separator">ㅣ</span>
<span>cruiquis01m</span>
</div>
</div>
<div className="transaction-amount">5,254,000원</div>
</div>
<div className="date-header">25.06.08(일)</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">카카오스타일</div>
<div className="transaction-details gap-0">
<span>요청</span>
<span className="separator">ㅣ</span>
<span>cruiquis01m</span>
</div>
</div>
<div className="transaction-amount">5,254,000원</div>
</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">카카오스타일</div>
<div className="transaction-details gap-0">
<span>요청</span>
<span className="separator">ㅣ</span>
<span>cruiquis01m</span>
</div>
</div>
<div className="transaction-amount">5,254,000원</div>
</div>
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigation() }
>지급대행 신청</button>
</div>
</div>
</div>
</main>
</>
);
};

18
src/pages/additional-service/payment-agency/payment-agency-page.tsx
View File

@@ -1,18 +0,0 @@
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const PaymentAgencyPage = () => {
useSetHeaderTitle('지급대행');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
return (
<>
</>
);
};

78
src/pages/additional-service/payment-agency/request-page.tsx Normal file
View File

@@ -0,0 +1,78 @@
import { IMAGE_ROOT } from "@/shared/constants/common";
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const PaymentAgencyRequestPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('지급대행 신청');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.additionalService.paymentAgency.list);
});
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="ing-list">
<div className="billing-form gap-30">
<div className="billing-row">
<div className="billing-label">서브ID</div>
<div className="billing-field">
<input
type="text"
value="BIKYvattest01m"
readOnly={ true }
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">지급액</div>
<div className="billing-field">
<input
type="text"
value="테스트상품123"
readOnly={ true }
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">지급일</div>
<div className="billing-field">
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
/>
<button
className="date-btn"
type="button"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</>
);
};