zio
6c9891c7e2
- Harness: kintex-mobile-dev agent + kintex-mobile-orchestrator skill (WISE mobile ref, Stitch-first design rule, dual app targets B2B/B2C) - design.md v2.1: full 84-screen inventory (web 51 / admin 10 / public 8 / mobile 15) with Stitch prompts incl. ticketing (SCR-P7/P8, M14/M15) - PLANNING v3.1: unified account + split signup tracks (2FA required for staff, light signup/guest for visitors), one codebase / two app targets - Deliverables: dev plan (21s), user/operator/developer guides (17/14/15s), program spec (44s, 65 programs, 8 flowcharts), DA (DB design 14s + table spec xlsx 35 tables/299 cols) - Benchmark: ticketing-app-benchmark.md (7 apps) -> IMPLEMENTATION_BACKLOG Phase F (14 items) - Stitch: 23 generated screens saved (mobile 10, admin 6, web core 5, ticket 2) - mobile/: Expo scaffold (SDK 51, expo-router, secure store JWT) - frontend: SCR-13~17 QA fixes, icons.tsx, kintexEvents, V10 seed migration - ci/: KINTEX CI logo assets Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
423 lines
24 KiB
HTML
423 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 Manager - RBAC</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": {
|
|
"outline-variant": "#c1c7d3",
|
|
"on-secondary": "#ffffff",
|
|
"secondary": "#5427e6",
|
|
"tertiary-container": "#00734e",
|
|
"secondary-container": "#6d4aff",
|
|
"inverse-primary": "#a2c9ff",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"surface": "#f9f9ff",
|
|
"primary-fixed": "#d3e4ff",
|
|
"on-primary-fixed": "#001c38",
|
|
"on-background": "#141b2c",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"surface-container-high": "#e0e8ff",
|
|
"background": "#f9f9ff",
|
|
"on-error": "#ffffff",
|
|
"surface-variant": "#dbe2f9",
|
|
"inverse-surface": "#293041",
|
|
"surface-container-highest": "#dbe2f9",
|
|
"secondary-fixed": "#e5deff",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-surface": "#141b2c",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"surface-bright": "#f9f9ff",
|
|
"surface-dim": "#d2daf0",
|
|
"inverse-on-surface": "#edf0ff",
|
|
"error-container": "#ffdad6",
|
|
"error": "#ba1a1a",
|
|
"tertiary": "#00583b",
|
|
"surface-tint": "#0060a9",
|
|
"surface-container-low": "#f1f3ff",
|
|
"outline": "#717782",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-container": "#e9edff",
|
|
"on-surface-variant": "#414751",
|
|
"on-tertiary-fixed": "#002113",
|
|
"primary": "#004e8b",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"on-primary": "#ffffff",
|
|
"primary-container": "#0066b3",
|
|
"on-tertiary-container": "#8ef7c3",
|
|
"on-secondary-container": "#f3edff",
|
|
"on-primary-container": "#d2e3ff",
|
|
"on-secondary-fixed-variant": "#4500d8"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"container-padding": "24px",
|
|
"base": "4px",
|
|
"gutter": "16px",
|
|
"stack-lg": "24px",
|
|
"stack-md": "16px",
|
|
"stack-sm": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"label-xs": ["Geist"],
|
|
"title-sm": ["Inter"],
|
|
"label-md": ["Geist"],
|
|
"display-lg": ["Inter"],
|
|
"headline-md": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"body-base": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; background-color: #f9f9ff; }
|
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
|
.tree-node-active { @apply bg-secondary-container text-on-secondary-container font-semibold; }
|
|
.permission-checkbox:checked { background-color: #0066b3; border-color: #0066b3; }
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #c1c7d3; border-radius: 10px; }
|
|
</style>
|
|
</head>
|
|
<body class="overflow-hidden">
|
|
<!-- SideNavBar (Shared Component) -->
|
|
<aside class="h-full w-64 fixed left-0 top-0 bg-surface-container-low dark:bg-inverse-surface border-r border-outline-variant dark:border-outline flex flex-col py-6 px-4 z-50">
|
|
<div class="mb-10 px-2">
|
|
<h1 class="font-headline-md text-headline-md font-bold text-primary dark:text-inverse-primary leading-tight">KINTEX Admin</h1>
|
|
<p class="text-[10px] uppercase tracking-widest text-outline mt-1 font-bold">AI Exhibition Management</p>
|
|
</div>
|
|
<nav class="flex-grow space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg font-label-md text-label-md" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
Dashboard
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg font-label-md text-label-md" href="#">
|
|
<span class="material-symbols-outlined">group</span>
|
|
User Management
|
|
</a>
|
|
<!-- Active Tab: Role Management -->
|
|
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-label-md text-label-md" href="#">
|
|
<span class="material-symbols-outlined">rule</span>
|
|
Role Management
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto border-t border-outline-variant pt-4 space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg font-label-md text-label-md" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
Settings
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg font-label-md text-label-md" href="#">
|
|
<span class="material-symbols-outlined">help</span>
|
|
Support
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- TopAppBar (Shared Component) -->
|
|
<header class="fixed top-0 right-0 w-[calc(100%-16rem)] h-16 bg-surface dark:bg-background border-b border-outline-variant dark:border-outline flex justify-between items-center px-8 z-40">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-title-sm text-title-sm font-bold text-on-surface dark:text-inverse-on-surface">KINTEX AI Manager</span>
|
|
<div class="h-4 w-px bg-outline-variant mx-2"></div>
|
|
<span class="text-on-surface-variant font-body-base text-body-base">역할 및 권한 관리 (RBAC)</span>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-4">
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors cursor-pointer">notifications</button>
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors cursor-pointer">help</button>
|
|
</div>
|
|
<div class="flex items-center gap-3 pl-4 border-l border-outline-variant cursor-pointer group">
|
|
<div class="text-right">
|
|
<p class="text-label-md font-label-md text-on-surface leading-tight">Admin User</p>
|
|
<p class="text-[10px] text-outline">System Manager</p>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container">
|
|
<span class="material-symbols-outlined text-sm">person</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-64 pt-16 h-screen bg-background flex flex-col">
|
|
<div class="p-8 flex-grow flex gap-8 overflow-hidden">
|
|
<!-- Left Column: Role Tree (1/3) -->
|
|
<section class="w-1/3 flex flex-col bg-surface-container-lowest border border-outline-variant rounded-xl shadow-sm overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-outline-variant bg-surface flex justify-between items-center">
|
|
<h2 class="font-title-sm text-on-surface flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">account_tree</span>
|
|
역할 그룹 계층
|
|
</h2>
|
|
<button class="text-primary hover:bg-primary-fixed p-1 rounded-full transition-colors">
|
|
<span class="material-symbols-outlined">add</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex-grow overflow-y-auto p-4 space-y-4">
|
|
<!-- Platform Level -->
|
|
<div>
|
|
<div class="flex items-center gap-2 px-2 py-1 text-label-xs font-bold text-outline uppercase tracking-wider mb-2">
|
|
<span class="material-symbols-outlined text-sm">hub</span> 플랫폼 (Platform)
|
|
</div>
|
|
<div class="ml-2 space-y-1">
|
|
<div class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container rounded-lg cursor-pointer transition-colors font-body-base">
|
|
<span class="material-symbols-outlined text-sm">shield_person</span> 플랫폼 슈퍼관리자
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tenant Level -->
|
|
<div>
|
|
<div class="flex items-center gap-2 px-2 py-1 text-label-xs font-bold text-outline uppercase tracking-wider mb-2">
|
|
<span class="material-symbols-outlined text-sm">corporate_fare</span> 테넌트 (Tenant)
|
|
</div>
|
|
<div class="ml-2 space-y-1">
|
|
<div class="flex items-center gap-3 px-3 py-2 bg-primary-container/10 text-primary border border-primary/20 rounded-lg cursor-pointer transition-colors font-body-base font-semibold">
|
|
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">admin_panel_settings</span> 테넌트 관리자
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Event Level -->
|
|
<div>
|
|
<div class="flex items-center gap-2 px-2 py-1 text-label-xs font-bold text-outline uppercase tracking-wider mb-2">
|
|
<span class="material-symbols-outlined text-sm">event_available</span> 행사 (Event)
|
|
</div>
|
|
<div class="ml-2 space-y-1">
|
|
<div class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container rounded-lg cursor-pointer transition-colors font-body-base">
|
|
<span class="material-symbols-outlined text-sm">campaign</span> 주최자 (Organizer)
|
|
</div>
|
|
<div class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container rounded-lg cursor-pointer transition-colors font-body-base">
|
|
<span class="material-symbols-outlined text-sm">storefront</span> 참가업체 (Exhibitor)
|
|
</div>
|
|
<div class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container rounded-lg cursor-pointer transition-colors font-body-base">
|
|
<span class="material-symbols-outlined text-sm">build</span> 장치업체 (Contractor)
|
|
</div>
|
|
<div class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-surface-container rounded-lg cursor-pointer transition-colors font-body-base">
|
|
<span class="material-symbols-outlined text-sm">meeting_room</span> 홀매니저 (Hall Manager)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 bg-surface-container-low border-t border-outline-variant">
|
|
<div class="flex items-center justify-center p-6 border-2 border-dashed border-outline-variant rounded-lg group cursor-pointer hover:border-primary hover:bg-white transition-all">
|
|
<div class="text-center">
|
|
<span class="material-symbols-outlined text-outline group-hover:text-primary mb-2">group_add</span>
|
|
<p class="text-label-md text-outline group-hover:text-on-surface">새 역할 그룹 생성</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Right Column: Permission Matrix (2/3) -->
|
|
<section class="w-2/3 flex flex-col bg-surface-container-lowest border border-outline-variant rounded-xl shadow-sm overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-outline-variant bg-white flex justify-between items-center">
|
|
<div class="flex items-center gap-4">
|
|
<h2 class="font-title-sm text-on-surface">권한 상세 설정</h2>
|
|
<span class="px-3 py-1 bg-primary text-on-primary text-label-xs rounded-full">테넌트 관리자</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="px-4 py-2 text-primary font-label-md border border-primary rounded-lg hover:bg-primary-fixed transition-colors">초기화</button>
|
|
<button class="px-6 py-2 bg-primary text-on-primary font-label-md rounded-lg shadow-md hover:bg-primary-container active:scale-95 transition-all">저장 (Save)</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow overflow-auto p-0">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="sticky top-0 bg-surface z-10">
|
|
<tr class="border-b border-outline-variant">
|
|
<th class="p-6 font-label-md text-outline">메뉴 / 기능 카테고리</th>
|
|
<th class="p-6 font-label-md text-outline text-center">조회 (Read)</th>
|
|
<th class="p-6 font-label-md text-outline text-center">생성 (Create)</th>
|
|
<th class="p-6 font-label-md text-outline text-center">수정 (Update)</th>
|
|
<th class="p-6 font-label-md text-outline text-center">삭제 (Delete)</th>
|
|
<th class="p-6 font-label-md text-outline text-center">승인 (Approve)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant/30">
|
|
<!-- Dashboard -->
|
|
<tr class="hover:bg-surface-container-low transition-colors group">
|
|
<td class="p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-secondary-fixed/30 flex items-center justify-center text-secondary">
|
|
<span class="material-symbols-outlined text-sm">dashboard</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-body-base font-semibold text-on-surface">대시보드</p>
|
|
<p class="text-label-xs text-outline">전체 운영 현황 모니터링</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
</tr>
|
|
<!-- Exhibition Schedule -->
|
|
<tr class="hover:bg-surface-container-low transition-colors group">
|
|
<td class="p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-primary-fixed/30 flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined text-sm">calendar_month</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-body-base font-semibold text-on-surface">전시회 일정</p>
|
|
<p class="text-label-xs text-outline">연간 전시 스케줄 관리</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
</tr>
|
|
<!-- Booth Layout Editor -->
|
|
<tr class="hover:bg-surface-container-low transition-colors group border-l-4 border-secondary-container">
|
|
<td class="p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-tertiary-fixed/30 flex items-center justify-center text-tertiary">
|
|
<span class="material-symbols-outlined text-sm">grid_view</span>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-1">
|
|
<p class="font-body-base font-semibold text-on-surface">부스 배치 에디터</p>
|
|
<span class="material-symbols-outlined text-[12px] text-secondary-container" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
|
</div>
|
|
<p class="text-label-xs text-outline">AI 부스 자동 배치 및 편집</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
</tr>
|
|
<!-- Utility Application -->
|
|
<tr class="hover:bg-surface-container-low transition-colors group">
|
|
<td class="p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-outline-variant/20 flex items-center justify-center text-on-surface-variant">
|
|
<span class="material-symbols-outlined text-sm">receipt_long</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-body-base font-semibold text-on-surface">유틸리티 신청</p>
|
|
<p class="text-label-xs text-outline">전기, 급배수, 랜선 등 신청</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
</tr>
|
|
<!-- Settlement -->
|
|
<tr class="hover:bg-surface-container-low transition-colors group">
|
|
<td class="p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-tertiary-container/10 flex items-center justify-center text-tertiary-container">
|
|
<span class="material-symbols-outlined text-sm">account_balance_wallet</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-body-base font-semibold text-on-surface">결제/정산</p>
|
|
<p class="text-label-xs text-outline">대금 청구 및 정산 처리</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
</tr>
|
|
<!-- User Management -->
|
|
<tr class="hover:bg-surface-container-low transition-colors group">
|
|
<td class="p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined text-sm">manage_accounts</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-body-base font-semibold text-on-surface">사용자 관리</p>
|
|
<p class="text-label-xs text-outline">계정 생성 및 권한 위임</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input checked="" class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
<td class="p-6 text-center"><input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="p-4 bg-surface border-t border-outline-variant flex justify-between items-center">
|
|
<div class="flex items-center gap-2 text-label-xs text-outline">
|
|
<span class="material-symbols-outlined text-sm">info</span>
|
|
선택된 권한은 실시간으로 저장되지 않습니다. 상단의 저장 버튼을 눌러주세요.
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex -space-x-2">
|
|
<div class="w-8 h-8 rounded-full border-2 border-white bg-secondary-fixed flex items-center justify-center text-[10px] font-bold">JD</div>
|
|
<div class="w-8 h-8 rounded-full border-2 border-white bg-primary-fixed flex items-center justify-center text-[10px] font-bold">MK</div>
|
|
<div class="w-8 h-8 rounded-full border-2 border-white bg-tertiary-fixed flex items-center justify-center text-[10px] font-bold">+5</div>
|
|
</div>
|
|
<p class="text-label-xs text-outline">현재 7명의 사용자가 이 역할을 가지고 있습니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<!-- Micro-interaction Script -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const rows = document.querySelectorAll('tbody tr');
|
|
rows.forEach(row => {
|
|
row.addEventListener('click', (e) => {
|
|
if (e.target.type !== 'checkbox') {
|
|
const cb = row.querySelector('input[type="checkbox"]');
|
|
// Optional: trigger some visual feedback or toggle primary checkbox
|
|
}
|
|
});
|
|
});
|
|
|
|
// Role selection mock behavior
|
|
const roleItems = document.querySelectorAll('.ml-2 > div');
|
|
roleItems.forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
roleItems.forEach(i => {
|
|
i.classList.remove('bg-primary-container/10', 'text-primary', 'border', 'border-primary/20', 'font-semibold');
|
|
i.classList.add('text-on-surface-variant', 'hover:bg-surface-container');
|
|
});
|
|
item.classList.add('bg-primary-container/10', 'text-primary', 'border', 'border-primary/20', 'font-semibold');
|
|
item.classList.remove('text-on-surface-variant', 'hover:bg-surface-container');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |