487 lines
27 KiB
HTML
487 lines
27 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 Exhibition Manager - 사용자 관리</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600&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"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-container-lowest": "#ffffff",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"surface-variant": "#dbe2f9",
|
|
"error": "#ba1a1a",
|
|
"primary-container": "#0066b3",
|
|
"inverse-primary": "#a2c9ff",
|
|
"on-primary-fixed": "#001c38",
|
|
"background": "#f9f9ff",
|
|
"surface-container-low": "#f1f3ff",
|
|
"surface-dim": "#d2daf0",
|
|
"secondary": "#5427e6",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"on-tertiary-container": "#8ef7c3",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"tertiary": "#00583b",
|
|
"secondary-fixed": "#e5deff",
|
|
"inverse-surface": "#293041",
|
|
"on-surface-variant": "#414751",
|
|
"on-error-container": "#93000a",
|
|
"on-tertiary-fixed": "#002113",
|
|
"on-surface": "#141b2c",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"inverse-on-surface": "#edf0ff",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"surface-tint": "#0060a9",
|
|
"on-primary-container": "#d2e3ff",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"on-primary": "#ffffff",
|
|
"secondary-container": "#6d4aff",
|
|
"outline-variant": "#c1c7d3",
|
|
"surface": "#f9f9ff",
|
|
"on-secondary-container": "#f3edff",
|
|
"primary-fixed": "#d3e4ff",
|
|
"surface-bright": "#f9f9ff",
|
|
"primary": "#004e8b",
|
|
"outline": "#717782",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"error-container": "#ffdad6",
|
|
"surface-container-highest": "#dbe2f9",
|
|
"surface-container": "#e9edff",
|
|
"on-tertiary": "#ffffff",
|
|
"on-background": "#141b2c",
|
|
"surface-container-high": "#e0e8ff",
|
|
"on-secondary": "#ffffff",
|
|
"on-error": "#ffffff",
|
|
"border-neutral": "#E4E7EC"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-sm": "8px",
|
|
"gutter": "16px",
|
|
"container-padding": "24px",
|
|
"stack-md": "16px",
|
|
"base": "4px",
|
|
"stack-lg": "24px"
|
|
},
|
|
"fontFamily": {
|
|
"title-sm": ["Inter", "sans-serif"],
|
|
"label-md": ["Geist", "sans-serif"],
|
|
"headline-md": ["Inter", "sans-serif"],
|
|
"body-sm": ["Inter", "sans-serif"],
|
|
"body-base": ["Inter", "sans-serif"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Inter', 'Pretendard', sans-serif; background-color: #f9f9ff; }
|
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
|
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
|
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
|
|
.zebra-table tr:nth-child(even) { background-color: #f1f3ff; }
|
|
.sticky-header { position: sticky; top: 0; z-index: 10; }
|
|
.detail-panel { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.detail-panel.hidden-state { transform: translateX(100%); }
|
|
</style>
|
|
</head>
|
|
<body class="flex h-screen overflow-hidden text-on-surface">
|
|
<!-- SIDEBAR (Persistent Sidebar 240px) -->
|
|
<aside class="fixed left-0 top-0 h-screen w-60 bg-surface-container-low border-r border-outline-variant flex flex-col py-container-padding z-50">
|
|
<div class="px-6 mb-10">
|
|
<img alt="KINTEX Brand Logo" class="h-8 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBViMH_wLabnBXthxb2bO1MQ17WQQql68DBtN_ryQjSUaLfHf72x6X15QE7BRw7sXzcComGfAr5qwy3wTagsmvvfbFN54HLQgLta594ULaGbiPruExJTEGj3kdBlR9e1XCSD6kEhls_A9VBUlfr68ci0sKR7MsrG9Y6TBYN3dlqVhizX-Nie9dpJjIlIMH-BI1DDzcymO5K2bHHV_xttgf09AlnNfie8QS6wbT9aJWg1gk1qmI7ODagsGHklzXQ5rx-78yUp-RXCCI"/>
|
|
<div class="mt-4">
|
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">KINTEX AI</h1>
|
|
<p class="text-body-sm font-body-sm text-on-surface-variant">Exhibition Manager</p>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 px-3 space-y-1">
|
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3 group-hover:text-primary">dashboard</span>
|
|
<span class="text-label-md font-label-md">대시보드</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-3 text-primary font-bold border-r-4 border-primary bg-primary-container/10 transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3">person_search</span>
|
|
<span class="text-label-md font-label-md">사용자 관리</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3 group-hover:text-primary">architecture</span>
|
|
<span class="text-label-md font-label-md">전시장 스튜디오</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3 group-hover:text-primary">groups</span>
|
|
<span class="text-label-md font-label-md">참가업체 관리</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3 group-hover:text-primary">assignment</span>
|
|
<span class="text-label-md font-label-md">문서 보관함</span>
|
|
</a>
|
|
</nav>
|
|
<div class="px-3 pt-6 border-t border-outline-variant">
|
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3 group-hover:text-primary">settings</span>
|
|
<span class="text-label-md font-label-md">시스템 설정</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3 group-hover:text-primary">help</span>
|
|
<span class="text-label-md font-label-md">기술 지원</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- MAIN WRAPPER -->
|
|
<div class="flex-1 ml-60 flex flex-col min-w-0">
|
|
<!-- TOP APP BAR -->
|
|
<header class="h-16 flex items-center justify-between px-container-padding bg-surface border-b border-outline-variant sticky top-0 z-40">
|
|
<div class="flex items-center space-x-6">
|
|
<!-- Workspace Switcher -->
|
|
<button class="flex items-center space-x-2 px-3 py-1.5 hover:bg-surface-container-high rounded-lg transition-colors border border-outline-variant">
|
|
<span class="text-label-md font-label-md font-bold">KINTEX</span>
|
|
<span class="material-symbols-outlined text-sm">arrow_drop_down</span>
|
|
</button>
|
|
<!-- Global Search -->
|
|
<div class="relative w-96">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-xl">search</span>
|
|
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="메뉴, 사용자, 전시회 검색..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-all 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-high rounded-full transition-all">
|
|
<span class="material-symbols-outlined">help</span>
|
|
</button>
|
|
<div class="h-8 w-px bg-outline-variant mx-2"></div>
|
|
<div class="flex items-center space-x-3 cursor-pointer p-1 pr-3 hover:bg-surface-container-high rounded-full transition-all">
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-on-primary font-bold text-xs">관리</div>
|
|
<span class="text-label-md font-label-md">운영지원팀</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- CONTENT AREA -->
|
|
<main class="flex-1 overflow-auto p-container-padding">
|
|
<div class="flex justify-between items-end mb-8">
|
|
<div>
|
|
<h2 class="text-display-lg font-display-lg text-on-surface mb-1">사용자 관리</h2>
|
|
<p class="text-body-base text-on-surface-variant">플랫폼에 등록된 모든 사용자의 권한과 상태를 관리합니다.</p>
|
|
</div>
|
|
<button class="flex items-center px-6 py-2.5 bg-primary text-on-primary font-bold rounded-lg hover:opacity-90 transition-all shadow-sm">
|
|
<span class="material-symbols-outlined mr-2">person_add</span>
|
|
<span>사용자 추가</span>
|
|
</button>
|
|
</div>
|
|
<!-- FILTERS & STATS -->
|
|
<div class="grid grid-cols-4 gap-gutter mb-8">
|
|
<div class="bg-surface border border-border-neutral p-4 rounded-xl">
|
|
<p class="text-label-md text-on-surface-variant mb-1">전체 사용자</p>
|
|
<p class="text-headline-md font-bold">1,284 <span class="text-body-sm font-normal text-on-surface-variant">명</span></p>
|
|
</div>
|
|
<div class="bg-surface border border-border-neutral p-4 rounded-xl border-l-4 border-l-primary">
|
|
<p class="text-label-md text-on-surface-variant mb-1">활성 계정</p>
|
|
<p class="text-headline-md font-bold">1,240 <span class="text-body-sm font-normal text-on-surface-variant">명</span></p>
|
|
</div>
|
|
<div class="bg-surface border border-border-neutral p-4 rounded-xl border-l-4 border-l-secondary">
|
|
<p class="text-label-md text-on-surface-variant mb-1">2FA 미설정</p>
|
|
<p class="text-headline-md font-bold text-secondary">12 <span class="text-body-sm font-normal text-on-surface-variant">명</span></p>
|
|
</div>
|
|
<div class="bg-surface border border-border-neutral p-4 rounded-xl border-l-4 border-l-error">
|
|
<p class="text-label-md text-on-surface-variant mb-1">잠김 계정</p>
|
|
<p class="text-headline-md font-bold text-error">3 <span class="text-body-sm font-normal text-on-surface-variant">건</span></p>
|
|
</div>
|
|
</div>
|
|
<!-- DATA TABLE -->
|
|
<div class="bg-surface border border-border-neutral rounded-xl overflow-hidden shadow-sm">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left zebra-table border-collapse">
|
|
<thead class="sticky-header bg-surface-container-low text-on-surface-variant border-b border-border-neutral">
|
|
<tr>
|
|
<th class="px-6 py-4 text-label-md font-label-md uppercase tracking-wider">이름</th>
|
|
<th class="px-6 py-4 text-label-md font-label-md uppercase tracking-wider">이메일</th>
|
|
<th class="px-6 py-4 text-label-md font-label-md uppercase tracking-wider">역할</th>
|
|
<th class="px-6 py-4 text-label-md font-label-md uppercase tracking-wider">소속</th>
|
|
<th class="px-6 py-4 text-label-md font-label-md uppercase tracking-wider">상태</th>
|
|
<th class="px-6 py-4 text-label-md font-label-md uppercase tracking-wider">2FA</th>
|
|
<th class="px-6 py-4 text-label-md font-label-md uppercase tracking-wider">최근 접속</th>
|
|
<th class="px-6 py-4 text-label-md font-label-md uppercase tracking-wider text-right">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-border-neutral">
|
|
<!-- Row 1 -->
|
|
<tr class="hover:bg-primary-container/5 transition-colors group cursor-pointer" onclick="openDetail('김민수', 'admin***@kintex.com', '관리자', 'KINTEX 본사')">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center mr-3 font-bold text-xs text-slate-600">김</div>
|
|
<span class="text-body-base font-semibold">김민수</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm text-on-surface-variant">admin***@kintex.com</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="px-2.5 py-1 rounded-full text-[11px] font-bold bg-error/10 text-error border border-error/20">관리자</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm">KINTEX 본사</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="flex items-center text-body-sm">
|
|
<span class="status-dot bg-green-500"></span> 활성
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center text-primary">
|
|
<span class="material-symbols-outlined text-lg mr-1">verified_user</span>
|
|
<span class="text-[11px] font-bold">2FA 설정됨</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm text-on-surface-variant">2023-11-20 14:22</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right">
|
|
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined">more_vert</span></button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="hover:bg-primary-container/5 transition-colors group cursor-pointer" onclick="openDetail('이서연', 'sy.lee***@company.com', '주최자', '글로벌 엑스포')">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 font-bold text-xs text-blue-600">이</div>
|
|
<span class="text-body-base font-semibold">이서연</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm text-on-surface-variant">sy.lee***@company.com</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="px-2.5 py-1 rounded-full text-[11px] font-bold bg-primary/10 text-primary border border-primary/20">주최자</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm">글로벌 엑스포</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="flex items-center text-body-sm">
|
|
<span class="status-dot bg-green-500"></span> 활성
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center text-primary">
|
|
<span class="material-symbols-outlined text-lg mr-1">verified_user</span>
|
|
<span class="text-[11px] font-bold">2FA 설정됨</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm text-on-surface-variant">2023-11-20 09:15</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right">
|
|
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined">more_vert</span></button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3 -->
|
|
<tr class="hover:bg-primary-container/5 transition-colors group cursor-pointer" onclick="openDetail('박지훈', 'jihoon***@booth.net', '참가업체', '테크트리 주식회사')">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3 font-bold text-xs text-green-600">박</div>
|
|
<span class="text-body-base font-semibold">박지훈</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm text-on-surface-variant">jihoon***@booth.net</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="px-2.5 py-1 rounded-full text-[11px] font-bold bg-tertiary-container/20 text-tertiary-fixed-dim border border-tertiary/20">참가업체</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm">테크트리 주식회사</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="flex items-center text-body-sm">
|
|
<span class="status-dot bg-yellow-500"></span> 잠금
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center text-outline">
|
|
<span class="material-symbols-outlined text-lg mr-1">no_encryption</span>
|
|
<span class="text-[11px] font-bold">미설정</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm text-on-surface-variant">2023-11-18 17:40</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right">
|
|
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined">more_vert</span></button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 4 -->
|
|
<tr class="hover:bg-primary-container/5 transition-colors group cursor-pointer" onclick="openDetail('최현우', 'hwchoi***@system.kr', '장치업체', '대성 인테리어')">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-3 font-bold text-xs text-orange-600">최</div>
|
|
<span class="text-body-base font-semibold">최현우</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm text-on-surface-variant">hwchoi***@system.kr</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="px-2.5 py-1 rounded-full text-[11px] font-bold bg-orange-100 text-orange-600 border border-orange-200">장치업체</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm">대성 인테리어</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="flex items-center text-body-sm">
|
|
<span class="status-dot bg-green-500"></span> 활성
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center text-primary">
|
|
<span class="material-symbols-outlined text-lg mr-1">verified_user</span>
|
|
<span class="text-[11px] font-bold">2FA 설정됨</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm text-on-surface-variant">2023-11-19 11:05</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right">
|
|
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined">more_vert</span></button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 5 -->
|
|
<tr class="hover:bg-primary-container/5 transition-colors group cursor-pointer" onclick="openDetail('정미경', 'mk.jung***@kintex.com', '홀매니저', 'KINTEX 1전시장')">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3 font-bold text-xs text-purple-600">정</div>
|
|
<span class="text-body-base font-semibold">정미경</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm text-on-surface-variant">mk.jung***@kintex.com</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="px-2.5 py-1 rounded-full text-[11px] font-bold bg-secondary/10 text-secondary border border-secondary/20">홀매니저</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm">KINTEX 1전시장</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="flex items-center text-body-sm">
|
|
<span class="status-dot bg-gray-400"></span> 비활성
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center text-primary">
|
|
<span class="material-symbols-outlined text-lg mr-1">verified_user</span>
|
|
<span class="text-[11px] font-bold">2FA 설정됨</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-body-sm text-on-surface-variant">2023-10-30 16:55</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right">
|
|
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined">more_vert</span></button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 bg-surface border-t border-border-neutral flex items-center justify-between">
|
|
<span class="text-body-sm text-on-surface-variant">총 1,284개 중 1-5 표시</span>
|
|
<div class="flex space-x-1">
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-border-neutral text-on-surface-variant hover:bg-surface-container-low"><span class="material-symbols-outlined text-sm">chevron_left</span></button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-on-primary text-xs font-bold">1</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-border-neutral text-xs text-on-surface-variant hover:bg-surface-container-low">2</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-border-neutral text-xs text-on-surface-variant hover:bg-surface-container-low">3</button>
|
|
<span class="px-1 text-on-surface-variant">...</span>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-border-neutral text-xs text-on-surface-variant hover:bg-surface-container-low">25</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-border-neutral text-on-surface-variant hover:bg-surface-container-low"><span class="material-symbols-outlined text-sm">chevron_right</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<!-- RIGHT DETAIL PANEL -->
|
|
<div class="detail-panel hidden-state fixed top-0 right-0 w-[400px] h-screen bg-surface border-l border-outline-variant shadow-2xl z-[60] flex flex-col" id="detailPanel">
|
|
<div class="p-6 border-b border-outline-variant flex items-center justify-between">
|
|
<h3 class="text-title-sm font-title-sm">사용자 정보 수정</h3>
|
|
<button class="p-2 hover:bg-surface-container-high rounded-full transition-colors" onclick="closeDetail()">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 overflow-auto p-6 space-y-8">
|
|
<!-- Profile Summary -->
|
|
<div class="flex flex-col items-center text-center">
|
|
<div class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-4 border-2 border-primary/20">
|
|
<span class="text-2xl font-bold text-primary" id="detailInitial">김</span>
|
|
</div>
|
|
<h4 class="text-headline-md font-bold mb-1" id="detailName">김민수</h4>
|
|
<p class="text-body-sm text-on-surface-variant" id="detailEmail">admin***@kintex.com</p>
|
|
<p class="text-label-md font-label-md mt-2 text-primary bg-primary-container/10 px-3 py-1 rounded-full" id="detailOrg">KINTEX 본사</p>
|
|
</div>
|
|
<!-- Role Assignment -->
|
|
<div>
|
|
<label class="block text-label-md font-label-md text-on-surface-variant mb-2">권한 역할 부여</label>
|
|
<select class="w-full bg-surface-container-low border border-outline-variant rounded-lg p-2.5 text-body-base focus:ring-2 focus:ring-primary/20 outline-none" id="detailRole">
|
|
<option value="관리자">관리자 (Full Access)</option>
|
|
<option value="주최자">주최자 (Organizer)</option>
|
|
<option value="참가업체">참가업체 (Exhibitor)</option>
|
|
<option value="장치업체">장치업체 (Contractor)</option>
|
|
<option value="홀매니저">홀매니저 (Hall Manager)</option>
|
|
</select>
|
|
<p class="mt-2 text-xs text-on-surface-variant">역할에 따라 시스템 접근 권한이 즉시 변경됩니다.</p>
|
|
</div>
|
|
<!-- Status Toggle -->
|
|
<div>
|
|
<label class="block text-label-md font-label-md text-on-surface-variant mb-4">계정 상태 설정</label>
|
|
<div class="flex items-center justify-between p-4 bg-surface-container-low rounded-xl border border-outline-variant">
|
|
<div class="flex items-center">
|
|
<div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
|
|
<span class="text-body-base font-semibold">활성화 상태</span>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox" value=""/>
|
|
<div class="w-11 h-6 bg-outline-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<!-- Security Actions -->
|
|
<div class="pt-4 space-y-4">
|
|
<label class="block text-label-md font-label-md text-on-surface-variant">보안 도구</label>
|
|
<button class="w-full flex items-center justify-center px-4 py-3 bg-secondary text-on-secondary font-bold rounded-lg hover:opacity-90 transition-all shadow-sm">
|
|
<span class="material-symbols-outlined mr-2">refresh</span>
|
|
<span>OTP 초기화 (Reset OTP)</span>
|
|
</button>
|
|
<button class="w-full flex items-center justify-center px-4 py-3 border border-error text-error font-bold rounded-lg hover:bg-error/5 transition-all">
|
|
<span class="material-symbols-outlined mr-2">block</span>
|
|
<span>로그인 세션 강제 종료</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 border-t border-outline-variant bg-surface-container-low flex space-x-3">
|
|
<button class="flex-1 px-4 py-3 border border-outline-variant text-on-surface font-bold rounded-lg hover:bg-white transition-all" onclick="closeDetail()">취소</button>
|
|
<button class="flex-[2] px-4 py-3 bg-primary text-on-primary font-bold rounded-lg hover:opacity-90 transition-all">변경사항 저장</button>
|
|
</div>
|
|
</div>
|
|
<!-- Background Overlay when Detail is open -->
|
|
<div class="fixed inset-0 bg-black/20 backdrop-blur-sm z-50 hidden opacity-0 transition-opacity duration-300" id="overlay" onclick="closeDetail()"></div>
|
|
<script>
|
|
const detailPanel = document.getElementById('detailPanel');
|
|
const overlay = document.getElementById('overlay');
|
|
|
|
function openDetail(name, email, role, org) {
|
|
document.getElementById('detailName').innerText = name;
|
|
document.getElementById('detailEmail').innerText = email;
|
|
document.getElementById('detailOrg').innerText = org;
|
|
document.getElementById('detailInitial').innerText = name.charAt(0);
|
|
document.getElementById('detailRole').value = role;
|
|
|
|
detailPanel.classList.remove('hidden-state');
|
|
overlay.classList.remove('hidden');
|
|
setTimeout(() => {
|
|
overlay.classList.add('opacity-100');
|
|
}, 10);
|
|
}
|
|
|
|
function closeDetail() {
|
|
detailPanel.classList.add('hidden-state');
|
|
overlay.classList.remove('opacity-100');
|
|
setTimeout(() => {
|
|
overlay.classList.add('hidden');
|
|
}, 300);
|
|
}
|
|
|
|
// Search highlight micro-interaction
|
|
const searchInput = document.querySelector('input[type="text"]');
|
|
searchInput.addEventListener('focus', () => {
|
|
searchInput.parentElement.classList.add('scale-[1.02]');
|
|
});
|
|
searchInput.addEventListener('blur', () => {
|
|
searchInput.parentElement.classList.remove('scale-[1.02]');
|
|
});
|
|
</script>
|
|
</body></html> |