feat: 다수 기능 개선 - 순찰, 출근, 작업분석, 모바일 UI 등
- 순찰/점검 기능 개선 (zone-detail 페이지 추가) - 출근/근태 시스템 개선 (연차 조회, 근무현황) - 작업분석 대분류 그룹화 및 마이그레이션 스크립트 - 모바일 네비게이션 UI 추가 - NAS 배포 도구 및 문서 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
135
web-ui/components/mobile-nav.html
Normal file
135
web-ui/components/mobile-nav.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!-- components/mobile-nav.html -->
|
||||
<!-- 모바일 하단 네비게이션 -->
|
||||
<nav class="mobile-bottom-nav" id="mobileBottomNav">
|
||||
<a href="/pages/dashboard.html" class="mobile-nav-item" data-page="dashboard">
|
||||
<span class="mobile-nav-icon">🏠</span>
|
||||
<span class="mobile-nav-label">홈</span>
|
||||
</a>
|
||||
<a href="/pages/work/tbm.html" class="mobile-nav-item" data-page="tbm">
|
||||
<span class="mobile-nav-icon">📋</span>
|
||||
<span class="mobile-nav-label">TBM</span>
|
||||
</a>
|
||||
<a href="/pages/work/report-create.html" class="mobile-nav-item" data-page="report">
|
||||
<span class="mobile-nav-icon">📝</span>
|
||||
<span class="mobile-nav-label">작업보고</span>
|
||||
</a>
|
||||
<a href="/pages/attendance/checkin.html" class="mobile-nav-item" data-page="checkin">
|
||||
<span class="mobile-nav-icon">⏰</span>
|
||||
<span class="mobile-nav-label">출근</span>
|
||||
</a>
|
||||
<button class="mobile-nav-item" id="mobileMoreBtn">
|
||||
<span class="mobile-nav-icon">☰</span>
|
||||
<span class="mobile-nav-label">메뉴</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
/* 모바일 하단 네비게이션 */
|
||||
.mobile-bottom-nav {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mobile-bottom-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
/* 바디 패딩 추가 */
|
||||
body {
|
||||
padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: #6b7280;
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
padding: 0.5rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.mobile-nav-item:active {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.mobile-nav-item.active {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.mobile-nav-icon {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mobile-nav-label {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 활성 상태 */
|
||||
.mobile-nav-item.active .mobile-nav-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.mobile-nav-item.active .mobile-nav-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
// 현재 페이지 하이라이트
|
||||
const currentPath = window.location.pathname;
|
||||
const navItems = document.querySelectorAll('.mobile-nav-item[data-page]');
|
||||
|
||||
navItems.forEach(item => {
|
||||
const href = item.getAttribute('href');
|
||||
if (href && currentPath.includes(href.replace('/pages/', '').replace('.html', ''))) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// 대시보드 페이지 체크
|
||||
if (currentPath.includes('dashboard')) {
|
||||
document.querySelector('[data-page="dashboard"]')?.classList.add('active');
|
||||
}
|
||||
|
||||
// 더보기 버튼 - 사이드바 열기
|
||||
const moreBtn = document.getElementById('mobileMoreBtn');
|
||||
if (moreBtn) {
|
||||
moreBtn.addEventListener('click', () => {
|
||||
const sidebar = document.getElementById('sidebarNav');
|
||||
const overlay = document.getElementById('sidebarOverlay');
|
||||
if (sidebar) {
|
||||
sidebar.classList.add('mobile-open');
|
||||
overlay?.classList.add('show');
|
||||
document.body.classList.add('sidebar-mobile-open');
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@@ -3,6 +3,10 @@
|
||||
<header class="dashboard-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<!-- 모바일 메뉴 버튼 -->
|
||||
<button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="메뉴 열기">
|
||||
☰
|
||||
</button>
|
||||
<div class="brand">
|
||||
<img src="/img/logo.png" alt="테크니컬코리아" class="brand-logo">
|
||||
<div class="brand-text">
|
||||
@@ -16,7 +20,7 @@
|
||||
<div class="datetime-weather-box">
|
||||
<div class="date-time-section">
|
||||
<span class="date-value" id="dateValue">--월 --일 (--)</span>
|
||||
<span class="time-value" id="timeValue">--:--:--</span>
|
||||
<span class="time-value" id="timeValue">--시 --분 --초</span>
|
||||
</div>
|
||||
<div class="weather-section" id="weatherSection">
|
||||
<span class="weather-icon" id="weatherIcon">🌤️</span>
|
||||
@@ -598,18 +602,61 @@ body {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* 모바일 메뉴 버튼 */
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
transition: all 0.2s;
|
||||
margin-right: var(--space-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-menu-btn:hover,
|
||||
.mobile-menu-btn:active {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
/* 반응형 디자인 */
|
||||
@media (max-width: 1024px) {
|
||||
.mobile-menu-btn {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-header {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 0 var(--space-2);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: var(--text-lg);
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
font-size: var(--text-xs);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-center {
|
||||
@@ -620,6 +667,11 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.dashboard-btn .btn-text,
|
||||
.report-btn .btn-text {
|
||||
display: none;
|
||||
@@ -627,12 +679,55 @@ body {
|
||||
|
||||
.dashboard-btn,
|
||||
.report-btn {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
padding: var(--space-2);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dashboard-btn .btn-icon,
|
||||
.report-btn .btn-icon {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notification-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.notification-dropdown {
|
||||
width: 280px;
|
||||
right: -50px;
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
left: var(--space-3);
|
||||
right: var(--space-3);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: var(--space-2);
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
padding: var(--space-1) var(--space-2);
|
||||
}
|
||||
|
||||
.profile-menu {
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
right: var(--space-3);
|
||||
left: auto;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 모바일 사이드바 열릴 때 바디 스크롤 방지 */
|
||||
body.sidebar-mobile-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -89,6 +89,9 @@
|
||||
<span class="nav-arrow">▾</span>
|
||||
</button>
|
||||
<div class="nav-category-items">
|
||||
<a href="/pages/attendance/my-vacation-info.html" class="nav-item" data-page-key="attendance.my_vacation_info">
|
||||
<span class="nav-text">내 연차 정보</span>
|
||||
</a>
|
||||
<a href="/pages/attendance/monthly.html" class="nav-item" data-page-key="attendance.monthly">
|
||||
<span class="nav-text">월간 근태</span>
|
||||
</a>
|
||||
@@ -354,16 +357,68 @@ body.has-sidebar.sidebar-collapsed > .main-content {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
/* 반응형 - 모바일 */
|
||||
@media (max-width: 1024px) {
|
||||
.sidebar-nav {
|
||||
transform: translateX(-100%);
|
||||
width: 280px;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.sidebar-nav.mobile-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* 모바일 헤더 */
|
||||
.sidebar-toggle {
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem;
|
||||
height: 64px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.sidebar-toggle::after {
|
||||
content: '메뉴';
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.sidebar-nav .toggle-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.sidebar-nav.mobile-open .toggle-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.sidebar-nav.mobile-open .toggle-icon::before {
|
||||
content: '✕';
|
||||
}
|
||||
|
||||
.sidebar-nav.mobile-open .toggle-icon span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 오버레이 배경 */
|
||||
.sidebar-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.sidebar-overlay.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.has-sidebar .dashboard-container,
|
||||
body.has-sidebar .page-container,
|
||||
body.has-sidebar > .main-content,
|
||||
@@ -372,5 +427,53 @@ body.has-sidebar.sidebar-collapsed > .main-content {
|
||||
body.has-sidebar > .dashboard-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* 메뉴 아이템 모바일 최적화 */
|
||||
.nav-item {
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav-category-items .nav-item {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.nav-category-header {
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 모바일 메뉴 버튼 (헤더용) */
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.mobile-menu-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.mobile-menu-btn {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 모바일 오버레이 -->
|
||||
<div class="sidebar-overlay" id="sidebarOverlay"></div>
|
||||
|
||||
Reference in New Issue
Block a user