operationSystem-front/src/components/IndexManage/ItemConsumeContent.js

import React, { Fragment, useMemo, useRef } from 'react';

import {
	TableStyle,
	FormWrapper,
	TableWrapper, ListOption, TableInfoContent, TextInput, Label, Notice,
} from '../../styles/Components';

import {
	ItemAcquireIndexSearchBar,
	ItemConsumeIndexSearchBar,
	useItemAcquireIndexSearch,
	useItemConsumeIndexSearch,
} from '../searchBar';
import { TopButton, ViewTableInfo } from '../common';
import { TableSkeleton } from '../Skeleton/TableSkeleton';
import { numberFormatter } from '../../utils';
import { useTranslation } from 'react-i18next';
import { AnimatedPageWrapper } from '../common/Layout';
import CSVDownloadButton from '../common/button/CsvDownButton';
import styled from 'styled-components';

const ItemConsumeContent = () => {
	const { t } = useTranslation();
	const token = sessionStorage.getItem('token');
	const tableRef = useRef(null);

	const {
		searchParams,
		loading: dataLoading,
		data: dataList,
		handleSearch,
		handleReset,
		updateSearchParams
	} = useItemConsumeIndexSearch(token);

	const tableHeaders = useMemo(() => {
		return [
			{ id: 'logDay', label: '일자', width: '100px' },
			{ id: 'shopSell', label: '상점 판매', width: '80px' },
			{ id: 'itemUse', label: '아이템 사용', width: '80px' },
			{ id: 'beaconShop', label: '비컨상점', width: '80px' },
			{ id: 'beacon', label: '비컨', width: '80px' },
			{ id: 'quest', label: '퀘스트', width: '80px' },
			{ id: 'ugq', label: 'UGQ', width: '80px' },
			{ id: 'randomBox', label: '랜덤박스', width: '80px' },
			{ id: 'myHome', label: '마이홈', width: '80px' },
			{ id: 'craft', label: '크래프트', width: '80px' },
			{ id: 'etc', label: '기타', width: '80px' },
			{ id: 'summary', label: '합계', width: '80px' },
		];
	}, []);

	return (
		<AnimatedPageWrapper>
			<FormWrapper>
				<ItemConsumeIndexSearchBar
					searchParams={searchParams}
					onSearch={(newParams, executeSearch = true) => {
						if (executeSearch) {
							handleSearch(newParams);
						} else {
							updateSearchParams(newParams);
						}
					}}
					onReset={handleReset}
				/>
			</FormWrapper>
			<ViewTableInfo >
				{dataList?.item_list && dataList.item_list.length > 0 &&
					<TableInfoContent>
						<TextInput
							type="text"
							value={dataList.item_list[0].itemId}
							width="100px"
							readOnly
						/>
						<TextInput
							type="text"
							value={dataList.item_list[0].itemName}
							width="300px"
							readOnly
						/>
						<Notice $color='#F15F5F'>* 확인되지 않은 액션이 있을 수 있습니다</Notice>
					</TableInfoContent>
				}
				<ListOption>
					<CSVDownloadButton tableRef={tableRef} fileName={t('FILE_INDEX_ITEM_CONSUME')} />
				</ListOption>
			</ViewTableInfo>
			{dataLoading ? <TableSkeleton width='100%' count={15} /> :
				<>
					<TableWrapper>
						<TableStyle ref={tableRef}>
							<thead>
							<tr>
								{tableHeaders.map(header => {
									return (
										<th
											key={header.id}
											width={header.width}
											colSpan={header.colSpan}
										>
											{header.label}
										</th>
									);
								})}
							</tr>
							</thead>

							<tbody>
							{dataList?.item_list?.map((item, index) => (
								<Fragment key={index}>
									<tr>
										<td>{item.logDay}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.ShopSell)}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.ItemUse)}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.BeaconShopRegisterItem || 0))}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.BeaconEdit || 0) + (item.actionSummary.BeaconCreate || 0))}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.QuestTaskUpdate || 0))}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.UgqAbort)}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.ItemRandomBoxUse)}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.SaveMyhome || 0))}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.CraftStart || 0))}</td>
										<td>{numberFormatter.formatCurrency(
											(item.actionSummary.SummonParty || 0) + (item.actionSummary.ItemDestroy || 0) + (item.actionSummary.CreatePartyInstance || 0) + (item.actionSummary.ItemTattooChangeAttribute || 0)
											+ (item.actionSummary.CheatCommandItem || 0) + (item.actionSummary.ItemDestoryByExpiration || 0) + (item.actionSummary.ItemDestroyByUser || 0) + (item.actionSummary.ItemTattooLevelUp || 0)
										)}</td>
										<td>{numberFormatter.formatCurrency(item.totalDeltaCount)}</td>
									</tr>
								</Fragment>
							))}
							</tbody>
						</TableStyle>
					</TableWrapper>
					<TopButton />
				</>
			}
		</AnimatedPageWrapper>
	);
};

export default ItemConsumeContent;