operationSystem-front/src/components/IndexManage/DailyDashBoard.js

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 => {
			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;
`;