431 lines
24 KiB
HTML
431 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": {
|
|
"background": "#faf8ff",
|
|
"outline-variant": "#c2c7d1",
|
|
"surface": "#faf8ff",
|
|
"on-tertiary-container": "#68d1a0",
|
|
"secondary-container": "#6d4aff",
|
|
"primary-fixed": "#d3e4ff",
|
|
"surface-container-high": "#e1e7ff",
|
|
"surface-container-low": "#f2f3ff",
|
|
"on-background": "#141b2c",
|
|
"error-container": "#ffdad6",
|
|
"primary-container": "#004e8b",
|
|
"surface-container": "#eaedff",
|
|
"on-error-container": "#93000a",
|
|
"on-surface-variant": "#424750",
|
|
"on-secondary": "#ffffff",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"on-tertiary": "#ffffff",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"secondary-fixed": "#e5deff",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-dim": "#d3d9f1",
|
|
"primary": "#003765", /* Adjusted to KINTEX Blue #0066B3 context via primary scale */
|
|
"kintex-blue": "#0066B3",
|
|
"surface-variant": "#dbe2fa",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"on-primary-fixed": "#001c38",
|
|
"on-secondary-container": "#f3edff",
|
|
"surface-tint": "#24609e",
|
|
"on-error": "#ffffff",
|
|
"surface-bright": "#faf8ff",
|
|
"error": "#ba1a1a",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"on-primary": "#ffffff",
|
|
"tertiary-container": "#00583b",
|
|
"inverse-surface": "#293042",
|
|
"error-red": "#ba1a1a",
|
|
"surface-container-highest": "#dbe2fa",
|
|
"secondary": "#5427e6",
|
|
"on-primary-container": "#91c0ff",
|
|
"tertiary": "#003e28",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"on-tertiary-fixed": "#002113",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"inverse-primary": "#a2c9ff",
|
|
"outline": "#727781",
|
|
"on-surface": "#141b2c",
|
|
"inverse-on-surface": "#eef0ff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-lg": "24px",
|
|
"container-padding": "24px",
|
|
"section-padding": "96px",
|
|
"gutter": "16px",
|
|
"stack-sm": "8px",
|
|
"stack-md": "16px",
|
|
"base": "4px"
|
|
},
|
|
"fontFamily": {
|
|
"title-sm": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"label-md": ["Geist"],
|
|
"display-lg": ["Inter"],
|
|
"headline-md": ["Inter"],
|
|
"body-base": ["Inter"],
|
|
"label-xs": ["Geist"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.line-icon-style {
|
|
font-variation-settings: 'wght' 300, 'opsz' 20;
|
|
}
|
|
.zebra-table tr:nth-child(even) {
|
|
background-color: #f8fafc;
|
|
}
|
|
.notice-row:hover {
|
|
background-color: #f1f5f9 !important;
|
|
cursor: pointer;
|
|
}
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body-base overflow-hidden">
|
|
<!-- Shell Layout: SideNav -->
|
|
<aside class="fixed left-0 top-0 bottom-0 flex flex-col z-40 w-64 bg-primary text-on-primary shadow-lg">
|
|
<div class="p-6 flex flex-col gap-1">
|
|
<h1 class="text-title-sm font-title-sm font-bold text-on-primary">KINTEX AI</h1>
|
|
<p class="text-label-md font-label-md opacity-80">전시관리 시스템</p>
|
|
</div>
|
|
<nav class="flex-1 mt-4 overflow-y-auto px-2">
|
|
<div class="space-y-1">
|
|
<!-- 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 active:scale-95 duration-150" href="#">
|
|
<span class="material-symbols-outlined line-icon-style">dashboard</span>
|
|
<span class="text-label-md font-label-md">대시보드</span>
|
|
</a>
|
|
<!-- Notice Board - ACTIVE -->
|
|
<a class="bg-primary-container text-on-primary-container rounded-lg mx-2 my-1 flex items-center gap-3 px-4 py-3 active:scale-95 transition-all duration-150 shadow-sm" href="#">
|
|
<span class="material-symbols-outlined line-icon-style">campaign</span>
|
|
<span class="text-label-md font-label-md">공지사항</span>
|
|
</a>
|
|
<!-- Exhibition Management -->
|
|
<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 active:scale-95 duration-150" href="#">
|
|
<span class="material-symbols-outlined line-icon-style">event</span>
|
|
<span class="text-label-md font-label-md">전시 관리</span>
|
|
</a>
|
|
<!-- User Management -->
|
|
<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 active:scale-95 duration-150" href="#">
|
|
<span class="material-symbols-outlined line-icon-style">group</span>
|
|
<span class="text-label-md font-label-md">사용자 관리</span>
|
|
</a>
|
|
<!-- Device Monitoring -->
|
|
<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 active:scale-95 duration-150" href="#">
|
|
<span class="material-symbols-outlined line-icon-style">router</span>
|
|
<span class="text-label-md font-label-md">기기 모니터링</span>
|
|
</a>
|
|
<!-- Statistics -->
|
|
<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 active:scale-95 duration-150" href="#">
|
|
<span class="material-symbols-outlined line-icon-style">analytics</span>
|
|
<span class="text-label-md font-label-md">통계 분석</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<div class="p-4 border-t border-on-primary/10">
|
|
<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" href="#">
|
|
<span class="material-symbols-outlined line-icon-style">settings</span>
|
|
<span class="text-label-md font-label-md">설정</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" href="#">
|
|
<span class="material-symbols-outlined line-icon-style">logout</span>
|
|
<span class="text-label-md font-label-md">로그아웃</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Shell Layout: TopAppBar -->
|
|
<header class="fixed top-0 right-0 left-64 h-16 flex justify-between items-center px-6 z-30 bg-surface-bright border-b border-outline-variant">
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-primary font-bold text-headline-md tracking-tight">KINTEX AI 전시관리</span>
|
|
<div class="h-4 w-px bg-outline-variant mx-2"></div>
|
|
<nav class="flex gap-4 text-label-md font-label-md text-on-surface-variant">
|
|
<span class="text-primary font-bold">공지사항</span>
|
|
<span class="hover:text-primary cursor-pointer transition-colors">시스템 공지</span>
|
|
<span class="hover:text-primary cursor-pointer transition-colors">운영 매뉴얼</span>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative group">
|
|
<span class="material-symbols-outlined text-on-surface-variant p-2 rounded-full hover:bg-surface-container cursor-pointer transition-all">notifications</span>
|
|
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-error rounded-full border border-surface-bright"></span>
|
|
</div>
|
|
<div class="flex items-center gap-3 pl-4 border-l border-outline-variant">
|
|
<div class="text-right">
|
|
<p class="text-label-md font-label-md text-on-surface">김관리 팀장</p>
|
|
<p class="text-label-xs font-label-xs text-on-surface-variant opacity-70">시스템 관리자</p>
|
|
</div>
|
|
<img class="w-10 h-10 rounded-full border border-outline-variant object-cover" data-alt="A professional close-up studio portrait of a corporate administrator in a modern office environment. The person is wearing a clean, dark blue business suit, looking directly at the camera with a friendly and professional expression. The background is a soft, blurred office interior with high-end glass partitions and soft warm lighting that complements the clean-tech aesthetic of the UI. Professional lighting enhances facial features for a high-quality ID photo look." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBCwgHgvXoIPTXdvHcKYEuVvZzyTlo9T2gHNmT0t5TWrCgL5CcjgfaNEyL7yche1I2KzpojxaOnEqrlZBN__AIsjKXdXyaL-Csq33S2UiM3K-0G8vh9G546xErV2yjjlvUAdeFHCVOUq9KvaNDMdW5HFPs_6LXLEnnDswWa7fm0FygwICMSrcjZXbqN6p0bVx2EBNq2Qbf7FW8WeqSLdxBrmSUykRwldbchl93pY9aaFIjpz_131bSXf30hTknmSvjXUfz8VULNffY"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="ml-64 pt-16 h-screen overflow-y-auto">
|
|
<div class="max-w-[1280px] mx-auto p-12 space-y-8">
|
|
<!-- Page Header Section -->
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
|
<div>
|
|
<h2 class="text-display-lg font-display-lg text-primary">공지사항</h2>
|
|
<p class="text-body-base text-on-surface-variant mt-2">KINTEX AI 전시관리 시스템의 새로운 소식과 주요 안내사항을 확인하세요.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<div class="relative min-w-[320px]">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
|
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-base focus:ring-2 focus:ring-kintex-blue/20 focus:border-kintex-blue transition-all outline-none" placeholder="공지 제목 또는 내용 검색" type="text"/>
|
|
</div>
|
|
<button class="bg-kintex-blue text-on-primary px-6 py-2 rounded-full font-label-md text-label-md hover:bg-primary transition-all shadow-sm flex items-center gap-2 active:scale-95">
|
|
<span class="material-symbols-outlined text-[18px]">add</span>
|
|
공지 작성
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Pinned Notice Section -->
|
|
<div class="relative overflow-hidden rounded-xl border-l-4 border-error bg-surface-container-lowest shadow-md p-6 hover:shadow-lg transition-shadow cursor-pointer group">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex flex-col gap-3">
|
|
<div class="flex items-center gap-3">
|
|
<span class="bg-error text-white text-label-xs font-label-xs px-2 py-0.5 rounded uppercase tracking-wider">중요</span>
|
|
<span class="text-label-md font-label-md text-on-surface-variant">운영 가이드라인</span>
|
|
</div>
|
|
<h3 class="text-title-sm font-title-sm text-on-surface group-hover:text-kintex-blue transition-colors">
|
|
중요: 2026 스마트팩토리 엑스포 운영 규정 변경 안내
|
|
</h3>
|
|
<p class="text-body-sm text-on-surface-variant line-clamp-1 opacity-80">
|
|
내년도 개최 예정인 스마트팩토리 엑스포의 전시관 배치 및 안전 관리 규정이 강화됨에 따라 주요 변경 사항을 공지합니다. 전시 업체 및 관리자 분들께서는 반드시 숙지 부탁드립니다.
|
|
</p>
|
|
</div>
|
|
<div class="text-right whitespace-nowrap pl-8">
|
|
<p class="text-label-md font-label-md text-on-surface">관리본부</p>
|
|
<p class="text-label-xs font-label-xs text-on-surface-variant mt-1">2023.10.27</p>
|
|
</div>
|
|
</div>
|
|
<!-- Glassy Highlight Decorative -->
|
|
<div class="absolute -right-8 -bottom-8 w-24 h-24 bg-error/5 rounded-full blur-2xl"></div>
|
|
</div>
|
|
<!-- Notice List Table Container -->
|
|
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant overflow-hidden shadow-sm">
|
|
<table class="w-full text-left border-collapse zebra-table">
|
|
<thead>
|
|
<tr class="bg-surface-container text-on-surface-variant text-label-md font-label-md uppercase tracking-wider">
|
|
<th class="px-6 py-4 w-16 text-center">번호</th>
|
|
<th class="px-6 py-4">제목</th>
|
|
<th class="px-6 py-4 w-32">작성자</th>
|
|
<th class="px-6 py-4 w-32">게시일</th>
|
|
<th class="px-6 py-4 w-24 text-center">조회수</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-body-base">
|
|
<!-- Row 1 -->
|
|
<tr class="notice-row border-b border-outline-variant/30" onclick="openNoticeModal()">
|
|
<td class="px-6 py-5 text-center text-on-surface-variant">42</td>
|
|
<td class="px-6 py-5">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-on-surface font-medium">제 2전시장 AI 통합 관제 시스템 점검 공지</span>
|
|
<span class="material-symbols-outlined text-[16px] text-outline">attach_file</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-5 text-on-surface-variant">시스템운영팀</td>
|
|
<td class="px-6 py-5 text-on-surface-variant">2023.10.25</td>
|
|
<td class="px-6 py-5 text-center text-on-surface-variant">1,204</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="notice-row border-b border-outline-variant/30">
|
|
<td class="px-6 py-5 text-center text-on-surface-variant">41</td>
|
|
<td class="px-6 py-5">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-on-surface">KINTEX 멤버십 서비스 혜택 변경 안내 (11월부터 적용)</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-5 text-on-surface-variant">전략마케팅팀</td>
|
|
<td class="px-6 py-5 text-on-surface-variant">2023.10.22</td>
|
|
<td class="px-6 py-5 text-center text-on-surface-variant">856</td>
|
|
</tr>
|
|
<!-- Row 3 -->
|
|
<tr class="notice-row border-b border-outline-variant/30">
|
|
<td class="px-6 py-5 text-center text-on-surface-variant">40</td>
|
|
<td class="px-6 py-5">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-on-surface">전시 참관객 데이터 분석 리포트 업데이트 완료 (Q3)</span>
|
|
<span class="material-symbols-outlined text-[16px] text-outline">attach_file</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-5 text-on-surface-variant">데이터분석실</td>
|
|
<td class="px-6 py-5 text-on-surface-variant">2023.10.18</td>
|
|
<td class="px-6 py-5 text-center text-on-surface-variant">2,311</td>
|
|
</tr>
|
|
<!-- Row 4 -->
|
|
<tr class="notice-row border-b border-outline-variant/30">
|
|
<td class="px-6 py-5 text-center text-on-surface-variant">39</td>
|
|
<td class="px-6 py-5 text-on-surface">하반기 신규 전시 제안서 접수 기간 연장 알림</td>
|
|
<td class="px-6 py-5 text-on-surface-variant">기획사업본부</td>
|
|
<td class="px-6 py-5 text-on-surface-variant">2023.10.15</td>
|
|
<td class="px-6 py-5 text-center text-on-surface-variant">542</td>
|
|
</tr>
|
|
<!-- Row 5 -->
|
|
<tr class="notice-row border-b border-outline-variant/30">
|
|
<td class="px-6 py-5 text-center text-on-surface-variant">38</td>
|
|
<td class="px-6 py-5 text-on-surface">추석 연휴 기간 시스템 고객지원 센터 운영 시간 안내</td>
|
|
<td class="px-6 py-5 text-on-surface-variant">운영본부</td>
|
|
<td class="px-6 py-5 text-on-surface-variant">2023.09.25</td>
|
|
<td class="px-6 py-5 text-center text-on-surface-variant">1,098</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 bg-surface-container-lowest flex justify-between items-center border-t border-outline-variant/30">
|
|
<p class="text-label-md font-label-md text-on-surface-variant">전체 1,242개의 항목 중 1-5 표시</p>
|
|
<div class="flex gap-1">
|
|
<button class="p-2 rounded hover:bg-surface-container-low text-on-surface-variant"><span class="material-symbols-outlined">chevron_left</span></button>
|
|
<button class="w-8 h-8 rounded flex items-center justify-center bg-kintex-blue text-white font-label-md text-label-md">1</button>
|
|
<button class="w-8 h-8 rounded flex items-center justify-center hover:bg-surface-container-low text-on-surface-variant font-label-md text-label-md">2</button>
|
|
<button class="w-8 h-8 rounded flex items-center justify-center hover:bg-surface-container-low text-on-surface-variant font-label-md text-label-md">3</button>
|
|
<button class="w-8 h-8 rounded flex items-center justify-center hover:bg-surface-container-low text-on-surface-variant font-label-md text-label-md">4</button>
|
|
<button class="w-8 h-8 rounded flex items-center justify-center hover:bg-surface-container-low text-on-surface-variant font-label-md text-label-md">5</button>
|
|
<button class="p-2 rounded hover:bg-surface-container-low text-on-surface-variant"><span class="material-symbols-outlined">chevron_right</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Detail View Modal (Glassmorphism Overlay) -->
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm hidden opacity-0 transition-opacity duration-300" id="noticeModal">
|
|
<div class="bg-surface-container-lowest w-full max-w-3xl max-h-[921px] rounded-2xl shadow-2xl overflow-hidden flex flex-col transform scale-95 transition-transform duration-300">
|
|
<!-- Modal Header -->
|
|
<div class="px-8 py-6 border-b border-outline-variant flex justify-between items-start">
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-3">
|
|
<span class="bg-primary-fixed text-on-primary-fixed-variant text-label-xs font-label-xs px-2 py-0.5 rounded">점검안내</span>
|
|
<span class="text-label-md font-label-md text-on-surface-variant">No. 42</span>
|
|
</div>
|
|
<h3 class="text-headline-md font-headline-md text-on-surface">제 2전시장 AI 통합 관제 시스템 점검 공지</h3>
|
|
</div>
|
|
<button class="p-2 hover:bg-surface-container rounded-full transition-colors" onclick="closeNoticeModal()">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<!-- Modal Meta Info -->
|
|
<div class="px-8 py-4 bg-surface-container-low flex gap-8">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-label-xs font-label-xs text-on-surface-variant uppercase opacity-60">작성자</span>
|
|
<span class="text-label-md font-label-md text-on-surface">시스템운영팀</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 border-l border-outline-variant pl-8">
|
|
<span class="text-label-xs font-label-xs text-on-surface-variant uppercase opacity-60">등록일</span>
|
|
<span class="text-label-md font-label-md text-on-surface">2023.10.25 14:30</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 border-l border-outline-variant pl-8">
|
|
<span class="text-label-xs font-label-xs text-on-surface-variant uppercase opacity-60">조회수</span>
|
|
<span class="text-label-md font-label-md text-on-surface">1,204</span>
|
|
</div>
|
|
</div>
|
|
<!-- Modal Body Content -->
|
|
<div class="px-8 py-8 flex-1 overflow-y-auto space-y-6">
|
|
<div class="text-body-base text-on-surface space-y-4 leading-relaxed">
|
|
<p>안녕하세요. KINTEX AI 전시관리 시스템 운영팀입니다.</p>
|
|
<p>시스템 안정성 강화 및 안정적인 서비스 제공을 위해 아래와 같이 제 2전시장 AI 통합 관제 시스템의 정기 점검이 진행될 예정입니다. 점검 시간 동안 해당 지역의 실시간 모니터링 기능이 일시적으로 제한될 수 있으니 운영에 참고하여 주시기 바랍니다.</p>
|
|
<div class="bg-surface-container-low p-5 rounded-lg border border-outline-variant/50 space-y-2">
|
|
<p class="font-bold">1. 점검 일시</p>
|
|
<p>• 2023년 11월 01일 (수) 02:00 ~ 05:00 (약 3시간)</p>
|
|
<p class="font-bold mt-4">2. 점검 대상</p>
|
|
<p>• 제 2전시장 전 구역 AI 카메라 및 데이터 허브</p>
|
|
<p class="font-bold mt-4">3. 점검 영향</p>
|
|
<p>• 점검 중 실시간 군중 밀집도 데이터 업데이트 지연</p>
|
|
<p>• 시스템 대시보드 내 특정 위젯 로딩 불가</p>
|
|
</div>
|
|
<p>이와 관련하여 문의사항이 있으시면 시스템운영팀(내선 104)으로 연락 주시기 바랍니다. 더 나은 서비스를 제공하기 위해 노력하겠습니다. 감사합니다.</p>
|
|
</div>
|
|
<!-- Attachments Section -->
|
|
<div class="pt-6 border-t border-outline-variant">
|
|
<h4 class="text-label-md font-label-md text-on-surface mb-3 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[20px]">attach_file</span>
|
|
첨부파일 (1)
|
|
</h4>
|
|
<div class="flex flex-wrap gap-2">
|
|
<div class="flex items-center gap-3 px-4 py-3 bg-surface-container-low border border-outline-variant rounded-lg hover:border-kintex-blue hover:bg-white cursor-pointer transition-all group">
|
|
<span class="material-symbols-outlined text-kintex-blue">picture_as_pdf</span>
|
|
<div>
|
|
<p class="text-label-md font-label-md text-on-surface">점검 상세 매뉴얼.pdf</p>
|
|
<p class="text-label-xs font-label-xs text-on-surface-variant opacity-60">2.4 MB</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-kintex-blue opacity-0 group-hover:opacity-100 transition-opacity ml-4">download</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal Footer -->
|
|
<div class="px-8 py-5 border-t border-outline-variant flex justify-end gap-3 bg-surface-container-lowest">
|
|
<button class="px-6 py-2 border border-outline-variant text-on-surface-variant rounded-lg font-label-md hover:bg-surface-container transition-all" onclick="closeNoticeModal()">닫기</button>
|
|
<button class="px-6 py-2 bg-kintex-blue text-white rounded-lg font-label-md hover:bg-primary transition-all shadow-sm">수정하기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function openNoticeModal() {
|
|
const modal = document.getElementById('noticeModal');
|
|
const inner = modal.querySelector('div');
|
|
modal.classList.remove('hidden');
|
|
setTimeout(() => {
|
|
modal.classList.remove('opacity-0');
|
|
inner.classList.remove('scale-95');
|
|
inner.classList.add('scale-100');
|
|
}, 10);
|
|
}
|
|
|
|
function closeNoticeModal() {
|
|
const modal = document.getElementById('noticeModal');
|
|
const inner = modal.querySelector('div');
|
|
modal.classList.add('opacity-0');
|
|
inner.classList.add('scale-95');
|
|
inner.classList.remove('scale-100');
|
|
setTimeout(() => {
|
|
modal.classList.add('hidden');
|
|
}, 300);
|
|
}
|
|
|
|
// Close modal on escape key
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.key === "Escape") {
|
|
closeNoticeModal();
|
|
}
|
|
});
|
|
|
|
// Close modal on backdrop click
|
|
document.getElementById('noticeModal').addEventListener('click', function(event) {
|
|
if (event.target === this) {
|
|
closeNoticeModal();
|
|
}
|
|
});
|
|
</script>
|
|
</body></html> |