143 lines
4.9 KiB
TypeScript
143 lines
4.9 KiB
TypeScript
import { IMAGE_ROOT } from "@/shared/constants/common";
|
|
import { useState, useEffect } from "react";
|
|
import { LinkPaymentFilter } from "./link-payment-filter";
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { PATHS } from "@/shared/constants/paths";
|
|
import { LinkPaymentList } from "./link-payment-list";
|
|
import { SortOptionsBox } from "./sort-options-box";
|
|
import { SortByKeys } from "../../model/types";
|
|
|
|
|
|
export const LinkPaymentDispatchListWrap = () => {
|
|
const { navigate } = useNavigate();
|
|
const [filterOn, setFilterOn] = useState<boolean>(false);
|
|
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
|
|
const [listItems, setListItems] = useState({});
|
|
|
|
const onClickToOpenFilter = () => {
|
|
setFilterOn(!filterOn);
|
|
};
|
|
const onClickToNavigate = () => {
|
|
navigate(PATHS.additionalService.linkPayment.request)
|
|
}
|
|
const onClickToSort = (sort: SortByKeys) => {
|
|
setSortBy(sort);
|
|
callList({ sortBy: sort });
|
|
};
|
|
|
|
const callList = (option?: {sortBy?: string, val?: string}) => {
|
|
setListItems({
|
|
'20250608': [
|
|
{
|
|
transactionId: 'txn1',
|
|
customerName: '김*환(7000)',
|
|
status: '결제완료',
|
|
channel: 'SMS',
|
|
paymentMethod: '신용카드',
|
|
amount: 5254000
|
|
},
|
|
{
|
|
transactionId: 'txn2',
|
|
customerName: '김*환(7000)',
|
|
status: '결제완료',
|
|
channel: '이메일',
|
|
paymentMethod: '신용카드',
|
|
amount: 5254000
|
|
},
|
|
{
|
|
transactionId: 'txn3',
|
|
customerName: '김*환(7000)',
|
|
status: '입금요청',
|
|
channel: '이메일',
|
|
paymentMethod: '신용카드',
|
|
amount: 5254000
|
|
},
|
|
{
|
|
transactionId: 'txn4',
|
|
customerName: '김*환(7000)',
|
|
status: '결제중단',
|
|
channel: 'SMS',
|
|
paymentMethod: '',
|
|
amount: 5254000
|
|
},
|
|
{
|
|
transactionId: 'txn5',
|
|
customerName: '김*환(7000)',
|
|
status: '결제실패',
|
|
channel: 'SMS',
|
|
paymentMethod: '',
|
|
amount: 5254000
|
|
}
|
|
]
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
callList();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<section className="summary-section pt-30">
|
|
<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="검색옵션"
|
|
onClick={() => onClickToOpenFilter()}
|
|
/>
|
|
</button>
|
|
</div>
|
|
<button
|
|
className="download-btn"
|
|
aria-label="다운로드"
|
|
>
|
|
<img
|
|
src={IMAGE_ROOT + '/ico_download.svg'}
|
|
alt="다운로드"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="filter-section">
|
|
<SortOptionsBox
|
|
sortBy={sortBy}
|
|
onClickToSort={onClickToSort}
|
|
>
|
|
</SortOptionsBox>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<LinkPaymentList
|
|
listItems={listItems}
|
|
/>
|
|
<div className="apply-row">
|
|
<button
|
|
className="btn-50 btn-blue flex-1"
|
|
onClick={() => onClickToNavigate()}
|
|
>결제 신청</button>
|
|
</div>
|
|
<LinkPaymentFilter
|
|
filterOn={filterOn}
|
|
setFilterOn={setFilterOn}
|
|
></LinkPaymentFilter>
|
|
</>
|
|
)
|
|
} |