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>
418 lines
24 KiB
HTML
418 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=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-bright": "#f9f9ff",
|
|
"on-error-container": "#93000a",
|
|
"secondary-fixed": "#e5deff",
|
|
"secondary": "#5427e6",
|
|
"on-primary-fixed": "#001c38",
|
|
"surface-variant": "#dbe2f9",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"secondary-container": "#6d4aff",
|
|
"error-container": "#ffdad6",
|
|
"on-primary-container": "#d2e3ff",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"surface-dim": "#d2daf0",
|
|
"inverse-surface": "#293041",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"primary-fixed": "#d3e4ff",
|
|
"on-surface-variant": "#414751",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"on-tertiary-fixed": "#002113",
|
|
"inverse-on-surface": "#edf0ff",
|
|
"error": "#ba1a1a",
|
|
"on-tertiary": "#ffffff",
|
|
"primary-container": "#0066b3",
|
|
"tertiary-container": "#00734e",
|
|
"on-primary": "#ffffff",
|
|
"on-error": "#ffffff",
|
|
"background": "#f9f9ff",
|
|
"surface": "#f9f9ff",
|
|
"on-surface": "#141b2c",
|
|
"on-secondary-container": "#f3edff",
|
|
"tertiary": "#00583b",
|
|
"on-tertiary-container": "#8ef7c3",
|
|
"on-secondary": "#ffffff",
|
|
"on-background": "#141b2c",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"surface-container-lowest": "#ffffff",
|
|
"inverse-primary": "#a2c9ff",
|
|
"surface-container": "#e9edff",
|
|
"primary": "#004e8b",
|
|
"surface-container-high": "#e0e8ff",
|
|
"surface-tint": "#0060a9",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"outline-variant": "#c1c7d3",
|
|
"outline": "#717782",
|
|
"surface-container-highest": "#dbe2f9",
|
|
"surface-container-low": "#f1f3ff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-sm": "8px",
|
|
"stack-lg": "24px",
|
|
"gutter": "16px",
|
|
"stack-md": "16px",
|
|
"container-padding": "24px",
|
|
"base": "4px"
|
|
},
|
|
"fontFamily": {
|
|
"title-sm": ["Inter"],
|
|
"headline-md": ["Inter"],
|
|
"body-base": ["Inter"],
|
|
"label-md": ["Geist"],
|
|
"body-sm": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
"body-sm": ["13px", {"lineHeight": "18px", "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; }
|
|
.custom-scrollbar::-webkit-scrollbar { width: 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: #717782; }
|
|
</style>
|
|
</head>
|
|
<body class="text-on-surface">
|
|
<!-- SideNavBar Shell -->
|
|
<aside class="h-screen w-64 flex flex-col fixed left-0 top-0 border-r border-outline-variant bg-surface-container-lowest dark:bg-inverse-surface z-50">
|
|
<div class="flex flex-col h-full py-container-padding">
|
|
<!-- Brand Logo -->
|
|
<div class="px-6 mb-8">
|
|
<img alt="KINTEX Logo" class="h-8 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBW8F6aqXODXXAWGceGi4BlA03fKDeuh-zDzUssvq_YlwatuDYBBDwF8xiiegBKuWPzVQPjj4sw82vmTc4fJ6jLiAtktpLgUW2G4aVe9pOU6XfLN2FYRuRSCRDv-57JazvkrAAdyK6XnD2tYqnNmKe1_JU8eX5dPVfDNfDwimD4tcVQSfFRFjc_brUL6pz17VgN3HUmv99ZAgAWFW0_mcBcuPiWc7mZ7Tq6N-z_NvFVrxR6L2nC6aSzV9AGSWJXF1sgSIqffPBGQuM"/>
|
|
<div class="mt-2">
|
|
<p class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed">KINTEX AI</p>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Exhibition Management</p>
|
|
</div>
|
|
</div>
|
|
<!-- Navigation Links -->
|
|
<nav class="flex-1 px-3 space-y-1 overflow-y-auto custom-scrollbar">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span class="font-label-md text-label-md">Dashboard</span>
|
|
</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" href="#">
|
|
<span class="material-symbols-outlined">group</span>
|
|
<span class="font-label-md text-label-md">User Management</span>
|
|
</a>
|
|
<!-- ACTIVE TAB: Common Code Management (공통코드 관리) -->
|
|
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container font-semibold rounded-lg scale-[0.99] transition-transform duration-150 shadow-sm" href="#">
|
|
<span class="material-symbols-outlined">settings_ethernet</span>
|
|
<span class="font-label-md text-label-md">Common Code Management</span>
|
|
</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" href="#">
|
|
<span class="material-symbols-outlined">grid_view</span>
|
|
<span class="font-label-md text-label-md">Exhibition Layout</span>
|
|
</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" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="font-label-md text-label-md">Settings</span>
|
|
</a>
|
|
<div class="pt-6 mt-6 border-t border-outline-variant px-4">
|
|
<button class="w-full bg-primary text-on-primary py-2.5 rounded-lg font-label-md text-label-md flex items-center justify-center gap-2 hover:bg-primary-container transition-all">
|
|
<span class="material-symbols-outlined text-[20px]">add</span>
|
|
New Exhibition
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<!-- Footer Navigation -->
|
|
<div class="px-3 mt-auto 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" href="#">
|
|
<span class="material-symbols-outlined">help</span>
|
|
<span class="font-label-md text-label-md">Help Center</span>
|
|
</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" href="#">
|
|
<span class="material-symbols-outlined">logout</span>
|
|
<span class="font-label-md text-label-md">Logout</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-64 min-h-screen flex flex-col">
|
|
<!-- TopNavBar Shell -->
|
|
<header class="h-16 w-full sticky top-0 z-40 bg-surface dark:bg-surface-dim flex items-center justify-between px-gutter border-b border-outline-variant">
|
|
<div class="flex items-center gap-4">
|
|
<nav class="flex items-center text-on-surface-variant font-label-md text-label-md">
|
|
<span class="hover:text-primary transition-colors cursor-pointer">시스템 설정</span>
|
|
<span class="material-symbols-outlined mx-1 text-[16px]">chevron_right</span>
|
|
<span class="text-primary font-bold">공통코드 관리</span>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative group hidden md:block">
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-outline">
|
|
<span class="material-symbols-outlined text-[20px]">search</span>
|
|
</span>
|
|
<input class="block w-64 bg-surface-container-low border-none rounded-full py-1.5 pl-10 pr-3 font-body-sm text-body-sm focus:ring-2 focus:ring-primary focus:bg-white transition-all" placeholder="코드 또는 그룹 검색..." type="text"/>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high 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 border-2 border-surface"></span>
|
|
</button>
|
|
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors">
|
|
<span class="material-symbols-outlined">help</span>
|
|
</button>
|
|
<div class="h-8 w-[1px] bg-outline-variant mx-2"></div>
|
|
<div class="flex items-center gap-3 cursor-pointer group">
|
|
<div class="text-right">
|
|
<p class="font-label-md text-label-md text-on-surface group-hover:text-primary transition-colors">Admin Profile</p>
|
|
<p class="text-[10px] text-on-surface-variant">시스템 관리자</p>
|
|
</div>
|
|
<img class="w-8 h-8 rounded-full object-cover ring-2 ring-outline-variant group-hover:ring-primary transition-all" data-alt="A professional headshot of a Korean IT administrator in a clean office setting, soft professional lighting, modern corporate style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAioj2df8bJd5evCnXK5lVitIaaNH70IQ4Smy2IW5GdbdxcEwbD5pP-piKMLMWqtW-Fgmg76sl0gLJYYkZ3a4QX6sMv5aNTEMnHuBCExYFWC3d_vEVIf3FIBrarcc5IpXxXzROO-wOgPR2ji7KNu0tqC6HJgIkMmnVjEHGs3Ma4EnufIVHTOYJ6xQxpOJTRi-nwVnGbx49icCOXHteZxliq8OQuQ_GQITGiNER1y8VPxILfiIRm_w1A52AinpuhC1rcGBO4DOac9nc"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Content Canvas -->
|
|
<div class="p-stack-lg flex-1 flex gap-gutter overflow-hidden">
|
|
<!-- Left Panel: Code Groups -->
|
|
<section class="w-1/4 flex flex-col bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
|
|
<div class="px-6 py-4 border-b border-outline-variant flex items-center justify-between">
|
|
<h2 class="font-title-sm text-title-sm text-on-surface">코드 그룹 목록</h2>
|
|
<button class="text-primary hover:bg-primary-fixed p-1 rounded-md transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]">add_box</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto custom-scrollbar p-2">
|
|
<div class="space-y-1">
|
|
<button class="w-full flex items-center justify-between px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group">
|
|
<span class="font-body-base text-body-base">전시장/홀 정보</span>
|
|
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors text-[18px]">chevron_right</span>
|
|
</button>
|
|
<button class="w-full flex items-center justify-between px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group">
|
|
<span class="font-body-base text-body-base">부스 유형</span>
|
|
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors text-[18px]">chevron_right</span>
|
|
</button>
|
|
<!-- SELECTED ITEM -->
|
|
<button class="w-full flex items-center justify-between px-4 py-3 rounded-lg bg-primary text-on-primary shadow-md">
|
|
<span class="font-body-base text-body-base font-semibold">공종 분류 (14분류)</span>
|
|
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
|
</button>
|
|
<button class="w-full flex items-center justify-between px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group">
|
|
<span class="font-body-base text-body-base">유틸리티 요금코드</span>
|
|
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors text-[18px]">chevron_right</span>
|
|
</button>
|
|
<button class="w-full flex items-center justify-between px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group">
|
|
<span class="font-body-base text-body-base">행사 진행 상태</span>
|
|
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors text-[18px]">chevron_right</span>
|
|
</button>
|
|
<button class="w-full flex items-center justify-between px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group">
|
|
<span class="font-body-base text-body-base">사용자 권한 등급</span>
|
|
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors text-[18px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Right Panel: Code Details -->
|
|
<section class="flex-1 flex flex-col bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
|
|
<div class="px-6 py-4 border-b border-outline-variant flex items-center justify-between">
|
|
<div>
|
|
<h2 class="font-title-sm text-title-sm text-on-surface">공종 분류 상세 코드</h2>
|
|
<p class="text-on-surface-variant font-label-md text-label-md mt-1">그룹 ID: CATEGORY_14_TYPE</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="px-4 py-2 bg-primary text-on-primary rounded-lg font-label-md text-label-md flex items-center gap-1.5 hover:bg-primary-container transition-all">
|
|
<span class="material-symbols-outlined text-[18px]">add</span>
|
|
코드 추가
|
|
</button>
|
|
<button class="px-4 py-2 border border-primary text-primary rounded-lg font-label-md text-label-md hover:bg-primary-fixed transition-all">
|
|
변경사항 저장
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 overflow-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-surface-container-low border-b border-outline-variant sticky top-0 z-10">
|
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant">코드</th>
|
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant">코드명(KR)</th>
|
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant text-center">정렬 순서</th>
|
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant">구분</th>
|
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant">사용 여부</th>
|
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant text-right">관리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant">
|
|
<!-- Row 1 -->
|
|
<tr class="hover:bg-surface-container transition-colors group">
|
|
<td class="px-6 py-4 font-body-sm text-body-sm font-mono text-primary">C001</td>
|
|
<td class="px-6 py-4 font-body-sm text-body-sm font-semibold">건축/목공</td>
|
|
<td class="px-6 py-4 font-body-sm text-body-sm text-center">1</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2 py-0.5 rounded-full bg-surface-container-highest text-on-surface-variant text-[10px] font-bold uppercase tracking-wider border border-outline-variant">전역</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-tertiary rounded-full"></div>
|
|
<span class="font-body-sm text-body-sm text-tertiary font-semibold">활성</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-primary-fixed rounded-md transition-colors"><span class="material-symbols-outlined text-[20px]">edit</span></button>
|
|
<button class="p-1.5 text-on-surface-variant hover:text-error hover:bg-error-container rounded-md transition-colors"><span class="material-symbols-outlined text-[20px]">delete</span></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="hover:bg-surface-container transition-colors group">
|
|
<td class="px-6 py-4 font-body-sm text-body-sm font-mono text-primary">C002</td>
|
|
<td class="px-6 py-4 font-body-sm text-body-sm font-semibold">전기/조명</td>
|
|
<td class="px-6 py-4 font-body-sm text-body-sm text-center">2</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2 py-0.5 rounded-full bg-secondary-fixed text-on-secondary-fixed text-[10px] font-bold uppercase tracking-wider border border-secondary-fixed-dim">테넌트 재정의</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-tertiary rounded-full"></div>
|
|
<span class="font-body-sm text-body-sm text-tertiary font-semibold">활성</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-primary-fixed rounded-md transition-colors"><span class="material-symbols-outlined text-[20px]">edit</span></button>
|
|
<button class="p-1.5 text-on-surface-variant hover:text-error hover:bg-error-container rounded-md transition-colors"><span class="material-symbols-outlined text-[20px]">delete</span></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3 -->
|
|
<tr class="hover:bg-surface-container transition-colors group">
|
|
<td class="px-6 py-4 font-body-sm text-body-sm font-mono text-primary">C003</td>
|
|
<td class="px-6 py-4 font-body-sm text-body-sm font-semibold">가구/비품</td>
|
|
<td class="px-6 py-4 font-body-sm text-body-sm text-center">3</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2 py-0.5 rounded-full bg-surface-container-highest text-on-surface-variant text-[10px] font-bold uppercase tracking-wider border border-outline-variant">전역</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-tertiary rounded-full"></div>
|
|
<span class="font-body-sm text-body-sm text-tertiary font-semibold">활성</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-primary-fixed rounded-md transition-colors"><span class="material-symbols-outlined text-[20px]">edit</span></button>
|
|
<button class="p-1.5 text-on-surface-variant hover:text-error hover:bg-error-container rounded-md transition-colors"><span class="material-symbols-outlined text-[20px]">delete</span></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 4 -->
|
|
<tr class="hover:bg-surface-container transition-colors group">
|
|
<td class="px-6 py-4 font-body-sm text-body-sm font-mono text-primary">C004</td>
|
|
<td class="px-6 py-4 font-body-sm text-body-sm font-semibold text-on-surface-variant opacity-60">리깅/현수막</td>
|
|
<td class="px-6 py-4 font-body-sm text-body-sm text-center">4</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2 py-0.5 rounded-full bg-surface-container-highest text-on-surface-variant text-[10px] font-bold uppercase tracking-wider border border-outline-variant">전역</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-outline rounded-full"></div>
|
|
<span class="font-body-sm text-body-sm text-on-surface-variant font-medium">비활성</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-primary-fixed rounded-md transition-colors"><span class="material-symbols-outlined text-[20px]">edit</span></button>
|
|
<button class="p-1.5 text-on-surface-variant hover:text-error hover:bg-error-container rounded-md transition-colors"><span class="material-symbols-outlined text-[20px]">delete</span></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination/Footer -->
|
|
<div class="px-6 py-3 border-t border-outline-variant bg-surface-container-low flex items-center justify-between">
|
|
<span class="font-label-md text-label-md text-on-surface-variant">전체 4개 항목 중 1-4 표시</span>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-1 rounded hover:bg-surface-container-high transition-colors disabled:opacity-30" disabled="">
|
|
<span class="material-symbols-outlined">first_page</span>
|
|
</button>
|
|
<button class="p-1 rounded hover:bg-surface-container-high transition-colors disabled:opacity-30" disabled="">
|
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
</button>
|
|
<div class="flex items-center gap-1 px-4">
|
|
<span class="w-8 h-8 flex items-center justify-center bg-primary text-on-primary rounded-md font-label-md text-label-md">1</span>
|
|
</div>
|
|
<button class="p-1 rounded hover:bg-surface-container-high transition-colors disabled:opacity-30" disabled="">
|
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
</button>
|
|
<button class="p-1 rounded hover:bg-surface-container-high transition-colors disabled:opacity-30" disabled="">
|
|
<span class="material-symbols-outlined">last_page</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Floating Quick View Control (Micro-interaction) -->
|
|
<div class="fixed bottom-10 right-10 flex flex-col gap-3 group">
|
|
<button class="w-14 h-14 rounded-full bg-secondary text-on-secondary shadow-xl flex items-center justify-center hover:scale-110 transition-transform active:scale-95">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
|
</button>
|
|
<div class="absolute bottom-16 right-0 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col gap-2 pointer-events-none group-hover:pointer-events-auto">
|
|
<button class="bg-white border border-outline-variant px-4 py-2 rounded-lg text-on-surface font-label-md text-label-md shadow-lg flex items-center gap-2 hover:bg-surface-container-high">
|
|
<span class="material-symbols-outlined text-[18px]">history</span>
|
|
변경 이력 보기
|
|
</button>
|
|
<button class="bg-white border border-outline-variant px-4 py-2 rounded-lg text-on-surface font-label-md text-label-md shadow-lg flex items-center gap-2 hover:bg-surface-container-high">
|
|
<span class="material-symbols-outlined text-[18px]">cloud_download</span>
|
|
엑셀 다운로드
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
// Simple micro-interactions
|
|
document.querySelectorAll('tbody tr').forEach(row => {
|
|
row.addEventListener('click', () => {
|
|
document.querySelectorAll('tbody tr').forEach(r => r.classList.remove('bg-primary-fixed'));
|
|
row.classList.add('bg-primary-fixed');
|
|
});
|
|
});
|
|
|
|
// Search highlight logic
|
|
const searchInput = document.querySelector('input[type="text"]');
|
|
searchInput.addEventListener('input', (e) => {
|
|
const term = e.target.value.toLowerCase();
|
|
document.querySelectorAll('tbody tr').forEach(row => {
|
|
const text = row.innerText.toLowerCase();
|
|
if (text.includes(term)) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |