bitforum-frontend/app/(account)/login-log/page.tsx

'use client';

import './style.scss';
import { useState, useEffect } from 'react';
import { UAParser } from "ua-parser-js";
import { LoginLogType } from '@/constants/common';
import { fetchLoginLog } from '@/lib/api/account';
import type { LoginLog } from '@/types/account/loginLog';
import Loading from '@/app/component/Loading';
import Pagination from '@/app/component/Pagination';
import NavTabs from '../navTabs';

export default function LoginLog()
{
	const [error, setError] = useState<string>('');
	const [loading, setLoading] = useState<boolean>(true);
	const [page, setPage] = useState<number>(1);
	const [type, setType] = useState<LoginLogType>(LoginLogType.Today);
	const [total, setTotal] = useState<number>(0);
	const [logs, setLogs] = useState<LoginLog[]>([]);

	useEffect(() => {
		if (error) {
			alert(error);
			setError('');
		}
	}, [error]);

	useEffect(() => {
		setLoading(true);
		fetchLoginLog(type, page).then((res) => {
			if (!res.ok) {
				throw new Error(res.message!);
			}

			setTotal(res.data.total);
			setLogs(res.data.list);
		}).catch(err => {
			setError(err.message);
		}).finally(() => {
			setLoading(false);
		});
	}, [type, page]);

	useEffect(() => {
		setPage(1);
	}, [type]);

	const tabItems = [
		{ label: "오늘", value: LoginLogType.Today },
		{ label: "1주일", value: LoginLogType.Week },
		{ label: "1개월", value: LoginLogType.Month },
		{ label: "3개월", value: LoginLogType.QuarterYear },
		{ label: "6개월", value: LoginLogType.HalfYear }
	];

	return (
		<>
		<NavTabs />

		<div id="loginLog" >
			{ loading && <Loading /> }

			<h1>로그인 기록</h1>
			<table className="table-auto max-2xl:w-full 2xl:w-[1000px]">
				<caption>
					<div className="grid grid-cols-[auto,1fr] gap-4 items-center">
						<div>
							합계： {total}
						</div>
						<div id="loginTypeTab" className="justify-self-end">
							{tabItems.map((item, i) => (
								<button key={i} className={`flex-1 py-2 px-4 text-center text-sm font-medium
									${type === item.value ? "border-b-2 border-blue-500 text-blue-500" : "text-gray-500"}
								`} onClick={() => setType(item.value)}>{item.label}</button>
							))}
						</div>
					</div>
				</caption>
				<colgroup>
					<col width="20%"/>
					<col width="*"/>
					<col width="15%"/>
					<col width="15%"/>
					<col width="15%"/>
				</colgroup>
				<thead>
					<tr>
						<th>일시</th>
						<th>접속 IP</th>
						<th>접속 기기</th>
						<th>브라우저</th>
						<th>결과</th>
					</tr>
				</thead>
				<tbody>
					{logs.length > 0 ? (
						logs.map((log) => {
							const parser = new UAParser();
							parser.setUA(log.userAgent);
							const browser = `${parser.getBrowser().name ?? '알 수 없음'}`;
							const device = `${parser.getOS().name ?? '알 수 없음'}`;

							return (
								<tr key={log.id} className="hover:bg-gray-100">
									<td>{log.createdAt}</td>
									<td>{log.ipAddress}</td>
									<td>{device}</td>
									<td>{browser}</td>
									<td className={`border p-2 font-semibold ${
											log.success ? "text-green-500" : "text-red-500"
										}`}
										>
										{log.success ? "성공" : "실패"}
									</td>
								</tr>
							);
						})
						) : (
							<tr>
								<td colSpan={5} className="border p-2 text-center text-gray-500">
									기록이 없습니다.
								</td>
							</tr>
						)}
				</tbody>
				<tfoot>
					<tr>
						<td colSpan={5}>
							<Pagination total={total} page={page} perPage={20} onChange={setPage} />
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
		</>
	);
}