481 lines
24 KiB
HTML
481 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="ko"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>KINTEX AI 전시관리 - 감사 로그</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.monospace { font-family: 'JetBrains Mono', monospace; }
|
|
|
|
/* Custom scrollbar for dense data grid */
|
|
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: #c1c7d3; border-radius: 10px; }
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #727781; }
|
|
|
|
/* Forensic Table Zebra Stripes */
|
|
.audit-table tr:nth-child(even) { background-color: #f2f3ff; }
|
|
.audit-table tr:hover { background-color: #eaedff; }
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"surface": "#faf8ff",
|
|
"inverse-primary": "#a2c9ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-error": "#ffffff",
|
|
"surface-dim": "#d3d9f1",
|
|
"secondary": "#5427e6",
|
|
"background": "#faf8ff",
|
|
"primary": "#003765",
|
|
"surface-bright": "#faf8ff",
|
|
"on-tertiary": "#ffffff",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"primary-fixed": "#d3e4ff",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"surface-container": "#eaedff",
|
|
"tertiary": "#003e28",
|
|
"on-tertiary-fixed": "#002113",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"secondary-fixed": "#e5deff",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"inverse-on-surface": "#eef0ff",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"surface-variant": "#dbe2fa",
|
|
"outline": "#727781",
|
|
"inverse-surface": "#293042",
|
|
"surface-tint": "#24609e",
|
|
"surface-container-low": "#f2f3ff",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"tertiary-container": "#00583b",
|
|
"on-surface-variant": "#424750",
|
|
"surface-container-high": "#e1e7ff",
|
|
"error-container": "#ffdad6",
|
|
"on-surface": "#141b2c",
|
|
"error-red": "#ba1a1a",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary": "#ffffff",
|
|
"on-secondary-container": "#f3edff",
|
|
"primary-container": "#004e8b",
|
|
"on-tertiary-container": "#68d1a0",
|
|
"on-background": "#141b2c",
|
|
"surface-container-highest": "#dbe2fa",
|
|
"on-error-container": "#93000a",
|
|
"outline-variant": "#c1c7d3",
|
|
"on-primary-fixed": "#001c38",
|
|
"secondary-container": "#6d4aff",
|
|
"error": "#ba1a1a"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"fontFamily": {
|
|
"label-xs": ["Geist"],
|
|
"label-md": ["Geist"],
|
|
"display-lg": ["Inter"],
|
|
"headline-md": ["Inter"],
|
|
"title-sm": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"body-base": ["Inter"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-surface font-body-base text-on-surface selection:bg-primary-fixed">
|
|
<!-- SideNavBar (Authority: JSON) -->
|
|
<aside class="fixed left-0 top-0 bottom-0 flex flex-col z-40 bg-primary dark:bg-surface-container-highest w-64 shadow-lg">
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-surface-container-lowest flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary">analytics</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-title-sm font-bold text-on-primary dark:text-primary-fixed leading-tight">KINTEX AI</h1>
|
|
<p class="text-label-xs text-on-primary/70">전시관리 시스템</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 px-2 space-y-1 overflow-y-auto custom-scrollbar">
|
|
<!-- Dashboard -->
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
대시보드
|
|
</a>
|
|
<!-- Exhibition -->
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
|
<span class="material-symbols-outlined">event</span>
|
|
전시 관리
|
|
</a>
|
|
<!-- Users -->
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
|
<span class="material-symbols-outlined">group</span>
|
|
사용자 관리
|
|
</a>
|
|
<!-- Devices -->
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
|
<span class="material-symbols-outlined">router</span>
|
|
기기 모니터링
|
|
</a>
|
|
<!-- Analytics -->
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
|
<span class="material-symbols-outlined">analytics</span>
|
|
통계 분석
|
|
</a>
|
|
<!-- Audit Log (ACTIVE STATE) -->
|
|
<a class="bg-primary-container text-on-primary-container rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 text-label-md font-label-md active:scale-95 transition-transform duration-150" href="#">
|
|
<span class="material-symbols-outlined">history</span>
|
|
감사 로그
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto border-t border-on-primary/10 p-2">
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
|
<span class="material-symbols-outlined">help</span>
|
|
고객지원
|
|
</a>
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-on-primary/10 rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 transition-colors text-label-md font-label-md" href="#">
|
|
<span class="material-symbols-outlined">logout</span>
|
|
로그아웃
|
|
</a>
|
|
<div class="mt-4 px-4 py-3 flex items-center gap-3 bg-on-primary/5 rounded-lg">
|
|
<img alt="KINTEX Admin" class="w-8 h-8 rounded-full border border-on-primary/20" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBaRvnlKujdmGFwc7DU5xfkb_g6HJ0lFQMa2Gtwc8BJYeSVxSMrioBrJIrpQw-b5mBKrZ9w3WNc43TwfG16XNNMCqx6T3yApwLHjhDBsSG0hmbByWajOIr4HIoAc_w7b1PHOzaCh7lc5VtCyCZy1BiDESwPfXMawCJNn-3F2qoBPW9TJo2tqEdpHx7i7t5ojfvEYT5hosyAPEswYN9VwP8eWAmfoRpmB3f0vUHb2AvaCsfoT0ij5ffis62wtvvDsWvL5AyqYicKdSo"/>
|
|
<div class="truncate">
|
|
<p class="text-label-md font-bold text-on-primary">Admin User</p>
|
|
<p class="text-label-xs text-on-primary/50">System Root</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-64 min-h-screen">
|
|
<!-- TopAppBar (Authority: JSON) -->
|
|
<header class="fixed top-0 right-0 left-64 h-16 flex justify-between items-center px-6 z-30 bg-surface-bright dark:bg-surface-container-low border-b border-outline-variant dark:border-outline">
|
|
<div class="flex-1 max-w-xl">
|
|
<div class="relative group">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant group-focus-within:text-primary transition-colors">search</span>
|
|
<input class="w-full bg-surface-container-low border-outline-variant rounded-full pl-10 pr-4 py-2 text-body-base focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="로그 기록 검색..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4 ml-6">
|
|
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg text-label-md font-semibold flex items-center gap-2 hover:bg-primary-container hover:text-on-primary-container transition-all">
|
|
<span class="material-symbols-outlined text-[18px]">download</span>
|
|
CSV 내보내기
|
|
</button>
|
|
<div class="h-6 w-px bg-outline-variant mx-2"></div>
|
|
<div class="flex items-center gap-1">
|
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container rounded-full transition-colors relative">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full"></span>
|
|
</button>
|
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container rounded-full transition-colors">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
</button>
|
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container rounded-full transition-colors">
|
|
<span class="material-symbols-outlined">account_circle</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Page Canvas -->
|
|
<div class="pt-24 pb-12 px-8 max-w-[1440px] mx-auto">
|
|
<!-- Page Header -->
|
|
<div class="mb-8">
|
|
<h2 class="text-headline-md font-bold text-on-surface">감사 로그 (Audit Log)</h2>
|
|
<p class="text-body-sm text-on-surface-variant mt-1">시스템 내 모든 사용자 활동과 데이터 변경 이력을 실시간으로 추적합니다. (포렌식 무결성 유지됨)</p>
|
|
</div>
|
|
<!-- Filter Bar -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5 mb-8 shadow-sm">
|
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-4">
|
|
<div class="space-y-1.5">
|
|
<label class="text-label-xs text-on-surface-variant font-bold ml-1">사용자</label>
|
|
<div class="relative">
|
|
<select class="w-full bg-surface-container-low border-outline-variant rounded-lg py-2 pl-3 pr-10 text-body-base appearance-none focus:ring-primary focus:border-primary">
|
|
<option>전체 사용자</option>
|
|
<option>최매니저</option>
|
|
<option>김운영</option>
|
|
<option>박시스템</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="text-label-xs text-on-surface-variant font-bold ml-1">액션 유형</label>
|
|
<div class="relative">
|
|
<select class="w-full bg-surface-container-low border-outline-variant rounded-lg py-2 pl-3 pr-10 text-body-base appearance-none focus:ring-primary focus:border-primary">
|
|
<option>전체 액션</option>
|
|
<option>로그인/아웃</option>
|
|
<option>데이터 변경</option>
|
|
<option>권한 수정</option>
|
|
<option>시스템 제어</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="text-label-xs text-on-surface-variant font-bold ml-1">기간 설정</label>
|
|
<div class="relative">
|
|
<input class="w-full bg-surface-container-low border-outline-variant rounded-lg py-2 px-3 text-body-base focus:ring-primary focus:border-primary" type="date"/>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="text-label-xs text-on-surface-variant font-bold ml-1">테넌트</label>
|
|
<div class="relative">
|
|
<select class="w-full bg-surface-container-low border-outline-variant rounded-lg py-2 pl-3 pr-10 text-body-base appearance-none focus:ring-primary focus:border-primary">
|
|
<option>전체 테넌트</option>
|
|
<option>제1전시장</option>
|
|
<option>제2전시장</option>
|
|
<option>본사 관리실</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-end">
|
|
<button class="w-full bg-primary text-on-primary py-2.5 rounded-lg text-label-md font-bold hover:brightness-110 active:scale-95 transition-all shadow-md">
|
|
필터 적용
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Audit Table Content -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
|
|
<div class="overflow-x-auto custom-scrollbar max-h-[600px]">
|
|
<table class="audit-table w-full text-left border-collapse min-w-[1000px]">
|
|
<thead class="sticky top-0 bg-surface-container-high z-10">
|
|
<tr class="border-b border-outline-variant">
|
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant uppercase tracking-wider">시각 (Timestamp)</th>
|
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant uppercase tracking-wider">사용자 (User)</th>
|
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant uppercase tracking-wider">액션 (Action)</th>
|
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant uppercase tracking-wider">대상 (Target)</th>
|
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant uppercase tracking-wider">IP 주소 (IP Address)</th>
|
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant uppercase tracking-wider">결과 (Result)</th>
|
|
<th class="px-6 py-4 text-label-md font-bold text-on-surface-variant text-right">상세</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant">
|
|
<!-- Row 1 -->
|
|
<tr class="transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap monospace text-body-sm">2026-08-01 14:22:15</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-primary-fixed text-on-primary-fixed text-[10px] flex items-center justify-center font-bold">최</div>
|
|
<span class="font-medium text-on-surface">최매니저</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-secondary-fixed text-on-secondary-fixed text-label-xs">
|
|
<span class="material-symbols-outlined text-[14px]">gavel</span>
|
|
낙찰(Award)
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-body-sm font-medium">옥션 #A-102</td>
|
|
<td class="px-6 py-4 monospace text-body-sm text-on-surface-variant">192.168.0.45</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-tertiary-fixed text-on-tertiary-fixed text-label-xs font-bold uppercase tracking-tighter">
|
|
성공
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-primary hover:underline text-label-md font-bold">Details</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap monospace text-body-sm">2026-08-01 14:20:03</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-tertiary-fixed text-on-tertiary-fixed text-[10px] flex items-center justify-center font-bold">김</div>
|
|
<span class="font-medium text-on-surface">김운영</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed text-label-xs">
|
|
<span class="material-symbols-outlined text-[14px]">settings_input_component</span>
|
|
시스템 설정 변경
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-body-sm font-medium">공조 시스템 제어</td>
|
|
<td class="px-6 py-4 monospace text-body-sm text-on-surface-variant">10.0.45.122</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-tertiary-fixed text-on-tertiary-fixed text-label-xs font-bold uppercase tracking-tighter">
|
|
성공
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-primary hover:underline text-label-md font-bold">Details</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3 -->
|
|
<tr class="transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap monospace text-body-sm text-error">2026-08-01 14:15:55</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-error-container text-on-error-container text-[10px] flex items-center justify-center font-bold">外</div>
|
|
<span class="font-medium text-on-surface italic">외부접속자</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-surface-variant text-on-surface-variant text-label-xs">
|
|
<span class="material-symbols-outlined text-[14px]">login</span>
|
|
로그인 시도
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-body-sm font-medium">어드민 콘솔</td>
|
|
<td class="px-6 py-4 monospace text-body-sm text-on-surface-variant">211.23.4.89</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-error-container text-on-error-container text-label-xs font-bold uppercase tracking-tighter">
|
|
실패
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-primary hover:underline text-label-md font-bold">Details</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Dummy Data Rows for Density -->
|
|
<tr class="transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap monospace text-body-sm">2026-08-01 14:10:22</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-primary-fixed text-on-primary-fixed text-[10px] flex items-center justify-center font-bold">박</div>
|
|
<span class="font-medium text-on-surface">박시스템</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed text-label-xs">
|
|
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
|
조회(Read)
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-body-sm font-medium">개인정보 로그</td>
|
|
<td class="px-6 py-4 monospace text-body-sm text-on-surface-variant">192.168.0.12</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-tertiary-fixed text-on-tertiary-fixed text-label-xs font-bold uppercase tracking-tighter">
|
|
성공
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-primary hover:underline text-label-md font-bold">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap monospace text-body-sm">2026-08-01 14:05:00</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-primary-fixed text-on-primary-fixed text-[10px] flex items-center justify-center font-bold">최</div>
|
|
<span class="font-medium text-on-surface">최매니저</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed text-label-xs">
|
|
<span class="material-symbols-outlined text-[14px]">edit</span>
|
|
수정(Update)
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-body-sm font-medium">전시 일정표</td>
|
|
<td class="px-6 py-4 monospace text-body-sm text-on-surface-variant">192.168.0.45</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-tertiary-fixed text-on-tertiary-fixed text-label-xs font-bold uppercase tracking-tighter">
|
|
성공
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-primary hover:underline text-label-md font-bold">Details</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 bg-surface-container-low flex items-center justify-between border-t border-outline-variant">
|
|
<p class="text-label-xs text-on-surface-variant">표시 중: <span class="font-bold text-on-surface">1-5</span> / 총 1,482개 항목</p>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-1.5 rounded-lg hover:bg-surface-container-high text-on-surface-variant disabled:opacity-30 disabled:cursor-not-allowed" disabled="">
|
|
<span class="material-symbols-outlined">first_page</span>
|
|
</button>
|
|
<button class="p-1.5 rounded-lg hover:bg-surface-container-high text-on-surface-variant disabled:opacity-30 disabled:cursor-not-allowed" disabled="">
|
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
</button>
|
|
<div class="flex items-center gap-1 px-2">
|
|
<button class="w-8 h-8 rounded-lg bg-primary text-on-primary text-label-md font-bold">1</button>
|
|
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-high text-on-surface-variant text-label-md">2</button>
|
|
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-high text-on-surface-variant text-label-md">3</button>
|
|
<span class="px-1 text-on-surface-variant">...</span>
|
|
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-high text-on-surface-variant text-label-md">297</button>
|
|
</div>
|
|
<button class="p-1.5 rounded-lg hover:bg-surface-container-high text-on-surface-variant">
|
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
</button>
|
|
<button class="p-1.5 rounded-lg hover:bg-surface-container-high text-on-surface-variant">
|
|
<span class="material-symbols-outlined">last_page</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-label-xs text-on-surface-variant">행 표시:</span>
|
|
<select class="bg-surface-container-lowest border-outline-variant rounded-md py-1 px-2 text-label-xs focus:ring-primary focus:border-primary">
|
|
<option>10개</option>
|
|
<option>20개</option>
|
|
<option selected="">50개</option>
|
|
<option>100개</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Stats/Summary Summary Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mt-8">
|
|
<div class="bg-surface-container-lowest border-l-4 border-primary p-4 rounded-lg shadow-sm">
|
|
<p class="text-label-xs text-on-surface-variant font-bold">오늘의 총 활동</p>
|
|
<div class="flex items-end justify-between mt-1">
|
|
<h4 class="text-headline-md font-bold text-on-surface">2,482</h4>
|
|
<span class="text-tertiary text-label-xs font-bold">+12% vs yesterday</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border-l-4 border-error p-4 rounded-lg shadow-sm">
|
|
<p class="text-label-xs text-on-surface-variant font-bold">비정상 접근 시도</p>
|
|
<div class="flex items-end justify-between mt-1">
|
|
<h4 class="text-headline-md font-bold text-error">14</h4>
|
|
<span class="text-error text-label-xs font-bold">Critical Alert</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border-l-4 border-secondary p-4 rounded-lg shadow-sm">
|
|
<p class="text-label-xs text-on-surface-variant font-bold">데이터 수정 건수</p>
|
|
<div class="flex items-end justify-between mt-1">
|
|
<h4 class="text-headline-md font-bold text-on-surface">156</h4>
|
|
<span class="text-on-surface-variant text-label-xs font-medium">Standard Volume</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border-l-4 border-tertiary p-4 rounded-lg shadow-sm">
|
|
<p class="text-label-xs text-on-surface-variant font-bold">평균 응답 속도</p>
|
|
<div class="flex items-end justify-between mt-1">
|
|
<h4 class="text-headline-md font-bold text-on-surface">42ms</h4>
|
|
<span class="text-tertiary text-label-xs font-bold">Optimal</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
// Simple micro-interaction for rows
|
|
document.querySelectorAll('.audit-table tr').forEach(row => {
|
|
row.addEventListener('click', (e) => {
|
|
if(e.target.tagName !== 'BUTTON') {
|
|
// Logic for expansion or detail view could go here
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |