From 7041d4a6490331f2b74a11ca446b74671c8ca118 Mon Sep 17 00:00:00 2001
From: bcjang <sica4311@gmail.com>
Date: Wed, 16 Jul 2025 18:39:30 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9C=A0=EC=A0=80=20=EC=A7=80=ED=91=9C=20?=
 =?UTF-8?q?=EC=9E=94=EC=A1=B4=EC=9C=A8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/Indicators.js                        |  10 +-
 src/assets/data/options.js                    |   7 +
 .../IndexManage/RetentionContent.js           | 152 ++++------
 .../searchBar/CurrencyIndexSearchBar.js       |   5 +-
 .../searchBar/RetentionSearchBar.js           | 287 +++++++++---------
 src/components/searchBar/index.js             |   3 +-
 src/i18n.js                                   |   1 +
 src/pages/DataManage/GameLogView.js           |  19 --
 src/pages/IndexManage/UserIndex.js            |  57 ++--
 src/utils/common.js                           |  20 ++
 10 files changed, 252 insertions(+), 309 deletions(-)

diff --git a/src/apis/Indicators.js b/src/apis/Indicators.js
index d61171b..27f24d3 100644
--- a/src/apis/Indicators.js
+++ b/src/apis/Indicators.js
@@ -62,10 +62,14 @@ export const userIndexExport = async (token, filename, sendDate, endDate) => {
 };
 
 // Retention
-export const RetentionIndexView = async (token, start_dt, end_dt) => {
+export const RetentionIndexView = async (token, startDate, endDate, order, size, currentPage) => {
 	try {
-		const res = await Axios.get(`/api/v1/indicators/retention/list?start_dt=${start_dt}&end_dt=${end_dt}`, {
-			headers: { Authorization: `Bearer ${token}` },
+		const res = await Axios.get(`/api/v1/indicators/retention/list?start_dt=${startDate}&end_dt=${endDate}
+		&orderby=${order}&page_no=${currentPage}&page_size=${size}`, {
+			headers: {
+				Authorization: `Bearer ${token}`,
+				'Content-Type': 'application/json'
+			},
 		});
 
 		return res.data.data;
diff --git a/src/assets/data/options.js b/src/assets/data/options.js
index 2abdaa4..f36a676 100644
--- a/src/assets/data/options.js
+++ b/src/assets/data/options.js
@@ -19,6 +19,13 @@ export const TabEconomicIndexList = [
 	// { value: 'instance', name: '인스턴스' },
 ];
 
+export const TabUserIndexList = [
+	{ value: 'USER', name: '이용자 지표' },
+	{ value: 'RETENTION', name: '잔존율' },
+	// { value: 'SEGMENT', name: 'Segment' },
+	// { value: 'PLAYTIME', name: '플레이타임' },
+];
+
 export const mailSendType = [
 	{ value: 'ALL', name: '전체' },
 	{ value: 'RESERVE_SEND', name: '예약 발송' },
diff --git a/src/components/IndexManage/RetentionContent.js b/src/components/IndexManage/RetentionContent.js
index 1bb23ba..4711ead 100644
--- a/src/components/IndexManage/RetentionContent.js
+++ b/src/components/IndexManage/RetentionContent.js
@@ -1,108 +1,76 @@
-import { Fragment, useEffect, useState } from 'react';
-
-import Button from '../../components/common/button/Button';
+import React, { Fragment, useRef } from 'react';
 
 import { TableStyle, TableInfo, ListOption, IndexTableWrap } from '../../styles/Components';
-import { RetentionSearchBar } from '../../components/IndexManage/index';
-import { RetentionIndexExport, RetentionIndexView } from '../../apis';
+import { AnimatedPageWrapper } from '../common/Layout';
+import { useRetentionSearch, RetentionSearchBar } from '../searchBar';
+import { TableSkeleton } from '../Skeleton/TableSkeleton';
+import { numberFormatter } from '../../utils';
+import { ExcelDownButton } from '../common';
+import { useTranslation } from 'react-i18next';
 
 const RetentionContent = () => {
+	const { t } = useTranslation();
+	const tableRef = useRef(null);
 	const token = sessionStorage.getItem('token');
-	let d = new Date();
-	const START_DATE = new Date(new Date(d.setDate(d.getDate() - 1)).setHours(0, 0, 0, 0));
-	const END_DATE = new Date(new Date(d.setDate(d.getDate() - 1)).setHours(24, 0, 0, 0));
 
-	const [dataList, setDataList] = useState([]);
-	const [resultData, setResultData] = useState([]);
-	const [retentionData, setRetention] = useState(1);
+	const {
+		searchParams,
+		loading: dataLoading,
+		data: dataList,
+		handleSearch,
+		handleReset,
+		updateSearchParams
+	} = useRetentionSearch(token);
 
-	const [sendDate, setSendDate] = useState(START_DATE);
-	const [finishDate, setFinishDate] = useState(END_DATE);
-	const [excelBtn, setExcelBtn] = useState(true); //true 시 비활성화
-
-	useEffect(() => {
-		fetchData(START_DATE, END_DATE);
-	}, []);
-
-	// Retention 지표 데이터
-	const fetchData = async (startDate, endDate) => {
-		const startDateToLocal =
-			startDate.getFullYear() +
-			'-' +
-			(startDate.getMonth() + 1 < 9 ? '0' + (startDate.getMonth() + 1) : startDate.getMonth() + 1) +
-			'-' +
-			(startDate.getDate() < 9 ? '0' + startDate.getDate() : startDate.getDate());
-
-		const endDateToLocal =
-			endDate.getFullYear() +
-			'-' +
-			(endDate.getMonth() + 1 < 9 ? '0' + (endDate.getMonth() + 1) : endDate.getMonth() + 1) +
-			'-' +
-			(endDate.getDate() < 9 ? '0' + endDate.getDate() : endDate.getDate());
-
-		setDataList(await RetentionIndexView(token, startDateToLocal, endDateToLocal));
-
-		console.log(dataList);
-
-		setSendDate(startDateToLocal);
-		setFinishDate(endDateToLocal);
-	};
-
-	// 검색 함수
-	const handleSearch = (send_dt, end_dt) => {
-		fetchData(send_dt, end_dt);
-		setRetention(resultData.retention);
-	};
-
-	// 엑셀 다운로드
-	const handleXlsxExport = () => {
-		const fileName = 'Caliverse_Retention_Index.xlsx';
-
-		if(!excelBtn){
-			RetentionIndexExport(token, fileName, sendDate, finishDate);
-		} 		
-	};
 
 	return (
-		<>
-			<RetentionSearchBar setResultData={setResultData} resultData={resultData} 
-				handleSearch={handleSearch} fetchData={fetchData} setRetention={setRetention} setExcelBtn={setExcelBtn} />
+		<AnimatedPageWrapper>
+			<RetentionSearchBar
+				searchParams={searchParams}
+				onSearch={(newParams, executeSearch = true) => {
+					if (executeSearch) {
+						handleSearch(newParams);
+					} else {
+						updateSearchParams(newParams);
+					}
+				}}
+				onReset={handleReset}
+			/>
 			<TableInfo>
 				<ListOption>
-					<Button 
-						theme={excelBtn === true ? "disable" : "line"} 
-						text="엑셀 다운로드" 
-						disabled={handleXlsxExport}
-						handleClick={handleXlsxExport} />
+					<ExcelDownButton tableRef={tableRef} fileName={t('FILE_INDEX_USER_RETENTION')} />
 				</ListOption>
 			</TableInfo>
-			<IndexTableWrap>
-				<TableStyle>
-					<caption></caption>
-					<thead>
-						<tr>
-							{/* <th width="100">국가</th> */}
-							<th width="150">일자</th>
-							<th className="cell-nru">NRU</th>
-							{[...Array(Number(retentionData))].map((value, index) => {
-								return <th key={index}>{`D+${index + 1}`}</th>;
-							})}
-						</tr>
-					</thead>
-					<tbody>
-						{dataList.retention &&
-							dataList.retention.map(data => (
-								<tr className="cell-nru-th" key={data.date}>
-									<td>{data.date}</td>
-									{data['d-day'].map((day, index) => (
-										<td key={index}>{day.dif}</td>
-									))}
-								</tr>
-							))}
-					</tbody>
-				</TableStyle>
-			</IndexTableWrap>
-		</>
+			{dataLoading ? <TableSkeleton width='100%' count={15} /> :
+				<IndexTableWrap>
+					<TableStyle ref={tableRef}>
+						<caption></caption>
+						<thead>
+							<tr>
+								<th>일자</th>
+								<th>NRU</th>
+								<th>D+1</th>
+								<th>D+7</th>
+								<th>D+30</th>
+							</tr>
+						</thead>
+						<tbody>
+							{dataList?.map((data, index) => (
+								<Fragment key={index}>
+									<tr>
+										<td>{data.logDay}</td>
+										<td>{data.totalCreated}</td>
+										<td>{numberFormatter.formatPercent(data.d1_rate)}</td>
+										<td>{numberFormatter.formatPercent(data.d7_rate)}</td>
+										<td>{numberFormatter.formatPercent(data.d30_rate)}</td>
+									</tr>
+								</Fragment>
+								))}
+						</tbody>
+					</TableStyle>
+				</IndexTableWrap>
+			}
+		</AnimatedPageWrapper>
 	);
 };
 
diff --git a/src/components/searchBar/CurrencyIndexSearchBar.js b/src/components/searchBar/CurrencyIndexSearchBar.js
index 0c99b45..ba4c9d7 100644
--- a/src/components/searchBar/CurrencyIndexSearchBar.js
+++ b/src/components/searchBar/CurrencyIndexSearchBar.js
@@ -1,8 +1,7 @@
-import { TextInput, InputLabel, SelectInput, InputGroup } from '../../styles/Components';
+import { InputLabel } 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 { getCurrencyList } from '../../apis/Log';
 import { useAlert } from '../../context/AlertProvider';
 import { alertTypes } from '../../assets/data/types';
 
diff --git a/src/components/searchBar/RetentionSearchBar.js b/src/components/searchBar/RetentionSearchBar.js
index 5b32026..1596edc 100644
--- a/src/components/searchBar/RetentionSearchBar.js
+++ b/src/components/searchBar/RetentionSearchBar.js
@@ -1,166 +1,151 @@
-import { useEffect, useState } from 'react';
-import { styled } from 'styled-components';
-import Button from '../common/button/Button';
-import DatePickerComponent from '../common/Date/DatePickerComponent';
+import { InputLabel } from '../../styles/Components';
+import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
+import { useCallback, useEffect, useState } from 'react';
+import { useAlert } from '../../context/AlertProvider';
+import { alertTypes } from '../../assets/data/types';
+import { RetentionIndexView } from '../../apis';
 
-import { FormWrapper, InputLabel, TextInput, SelectInput, BtnWrapper, InputGroup, DatePickerWrapper, AlertText } from '../../styles/Components';
+export const useRetentionSearch = (token, initialPageSize) => {
+	const {showToast} = useAlert();
 
-const RetentionSearchBar = ({ resultData, setResultData, handleSearch, fetchData, setRetention, setExcelBtn }) => {
-	// 초기 날짜 세팅
-	let d = new Date();
-	const START_DATE = new Date(new Date(d.setDate(d.getDate() - 1)).setHours(0, 0, 0, 0));
-	const END_DATE = new Date(new Date(d.setDate(d.getDate() - 1)).setHours(24, 0, 0, 0));
-	const [errorMessage, setErrorMessage] = useState('');
-	const [period, setPeriod] = useState(0);
+	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);
 
-	// resultData에 임의 날짜 넣어주기
 	useEffect(() => {
-		setResultData({
-			send_dt: START_DATE,
-			end_dt: '',
-			retention: 0,
-		});
+		const initialLoad = async () => {
+			await fetchData(searchParams);
+		};
+
+		initialLoad();
+	}, [token]);
+
+	const fetchData = useCallback(async (params) => {
+		if (!token) return;
+
+		try {
+			setLoading(true);
+			const result = await RetentionIndexView(
+				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.retention);
+			return result.retention;
+		} catch (error) {
+			showToast('error', {type: alertTypes.error});
+			throw error;
+		} finally {
+			setLoading(false);
+		}
+	}, [token]);
+
+	const updateSearchParams = useCallback((newParams) => {
+		setSearchParams(prev => ({
+			...prev,
+			...newParams
+		}));
 	}, []);
 
-	// 발송 날짜 세팅 로직
-	const handleSelectedDate = data => {
-		const sendDate = new Date(data);
-		const resultSendData = new Date(sendDate.getFullYear(), sendDate.getMonth(), sendDate.getDate());
+	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);
 
-		const resultEndDate = new Date(resultSendData);
-		resultEndDate.setDate(resultEndDate.getDate() + Number(resultData.retention));
+		if (executeSearch) {
+			return await fetchData(updatedParams);
+		}
+		return null;
+	}, [searchParams, fetchData]);
 
-		setResultData({ ...resultData, send_dt: resultSendData, end_dt: resultEndDate });
+	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 RetentionSearchBar = ({ searchParams, onSearch, onReset }) => {
+	const handleSubmit = event => {
+		event.preventDefault();
+
+		onSearch(searchParams, true);
 	};
 
-	// // 발송 날짜 세팅 로직
-	// const handleEndDate = data => {
-	// 	const endDate = new Date(data);
-	// 	const resultSendData = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
-
-	// 	setResultData({ ...resultData, end_dt: resultSendData });
-	// };
-
-	// Retention 세팅 로직
-	const handleRetention = e => {
-		const value = e.target.value;
-
-		const resultEndDate = new Date(resultData.send_dt);
-		resultEndDate.setDate(resultEndDate.getDate() + Number(value));
-
-		setResultData({ ...resultData, end_dt: resultEndDate, retention: value });
-		setPeriod(value);
-	};
-
-	//Retention 범위 선택 후 disable 처리 로직
-	const handleSearchBtn = e => {
-		e.preventDefault();
-
-		if(period == 0) {
-			setErrorMessage("필수값을 선택하세요.");
-			return false;
-		} else {
-			setErrorMessage("");
-			setExcelBtn(false); //활성화
-			handleSearch(resultData.send_dt, resultData.end_dt);
-		} 
-	}
-
-	const handleReset = e => {
-		e.preventDefault();
-		setResultData({ send_dt: START_DATE, end_dt: '', retention: 0 });
-		setRetention(1);
-		setErrorMessage("");
-		setPeriod(1);
-		setExcelBtn(true); //비활성화 
-
-		fetchData(START_DATE, END_DATE);
-	};
-
-	return (
+	const searchList = [
 		<>
-			<FormWrapper>
-				<SearchbarStyle>
-					<SearchItem>
-						<InputLabel>집계 기준일</InputLabel>
-						<InputGroup>
-							<DatePickerWrapper>
-								<DatePickerComponent 
-									name="시작 일자" selectedDate={resultData.send_dt} 
-									handleSelectedDate={data => handleSelectedDate(data)} 
-									maxDate={new Date()} />
-								<span>~</span>
-								<DatePickerComponent 
-									name="종료 일자" 
-									selectedDate={resultData.end_dt} 
-									maxDate={new Date()} 
-									readOnly={true} 
-									disabled={true} 
-									type="retention" />
-							</DatePickerWrapper>
-						</InputGroup>
-					</SearchItem>
-					<SearchItem>
-						<InputLabel>Retention 범위</InputLabel>
-						<SelectInput 
-							onChange={e => handleRetention(e)} value={resultData.retention}>
-							<option value={0}>선택</option>
-							<option value={1}>D+1</option>
-							<option value={7}>D+7</option>
-							<option value={30}>D+30</option>
-						</SelectInput>
-					</SearchItem>
-					{/* 기획 보류 */}
-					{/* <SearchItem>
-						<InputLabel>조회 국가</InputLabel>
-						<SelectInput>
-							<option value="">ALL</option>
-							<option value="">KR</option>
-							<option value="">EN</option>
-							<option value="">JP</option>
-							<option value="">TH</option>
-						</SelectInput>
-					</SearchItem> */}
-					<BtnWrapper $gap="8px">
-						<Button theme="reset" handleClick={handleReset} />
-						<Button
-							theme="search"
-							text="검색"
-							handleClick={handleSearchBtn}
-						/>
-						<AlertText>{errorMessage}</AlertText>
-					</BtnWrapper>
-				</SearchbarStyle>
-			</FormWrapper>
-		</>
-	);
+			<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 RetentionSearchBar;
 
-const SearchbarStyle = styled.div`
-	width: 100%;
-	display: flex;
-	flex-wrap: wrap;
-	gap: 20px 0;
-	font-size: 14px;
-	padding: 20px;
-	border-top: 1px solid #000;
-	border-bottom: 1px solid #000;
-	margin-bottom: 40px;
-`;
-
-const SearchItem = styled.div`
-	display: flex;
-	align-items: center;
-	gap: 20px;
-	margin-right: 50px;
-
-	${TextInput}, ${SelectInput} {
-		height: 35px;
-	}
-	${TextInput} {
-		padding: 0 10px;
-		max-width: 400px;
-	}
-`;
diff --git a/src/components/searchBar/index.js b/src/components/searchBar/index.js
index 5a33a50..0e39bc3 100644
--- a/src/components/searchBar/index.js
+++ b/src/components/searchBar/index.js
@@ -18,7 +18,7 @@ import PlayTimeSearchBar from './PlayTimeSearchBar';
 import UserViewSearchBar from './UserViewSearchBar';
 import AdminViewSearchBar from './AdminViewSearchBar';
 import EventListSearchBar from './EventListSearchBar';
-import RetentionSearchBar from './RetentionSearchBar';
+import RetentionSearchBar, {useRetentionSearch} from './RetentionSearchBar';
 import UserBlockSearchBar from './UserBlockSearchBar';
 import UserIndexSearchBar from './UserIndexSearchBar';
 import ReportListSearchBar from './ReportListSearchBar';
@@ -53,6 +53,7 @@ export {
   AdminViewSearchBar,
   EventListSearchBar,
   RetentionSearchBar,
+  useRetentionSearch,
   UserBlockSearchBar,
   UserIndexSearchBar,
   ReportListSearchBar,
diff --git a/src/i18n.js b/src/i18n.js
index b8e790d..c454d12 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -163,6 +163,7 @@ const resources = {
 			FILE_SIZE_OVER_ERROR: "파일의 사이즈가 5MB를 초과하였습니다.",
 			//파일명칭
 			FILE_INDEX_USER_CONTENT: 'Caliverse_User_Index.xlsx',
+			FILE_INDEX_USER_RETENTION: 'Caliverse_Retention.xlsx',
 			FILE_CALIUM_REQUEST: 'Caliverse_Calium_Request.xlsx',
 			FILE_LAND_AUCTION: 'Caliverse_Land_Auction.xlsx',
 			FILE_BUSINESS_LOG: 'Caliverse_Log.xlsx',
diff --git a/src/pages/DataManage/GameLogView.js b/src/pages/DataManage/GameLogView.js
index 3dca6b2..662949f 100644
--- a/src/pages/DataManage/GameLogView.js
+++ b/src/pages/DataManage/GameLogView.js
@@ -72,22 +72,3 @@ const GameLogView = () => {
 };
 
 export default withAuth(authType.gameLogRead)(GameLogView);
-
-const TableWrapper = styled.div`
-	width: 100%;
-	min-width: 680px;
-	overflow: auto;
-	&::-webkit-scrollbar {
-		height: 4px;
-	}
-	&::-webkit-scrollbar-thumb {
-		background: #666666;
-	}
-	&::-webkit-scrollbar-track {
-		background: #d9d9d9;
-	}
-	${TableStyle} {
-		width: 100%;
-		min-width: max-content;
-	}
-`;
diff --git a/src/pages/IndexManage/UserIndex.js b/src/pages/IndexManage/UserIndex.js
index ef5ec12..bcc88ce 100644
--- a/src/pages/IndexManage/UserIndex.js
+++ b/src/pages/IndexManage/UserIndex.js
@@ -1,65 +1,42 @@
-import { Fragment, useEffect, useState } from 'react';
+import { useState } from 'react';
 import { styled } from 'styled-components';
-import { Link, useNavigate } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
+import { Link } from 'react-router-dom';
 import { AnimatedPageWrapper } from '../../components/common/Layout';
-
-import Modal from '../../components/common/modal/Modal';
-import Button from '../../components/common/button/Button';
-
-import { Title, BtnWrapper, ButtonClose, ModalText } from '../../styles/Components';
-
-import { authList } from '../../store/authList';
-import { userIndexView, userTotalIndex } from '../../apis';
+import { Title } from '../../styles/Components';
 
 import { UserContent, SegmentContent, PlayTimeContent, RetentionContent, DailyActiveUserContent, DailyMedalContent } from '../../components/IndexManage/index';
-import AuthModal from '../../components/common/modal/AuthModal';
 import { authType } from '../../assets/data';
 import { withAuth } from '../../hooks/hook';
+import { TabUserIndexList } from '../../assets/data/options';
 
 const UserIndex = () => {
-	const token = sessionStorage.getItem('token');
-	const navigate = useNavigate();
-
-	const userInfo = useRecoilValue(authList);
-	const [activeTab, setActiveTab] = useState('이용자 지표');
+	const [activeTab, setActiveTab] = useState('USER');
 
 	const handleTab = (e, content) => {
-		// e.preventDefault();
+		e.preventDefault();
 		setActiveTab(content);
 	};
 
-	const TabList = [
-		{ title: '이용자 지표' },
-		// { title: 'Retention' },
-		// { title: 'Segment' },
-		// { title: '플레이타임' },
-		// { title: 'DAU' },
-		// { title: '메달' },
-	];
-
 	return (
 		<AnimatedPageWrapper>
 			<Title>유저 지표</Title>
 			<TabWrapper>
-				{TabList.map((el, idx) => {
+				{TabUserIndexList.map((el, idx) => {
 					return (
-						<TabItem
-							key={idx}
-							$state={el.title === activeTab ? 'active' : 'unactive'}
-							onClick={(e) => handleTab(e, el.title)}
-						>
-							{el.title}
-						</TabItem>
-					);
+						<li key={idx}>
+							<TabItem $state={activeTab === el.value ? 'active' : 'none'} onClick={e => handleTab(e, el.value)}>
+								{el.name}
+							</TabItem>
+						</li>
+					)
 				})}
 			</TabWrapper>
 
 			{/*{activeTab === 'DAU' && <DailyActiveUserContent />}*/}
-			{activeTab === '이용자 지표' && <UserContent />}
-			{activeTab === 'Retention' && <RetentionContent />}
-			{activeTab === 'Segment' && <SegmentContent />}
-			{activeTab === '플레이타임' && <PlayTimeContent />}
+			{activeTab === 'USER' && <UserContent />}
+			{activeTab === 'RETENTION' && <RetentionContent />}
+			{activeTab === 'SEGMENT' && <SegmentContent />}
+			{activeTab === 'PLAYTIME' && <PlayTimeContent />}
 			{/*{activeTab === '메달' && <DailyMedalContent />}*/}
 
 
diff --git a/src/utils/common.js b/src/utils/common.js
index 0c71988..76baf87 100644
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -114,6 +114,26 @@ export const numberFormatter = {
 			console.error('Currency formatting error:', e);
 			return '0';
 		}
+	},
+	formatPercent: (number, decimals = 2) => {
+		if (number === null || number === undefined) return '0%';
+
+		try {
+			const num = typeof number === 'string' ? parseFloat(number) : number;
+			if (isNaN(num)) return '0%';
+
+			const valueToFormat = num / 100;
+
+			return new Intl.NumberFormat('ko-KR', {
+				style: 'percent',
+				minimumFractionDigits: 0,
+				maximumFractionDigits: decimals
+			}).format(valueToFormat);
+
+		} catch (e) {
+			console.error('Currency formatting error:', e);
+			return '0%';
+		}
 	}
 
 };