init

2025-02-12 18:29:27 +09:00
commit 513ea114cc
290 changed files with 84274 additions and 0 deletions
--- a/src/pages/IndexManage/EconomicIndex.js
+++ b/src/pages/IndexManage/EconomicIndex.js
@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import Button from '../../components/common/button/Button';
+
+import { Title, BtnWrapper, ButtonClose, ModalText } from '../../styles/Components';
+import { styled } from 'styled-components';
+
+import Modal from '../../components/common/modal/Modal';
+
+import { useNavigate } from 'react-router-dom';
+import { authList } from '../../store/authList';
+import { useRecoilValue } from 'recoil';
+
+import CreditContent from '../../components/IndexManage/CreditContent';
+import VBPContent from '../../components/IndexManage/VBPContent';
+import ItemContent from '../../components/IndexManage/ItemContent';
+import InstanceContent from '../../components/IndexManage/InstanceContent';
+import DecoContent from '../../components/IndexManage/DecoContent';
+
+const EconomicIndex = () => {
+	const navigate = useNavigate();
+	const userInfo = useRecoilValue(authList);
+	const [activeTab, setActiveTab] = useState('credit');
+
+	const handleTab = (e, content) => {
+		e.preventDefault();
+		setActiveTab(content);
+	};
+	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 />}
+				</>
+			)}
+		</>
+	);
+};
+
+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;
+		}
+	}
+`;