지급대행 중간커밋
This commit is contained in:
170
src/pages/additional-service/payout/list-page.tsx
Normal file
170
src/pages/additional-service/payout/list-page.tsx
Normal 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 PayoutListPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
useSetHeaderTitle('지급대행');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.home);
|
||||
});
|
||||
|
||||
const onClickToNavigation = () => {
|
||||
navigate(PATHS.additionalService.payout.request);
|
||||
};
|
||||
const onClickToGoDetail = (tid?: string) => {
|
||||
navigate(PATHS.additionalService.payout.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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user