init

2025-02-12 18:29:27 +09:00
commit 513ea114cc
290 changed files with 84274 additions and 0 deletions
--- a/src/pages/IndexManage/UserIndex.js
+++ b/src/pages/IndexManage/UserIndex.js
@@ -0,0 +1,103 @@
+import { Fragment, useEffect, useState } from 'react';
+import { styled } from 'styled-components';
+import { Link, useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+
+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 { UserContent, SegmentContent, PlayTimeContent, RetentionContent, DailyActiveUserContent, DailyMedalContent } from '../../components/IndexManage/index';
+import AuthModal from '../../components/common/modal/AuthModal';
+import { authType } from '../../assets/data';
+
+const UserIndex = () => {
+	const token = sessionStorage.getItem('token');
+	const navigate = useNavigate();
+
+	const userInfo = useRecoilValue(authList);
+	const [activeTab, setActiveTab] = useState('이용자 지표');
+
+	const handleTab = (e, content) => {
+		// e.preventDefault();
+		setActiveTab(content);
+	};
+
+	const TabList = [
+		{ title: '이용자 지표' },
+		// { title: 'Retention' },
+		// { title: 'Segment' },
+		// { title: '플레이타임' },
+		// { title: 'DAU' },
+		// { title: '메달' },
+	];
+
+	return (
+		<>
+			{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === authType.userIndicatorsRead) ? (
+				<AuthModal/>
+			) : (
+				<>
+					<Title>유저 지표</Title>
+					<TabWrapper>
+						{TabList.map((el, idx) => {
+							return (
+								<TabItem 
+									key={idx} 
+									$state={el.title === activeTab ? 'active' : 'unactive'} 
+									onClick={(e) => handleTab(e, el.title)}
+								>
+									{el.title}
+								</TabItem>
+							);
+						})}
+					</TabWrapper>
+
+					{/*{activeTab === 'DAU' && <DailyActiveUserContent />}*/}
+					{activeTab === '이용자 지표' && <UserContent />}
+					{activeTab === 'Retention' && <RetentionContent />}
+					{activeTab === 'Segment' && <SegmentContent />}
+					{activeTab === '플레이타임' && <PlayTimeContent />}
+					{/*{activeTab === '메달' && <DailyMedalContent />}*/}
+					
+					
+				</>
+			)}
+		</>
+	);
+};
+
+export default UserIndex;
+
+const TabItem = styled(Link)`
+	display: inline-flex;
+	width: 120px;
+	height: 30px;
+	justify-content: center;
+	align-items: center;
+	background: #f9f9f9;
+	border-left: 1px solid #d9d9d9;
+	&:hover {
+		background: #888;
+		color: #fff;
+	}
+	${props =>
+		props.$state === 'active' &&
+		`
+	background: #888;
+		color: #fff;`}
+`;
+
+const TabWrapper = styled.ul`
+	display: flex;
+	li:first-child {
+		${TabItem} {
+			border-left: 0;
+		}
+	}
+`;
+