Log currency 관련 API 호출 추가

components 정리에 따른 호출 위치 수정
excelExportButton에 functionName 추가
게임 로그조회 수정

src/pages/IndexManage/EconomicIndex.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 import Button from '../../components/common/button/Button';
 
-import { Title, BtnWrapper, ButtonClose, ModalText } from '../../styles/Components';
+import { Title, BtnWrapper, ButtonClose, ModalText, TabItem, TabScroll, TabWrapper } from '../../styles/Components';
 import { styled } from 'styled-components';
 
 import Modal from '../../components/common/modal/Modal';
@@ -17,11 +17,14 @@ import VBPContent from '../../components/IndexManage/VBPContent';
 import ItemContent from '../../components/IndexManage/ItemContent';
 import InstanceContent from '../../components/IndexManage/InstanceContent';
 import DecoContent from '../../components/IndexManage/DecoContent';
+import { withAuth } from '../../hooks/hook';
+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('credit');
+	const [activeTab, setActiveTab] = useState('CURRENCY');
 
 	const handleTab = (e, content) => {
 		e.preventDefault();
@@ -29,86 +32,27 @@ const EconomicIndex = () => {
 	};
 	return (
 		<>
-			{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === 10) ? (
-				<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={'view'}>
-					<BtnWrapper $justify="flex-end">
-						<ButtonClose onClick={() => navigate(-1)} />
-					</BtnWrapper>
-					<ModalText $align="center">
-						해당 메뉴에 대한 조회 권한이 없습니다.
-						<br />
-						권한 등급을 변경 후 다시 이용해주세요.
-					</ModalText>
-					<BtnWrapper $gap="10px">
-						<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={() => navigate(-1)} />
-					</BtnWrapper>
-				</Modal>
-			) : (
-				<>
-					<Title>경제 지표</Title>
-					<TabWrapper>
-						<li>
-							<TabItem $state={activeTab === 'credit' ? 'active' : 'none'} onClick={e => handleTab(e, 'credit')}>
-								재화
-							</TabItem>
-						</li>
-						<li>
-							<TabItem $state={activeTab === 'vbp' ? 'active' : 'none'} onClick={e => handleTab(e, 'vbp')}>
-								VBP
-							</TabItem>
-						</li>
-						<li>
-							<TabItem $state={activeTab === 'item' ? 'active' : 'none'} onClick={e => handleTab(e, 'item')}>
-								아이템
-							</TabItem>
-						</li>
-						<li>
-							<TabItem $state={activeTab === 'instance' ? 'active' : 'none'} onClick={e => handleTab(e, 'instance')}>
-								인스턴스
-							</TabItem>
-						</li>
-						<li>
-							<TabItem $state={activeTab === 'deco' ? 'active' : 'none'} onClick={e => handleTab(e, 'deco')}>
-								의상 / 타투
-							</TabItem>
-						</li>
-					</TabWrapper>
-					{activeTab === 'credit' && <CreditContent />}
-					{activeTab === 'vbp' && <VBPContent />}
-					{activeTab === 'item' && <ItemContent />}
-					{activeTab === 'instance' && <InstanceContent />}
-					{activeTab === 'deco' && <DecoContent />}
-				</>
-			)}
+			<Title>경제 지표</Title>
+			<TabScroll>
+				<TabWrapper>
+					{TabEconomicIndexList.map((el, idx) => {
+						return (
+							<li>
+								<TabItem key={idx} $state={activeTab === el.value ? 'active' : 'none'} onClick={e => handleTab(e, el.value)}>
+									{el.name}
+								</TabItem>
+							</li>
+						)
+					})}
+				</TabWrapper>
+			</TabScroll>
+			{activeTab === 'CURRENCY' && <CreditContent />}
+			{/*{activeTab === 'vbp' && <VBPContent />}*/}
+			{/*{activeTab === 'item' && <ItemContent />}*/}
+			{/*{activeTab === 'instance' && <InstanceContent />}*/}
+			{/*{activeTab === 'deco' && <DecoContent />}*/}
 		</>
 	);
 };
 
-export default EconomicIndex;
-
-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;
-		}
-	}
-`;
+export default withAuth(authType.economicIndicatorsRead)(EconomicIndex);