게임로그 아이템

게임로그 재화(아이템) 추가
2025-07-13 11:29:04 +09:00
parent bab594918e
commit 991462c0d7
12 changed files with 948 additions and 79 deletions
--- a/src/components/DataManage/ItemLogContent.js
+++ b/src/components/DataManage/ItemLogContent.js
@@ -0,0 +1,170 @@
+import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+
+import styled from 'styled-components';
+import {
+	CircularProgressWrapper,
+	FormWrapper,
+	TableStyle,
+	TableWrapper,
+} from '../../styles/Components';
+import { amountDeltaType, CurrencyType } from '../../assets/data';
+import { useTranslation } from 'react-i18next';
+import { numberFormatter } from '../../utils';
+import { TableSkeleton } from '../Skeleton/TableSkeleton';
+import { ItemLogSearchBar, useItemLogSearch } from '../searchBar';
+import { TopButton, ViewTableInfo } from '../common';
+import Pagination from '../common/Pagination/Pagination';
+import {
+	INITIAL_PAGE_LIMIT,
+	STORAGE_BUSINESS_LOG_SEARCH,
+	STORAGE_GAME_LOG_CURRENCY_SEARCH, STORAGE_GAME_LOG_ITEM_SEARCH,
+} from '../../assets/data/adminConstants';
+import ExcelExportButton from '../common/button/ExcelExportButton';
+import CircularProgress from '../common/CircularProgress';
+import { countDeltaType, itemTypeLarge } from '../../assets/data/options';
+
+const CurrencyLogContent = ({ active }) => {
+	const { t } = useTranslation();
+	const token = sessionStorage.getItem('token');
+	const tableRef = useRef(null);
+	const [downloadState, setDownloadState] = useState({
+		loading: false,
+		progress: 0
+	});
+
+	const {
+		searchParams,
+		loading: dataLoading,
+		data: dataList,
+		handleSearch,
+		handleReset,
+		handlePageChange,
+		handleOrderByChange,
+		handlePageSizeChange,
+		updateSearchParams
+	} = useItemLogSearch(token, 500);
+
+	useEffect(() => {
+		if(active) {
+			// 세션 스토리지에서 복사된 메일 데이터 가져오기
+			const paramsData = sessionStorage.getItem(STORAGE_GAME_LOG_ITEM_SEARCH);
+
+			if (paramsData) {
+				const searchData = JSON.parse(paramsData);
+
+				handleSearch({
+					start_dt: new Date(searchData.start_dt),
+					end_dt: new Date(searchData.end_dt),
+					search_data: searchData.guid
+				});
+
+				// 사용 후 세션 스토리지 데이터 삭제
+				sessionStorage.removeItem(STORAGE_GAME_LOG_ITEM_SEARCH);
+			}
+		}
+	}, [active]);
+
+	const tableHeaders = useMemo(() => {
+		return [
+			// { id: 'logDay', label: '일자', width: '120px' },
+			{ id: 'logTime', label: '일시', width: '150px' },
+			{ id: 'accountId', label: 'account ID', width: '80px' },
+			{ id: 'userGuid', label: 'GUID', width: '200px' },
+			{ id: 'userNickname', label: '아바타명', width: '150px' },
+			{ id: 'tranId', label: '트랜잭션 ID', width: '200px' },
+			{ id: 'action', label: '액션', width: '120px' },
+			{ id: 'itemId', label: '아이템ID', width: '80px' },
+			{ id: 'itemName', label: '아이템명', width: '150px' },
+			{ id: 'itemTypeLarge', label: 'LargeType', width: '100px' },
+			{ id: 'itemTypeSmall', label: 'SmallType', width: '100px' },
+			{ id: 'countDeltaType', label: '증감유형', width: '80px' },
+			{ id: 'deltaCount', label: '수량', width: '80px' },
+			{ id: 'stackCount', label: '총량', width: '80px' },
+		];
+	}, []);
+
+	if(!active) return null;
+
+	return (
+		<>
+			<FormWrapper>
+				<ItemLogSearchBar
+					searchParams={searchParams}
+					onSearch={(newParams, executeSearch = true) => {
+						if (executeSearch) {
+							handleSearch(newParams);
+						} else {
+							updateSearchParams(newParams);
+						}
+					}}
+					onReset={handleReset}
+				/>
+			</FormWrapper>
+			<ViewTableInfo orderType="asc" pageType="B" total={dataList?.total} total_all={dataList?.total_all}>
+				<ExcelExportButton
+					functionName="GameItemDetailLogExport"
+					params={searchParams}
+					fileName={t('FILE_GAME_LOG_ITEM')}
+					onLoadingChange={setDownloadState}
+					dataSize={dataList?.total_all}
+				/>
+				{downloadState.loading && (
+					<CircularProgressWrapper>
+						<CircularProgress
+							progress={downloadState.progress}
+							size={36}
+							progressColor="#4A90E2"
+						/>
+					</CircularProgressWrapper>
+				)}
+			</ViewTableInfo>
+			{dataLoading ? <TableSkeleton width='100%' count={15} /> :
+				<>
+					<TableWrapper>
+						<TableStyle ref={tableRef}>
+							<thead>
+							<tr>
+								{tableHeaders.map(header => (
+									<th key={header.id} width={header.width}>{header.label}</th>
+								))}
+							</tr>
+							</thead>
+							<tbody>
+							{dataList?.item_detail_list?.map((item, index) => (
+								<Fragment key={index}>
+									<tr>
+										<td>{item.logTime}</td>
+										<td>{item.accountId}</td>
+										<td>{item.userGuid}</td>
+										<td>{item.userNickname}</td>
+										<td>{item.tranId}</td>
+										<td>{item.action}</td>
+										<td>{item.itemId}</td>
+										<td>{item.itemName}</td>
+										<td>{itemTypeLarge.find(data => data.value === item.itemTypeLarge)?.name || item.itemTypeLarge}</td>
+										<td>{item.itemTypeSmall}</td>
+										<td>{countDeltaType.find(data => data.value === item.countDeltaType)?.name || item.countDeltaType}</td>
+										<td>{numberFormatter.formatCurrency(item.deltaCount)}</td>
+										<td>{numberFormatter.formatCurrency(item.stackCount)}</td>
+									</tr>
+								</Fragment>
+							))}
+							</tbody>
+						</TableStyle>
+					</TableWrapper>
+					{dataList?.item_detail_list &&
+						<Pagination
+							postsPerPage={searchParams.page_size}
+							totalPosts={dataList?.total_all}
+							setCurrentPage={handlePageChange}
+							currentPage={searchParams.page_no}
+							pageLimit={INITIAL_PAGE_LIMIT}
+						/>
+					}
+					<TopButton />
+				</>
+			}
+		</>
+	);
+};
+export default CurrencyLogContent;