75 lines
1.7 KiB
JavaScript
75 lines
1.7 KiB
JavaScript
import { useState } from 'react';
|
|
import { styled } from 'styled-components';
|
|
import { Link } from 'react-router-dom';
|
|
import { AnimatedPageWrapper } from '../../components/common/Layout';
|
|
import { Title } from '../../styles/Components';
|
|
|
|
import { UserContent, RetentionContent } from '../../components/IndexManage/index';
|
|
import { authType } from '../../assets/data';
|
|
import { withAuth } from '../../hooks/hook';
|
|
import { TabUserIndexList } from '../../assets/data/options';
|
|
import CreditContent from '../../components/IndexManage/CreditContent';
|
|
|
|
const UserIndex = () => {
|
|
const [activeTab, setActiveTab] = useState('USER');
|
|
|
|
const handleTab = (e, content) => {
|
|
e.preventDefault();
|
|
setActiveTab(content);
|
|
};
|
|
|
|
return (
|
|
<AnimatedPageWrapper>
|
|
<Title>유저 지표</Title>
|
|
<TabWrapper>
|
|
{TabUserIndexList.map((el, idx) => {
|
|
return (
|
|
<li key={idx}>
|
|
<TabItem $state={activeTab === el.value ? 'active' : 'none'} onClick={e => handleTab(e, el.value)}>
|
|
{el.name}
|
|
</TabItem>
|
|
</li>
|
|
)
|
|
})}
|
|
</TabWrapper>
|
|
|
|
{activeTab === 'USER' && <UserContent />}
|
|
{activeTab === 'RETENTION' && <RetentionContent />}
|
|
{activeTab === 'CURRENCY' && <CreditContent />}
|
|
|
|
|
|
</AnimatedPageWrapper>
|
|
);
|
|
};
|
|
|
|
export default withAuth(authType.userIndicatorsRead)(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;
|
|
}
|
|
}
|
|
`;
|
|
|