76 lines
3.0 KiB
TypeScript
76 lines
3.0 KiB
TypeScript
import { useNavigate, useParams } from 'react-router-dom'
|
|
import styles from './AccessLogPage.module.css'
|
|
|
|
interface LogEntry {
|
|
id: number
|
|
type: 'IN' | 'OUT'
|
|
tagId: string
|
|
time: string
|
|
}
|
|
|
|
// Mock data - 추후 API 연동
|
|
const mockLogs: LogEntry[] = [
|
|
{ id: 1, type: 'IN', tagId: 'MK0100', time: '2025-12-01 14:36:12' },
|
|
{ id: 2, type: 'IN', tagId: 'MK0100', time: '2025-12-01 14:36:12' },
|
|
{ id: 3, type: 'IN', tagId: 'MK0100', time: '2025-12-01 14:36:12' },
|
|
{ id: 4, type: 'OUT', tagId: 'MK0101', time: '2025-12-01 15:00:00' },
|
|
{ id: 5, type: 'OUT', tagId: 'MK0101', time: '2025-12-01 15:00:00' },
|
|
{ id: 6, type: 'OUT', tagId: 'MK0101', time: '2025-12-01 15:00:00' },
|
|
{ id: 7, type: 'IN', tagId: 'MK0102', time: '2025-12-01 15:30:45' },
|
|
{ id: 8, type: 'IN', tagId: 'MK0102', time: '2025-12-01 15:30:45' },
|
|
{ id: 9, type: 'IN', tagId: 'MK0102', time: '2025-12-01 15:30:45' },
|
|
{ id: 10, type: 'OUT', tagId: 'MK0103', time: '2025-12-01 16:15:20' },
|
|
{ id: 11, type: 'OUT', tagId: 'MK0103', time: '2025-12-01 16:15:20' },
|
|
{ id: 12, type: 'OUT', tagId: 'MK0103', time: '2025-12-01 16:15:20' },
|
|
{ id: 13, type: 'IN', tagId: 'MK0104', time: '2025-12-01 16:45:10' },
|
|
{ id: 14, type: 'IN', tagId: 'MK0104', time: '2025-12-01 16:45:10' },
|
|
{ id: 15, type: 'OUT', tagId: 'MK0105', time: '2025-12-01 17:00:55' },
|
|
{ id: 16, type: 'IN', tagId: 'MK0106', time: '2025-12-01 17:30:30' },
|
|
{ id: 17, type: 'IN', tagId: 'MK0106', time: '2025-12-01 17:30:30' },
|
|
]
|
|
|
|
export default function AccessLogPage() {
|
|
const navigate = useNavigate()
|
|
const { locationName } = useParams<{ locationName: string }>()
|
|
|
|
const handleClose = () => {
|
|
navigate(-1)
|
|
}
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
{/* Close Button */}
|
|
<button className={styles.closeButton} onClick={handleClose} aria-label="닫기">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 6L6 18M6 6L18 18" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Content */}
|
|
<div className={styles.content}>
|
|
<h1 className={styles.title}>{locationName || '옥상출입구'} 출입로그</h1>
|
|
|
|
<div className={styles.logTable}>
|
|
{/* Table Header */}
|
|
<div className={styles.tableHeader}>
|
|
<span className={styles.colAccess}>출입</span>
|
|
<span className={styles.colTagId}>TagID</span>
|
|
<span className={styles.colTime}>시간</span>
|
|
</div>
|
|
|
|
{/* Table Body */}
|
|
<div className={styles.tableBody}>
|
|
{mockLogs.map((log) => (
|
|
<div key={log.id} className={styles.tableRow}>
|
|
<span className={styles.colAccess}>{log.type}</span>
|
|
<span className={styles.colTagId}>{log.tagId}</span>
|
|
<span className={styles.colTime}>{log.time}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|