첫 커밋
This commit is contained in:
focp212@naver.com
29
src/entities/settlement/api/use-settlement-list-mutation.ts
Normal file
29
src/entities/settlement/api/use-settlement-list-mutation.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL } from '@/shared/api/urls';
|
||||
import { resultify } from '@/shared/lib/resultify';
|
||||
import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
SettlementListParams,
|
||||
SettlementListResponse
|
||||
} from '../model/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const settlementList = (params: SettlementListParams) => {
|
||||
return resultify(
|
||||
axios.post<SettlementListResponse>(API_URL.settlementList(), params),
|
||||
);
|
||||
};
|
||||
|
||||
export const useSettlementListMutation = (options?: UseMutationOptions<SettlementListResponse, CBDCAxiosError, SettlementListParams>) => {
|
||||
const mutation = useMutation<SettlementListResponse, CBDCAxiosError, SettlementListParams>({
|
||||
...options,
|
||||
mutationFn: (params: SettlementListParams) => settlementList(params),
|
||||
});
|
||||
|
||||
return {
|
||||
...mutation,
|
||||
};
|
||||
};
|
||||
110
src/entities/settlement/model/types.ts
Normal file
110
src/entities/settlement/model/types.ts
Normal file
@@ -0,0 +1,110 @@
|
||||
import { DefaulResponsePagination } from '@/entities/common/model/types';
|
||||
|
||||
export enum AltMsgKeys {
|
||||
Fold = '접기',
|
||||
UnFold = '펼치기',
|
||||
};
|
||||
export enum SortByKeys {
|
||||
New = 'New',
|
||||
Amount = 'Amount',
|
||||
};
|
||||
export enum SettlementTabKeys {
|
||||
Calendar = 'calendar',
|
||||
List = 'list'
|
||||
};
|
||||
export enum DetailInfoKeys {
|
||||
Amount = 'Amount',
|
||||
Settlement = 'Settlement',
|
||||
};
|
||||
export interface SettlementTabProps {
|
||||
activeTab: SettlementTabKeys
|
||||
};
|
||||
export interface SettlementRequestParams {
|
||||
tid?: string;
|
||||
}
|
||||
|
||||
export interface SettlementDetailParams extends SettlementRequestParams {
|
||||
svcCd: string;
|
||||
};
|
||||
|
||||
|
||||
export interface DetailAmountInfoProps {
|
||||
mid: string;
|
||||
amount: number;
|
||||
cardAmount: number;
|
||||
pointAmount: number;
|
||||
couponAmount: number;
|
||||
kakaoMoney: number;
|
||||
kakaoPoint: number;
|
||||
kakaoInstantDiscount: number;
|
||||
naverPoint: number;
|
||||
tossMoney: number;
|
||||
tossDiscount: number;
|
||||
paycoPoint: number;
|
||||
paycoCoupon: number;
|
||||
escrowFee: number;
|
||||
};
|
||||
export interface DetailSettlementInfoProps {
|
||||
approvalSettleDate: string;
|
||||
approvalSettleAmount: number;
|
||||
cancelSettleDate: string;
|
||||
cancelSettleAmount: number;
|
||||
};
|
||||
export interface DetailResponse {
|
||||
amountInfo?: DetailAmountInfoProps;
|
||||
settlementInfo?: DetailSettlementInfoProps;
|
||||
};
|
||||
export interface DetailInfoProps extends DetailResponse{
|
||||
show?: boolean;
|
||||
tid?: string;
|
||||
onClickToShowInfo?: (info: DetailInfoKeys) => void;
|
||||
};
|
||||
export interface DetailArrowProps {
|
||||
show?: boolean;
|
||||
};
|
||||
export interface SortOptionsBoxProps {
|
||||
sortBy: SortByKeys;
|
||||
onCliCkToSort: (sortBy: SortByKeys) => void;
|
||||
};
|
||||
export interface ListItemProps extends ListItem{
|
||||
|
||||
};
|
||||
export interface ListDateGroupProps {
|
||||
date?: string;
|
||||
items?: Array<ListItemProps>;
|
||||
};
|
||||
export interface ListItem {
|
||||
tid?: string;
|
||||
mid?: string;
|
||||
stateDate?: string;
|
||||
stateCode?: string;
|
||||
stateName?: string;
|
||||
installmentMonth?: string;
|
||||
serviceCode?: string;
|
||||
serviceName?: string;
|
||||
serviceDetailName?: string;
|
||||
goodsAmount?: number;
|
||||
};
|
||||
|
||||
export interface SettlementRequestParams {
|
||||
tid?: string;
|
||||
}
|
||||
export interface SettlementListParams extends SettlementRequestParams {
|
||||
moid: string;
|
||||
fromDate: string;
|
||||
toDate: string;
|
||||
stateCode: string;
|
||||
serviceCode: string;
|
||||
minAmount: number;
|
||||
maxAmount: number;
|
||||
dateCl: string;
|
||||
goodsName: string;
|
||||
cardCode: string;
|
||||
bankCode: string;
|
||||
searchCl: string;
|
||||
searchValue: string;
|
||||
};
|
||||
export interface SettlementListResponse extends DefaulResponsePagination {
|
||||
content: Array<ListItemProps>;
|
||||
};
|
||||
|
||||
188
src/entities/settlement/ui/calandar-wrap.tsx
Normal file
188
src/entities/settlement/ui/calandar-wrap.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
|
||||
export const CalendarWrap = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="calendar-wrap">
|
||||
<div className="input-wrapper top-select">
|
||||
<select>
|
||||
<option value="1">nicetest00g</option>
|
||||
<option value="2">nicetest00g</option>
|
||||
<option value="3">nicetest00g</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="month-group">
|
||||
<button
|
||||
className="month-btn"
|
||||
aria-label="이전 달"
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date_prev.svg' }
|
||||
alt="이전"
|
||||
/>
|
||||
</button>
|
||||
<div className="month-title">2024년 3월</div>
|
||||
<button
|
||||
className="month-btn"
|
||||
aria-label="다음 달"
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date_next.svg' }
|
||||
alt="다음"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="amount-group">
|
||||
<div className="amount-row">
|
||||
<div className="amount-label">정산 <span className="complete">완료</span> 금액</div>
|
||||
<div className="amount-value">
|
||||
<NumericFormat
|
||||
value={ '734723983000' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={ '원' }
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</div>
|
||||
<div className="amount-row">
|
||||
<div className="amount-label">정산 <span className="scheduled">예정</span> 금액</div>
|
||||
<div className="amount-value">
|
||||
<NumericFormat
|
||||
value={ '465323000' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={ '원' }
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="legend-group">
|
||||
<div className="legend-item">
|
||||
<div className="legend-dot complete"></div>
|
||||
<div className="legend-text">정산 완료</div>
|
||||
</div>
|
||||
<div className="legend-item">
|
||||
<div className="legend-dot scheduled"></div>
|
||||
<div className="legend-text">입금 예정</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="calendar-grid">
|
||||
<div className="weekdays">
|
||||
<div className="weekday sun">일</div>
|
||||
<div className="weekday">월</div>
|
||||
<div className="weekday">화</div>
|
||||
<div className="weekday">수</div>
|
||||
<div className="weekday">목</div>
|
||||
<div className="weekday">금</div>
|
||||
<div className="weekday sat">토</div>
|
||||
</div>
|
||||
<div className="days">
|
||||
<div className="day other">29</div>
|
||||
<div className="day other">30</div>
|
||||
<div className="day complete">1</div>
|
||||
<div className="day">2</div>
|
||||
<div className="day">3</div>
|
||||
<div className="day">4</div>
|
||||
<div className="day">5</div>
|
||||
<div className="day">6</div>
|
||||
<div className="day complete">7</div>
|
||||
<div className="day">8</div>
|
||||
<div className="day">9</div>
|
||||
<div className="day complete">10</div>
|
||||
<div className="day">11</div>
|
||||
<div className="day">12</div>
|
||||
<div className="day">13</div>
|
||||
<div className="day">14</div>
|
||||
<div className="day">15</div>
|
||||
<div className="day">16</div>
|
||||
<div className="day complete">17</div>
|
||||
<div className="day complete">18</div>
|
||||
<div className="day">19</div>
|
||||
<div className="day">20</div>
|
||||
<div className="day">21</div>
|
||||
<div className="day">22</div>
|
||||
<div className="day complete">23</div>
|
||||
<div className="day">24</div>
|
||||
<div className="day">25</div>
|
||||
<div className="day">26</div>
|
||||
<div className="day">27</div>
|
||||
<div className="day scheduled">28</div>
|
||||
<div className="day scheduled">29</div>
|
||||
<div className="day">30</div>
|
||||
<div className="day">31</div>
|
||||
<div className="day other">1</div>
|
||||
<div className="day other">2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settlement-list">
|
||||
<div className="settlement-item">
|
||||
<div className="settlement-tag scheduled">예정</div>
|
||||
<div className="settlement-date">03.29 (금)</div>
|
||||
<div className="settlement-amount">
|
||||
<NumericFormat
|
||||
value={ '34837000' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={ ' 원' }
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</div>
|
||||
<div className="settlement-item">
|
||||
<div className="settlement-tag scheduled">예정</div>
|
||||
<div className="settlement-date">03.28 (목)</div>
|
||||
<div className="settlement-amount">
|
||||
<NumericFormat
|
||||
value={ '834374000' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={ ' 원' }
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</div>
|
||||
<div className="settlement-item">
|
||||
<div className="settlement-tag complete">확정</div>
|
||||
<div className="settlement-date">03.27 (수)</div>
|
||||
<div className="settlement-amount">
|
||||
<NumericFormat
|
||||
value={ '23345000' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={ ' 원' }
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</div>
|
||||
<div className="settlement-item">
|
||||
<div className="settlement-tag complete">확정</div>
|
||||
<div className="settlement-date">03.25 (월)</div>
|
||||
<div className="settlement-amount">
|
||||
<NumericFormat
|
||||
value={ '84847000' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={ ' 원' }
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</div>
|
||||
<div className="settlement-item">
|
||||
<div className="settlement-tag complete">확정</div>
|
||||
<div className="settlement-date">03.19 (화)</div>
|
||||
<div className="settlement-amount">
|
||||
<NumericFormat
|
||||
value={ '57235000' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={ ' 원' }
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
79
src/entities/settlement/ui/detail-amount-info.tsx
Normal file
79
src/entities/settlement/ui/detail-amount-info.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { DetailInfoKeys, DetailInfoProps } from '@/entities/settlement/model/types';
|
||||
|
||||
export const DetailAmountInfo = ({
|
||||
amountInfo,
|
||||
show,
|
||||
tid,
|
||||
onClickToShowInfo
|
||||
}: DetailInfoProps) => {
|
||||
|
||||
const onClickToSetShowInfo = () => {
|
||||
if(!!onClickToShowInfo){
|
||||
onClickToShowInfo(DetailInfoKeys.Amount);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="txn-section">
|
||||
<div className="section-title">금액 정보</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">거래금액 합계</span>
|
||||
<span className="v">6,017,600 (269건)</span>
|
||||
<ul className="txn-amount-detail">
|
||||
<li>
|
||||
<span>· 신용카드</span>
|
||||
<span>6,017,000 (260건)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>· 계좌이체</span>
|
||||
<span>600 (9건)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">PG 수수료 합계</span>
|
||||
<span className="v">205,255</span>
|
||||
<ul className="txn-amount-detail">
|
||||
<li>
|
||||
<span>· 결제수수료</span>
|
||||
<span>165,384</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>· 에스크로 수수료</span>
|
||||
<span>0</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>· 인증 수수료</span>
|
||||
<span>21,300</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>· VAT</span>
|
||||
<span>18,571</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">보류</span>
|
||||
<span className="v">0</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">해제</span>
|
||||
<span className="v">0</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">상계</span>
|
||||
<span className="v">- 80,603</span>
|
||||
</li>
|
||||
<li className="kv-row bolder">
|
||||
<span className="k">정산금액</span>
|
||||
<span className="v">5,731,742</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
23
src/entities/settlement/ui/detail-arrow.tsx
Normal file
23
src/entities/settlement/ui/detail-arrow.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { AltMsgKeys, DetailArrowProps } from '../model/types';
|
||||
|
||||
export const DetailArrow = ({ show }: DetailArrowProps) => {
|
||||
const [altMsg, setAltMsg] = useState<AltMsgKeys>(AltMsgKeys.Fold);
|
||||
const [className, setClassName] = useState<string>('ic20 rot-180');
|
||||
|
||||
useEffect(() => {
|
||||
setAltMsg((show)? AltMsgKeys.Fold: AltMsgKeys.UnFold);
|
||||
setClassName(`ic20 ${(show)? 'rot-180': ''}`);
|
||||
}, [show]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<img
|
||||
className={ className }
|
||||
src={ IMAGE_ROOT + '/select_arrow.svg' }
|
||||
alt={ altMsg }
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
74
src/entities/settlement/ui/detail-settlement-info.tsx
Normal file
74
src/entities/settlement/ui/detail-settlement-info.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import moment from 'moment';
|
||||
import { motion } from 'framer-motion';
|
||||
import { DetailInfoKeys, DetailInfoProps } from '@/entities/settlement/model/types';
|
||||
import { DetailArrow } from './detail-arrow';
|
||||
|
||||
export const DetailSettlementInfo = ({
|
||||
settlementInfo,
|
||||
show,
|
||||
onClickToShowInfo
|
||||
}: DetailInfoProps) => {
|
||||
const variants = {
|
||||
hidden: { height: 0, padding: 0, display: 'none' },
|
||||
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
|
||||
};
|
||||
|
||||
const onClickToSetShowInfo = () => {
|
||||
if(!!onClickToShowInfo){
|
||||
onClickToShowInfo(DetailInfoKeys.Settlement);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="txn-section">
|
||||
<div
|
||||
className="section-title with-toggle"
|
||||
onClick={ () => onClickToSetShowInfo() }
|
||||
>
|
||||
정산 정보 <DetailArrow show={ show }></DetailArrow>
|
||||
</div>
|
||||
<motion.ul
|
||||
className="kv-list"
|
||||
initial="hidden"
|
||||
animate={ (show)? 'visible': 'hidden' }
|
||||
variants={ variants }
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<li className="kv-row">
|
||||
<span className="k">MID</span>
|
||||
<span className="v">cruquis01m</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">이체상태</span>
|
||||
<span className="v">정상처리</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">이체ID</span>
|
||||
<span className="v">APG000600m</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">이체시간</span>
|
||||
<span className="v">12:00:00</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">계좌번호</span>
|
||||
<span className="v">123231231****</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">5,731,742</span>
|
||||
</li>
|
||||
<li className="kv-row nopadding">
|
||||
<span className="k">오류사유</span>
|
||||
<span className="v"></span>
|
||||
</li>
|
||||
</motion.ul>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
50
src/entities/settlement/ui/list-date-group.tsx
Normal file
50
src/entities/settlement/ui/list-date-group.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import moment from 'moment';
|
||||
import 'moment/dist/locale/ko';
|
||||
import { ListDateGroupProps } from '../model/types';
|
||||
import { ListItem } from './list-item';
|
||||
|
||||
export const ListDateGroup = ({
|
||||
date,
|
||||
items
|
||||
}: ListDateGroupProps) => {
|
||||
moment.locale('ko');
|
||||
const getStateDate = () => {
|
||||
let stateDate = moment(date).format('YY.MM.DD(ddd)');
|
||||
return stateDate;
|
||||
};
|
||||
|
||||
const getListItem = () => {
|
||||
let rs = [];
|
||||
if(!!items && items.length>0){
|
||||
for(let i=0;i<items.length;i++){
|
||||
let key = 'ListItem-'+i;
|
||||
rs.push(
|
||||
<ListItem
|
||||
key={ key }
|
||||
tid={ items[i]?.tid }
|
||||
mid={ items[i]?.mid }
|
||||
stateDate={ items[i]?.stateDate }
|
||||
stateCode={ items[i]?.stateCode }
|
||||
stateName={ items[i]?.stateName }
|
||||
installmentMonth={ items[i]?.installmentMonth }
|
||||
serviceCode={ items[i]?.serviceCode }
|
||||
serviceName={ items[i]?.serviceName }
|
||||
serviceDetailName={ items[i]?.serviceDetailName }
|
||||
goodsAmount={ items[i]?.goodsAmount }
|
||||
></ListItem>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return rs;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="date-group">
|
||||
<div className="date-header">{ getStateDate() }</div>
|
||||
{ getListItem() }
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
99
src/entities/settlement/ui/list-item.tsx
Normal file
99
src/entities/settlement/ui/list-item.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { ListItemProps } from '../model/types';
|
||||
|
||||
export const ListItem = ({
|
||||
tid,
|
||||
mid,
|
||||
stateDate,
|
||||
stateCode,
|
||||
stateName,
|
||||
installmentMonth,
|
||||
serviceCode,
|
||||
serviceName,
|
||||
serviceDetailName,
|
||||
goodsAmount
|
||||
}: ListItemProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
const getItemClass = () => {
|
||||
let rs = '';
|
||||
if(stateCode === '0'){
|
||||
rs = '';
|
||||
}
|
||||
else if(stateCode === '1'){
|
||||
rs = 'approved';
|
||||
}
|
||||
else if(stateCode === '2'){
|
||||
rs = 'refund';
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
const getDotClass = (str?: string) => {
|
||||
let rs = '';
|
||||
if(stateCode === '0'){
|
||||
rs = '';
|
||||
}
|
||||
else if(stateCode === '1'){
|
||||
rs = 'blue';
|
||||
}
|
||||
else if(stateCode === '2'){
|
||||
rs = 'gray';
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
const onClickToNavigate = () => {
|
||||
navigate(PATHS.settlement.detail + tid, {
|
||||
state: {
|
||||
tid: tid
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getTime = () => {
|
||||
let time = stateDate?.substring(8, 12);
|
||||
let timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
|
||||
return timeStr;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={ `transaction-item ${getItemClass()}` }
|
||||
onClick={ () => onClickToNavigate() }
|
||||
>
|
||||
<div className="transaction-status">
|
||||
<div className={ `status-dot ${getDotClass()}`}></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">{ `${serviceName}(${serviceDetailName})` }</div>
|
||||
<div className="transaction-details">
|
||||
<span>{ stateName }</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ getTime() }</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ mid }</span>
|
||||
{ (!!installmentMonth && parseInt(installmentMonth) > 1) &&
|
||||
<>
|
||||
<span className="separator">|</span>
|
||||
<span>{ installmentMonth }개월 할부</span>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">
|
||||
{
|
||||
<NumericFormat
|
||||
value={ goodsAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={ '원' }
|
||||
></NumericFormat>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
211
src/entities/settlement/ui/list-wrap.tsx
Normal file
211
src/entities/settlement/ui/list-wrap.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
import moment from 'moment';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { ListDateGroup } from './list-date-group';
|
||||
import { ListItem, ListDateGroupProps, SortByKeys } from '@/entities/settlement/model/types';
|
||||
import { useSettlementListMutation } from '@/entities/settlement/api/use-settlement-list-mutation';
|
||||
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
|
||||
import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
|
||||
|
||||
export const ListWrap = () => {
|
||||
const [selectedServiceCode, setSelectedServiceCode] = useState<string>('st');
|
||||
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
|
||||
const [listItems, setListItems] = useState<ListDateGroupProps>({});
|
||||
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
|
||||
const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
|
||||
const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
|
||||
|
||||
const { mutateAsync: settlementList } = useSettlementListMutation();
|
||||
|
||||
const callList = (option?: {
|
||||
sortBy?: string,
|
||||
val?: string
|
||||
}) => {
|
||||
let listSummaryParams = {
|
||||
moid: 'string',
|
||||
tid: 'string',
|
||||
fromDate: fromDate,
|
||||
toDate: toDate,
|
||||
stateCode: '0',
|
||||
serviceCode: (option?.val)? option.val: selectedServiceCode,
|
||||
minAmount: 0,
|
||||
maxAmount: 0,
|
||||
dateCl: 'TRANS',
|
||||
goodsName: 'string',
|
||||
cardCode: 'st',
|
||||
bankCode: 'str',
|
||||
searchCl: 'CARD_NO',
|
||||
searchValue: 'string',
|
||||
};
|
||||
pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
|
||||
setPageParam(pageParam);
|
||||
|
||||
let listParams = {
|
||||
...listSummaryParams,
|
||||
...{page: pageParam}
|
||||
};
|
||||
settlementList(listParams).then((rs) => {
|
||||
setListItems(assembleData(rs.content));
|
||||
});
|
||||
};
|
||||
|
||||
const assembleData = (content: Array<ListItem>) => {
|
||||
let data: any = {};
|
||||
if(content && content.length > 0){
|
||||
for(let i=0;i<content?.length;i++){
|
||||
let stateDate = content[i]?.stateDate;
|
||||
let groupDate = stateDate?.substring(0, 8);
|
||||
if(!!groupDate && !data.hasOwnProperty(groupDate)){
|
||||
data[groupDate] = [];
|
||||
}
|
||||
if(!!groupDate && data.hasOwnProperty(groupDate)){
|
||||
data[groupDate].push(content[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return data;
|
||||
};
|
||||
const onCliCkToSort = (sort: SortByKeys) => {
|
||||
setSortBy(sort);
|
||||
callList({sortBy: sort});
|
||||
};
|
||||
useEffect(() => {
|
||||
callList();
|
||||
}, []);
|
||||
|
||||
const getListDateGroup = () => {
|
||||
let rs = [];
|
||||
if(Object.keys(listItems).length > 0){
|
||||
for (const [key, value] of Object.entries(listItems)) {
|
||||
rs.push(
|
||||
<ListDateGroup
|
||||
key={ key }
|
||||
date={ key }
|
||||
items={ value }
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="summary-section">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
className="credit-period"
|
||||
type="text"
|
||||
value="2025.06.01 ~ 2025.06.31"
|
||||
readOnly={ true }
|
||||
/>
|
||||
<button className="filter-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_setting.svg' }
|
||||
alt="검색옵션"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button className="download-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_download.svg' }
|
||||
alt="다운로드"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="summary-label label">정산금액</div>
|
||||
<div className="summary-amount divTop">
|
||||
<span className="amount-text">
|
||||
<NumericFormat
|
||||
value={ '83745200' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={ '원' }
|
||||
></NumericFormat>
|
||||
</span>
|
||||
<button>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_divTop_arrow.svg' }
|
||||
alt="화살표"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="summary-extend">
|
||||
<ul className="summary-amount-list">
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">거래금액</span>
|
||||
<span className="value">
|
||||
<NumericFormat
|
||||
value={ '67860120' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">원</span>
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">PG수수료</span>
|
||||
<span className="value minus">
|
||||
<NumericFormat
|
||||
value={ '-2409428' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">원</span>
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">보류</span>
|
||||
<span className="value">
|
||||
<NumericFormat
|
||||
value={ '0' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">원</span>
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">해제</span>
|
||||
<span className="value link">
|
||||
<NumericFormat
|
||||
value={ '5000' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">원</span>
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">상계</span>
|
||||
<span className="value minus">
|
||||
<NumericFormat
|
||||
value={ '-388393' }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">원</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="filter-section">
|
||||
<SortOptionsBox
|
||||
sortBy={ sortBy }
|
||||
onCliCkToSort={ onCliCkToSort }
|
||||
></SortOptionsBox>
|
||||
<div>
|
||||
<div className="full-menu-keywords no-padding">
|
||||
<span className="keyword-tag active">거래건별 보기</span>
|
||||
<span className="keyword-tag">정산내역</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-list">
|
||||
{
|
||||
(!!listItems && Object.keys(listItems).length > 0) &&
|
||||
getListDateGroup()
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
37
src/entities/settlement/ui/settlement-tab.tsx
Normal file
37
src/entities/settlement/ui/settlement-tab.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import {
|
||||
SettlementTabKeys,
|
||||
SettlementTabProps
|
||||
} from '../model/types';
|
||||
|
||||
export const SettlementTab = ({
|
||||
activeTab
|
||||
}: SettlementTabProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const onClickToNavigation = (tab: SettlementTabKeys) => {
|
||||
if(activeTab !== tab){
|
||||
if(tab === SettlementTabKeys.Calendar){
|
||||
navigate(PATHS.settlement.calendar);
|
||||
}
|
||||
else if(tab === SettlementTabKeys.List){
|
||||
navigate(PATHS.settlement.list);
|
||||
}
|
||||
}
|
||||
};
|
||||
return(
|
||||
<>
|
||||
<div className="subTab">
|
||||
<button
|
||||
className={`subtab-btn ${(activeTab === SettlementTabKeys.Calendar)? 'active': ''}` }
|
||||
onClick={ () => onClickToNavigation(SettlementTabKeys.Calendar) }
|
||||
>정산달력</button>
|
||||
<button
|
||||
className={`subtab-btn ${(activeTab === SettlementTabKeys.List)? 'active': ''}` }
|
||||
onClick={ () => onClickToNavigation(SettlementTabKeys.List) }
|
||||
>정산내역</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
22
src/entities/settlement/ui/sort-options-box.tsx
Normal file
22
src/entities/settlement/ui/sort-options-box.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { SortByKeys, SortOptionsBoxProps } from '../model/types';
|
||||
export const SortOptionsBox = ({
|
||||
sortBy,
|
||||
onCliCkToSort
|
||||
}: SortOptionsBoxProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="sort-options">
|
||||
<button
|
||||
className={ `sort-btn ${(sortBy === SortByKeys.New)? 'active': ''}` }
|
||||
onClick={ () => onCliCkToSort(SortByKeys.New) }
|
||||
>최신순</button>
|
||||
<span className="sort-divider">|</span>
|
||||
<button
|
||||
className={ `sort-btn ${(sortBy === SortByKeys.Amount)? 'active': ''}` }
|
||||
onClick={ () => onCliCkToSort(SortByKeys.Amount) }
|
||||
>고액순</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user