퀘스트 강제 완료
경제지표 재화 헤더 스타일 변경
This commit is contained in:
@@ -39,30 +39,47 @@ const CreditContent = () => {
|
||||
|
||||
const tableHeaders = useMemo(() => {
|
||||
return [
|
||||
{ id: 'logDay', label: '일자', width: '100px' },
|
||||
{ id: 'accountId', label: 'account ID', width: '80px' },
|
||||
{ id: 'userGuid', label: 'GUID', width: '200px' },
|
||||
{ id: 'userNickname', label: '아바타명', width: '150px' },
|
||||
{ id: 'sapphireAcquired', label: '사파이어 획득량', width: '80px' },
|
||||
{ id: 'sapphireConsumed', label: '사파이어 소모량', width: '80px' },
|
||||
{ id: 'goldAcquired', label: '골드 획득량', width: '80px' },
|
||||
{ id: 'goldConsumed', label: '골드 소모량', width: '80px' },
|
||||
{ id: 'caliumAcquired', label: '칼리움 획득량', width: '80px' },
|
||||
{ id: 'caliumConsumed', label: '칼리움 소모량', width: '80px' },
|
||||
{ id: 'beamAcquired', label: 'BEAM 획득량', width: '80px' },
|
||||
{ id: 'beamConsumed', label: 'BEAM 소모량', width: '80px' },
|
||||
{ id: 'rubyAcquired', label: '루비 획득량', width: '80px' },
|
||||
{ id: 'rubyConsumed', label: '루비 소모량', width: '80px' },
|
||||
{ id: 'sapphireNet', label: '사파이어 계', width: '80px' },
|
||||
{ id: 'goldNet', label: '골드 계', width: '80px' },
|
||||
{ id: 'caliumNet', label: '칼리움 계', width: '80px' },
|
||||
{ id: 'beamNet', label: 'BEAM 계', width: '80px' },
|
||||
{ id: 'rubyNet', label: '루비 계', width: '80px' },
|
||||
{ id: 'totalCurrencies', label: '활동 수', width: '80px' },
|
||||
{ id: 'detail', label: '상세', width: '100px' },
|
||||
// 기본 컬럼 (rowSpan=2)
|
||||
{ id: 'logDay', label: '일자', width: '100px', rowSpan: 2 },
|
||||
{ id: 'accountId', label: 'account ID', width: '80px', rowSpan: 2 },
|
||||
{ id: 'userGuid', label: 'GUID', width: '200px', rowSpan: 2 },
|
||||
{ id: 'userNickname', label: '아바타명', width: '150px', rowSpan: 2 },
|
||||
|
||||
// 획득량 그룹 헤더 (첫 번째 행에만 표시)
|
||||
{ id: 'acquired', label: '획득', width: '400px', colSpan: 5, groupHeader: true },
|
||||
|
||||
// 획득량 컬럼 (두 번째 행에만 표시)
|
||||
{ id: 'sapphireAcquired', label: '사파이어', width: '80px', groupRow: true },
|
||||
{ id: 'goldAcquired', label: '골드', width: '80px', groupRow: true },
|
||||
{ id: 'caliumAcquired', label: '칼리움', width: '80px', groupRow: true },
|
||||
{ id: 'beamAcquired', label: 'BEAM', width: '80px', groupRow: true },
|
||||
{ id: 'rubyAcquired', label: '루비', width: '80px', groupRow: true },
|
||||
|
||||
// 소모량 그룹 헤더 (첫 번째 행에만 표시)
|
||||
{ id: 'consumed', label: '소모', width: '400px', colSpan: 5, groupHeader: true },
|
||||
|
||||
// 소모량 컬럼 (두 번째 행에만 표시)
|
||||
{ id: 'sapphireConsumed', label: '사파이어', width: '80px', groupRow: true },
|
||||
{ id: 'goldConsumed', label: '골드', width: '80px', groupRow: true },
|
||||
{ id: 'caliumConsumed', label: '칼리움', width: '80px', groupRow: true },
|
||||
{ id: 'beamConsumed', label: 'BEAM', width: '80px', groupRow: true },
|
||||
{ id: 'rubyConsumed', label: '루비', width: '80px', groupRow: true },
|
||||
|
||||
// 계 컬럼 (rowSpan=2)
|
||||
{ id: 'sapphireNet', label: '사파이어 계', width: '80px', rowSpan: 2 },
|
||||
{ id: 'goldNet', label: '골드 계', width: '80px', rowSpan: 2 },
|
||||
{ id: 'caliumNet', label: '칼리움 계', width: '80px', rowSpan: 2 },
|
||||
{ id: 'beamNet', label: 'BEAM 계', width: '80px', rowSpan: 2 },
|
||||
{ id: 'rubyNet', label: '루비 계', width: '80px', rowSpan: 2 },
|
||||
|
||||
// 기타 컬럼 (rowSpan=2)
|
||||
{ id: 'totalCurrencies', label: '활동 수', width: '80px', rowSpan: 2 },
|
||||
{ id: 'detail', label: '상세', width: '100px', rowSpan: 2 }
|
||||
];
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
const totals = useMemo(() => {
|
||||
if (!dataList?.currency_list?.length) return null;
|
||||
|
||||
@@ -151,30 +168,62 @@ const CreditContent = () => {
|
||||
<TableStyle ref={tableRef}>
|
||||
<thead>
|
||||
<tr>
|
||||
{tableHeaders.map(header => (
|
||||
<th key={header.id} width={header.width}>{header.label}</th>
|
||||
))}
|
||||
{/* 첫 번째 행 - 기본 컬럼 + 그룹 헤더 + rowSpan=2 컬럼 */}
|
||||
{tableHeaders.map(header => {
|
||||
if (header.groupRow) return null; // 두 번째 행의 컬럼은 첫 번째 행에서 건너뜀
|
||||
|
||||
return (
|
||||
<th
|
||||
key={header.id}
|
||||
width={header.width}
|
||||
rowSpan={header.rowSpan}
|
||||
colSpan={header.colSpan}
|
||||
>
|
||||
{header.label}
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 두 번째 행 - 그룹 내 하위 컬럼만 */}
|
||||
{tableHeaders.map(header => {
|
||||
if (!header.groupRow) return null; // 첫 번째 행이나 rowSpan=2 컬럼은 두 번째 행에서 건너뜀
|
||||
|
||||
return (
|
||||
<th key={header.id} width={header.width}>
|
||||
{header.label}
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
||||
<tbody>
|
||||
{totals && (
|
||||
<TotalRow>
|
||||
<td colSpan="4">합계</td>
|
||||
{/* 획득 그룹 합계 */}
|
||||
<td>{numberFormatter.formatCurrency(totals.sapphireAcquired)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.sapphireConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.goldAcquired)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.goldConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.caliumAcquired)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.caliumConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.beamAcquired)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.beamConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.rubyAcquired)}</td>
|
||||
|
||||
{/* 소모 그룹 합계 */}
|
||||
<td>{numberFormatter.formatCurrency(totals.sapphireConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.goldConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.caliumConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.beamConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.rubyConsumed)}</td>
|
||||
|
||||
{/* 계 합계 */}
|
||||
<td>{numberFormatter.formatCurrency(totals.sapphireNet)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.goldNet)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.caliumNet)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.beamNet)}</td>
|
||||
<td>{numberFormatter.formatCurrency(totals.rubyNet)}</td>
|
||||
|
||||
<td>{totals.totalCurrencies}</td>
|
||||
<td>-</td>
|
||||
</TotalRow>
|
||||
@@ -182,25 +231,33 @@ const CreditContent = () => {
|
||||
{dataList?.currency_list?.map((item, index) => (
|
||||
<Fragment key={index}>
|
||||
<tr>
|
||||
{/* 기본 정보 */}
|
||||
<td>{item.logDay}</td>
|
||||
<td>{item.accountId}</td>
|
||||
<td>{item.userGuid}</td>
|
||||
<td>{item.userNickname}</td>
|
||||
|
||||
{/* 획득 그룹 */}
|
||||
<td>{numberFormatter.formatCurrency(item.sapphireAcquired)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.sapphireConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.goldAcquired)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.goldConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.caliumAcquired)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.caliumConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.beamAcquired)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.beamConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.rubyAcquired)}</td>
|
||||
|
||||
{/* 소모 그룹 */}
|
||||
<td>{numberFormatter.formatCurrency(item.sapphireConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.goldConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.caliumConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.beamConsumed)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.rubyConsumed)}</td>
|
||||
|
||||
{/* 계 */}
|
||||
<td>{numberFormatter.formatCurrency(item.sapphireNet)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.goldNet)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.caliumNet)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.beamNet)}</td>
|
||||
<td>{numberFormatter.formatCurrency(item.rubyNet)}</td>
|
||||
|
||||
<td>{item.totalCurrencies}</td>
|
||||
<td>
|
||||
<Button theme="line" text="상세보기"
|
||||
|
||||
Reference in New Issue
Block a user