경제지표 재화 추가

게임 로그 재화지표 export api 추가
경제지표 재화 상세 > 재화 로그 페이지 이동 처리

src/apis/Log.js

@@ -58,24 +58,44 @@ export const getExcelProgress = async (token, taskId) => {
 
 export const getCurrencyList = async (token, startDate, endDate, order, size, currentPage) => {
 	try {
-		const response = await Axios.get(`/api/v1/log/currency/list?start_dt=${startDate}&end_dt=${endDate}&orderby=${order}&page_no=${currentPage}
+		const response = await Axios.get(`/api/v1/log/currency/list?start_dt=${startDate}&end_dt=${endDate}
-			&page_size=${size}`, {
+		&orderby=${order}&page_no=${currentPage}&page_size=${size}`, {
 			headers: {
 				Authorization: `Bearer ${token}`,
 				'Content-Type': 'application/json',
 			},
 		});
 
-		return response.data.data;
+		return response.data;
 	} catch (error) {
 		console.error('getCurrencyList API error:', error);
 		throw error;
 	}
 };
 
-export const getCurrencyDetailList = async (token, searchType, searchData, tranId, startDate, endDate, order, size, currentPage) => {
+export const GameCurrencyLogExport = async (token, params, fileName) => {
 	try {
-		const response = await Axios.get(`/api/v1/log/currency/detail/list?search_type=${searchType}&search_data=${searchData}&tran_id=${tranId}&start_dt=${startDate}&end_dt=${endDate}
+		await Axios.post(`/api/v1/log/currency/excel-export`, params, {
+			headers: { Authorization: `Bearer ${token}` },
+			responseType: 'blob',
+			timeout: 300000
+		}).then(response => {
+
+			responseFileDownload(response, {
+				defaultFileName: fileName
+			});
+		});
+	} catch (e) {
+		if (e instanceof Error) {
+			throw new Error('GameCurrencyLogExport Error', e);
+		}
+	}
+};
+
+export const getCurrencyDetailList = async (token, searchType, searchData, tranId, logAction, currencyType, amountDeltaType, startDate, endDate, order, size, currentPage) => {
+	try {
+		const response = await Axios.get(`/api/v1/log/currency/detail/list?search_type=${searchType}&search_data=${searchData}&tran_id=${tranId}
+			&log_action=${logAction}&currency_type=${currencyType}&amount_delta_type=${amountDeltaType}&start_dt=${startDate}&end_dt=${endDate}
 			&orderby=${order}&page_no=${currentPage}&page_size=${size}`, {
 			headers: {
 				Authorization: `Bearer ${token}`,
@@ -90,8 +110,9 @@ export const getCurrencyDetailList = async (token, searchType, searchData, tranI
 	}
 };
 
-export const GameCurrencyLogExport = async (token, params) => {
+export const GameCurrencyDetailLogExport = async (token, params, fileName) => {
 	try {
+		console.log(params);
 		await Axios.post(`/api/v1/log/currency/detail/excel-export`, params, {
 			headers: { Authorization: `Bearer ${token}` },
 			responseType: 'blob',
@@ -99,12 +120,12 @@ export const GameCurrencyLogExport = async (token, params) => {
 		}).then(response => {
 
 			responseFileDownload(response, {
-				defaultFileName: 'gameCurrencyLog'
+				defaultFileName: fileName
 			});
 		});
 	} catch (e) {
 		if (e instanceof Error) {
-			throw new Error('BusinessLogExport Error', e);
+			throw new Error('GameCurrencyDetailLogExport Error', e);
 		}
 	}
 };

src/assets/data/adminConstants.js

@@ -10,6 +10,7 @@ export const AUCTION_MIN_MINUTE_TIME = 15;	// 15분
 export const IMAGE_MAX_SIZE = 5242880;
 export const STORAGE_MAIL_COPY = 'copyMailData';
 export const STORAGE_BUSINESS_LOG_SEARCH = 'businessLogSearchParam';
+export const STORAGE_GAME_LOG_CURRENCY_SEARCH = 'gameLogCurrencySearchParam';
 export const LOG_ACTION_FAIL_CALIUM_ECHO = 'FailCaliumEchoSystem';
 
 export { INITIAL_PAGE_SIZE, INITIAL_CURRENT_PAGE, INITIAL_PAGE_LIMIT };

src/assets/data/options.js

@@ -6,13 +6,13 @@ export const languageType = [
 
 export const TabGameLogList = [
 	{ value: 'CURRENCY', name: '재화 로그' },
-	{ value: 'ITEM', name: '아이템 로그' },
+	// { value: 'ITEM', name: '아이템 로그' },
 	// { value: 'TRADE', name: '거래 로그' },
 ];
 
 export const TabEconomicIndexList = [
 	{ value: 'CURRENCY', name: '재화' },
-	{ value: 'ITEM', name: '아이템' },
+	// { value: 'ITEM', name: '아이템' },
 	// { value: 'VBP', name: 'VBP' },
 	// { value: 'deco', name: '의상/타투' },
 	// { value: 'instance', name: '인스턴스' },

src/components/DataManage/CurrencyLogContent.js

@@ -1,9 +1,8 @@
-import React, { Fragment, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 
 import styled from 'styled-components';
 import {
 	CircularProgressWrapper,
-	DownloadContainer,
 	FormWrapper,
 	TableStyle,
 	TableWrapper,
@@ -12,22 +11,20 @@ import { amountDeltaType, CurrencyType } from '../../assets/data';
 import { useTranslation } from 'react-i18next';
 import { numberFormatter } from '../../utils';
 import { TableSkeleton } from '../Skeleton/TableSkeleton';
-import { useAlert } from '../../context/AlertProvider';
-import { useLoading } from '../../context/LoadingProvider';
-import { alertTypes } from '../../assets/data/types';
 import { CurrencyLogSearchBar, useCurrencyLogSearch } from '../searchBar';
 import { TopButton, ViewTableInfo } from '../common';
 import Pagination from '../common/Pagination/Pagination';
-import { INITIAL_PAGE_LIMIT } from '../../assets/data/adminConstants';
+import {
+	INITIAL_PAGE_LIMIT,
+	STORAGE_BUSINESS_LOG_SEARCH,
+	STORAGE_GAME_LOG_CURRENCY_SEARCH,
+} from '../../assets/data/adminConstants';
 import ExcelExportButton from '../common/button/ExcelExportButton';
 import CircularProgress from '../common/CircularProgress';
-import { GameCurrencyLogExport } from '../../apis';
 
-const CurrencyLogContent = ({ userInfo }) => {
+const CurrencyLogContent = ({ active }) => {
 	const { t } = useTranslation();
 	const token = sessionStorage.getItem('token');
-	const {showModal, showToast} = useAlert();
-	const {withLoading} = useLoading();
 	const tableRef = useRef(null);
 	const [downloadState, setDownloadState] = useState({
 		loading: false,
@@ -46,6 +43,26 @@ const CurrencyLogContent = ({ userInfo }) => {
 		updateSearchParams
 	} = useCurrencyLogSearch(token, 500);
 
+	useEffect(() => {
+		if(active) {
+			// 세션 스토리지에서 복사된 메일 데이터 가져오기
+			const paramsData = sessionStorage.getItem(STORAGE_GAME_LOG_CURRENCY_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_CURRENCY_SEARCH);
+			}
+		}
+	}, [active]);
+
 	const tableHeaders = useMemo(() => {
 		return [
 			// { id: 'logDay', label: '일자', width: '120px' },
@@ -59,29 +76,11 @@ const CurrencyLogContent = ({ userInfo }) => {
 			{ id: 'amountDeltaType', label: '증감유형', width: '120px' },
 			{ id: 'deltaAmount', label: '수량', width: '120px' },
 			// { id: 'deltaAmount', label: '수량원본', width: '120px' },
+			{ id: 'currencyAmount', label: '잔량', width: '120px' },
 		];
 	}, []);
 
-	const handleSubmit = async (type, param = null) => {
+	if(!active) return null;
-		let params = {};
-
-		switch (type) {
-			case "gmLevelChangeSubmit":
-				showModal('USER_GM_CHANGE', {
-					type: alertTypes.confirm,
-					onConfirm: () => handleSubmit('gmLevelChange', param)
-				});
-				break;
-
-			case "userKickSubmit":
-				showModal('USER_KICK_CONFIRM', {
-					type: alertTypes.confirm,
-					onConfirm: () => handleSubmit('userKick')
-				});
-				break;
-
-		}
-	}
 
 	return (
 		<>
@@ -100,7 +99,7 @@ const CurrencyLogContent = ({ userInfo }) => {
 			</FormWrapper>
 			<ViewTableInfo orderType="asc" pageType="B" total={dataList?.total} total_all={dataList?.total_all}>
 				<ExcelExportButton
-					functionName="GameCurrencyLogExport"
+					functionName="GameCurrencyDetailLogExport"
 					params={searchParams}
 					fileName={t('FILE_GAME_LOG_CURRENCY')}
 					onLoadingChange={setDownloadState}
@@ -141,6 +140,7 @@ const CurrencyLogContent = ({ userInfo }) => {
 										<td>{amountDeltaType.find(data => data.value === item.amountDeltaType)?.name}</td>
 										<td>{numberFormatter.formatCurrency(item.deltaAmount)}</td>
 										{/*<td>{item.deltaAmount}</td>*/}
+										<td>{numberFormatter.formatCurrency(item.currencyAmount)}</td>
 									</tr>
 								</Fragment>
 							))}
@@ -163,10 +163,3 @@ const CurrencyLogContent = ({ userInfo }) => {
 	);
 };
 export default CurrencyLogContent;
-
-const StatusCell = styled.td`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-`;

src/components/IndexManage/CreditContent.js

@@ -1,36 +1,31 @@
-import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useMemo, useRef, useState } from 'react';
-import { styled } from 'styled-components';
-import Button from '../../components/common/button/Button';
 
-import { CurrencyIndexExport, CurrencyIndexView } from '../../apis';
 import {
-	SelectInput,
 	TableStyle,
-	TableInfo,
-	ListOption,
-	InputLabel,
 	FormWrapper,
-	DownloadContainer, TableWrapper,
+	TableWrapper, CircularProgressWrapper, TotalRow,
 } from '../../styles/Components';
 
-import { CreditSearchBar, CurrencyLogSearchBar, useCurrencyLogSearch } from '../searchBar';
+import { useCurrencyIndexSearch } from '../searchBar';
-import { uniqBy } from 'lodash';
+import { Button, TopButton, ViewTableInfo } from '../common';
-import { sumBy } from 'lodash';
-import { TopButton, ViewTableInfo } from '../common';
 import { TableSkeleton } from '../Skeleton/TableSkeleton';
-import { amountDeltaType, CurrencyType } from '../../assets/data';
 import { numberFormatter } from '../../utils';
-import Pagination from '../common/Pagination/Pagination';
+import {STORAGE_GAME_LOG_CURRENCY_SEARCH, } from '../../assets/data/adminConstants';
-import { INITIAL_PAGE_LIMIT } from '../../assets/data/adminConstants';
+import ExcelExportButton from '../common/button/ExcelExportButton';
-import { useAlert } from '../../context/AlertProvider';
+import CircularProgress from '../common/CircularProgress';
-import { useLoading } from '../../context/LoadingProvider';
+import { useTranslation } from 'react-i18next';
-import { alertTypes } from '../../assets/data/types';
+import CurrencyIndexSearchBar from '../searchBar/CurrencyIndexSearchBar';
+import { useNavigate } from 'react-router-dom';
 
 const CreditContent = () => {
+	const { t } = useTranslation();
 	const token = sessionStorage.getItem('token');
-	const {showModal, showToast} = useAlert();
+	const navigate = useNavigate();
-	const {withLoading} = useLoading();
 	const tableRef = useRef(null);
+	const [downloadState, setDownloadState] = useState({
+		loading: false,
+		progress: 0
+	});
 
 	const {
 		searchParams,
@@ -38,52 +33,88 @@ const CreditContent = () => {
 		data: dataList,
 		handleSearch,
 		handleReset,
-		handlePageChange,
-		handleOrderByChange,
-		handlePageSizeChange,
 		updateSearchParams
-	} = useCurrencyLogSearch(token, 500);
+	} = useCurrencyIndexSearch(token);
 
 	const tableHeaders = useMemo(() => {
 		return [
-			// { id: 'logDay', label: '일자', width: '120px' },
+			{ id: 'logDay', label: '일자', width: '100px' },
-			{ id: 'logTime', label: '일시', width: '120px' },
 			{ 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: 'sapphireAcquired', label: '사파이어 획득량', width: '80px' },
-			{ id: 'action', label: '액션', width: '150px' },
+			{ id: 'sapphireConsumed', label: '사파이어 소모량', width: '80px' },
-			{ id: 'currencyType', label: '재화종류', width: '120px' },
+			{ id: 'goldAcquired', label: '골드 획득량', width: '80px' },
-			{ id: 'amountDeltaType', label: '증감유형', width: '120px' },
+			{ id: 'goldConsumed', label: '골드 소모량', width: '80px' },
-			{ id: 'deltaAmount', label: '수량', width: '120px' },
+			{ 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' },
 		];
 	}, []);
 
-	const handleSubmit = async (type, param = null) => {
+	const totals = useMemo(() => {
-		let params = {};
+		if (!dataList?.currency_list?.length) return null;
 
+		return dataList.currency_list.reduce((acc, item) => {
+			return {
+				sapphireAcquired: (acc.sapphireAcquired || 0) + (item.sapphireAcquired || 0),
+				sapphireConsumed: (acc.sapphireConsumed || 0) + (item.sapphireConsumed || 0),
+				goldAcquired: (acc.goldAcquired || 0) + (item.goldAcquired || 0),
+				goldConsumed: (acc.goldConsumed || 0) + (item.goldConsumed || 0),
+				caliumAcquired: (acc.caliumAcquired || 0) + (item.caliumAcquired || 0),
+				caliumConsumed: (acc.caliumConsumed || 0) + (item.caliumConsumed || 0),
+				beamAcquired: (acc.beamAcquired || 0) + (item.beamAcquired || 0),
+				beamConsumed: (acc.beamConsumed || 0) + (item.beamConsumed || 0),
+				rubyAcquired: (acc.rubyAcquired || 0) + (item.rubyAcquired || 0),
+				rubyConsumed: (acc.rubyConsumed || 0) + (item.rubyConsumed || 0),
+				sapphireNet: (acc.sapphireNet || 0) + (item.sapphireNet || 0),
+				goldNet: (acc.goldNet || 0) + (item.goldNet || 0),
+				caliumNet: (acc.caliumNet || 0) + (item.caliumNet || 0),
+				beamNet: (acc.beamNet || 0) + (item.beamNet || 0),
+				rubyNet: (acc.rubyNet || 0) + (item.rubyNet || 0),
+				totalCurrencies: (acc.totalCurrencies || 0) + (item.totalCurrencies || 0),
+			};
+		}, {});
+	}, [dataList?.currency_list]);
+
+	const handleModalSubmit = async (type, param = null) => {
 		switch (type) {
-			case "gmLevelChangeSubmit":
+			case "detail":
-				showModal('USER_GM_CHANGE', {
+				const params = {
-					type: alertTypes.confirm,
+					tab: "CURRENCY",
-					onConfirm: () => handleSubmit('gmLevelChange', param)
+					start_dt: (() => {
-				});
+						const date = new Date(param.logDay);
-				break;
+						return date;
+					})(),
+					end_dt: (() => {
+						const date = new Date(param.logDay);
+						date.setDate(date.getDate() + 1);
+						return date;
+					})(),
+					guid: param.userGuid
+				};
 
-			case "userKickSubmit":
+				// 복사한 데이터를 세션 스토리지에 저장
-				showModal('USER_KICK_CONFIRM', {
+				sessionStorage.setItem(STORAGE_GAME_LOG_CURRENCY_SEARCH, JSON.stringify(params));
-					type: alertTypes.confirm,
+				navigate('/datamanage/gamelogview');
-					onConfirm: () => handleSubmit('userKick')
-				});
 				break;
-
 		}
 	}
 
 	return (
 		<>
 			<FormWrapper>
-				<CurrencyLogSearchBar
+				<CurrencyIndexSearchBar
 					searchParams={searchParams}
 					onSearch={(newParams, executeSearch = true) => {
 						if (executeSearch) {
@@ -95,9 +126,23 @@ const CreditContent = () => {
 					onReset={handleReset}
 				/>
 			</FormWrapper>
-			<ViewTableInfo orderType="asc" pageType="B" total={dataList?.total} total_all={dataList?.total_all}>
+			<ViewTableInfo >
-				<DownloadContainer>
+				<ExcelExportButton
-				</DownloadContainer>
+					functionName="GameCurrencyLogExport"
+					params={searchParams}
+					fileName={t('FILE_CURRENCY_INDEX')}
+					onLoadingChange={setDownloadState}
+					dataSize={dataList?.length}
+				/>
+				{downloadState.loading && (
+					<CircularProgressWrapper>
+						<CircularProgress
+							progress={downloadState.progress}
+							size={36}
+							progressColor="#4A90E2"
+						/>
+					</CircularProgressWrapper>
+				)}
 			</ViewTableInfo>
 			{dataLoading ? <TableSkeleton width='100%' count={15} /> :
 				<>
@@ -111,33 +156,61 @@ const CreditContent = () => {
 							</tr>
 							</thead>
 							<tbody>
-							{dataList?.currency_detail_list?.map((item, index) => (
+							{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.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>
+							)}
+							{dataList?.currency_list?.map((item, index) => (
 								<Fragment key={index}>
 									<tr>
-										<td>{item.logTime}</td>
+										<td>{item.logDay}</td>
 										<td>{item.accountId}</td>
 										<td>{item.userGuid}</td>
 										<td>{item.userNickname}</td>
-										<td>{item.tranId}</td>
+										<td>{numberFormatter.formatCurrency(item.sapphireAcquired)}</td>
-										<td>{item.action}</td>
+										<td>{numberFormatter.formatCurrency(item.sapphireConsumed)}</td>
-										<td>{CurrencyType.find(data => data.value === item.currencyType).name}</td>
+										<td>{numberFormatter.formatCurrency(item.goldAcquired)}</td>
-										<td>{amountDeltaType.find(data => data.value === item.amountDeltaType).name}</td>
+										<td>{numberFormatter.formatCurrency(item.goldConsumed)}</td>
-										<td>{numberFormatter.formatCurrency(item.deltaAmount)}</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.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="상세보기"
+													handleClick={e => handleModalSubmit('detail', item)} />
+										</td>
 									</tr>
 								</Fragment>
 							))}
 							</tbody>
 						</TableStyle>
 					</TableWrapper>
-					{dataList?.currency_detail_list &&
-						<Pagination
-							postsPerPage={searchParams.page_size}
-							totalPosts={dataList?.total_all}
-							setCurrentPage={handlePageChange}
-							currentPage={searchParams.page_no}
-							pageLimit={INITIAL_PAGE_LIMIT}
-						/>
-					}
 					<TopButton />
 				</>
 			}

src/components/common/button/ExcelExportButton.js

@@ -47,6 +47,13 @@ const ExcelDownloadButton = ({ functionName, params, fileName = 'download.xlsx',
 			// 에러 발생 시 폴링 중지
 			clearInterval(intervalRef.current);
 			intervalRef.current = null;
+
+			setIsDownloading(false);
+
+			if (onLoadingChange) {
+				onLoadingChange({ loading: false, progress: 0 });
+				showToast('DOWNLOAD_FAIL', { type: alertTypes.error });
+			}
 		}
 	}, [onLoadingChange]);
 
@@ -80,7 +87,7 @@ const ExcelDownloadButton = ({ functionName, params, fileName = 'download.xlsx',
 		}, 1000);
 
 		try {
-			await APIs[functionName](token, {...params, taskId});
+			await APIs[functionName](token, {...params, taskId}, fileName);
 
 			setTimeout(async () => {
 				try {

src/components/searchBar/CurrencyIndexSearchBar.js

@@ -0,0 +1,151 @@
+import { TextInput, InputLabel, SelectInput, InputGroup } from '../../styles/Components';
+import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
+import { useCallback, useEffect, useState } from 'react';
+import { userSearchType2 } from '../../assets/data/options';
+import { getCurrencyDetailList, getCurrencyList } from '../../apis/Log';
+import { useAlert } from '../../context/AlertProvider';
+import { alertTypes } from '../../assets/data/types';
+
+export const useCurrencyIndexSearch = (token, initialPageSize) => {
+	const {showToast} = useAlert();
+
+	const [searchParams, setSearchParams] = useState({
+		start_dt: (() => {
+			const date = new Date();
+			date.setDate(date.getDate() - 1);
+			return date;
+		})(),
+		end_dt: (() => {
+			const date = new Date();
+			date.setDate(date.getDate());
+			return date;
+		})(),
+		order_by: 'ASC',
+		page_size: initialPageSize,
+		page_no: 1
+	});
+
+	const [loading, setLoading] = useState(false);
+	const [data, setData] = useState(null);
+
+	useEffect(() => {
+		const initialLoad = async () => {
+			await fetchData(searchParams);
+		};
+
+		initialLoad();
+	}, [token]);
+
+	const fetchData = useCallback(async (params) => {
+		if (!token) return;
+
+		try {
+			setLoading(true);
+			const result = await getCurrencyList(
+				token,
+				params.start_dt.toISOString(),
+				params.end_dt.toISOString(),
+				params.order_by,
+				params.page_size,
+				params.page_no
+			);
+			if(result.result === "ERROR_LOG_MEMORY_LIMIT"){
+				showToast('LOG_MEMORY_LIMIT_WARNING', {type: alertTypes.error});
+			}else if(result.result === "ERROR_MONGODB_QUERY"){
+				showToast('LOG_MONGGDB_QUERY_WARNING', {type: alertTypes.error});
+			}else if(result.result === "ERROR"){
+				showToast(result.result, {type: alertTypes.error});
+			}
+			setData(result.data);
+			return result.data;
+		} catch (error) {
+			showToast('error', {type: alertTypes.error});
+			throw error;
+		} finally {
+			setLoading(false);
+		}
+	}, [token]);
+
+	const updateSearchParams = useCallback((newParams) => {
+		setSearchParams(prev => ({
+			...prev,
+			...newParams
+		}));
+	}, []);
+
+	const handleSearch = useCallback(async (newParams = {}, executeSearch = true) => {
+		const updatedParams = {
+			...searchParams,
+			...newParams,
+			page_no: newParams.page_no || 1 // Reset to first page on new search
+		};
+		updateSearchParams(updatedParams);
+
+		if (executeSearch) {
+			return await fetchData(updatedParams);
+		}
+		return null;
+	}, [searchParams, fetchData]);
+
+	const handleReset = useCallback(async () => {
+		const now = new Date();
+		now.setDate(now.getDate() - 1);
+		const resetParams = {
+			start_dt: now,
+			end_dt: new Date(),
+			order_by: 'ASC',
+			page_size: initialPageSize,
+			page_no: 1
+		};
+		setSearchParams(resetParams);
+		return await fetchData(resetParams);
+	}, [initialPageSize, fetchData]);
+
+	const handlePageChange = useCallback(async (newPage) => {
+		return await handleSearch({ page_no: newPage }, true);
+	}, [handleSearch]);
+
+	const handlePageSizeChange = useCallback(async (newSize) => {
+		return await handleSearch({ page_size: newSize, page_no: 1 }, true);
+	}, [handleSearch]);
+
+	const handleOrderByChange = useCallback(async (newOrder) => {
+		return await handleSearch({ order_by: newOrder }, true);
+	}, [handleSearch]);
+
+	return {
+		searchParams,
+		loading,
+		data,
+		handleSearch,
+		handleReset,
+		handlePageChange,
+		handlePageSizeChange,
+		handleOrderByChange,
+		updateSearchParams
+	};
+};
+
+const CurrencyIndexSearchBar = ({ searchParams, onSearch, onReset }) => {
+	const handleSubmit = event => {
+		event.preventDefault();
+
+		onSearch(searchParams, true);
+	};
+
+	const searchList = [
+		<>
+			<InputLabel>일자</InputLabel>
+			<SearchPeriod
+				startDate={searchParams.start_dt}
+				handleStartDate={date => onSearch({ start_dt: date }, false)}
+				endDate={searchParams.end_dt}
+				handleEndDate={date => onSearch({ end_dt: date }, false)}
+			/>
+		</>,
+	];
+
+	return <SearchBarLayout firstColumnData={searchList} direction={'column'} onReset={onReset} handleSubmit={handleSubmit} />;
+};
+
+export default CurrencyIndexSearchBar;

src/components/searchBar/CurrencyLogSearchBar.js

@@ -1,7 +1,7 @@
 import { TextInput, InputLabel, SelectInput, InputGroup } from '../../styles/Components';
 import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
 import { useCallback, useEffect, useState } from 'react';
-import { userSearchType2 } from '../../assets/data/options';
+import { amountDeltaType, CurrencyType, logAction, userSearchType2 } from '../../assets/data/options';
 import {  getCurrencyDetailList } from '../../apis/Log';
 import { useAlert } from '../../context/AlertProvider';
 import { alertTypes } from '../../assets/data/types';
@@ -13,6 +13,9 @@ export const useCurrencyLogSearch = (token, initialPageSize) => {
 		search_type: 'GUID',
 		search_data: '',
 		tran_id: '',
+		log_action: 'None',
+		currency_type: 'None',
+		amount_delta_type: 'None',
 		start_dt: (() => {
 			const date = new Date();
 			date.setDate(date.getDate() - 1);
@@ -32,11 +35,11 @@ export const useCurrencyLogSearch = (token, initialPageSize) => {
 	const [data, setData] = useState(null);
 
 	useEffect(() => {
-		const initialLoad = async () => {
+		// const initialLoad = async () => {
-			await fetchData(searchParams);
+		// 	await fetchData(searchParams);
-		};
+		// };
-
+		//
-		initialLoad();
+		// initialLoad();
 	}, [token]);
 
 	const fetchData = useCallback(async (params) => {
@@ -49,6 +52,9 @@ export const useCurrencyLogSearch = (token, initialPageSize) => {
 				params.search_type,
 				params.search_data,
 				params.tran_id,
+				params.log_action,
+				params.currency_type,
+				params.amount_delta_type,
 				params.start_dt.toISOString(),
 				params.end_dt.toISOString(),
 				params.order_by,
@@ -100,6 +106,9 @@ export const useCurrencyLogSearch = (token, initialPageSize) => {
 			search_type: 'GUID',
 			search_data: '',
 			tran_id: '',
+			log_action: 'None',
+			currency_type: 'None',
+			amount_delta_type: 'None',
 			start_dt: now,
 			end_dt: now,
 			order_by: 'ASC',
@@ -183,6 +192,38 @@ const CurrencyLogSearchBar = ({ searchParams, onSearch, onReset }) => {
 				handleEndDate={date => onSearch({ end_dt: date }, false)}
 			/>
 		</>,
+		<>
+			<InputLabel>액션</InputLabel>
+			<SelectInput value={searchParams.log_action} onChange={e => onSearch({ log_action: e.target.value }, false)} >
+				{logAction.map((data, index) => (
+					<option key={index} value={data.value}>
+						{data.name}
+					</option>
+				))}
+			</SelectInput>
+		</>,
+		<>
+			<InputLabel>재화종류</InputLabel>
+			<SelectInput value={searchParams.currency_type} onChange={e => onSearch({ currency_type: e.target.value }, false)} >
+				<option value="None">전체</option>
+				{CurrencyType.map((data, index) => (
+					<option key={index} value={data.value}>
+						{data.name}
+					</option>
+				))}
+			</SelectInput>
+		</>,
+		<>
+			<InputLabel>증감유형</InputLabel>
+			<SelectInput value={searchParams.amount_delta_type} onChange={e => onSearch({ amount_delta_type: e.target.value }, false)} >
+				<option value="None">전체</option>
+				{amountDeltaType.map((data, index) => (
+					<option key={index} value={data.value}>
+						{data.name}
+					</option>
+				))}
+			</SelectInput>
+		</>,
 	];
 
 	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={onReset} handleSubmit={handleSubmit} />;

src/components/searchBar/index.js

@@ -25,6 +25,7 @@ import ReportListSearchBar from './ReportListSearchBar';
 import BattleEventSearchBar from './BattleEventSearchBar';
 import BusinessLogSearchBar, { useBusinessLogSearch } from './BusinessLogSearchBar';
 import CurrencyLogSearchBar, { useCurrencyLogSearch } from './CurrencyLogSearchBar';
+import CurrencyIndexSearchBar, { useCurrencyIndexSearch } from './CurrencyIndexSearchBar';
 import LandAuctionSearchBar from './LandAuctionSearchBar';
 import CaliumRequestSearchBar from './CaliumRequestSearchBar';
 
@@ -59,6 +60,8 @@ export {
   CurrencyLogSearchBar,
   useCurrencyLogSearch,
   LandAuctionSearchBar,
-  CaliumRequestSearchBar
+  CaliumRequestSearchBar,
+  CurrencyIndexSearchBar,
+  useCurrencyIndexSearch
 };
 

src/i18n.js

@@ -52,6 +52,7 @@ const resources = {
 			UPLOAD_FILENAME_SAMPLE_WARNING: "파일명에 sample을 넣을 수 없습니다.\r\n파일명을 변경 후 다시 업로드 해주세요.",
 			EXCEL_EXPORT_LENGTH_LIMIT_WARNING: '엑셀 다운은 10만건 이하까지만 가능합니다.\r\n조건을 조정 후 다시 시도해주세요.',
 			DOWNLOAD_COMPLETE: '다운이 완료되었습니다.',
+			DOWNLOAD_FAIL: '다운이 실패하였습니다.',
 			//user
 			NICKNAME_CHANGES_CONFIRM: '닉네임을 변경하시겠습니까?',
 			NICKNAME_CHANGES_COMPLETE: '닉네임 변경이 완료되었습니다.',
@@ -159,6 +160,8 @@ const resources = {
 			FILE_LAND_AUCTION: 'Caliverse_Land_Auction.xlsx',
 			FILE_BUSINESS_LOG: 'Caliverse_Log.xlsx',
 			FILE_BATTLE_EVENT: 'Caliverse_Battle_Event.xlsx',
+			FILE_GAME_LOG_CURRENCY: 'Caliverse_Game_Log_Currency',
+			FILE_CURRENCY_INDEX: 'Caliverse_Currency_Index',
 			//서버 에러메시지
 			DYNAMODB_NOT_USER: '유저 정보를 확인해주세요.',
 			NICKNAME_EXIT_ERROR: '해당 닉네임이 존재합니다.',

src/pages/DataManage/GameLogView.js

@@ -1,5 +1,4 @@
-import { Fragment, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
 
 import Button from '../../components/common/button/Button';
 import Pagination from '../../components/common/Pagination/Pagination';
@@ -11,26 +10,19 @@ import 'react-datepicker/dist/react-datepicker.css';
 import {
 	Title,
 	SelectInput,
-	BtnWrapper,
 	TableStyle,
 	TableInfo,
 	ListCount,
 	ListOption,
-	ButtonClose,
-	ModalText,
 	TabScroll, TabItem, TabWrapper,
 } from '../../styles/Components';
 import { styled } from 'styled-components';
 
-import Modal from '../../components/common/modal/Modal';
-
-import { useNavigate } from 'react-router-dom';
-import { authList } from '../../store/authList';
-import { useRecoilValue } from 'recoil';
 import { withAuth } from '../../hooks/hook';
-import { authType, TabUserList } from '../../assets/data';
+import { authType } from '../../assets/data';
 import { TabGameLogList } from '../../assets/data/options';
 import CurrencyLogContent from '../../components/DataManage/CurrencyLogContent';
+import { STORAGE_GAME_LOG_CURRENCY_SEARCH } from '../../assets/data/adminConstants';
 
 registerLocale('ko', ko);
 
@@ -110,10 +102,22 @@ const ItemLogContent = () => {
 const GameLogView = () => {
 	const [activeTab, setActiveTab] = useState('CURRENCY');
 
+	useEffect(() => {
+		const paramsData = sessionStorage.getItem(STORAGE_GAME_LOG_CURRENCY_SEARCH);
+
+		if (paramsData) {
+			const searchData = JSON.parse(paramsData);
+
+			setActiveTab(searchData.tab);
+			console.log(searchData);
+		}
+	}, []);
+
 	const handleTab = (e, content) => {
 		e.preventDefault();
 		setActiveTab(content);
 	};
+
 	return (
 		<>
 			<Title>게임 로그 조회</Title>
@@ -121,8 +125,8 @@ const GameLogView = () => {
 				<TabWrapper>
 					{TabGameLogList.map((el, idx) => {
 						return (
-							<li>
+							<li key={idx}>
-								<TabItem key={idx} $state={activeTab === el.value ? 'active' : 'none'} onClick={e => handleTab(e, el.value)}>
+								<TabItem $state={activeTab === el.value ? 'active' : 'none'} onClick={e => handleTab(e, el.value)}>
 									{el.name}
 								</TabItem>
 							</li>
@@ -130,8 +134,8 @@ const GameLogView = () => {
 					})}
 				</TabWrapper>
 			</TabScroll>
-			{activeTab === 'ITEM' && <ItemLogContent />}
+			{/*{activeTab === 'ITEM' && <ItemLogContent />}*/}
-			{activeTab === 'CURRENCY' && <CurrencyLogContent />}
+			<CurrencyLogContent active={activeTab === 'CURRENCY'} />
 			{/*{activeTab === 'TRADE' && <TradeLogContent />}*/}
 		</>
 	);

src/pages/IndexManage/EconomicIndex.js

@@ -22,8 +22,6 @@ import { authType } from '../../assets/data';
 import { TabEconomicIndexList, TabGameLogList } from '../../assets/data/options';
 
 const EconomicIndex = () => {
-	const navigate = useNavigate();
-	const userInfo = useRecoilValue(authList);
 	const [activeTab, setActiveTab] = useState('CURRENCY');
 
 	const handleTab = (e, content) => {
@@ -37,8 +35,8 @@ const EconomicIndex = () => {
 				<TabWrapper>
 					{TabEconomicIndexList.map((el, idx) => {
 						return (
-							<li>
+							<li key={idx}>
-								<TabItem key={idx} $state={activeTab === el.value ? 'active' : 'none'} onClick={e => handleTab(e, el.value)}>
+								<TabItem $state={activeTab === el.value ? 'active' : 'none'} onClick={e => handleTab(e, el.value)}>
 									{el.name}
 								</TabItem>
 							</li>

src/styles/Components.js

@@ -735,3 +735,13 @@ export const CircularProgressWrapper = styled.div`
 	align-items: center;
 	justify-content: center;
 `;
+
+export const TotalRow = styled.tr`
+  background-color: #f8f8f8;
+  font-weight: bold;
+  
+  td {
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+  }
+`;

src/utils/common.js

@@ -192,3 +192,14 @@ export const responseFileDownload = (response, options = {}) => {
 	link.remove();
 	window.URL.revokeObjectURL(href);
 };
+
+export const calculateTotals = (data) => {
+	return data?.reduce((acc, row) => {
+		Object.entries(row).forEach(([key, value]) => {
+			if (!isNaN(value) && value !== '') {
+				acc[key] = (acc[key] || 0) + Number(value);
+			}
+		});
+		return acc;
+	}, {}) || {};
+};