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

import { styled } from 'styled-components';
import { useState, useEffect } from 'react';

import { TableStyle, TableInfo, ListOption } from '../../styles/Components';

import Button from '../../components/common/button/Button';
import VBPSearchBar from '../../components/IndexManage/VBPSearchBar';
import { VBPIndexExport, VbpIndexView } from '../../apis';

const VBPContent = () => {
	const token = sessionStorage.getItem('token');
	let d = new Date();
	const START_DATE = new Date(new Date(d.setDate(d.getDate() - 1)).setHours(0, 0, 0, 0));
	const END_DATE = new Date();

	const [sendDate, setSendDate] = useState(START_DATE);
	const [finishDate, setFinishDate] = useState(END_DATE);

	const [dataList, setDataList] = useState([]);
	useEffect(() => {
		fetchData(START_DATE, END_DATE);
	}, []);

	// console.log(dataList);

	const fetchData = async (startDate, endDate) => {
		const startDateToLocal =
			startDate.getFullYear() +
			'-' +
			(startDate.getMonth() + 1 < 9 ? '0' + (startDate.getMonth() + 1) : startDate.getMonth() + 1) +
			'-' +
			(startDate.getDate() < 9 ? '0' + startDate.getDate() : startDate.getDate());

		const endDateToLocal =
			endDate.getFullYear() +
			'-' +
			(endDate.getMonth() + 1 < 9 ? '0' + (endDate.getMonth() + 1) : endDate.getMonth() + 1) +
			'-' +
			(endDate.getDate() < 9 ? '0' + endDate.getDate() : endDate.getDate());

		setDataList(await VbpIndexView(token, startDateToLocal, endDateToLocal));

		setSendDate(startDateToLocal);
		setFinishDate(endDateToLocal);
	};

	// 엑셀 다운로드
	const handleXlsxExport = () => {
		const fileName = 'Caliverse_VBP_Index.xlsx';
		VBPIndexExport(token, fileName, sendDate, finishDate);
	};

	return (
		<>
			<VBPSearchBar fetchData={fetchData} />
			<TableInfo>
				<ListOption>
					<Button theme="line" text="엑셀 다운로드" handleClick={handleXlsxExport} />
				</ListOption>
			</TableInfo>
			<TableWrapper>
				<EconomicTable>
					<thead>
						<tr>
							<th colSpan="2" className="text-center" width="300">
								Product
							</th>
							<th width="160">2023-08-07</th>
							<th width="160">2023-08-08</th>
							<th width="160">2023-08-09</th>
							<th width="160">2023-08-10</th>
							<th width="160">2023-08-11</th>
							<th width="160">2023-08-12</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<TableTitle colSpan="2">(Total) VBP 생산량</TableTitle>
							<TableData>500000</TableData>
							<TableData>500000</TableData>
							<TableData>500000</TableData>
							<TableData>500000</TableData>
							<TableData>500000</TableData>
							<TableData>500000</TableData>
						</tr>
						<tr>
							<TableTitle colSpan="2">(Total) VBP 소진량</TableTitle>
							<TableData>490000</TableData>
							<TableData>490000</TableData>
							<TableData>490000</TableData>
							<TableData>490000</TableData>
							<TableData>490000</TableData>
							<TableData>490000</TableData>
						</tr>
						<tr>
							<TableTitle colSpan="2">(Total) VBP 보유량</TableTitle>
							<TableData>3.2M</TableData>
							<TableData>3.3M</TableData>
							<TableData>3.3M</TableData>
							<TableData>3.4M</TableData>
							<TableData>3.5M</TableData>
							<TableData>3.5M</TableData>
						</tr>
						<tr>
							<TableTitle rowSpan="2">GET</TableTitle>
							<TableTitle>퀘스트 보상</TableTitle>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
						</tr>
						<tr>
							<TableTitle>시즌패스 보상</TableTitle>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
						</tr>
						<tr>
							<TableTitle rowSpan="2">USE</TableTitle>
							<TableTitle>퀘스트 보상</TableTitle>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
						</tr>
						<tr>
							<TableTitle>시즌패스 보상</TableTitle>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
							<TableData>150000</TableData>
						</tr>

						{/* {mokupData.map((data, index) => (
								<Fragment key={index}>
									<tr>
										<td>{data.date}</td>
										<td>{data.name}</td>
										<td>{data.trader}</td>
										<td>{data.id}</td>
										<td>{data.key}</td>
									</tr>
								</Fragment>
							))} */}
					</tbody>
				</EconomicTable>
			</TableWrapper>
		</>
	);
};

export default VBPContent;

const TableWrapper = styled.div`
	width: 100%;
	min-width: 680px;
	overflow: auto;
	&::-webkit-scrollbar {
		height: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
	${TableStyle} {
		width: 100%;
		min-width: 900px;
		th {
			&.cell-nru {
				background: #f0f0f0;
				border-left: 1px solid #aaa;
				border-right: 1px solid #aaa;
			}
		}
		td {
			&.blank {
				background: #f9f9f9;
			}
			&.cell-nru {
				background: #fafafa;
				border-left: 1px solid #aaa;
				border-right: 1px solid #aaa;
			}
		}
	}
`;

const TableData = styled.td`
	background: ${props => (props.$state === 'danger' ? '#d60000' : props.$state === 'blank' ? '#F9F9F9' : 'transparent')};
	color: ${props => (props.$state === 'danger' ? '#fff' : '#2c2c2c')};
`;

const TableTitle = styled.td`
	text-align: center;
`;

const EconomicTable = styled(TableStyle)`
	${TableData} {
		text-align: left;
	}
	tbody {
		tr:nth-child(1),
		tr:nth-child(2),
		tr:nth-child(3) {
			background: #f5fcff;
		}
	}
`;