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

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

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

import { ItemAcquireIndexSearchBar, useItemAcquireIndexSearch } 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';

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

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

	const tableHeaders = useMemo(() => {
		return [
			{ id: 'logDay', label: '일자', width: '100px' },
			{ id: 'mail', label: '우편', width: '80px' },
			{ id: 'shopPurchase', label: '상점 구매', width: '80px' },
			{ id: 'shopRePurchase', label: '상점 재구매', width: '80px' },
			{ id: 'itemBuy', label: '아이템 구매', width: '80px' },
			{ id: 'itemUse', label: '아이템 사용', width: '80px' },
			{ id: 'seasonPass', label: '시즌 패스', width: '80px' },
			{ id: 'claim', label: '클레임', width: '80px' },
			{ id: 'quest', label: '퀘스트', width: '80px' },
			{ id: 'ugq', label: 'UGQ', width: '80px' },
			{ id: 'battleObject', label: '배틀맵', width: '80px' },
			{ id: 'runRace', label: '런레이스', width: '80px' },
			{ id: 'prop', label: '보급품 상자', width: '80px' },
			{ id: 'randomBox', label: '랜덤박스', width: '80px' },
			{ id: 'beacon', label: '비컨', width: '80px' },
			{ id: 'beaconShop', 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>
				<ItemAcquireIndexSearchBar
					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="150px"
							readOnly
						/>
						<Notice $color='#F15F5F'>* 확인되지 않은 액션이 있을 수 있습니다</Notice>
					</TableInfoContent>
				}
				<ListOption>
					<CSVDownloadButton tableRef={tableRef} fileName={t('FILE_INDEX_ITEM_ACQUIRE')} />
				</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.MailTaken)}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.ShopPurchase)}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.ShopRePurchase)}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.ItemBuy)}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.ItemUse)}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.SeasonPassTakeReward)}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.ClaimReward)}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.QuestMainReward || 0) + (item.actionSummary.QuestTaskUpdate || 0) + (item.actionSummary.QuestMainTask || 0))}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.UgqAbort)}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.BattleRoundStateUpdate || 0) + (item.actionSummary.BattlePodCombatOccupyReward || 0) + (item.actionSummary.BattleObjectInteraction || 0))}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.RunRaceFinishReward || 0) + (item.actionSummary.RunRaceRespawnReward || 0))}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.RewardProp)}</td>
										<td>{numberFormatter.formatCurrency(item.actionSummary.ItemRandomBoxUse)}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.BeaconCreate || 0) + (item.actionSummary.BeaconEdit || 0))}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.BeaconShopPurchaseItem || 0))}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.DeleteMyhome || 0) + (item.actionSummary.SaveMyhome || 0))}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.CraftFinish || 0) + (item.actionSummary.CraftStop || 0))}</td>
										<td>{numberFormatter.formatCurrency((item.actionSummary.CheatCommandItem || 0) + (item.actionSummary.CharacterAppearanceUpdate || 0)
											+ (item.actionSummary.ItemTattooLevelUp || 0) + (item.actionSummary.UserCreate || 0) + (item.actionSummary.JoinInstance || 0))}</td>
										<td>{numberFormatter.formatCurrency(item.totalDeltaCount)}</td>
									</tr>
								</Fragment>
							))}
							</tbody>
						</TableStyle>
					</TableWrapper>
					<TopButton />
				</>
			}
		</AnimatedPageWrapper>
	);
};

export default ItemAcquireContent;