지급대행 중간커밋

This commit is contained in:
focp212@naver.com
2025-09-22 08:48:37 +09:00
parent 238cd2356a
commit f8492fa55b
11 changed files with 106 additions and 18 deletions

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