init

2025-02-12 18:29:27 +09:00
commit 513ea114cc
290 changed files with 84274 additions and 0 deletions
--- a/src/components/IndexManage/InstanceContent.js
+++ b/src/components/IndexManage/InstanceContent.js
@@ -0,0 +1,166 @@
+import { styled } from 'styled-components';
+import { useEffect, useState } from 'react';
+
+import { TableStyle, TableInfo, ListOption } from '../../styles/Components';
+
+import Button from '../../components/common/button/Button';
+import InstanceSearchBar from '../../components/IndexManage/InstanceSearchBar';
+import { InstanceIndexExport, InstanceIndexView } from '../../apis';
+
+const InstanceContent = () => {
+	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 [searchKey, setSearchKey] = useState('');
+	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 (data, 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 InstanceIndexView(token, data, startDateToLocal, endDateToLocal));
+
+		setSearchKey(data);
+		setSendDate(startDateToLocal);
+		setFinishDate(endDateToLocal);
+	};
+
+	// 엑셀 다운로드
+	const handleXlsxExport = () => {
+		const fileName = 'Caliverse_Instance_Index.xlsx';
+		InstanceIndexExport(token, fileName, searchKey, sendDate, finishDate);
+	};
+
+	return (
+		<>
+			<InstanceSearchBar fetchData={fetchData} />
+			<TableInfo>
+				<ListOption>
+					<Button theme="line" text="엑셀 다운로드" handleClick={handleXlsxExport} />
+				</ListOption>
+			</TableInfo>
+			<TableWrapper>
+				<EconomicTable2>
+					<thead>
+						<tr>
+							<th width="240">일자</th>
+							<th rowSpan="2" width="160">
+								2023-08-07
+							</th>
+							<th rowSpan="2" width="160">
+								2023-08-08
+							</th>
+							<th rowSpan="2" width="160">
+								2023-08-09
+							</th>
+							<th rowSpan="2" width="160">
+								2023-08-10
+							</th>
+							<th rowSpan="2" width="160"></th>
+							<th rowSpan="2" width="160"></th>
+						</tr>
+						<tr>
+							<th>대상</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<TableTitle>(인스턴스 ID) 방문자 수</TableTitle>
+							<TableData>95</TableData>
+							<TableData>240</TableData>
+							<TableData>240</TableData>
+							<TableData>240</TableData>
+							<TableData $state="blank"></TableData>
+							<TableData $state="blank"></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>
+				</EconomicTable2>
+			</TableWrapper>
+		</>
+	);
+};
+
+export default InstanceContent;
+
+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 EconomicTable2 = styled(TableStyle)`
+	${TableData} {
+		text-align: left;
+	}
+`;