init

src/components/IndexManage/DailyDashBoard.js

@@ -0,0 +1,170 @@
+import { useEffect, useState } from 'react';
+import { userTotalIndex } from '../../apis';
+
+import { styled } from 'styled-components';
+import TitleArrow from '../../assets/img/icon/icon-title.png';
+import UpIcon from '../../assets/img/icon/icon-up.png';
+import DownIcon from '../../assets/img/icon/icon-down.png';
+
+const DailyDashBoard = ({ content }) => {
+	const [boardState, setBoardState] = useState('active');
+	const [totalData, setTotalData] = useState([]);
+
+	const handleBoard = () => {
+		if (boardState === 'active') {
+			setBoardState('inactive');
+		} else {
+			setBoardState('active');
+		}
+	};
+
+	useEffect(() => {
+		// 이용자 지표 총계 불러오기
+		fetchData();
+	}, []);
+
+	const fetchData = async () => {
+		const token = sessionStorage.getItem('token');
+		await userTotalIndex(token).then(data => {
+			console.log(data);
+			setTotalData(data.dashboard);
+		});
+	};
+
+	return (
+		<DailyBoardWrapper>
+				{totalData &&
+			<DailyBoard>
+				<BoardTitle onClick={handleBoard} $state={boardState}>
+					Daily Dashboard
+				</BoardTitle>
+				<BoardInfo $state={boardState}>
+					<BoxWrapper>
+						<InfoItem>
+							<InfoTitle>DAU</InfoTitle>
+							<InfoValue>
+								{totalData.dau && totalData.dau.count}
+								<span>({totalData.dau && totalData.dau.dif}%)</span>
+								<InfoArrow $state={totalData.dau && totalData.dau.updown === '=' ? null : totalData.dau && totalData.dau.updown}></InfoArrow>
+							</InfoValue>
+						</InfoItem>
+						<InfoItem>
+							<InfoTitle>NRU</InfoTitle>
+							<InfoValue>
+								{totalData.nru && totalData.nru.count}
+								<span>({totalData.nru && totalData.nru.dif}%)</span>
+								<InfoArrow $state={totalData.nru && totalData.nru.updown === '=' ? null : totalData.nru && totalData.nru.updown}></InfoArrow>
+							</InfoValue>
+						</InfoItem>
+						<InfoItem>
+							<InfoTitle>PU</InfoTitle>
+							<InfoValue>
+								{totalData.pu && totalData.pu.count}
+								<span>({totalData.pu && totalData.pu.dif}%)</span>
+								<InfoArrow $state={totalData.pu && totalData.pu.updown === '=' ? null : totalData.pu && totalData.pu.updown}></InfoArrow>
+							</InfoValue>
+						</InfoItem>
+						<InfoItem>
+							<InfoTitle>MCU</InfoTitle>
+							<InfoValue>
+								{totalData.mcu && totalData.mcu.count}
+								<span>({totalData.mcu && totalData.mcu.dif}%)</span>
+								<InfoArrow $state={totalData.mcu && totalData.mcu.updown === '=' ? null : totalData.mcu && totalData.mcu.updown}></InfoArrow>
+							</InfoValue>
+						</InfoItem>
+					</BoxWrapper>
+					<InfoNotice>집계 기간 : {totalData.date && totalData.date} 00시 ~ 24시 (집계는 당일 기준 하루 전 데이터를 사용합니다)</InfoNotice>
+				</BoardInfo>
+			</DailyBoard>
+			}
+		</DailyBoardWrapper>
+	);
+};
+
+export default DailyDashBoard;
+
+const DailyBoardWrapper = styled.div`
+	padding-top: 20px;
+	border-top: 1px solid #000;
+`;
+
+const DailyBoard = styled.div`
+	background: #f6f6f6;
+	border-radius: 10px;
+	margin-bottom: 20px;
+`;
+
+const BoardTitle = styled.div`
+	font-size: 24px;
+	font-weight: 600;
+	line-height: 52px;
+	padding: 0 10px;
+	cursor: pointer;
+	&:after {
+		content: '';
+		display: inline-block;
+		width: 11px;
+		height: 52px;
+		margin-left: 10px;
+		background: url(${TitleArrow}) 50% 50% no-repeat;
+		position: absolute;
+		transform: ${props => (props.$state === 'active' ? 'rotate(0)' : 'rotate(180deg)')};
+	}
+`;
+
+const BoardInfo = styled.div`
+	padding: 20px;
+	border-top: 1px solid #d9d9d9;
+	display: ${props => (props.$state === 'active' ? 'block' : 'none')};
+`;
+
+const BoxWrapper = styled.div`
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+`;
+
+const InfoItem = styled.div`
+	width: 24%;
+	background: #fff;
+	padding: 15px 20px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: center;
+	border-radius: 15px;
+`;
+
+const InfoTitle = styled.div`
+	width: 42px;
+	font-size: 20px;
+	font-weight: 600;
+`;
+
+const InfoValue = styled.div`
+	display: inline-flex;
+	flex-wrap: wrap;
+	margin: 5px 0;
+	gap: 5px 0;
+	align-items: center;
+	font-size: 18px;
+	font-weight: 600;
+	span {
+		font-size: 14px;
+		font-weight: 400;
+		display: inline-block;
+		margin: 0 5px;
+	}
+`;
+
+const InfoArrow = styled.div`
+	width: 12px;
+	height: 6px;
+	background: url(${props => (props.$state === null ? '' : props.$state === 'UP' ? UpIcon : DownIcon)}) 50% 50% no-repeat;
+`;
+const InfoNotice = styled.div`
+	font-size: 12px;
+	text-align: right;
+	color: #999;
+	margin-top: 10px;
+`;