104 lines
2.6 KiB
JavaScript
104 lines
2.6 KiB
JavaScript
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;
|
|
}
|
|
}
|
|
`;
|
|
|