Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 'use client';
import { UserOutlined } from '@ant-design/icons';
import { useGetAlwaysRankingQuery } from '@lib/api/queries';
import {
HeaderContainer,
UserImage,
UserImageContainer,
UserInfoContainer
} from '@lib/components/styledComponents';
import { ScoreRankVO } from '@uniquegood/realworld-adventure-interface';
import { DatePicker, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { Dayjs } from 'dayjs';
import React from 'react';
import { UserIdCell } from '../UserIdCell';
const rankingStyle = {
backgroundColor: '#f9f0ff',
color: '#c869ff'
};
function Row({ children, ...props }: { children: React.ReactElement }) {
const ranking = (
React.Children.toArray(children)[0] as { props: { record: { ranking: number } } }
)?.props?.record?.ranking;
return (
<tr {...props} style={ranking < 4 ? rankingStyle : { border: '2px solid red' }}>
{React.Children.map(children, (child) => {
return child;
})}
</tr>
);
}
export default function AlwaysRankingPage() {
const [currentPage, setCurrentPage] = React.useState(0);
const [currentDate, setCurrentDate] = React.useState<Dayjs | undefined>();
const { data: alwaysRanking, isLoading } = useGetAlwaysRankingQuery({
page: currentPage,
size: 20,
date: currentDate?.format('YYYY-MM') || ''
});
const columns: ColumnsType<ScoreRankVO> = [
{
key: 'ranking',
dataIndex: 'ranking',
title: '순위'
},
{
key: 'score',
dataIndex: 'score',
title: '점수'
},
{
key: 'userName',
dataIndex: 'userName',
title: '이름',
render: (value, record) => (
<UserInfoContainer>
<UserImageContainer>
{record.userImageUrl ? (
<UserImage src={record.userImageUrl} alt="프로필 이미지" />
) : (
<div>
<UserOutlined />
</div>
)}
</UserImageContainer>
{value}
</UserInfoContainer>
)
},
{
key: 'userId',
dataIndex: 'userId',
title: '유저 ID',
render: (value) => <UserIdCell>{value}</UserIdCell>
}
];
return (
<div>
<HeaderContainer>
<h1>상시 랭킹 조회</h1>
</HeaderContainer>
<DatePicker
picker="month"
defaultValue={currentDate}
onChange={(e) => {
setCurrentDate(e || undefined);
setCurrentPage(0);
}}
placeholder="조회 월을 선택해주세요"
style={{ width: '300px', marginBottom: '16px' }}
/>
<Table
dataSource={alwaysRanking?.data?.content}
columns={columns}
components={{ body: { row: Row } }}
rowKey="userId"
loading={isLoading}
pagination={{
showSizeChanger: false,
total: alwaysRanking?.data?.totalElements,
current: currentPage + 1,
pageSize: 20,
onChange: (page) => setCurrentPage(page - 1)
}}
/>
</div>
);
}
|