hyungi/tk-factory-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nav): 하단 네비 JS 컴포넌트 분리 + 4개 페이지 통일

Browse Source 
- shared-bottom-nav.js: 네비 HTML 동적 생성 + 현재 경로 active 자동 판별
- tbm-mobile.html: 기존 네비 HTML 제거 → 스크립트 로드
- report-create-mobile, my-vacation-info, dashboard-new: 네비 추가
- 홈 → dashboard-new.html, 작업보고 → report-create-mobile.html

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-03-31 15:06:12 +09:00
parent f68c66e696
commit 7ccec81615
5 changed files with 48 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
system1-factory/web/pages/attendance/my-vacation-info.html
View File

@@ -7,8 +7,10 @@
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026033108">
<link rel="stylesheet" href="/css/tbm-mobile.css?v=2026033108">
<style>
.page-wrapper {
padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
padding: 1.5rem;
max-width: 1000px;
}
@@ -567,5 +569,6 @@
}
</script>
<script>initAuth();</script>
<script src="/static/js/shared-bottom-nav.js?v=2026033101"></script>
</body>
</html>

3
system1-factory/web/pages/dashboard-new.html
View File

@@ -8,6 +8,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026033108">
<link rel="stylesheet" href="/css/production-dashboard.css?v=2026033104">
<link rel="stylesheet" href="/css/tbm-mobile.css?v=2026033108">
<style>.pd-container { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }</style>
</head>
<body class="bg-gray-50">
<span id="headerUserName" class="hidden">-</span>
@@ -47,5 +49,6 @@
<script src="/static/js/tkfb-core.js?v=2026033108"></script>
<script src="/js/production-dashboard.js?v=2026033105"></script>
<script src="/static/js/shared-bottom-nav.js?v=2026033101"></script>
</body>
</html>

2
system1-factory/web/pages/work/report-create-mobile.html
View File

@@ -8,6 +8,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026033108">
<link rel="stylesheet" href="/css/daily-work-report-mobile.css?v=2026031401">
<link rel="stylesheet" href="/css/tbm-mobile.css?v=2026033108">
<style>
/* 데스크탑이면 리다이렉트 */
@media (min-width: 769px) {
@@ -202,5 +203,6 @@
<!-- 모바일 전용 UI 로직 -->
<script src="/js/daily-work-report-mobile.js?v=2026031401"></script>
<script>initAuth();</script>
<script src="/static/js/shared-bottom-nav.js?v=2026033101"></script>
</body>
</html>

37
system1-factory/web/pages/work/tbm-mobile.html
View File

@@ -70,42 +70,7 @@
<div class="m-skeleton"></div>
</div>
<!-- Bottom Nav -->
<nav class="m-bottom-nav">
<a href="/pages/dashboard.html" class="m-nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
<span class="m-nav-label">홈</span>
</a>
<a href="/pages/work/tbm-mobile.html" class="m-nav-item active">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 11l3 3L22 4"/>
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
</svg>
<span class="m-nav-label">TBM</span>
</a>
<a href="/pages/work/report-create.html" class="m-nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
</svg>
<span class="m-nav-label">작업보고</span>
</a>
<a href="/pages/attendance/my-vacation-info.html" class="m-nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
<line x1="16" y1="2" x2="16" y2="6"/>
<line x1="8" y1="2" x2="8" y2="6"/>
<line x1="3" y1="10" x2="21" y2="10"/>
<path d="M9 16l2 2 4-4"/>
</svg>
<span class="m-nav-label">연차관리</span>
</a>
</nav>
<script src="/static/js/shared-bottom-nav.js?v=2026033101"></script>
<!-- Toast -->
<div id="toastContainer" class="toast-container"></div>

39
system1-factory/web/static/js/shared-bottom-nav.js Normal file
View File

@@ -0,0 +1,39 @@
/**
* shared-bottom-nav.js — 하단 네비게이션 공유 컴포넌트
* 각 페이지에서 <script src="/static/js/shared-bottom-nav.js"></script> 로드하면 자동 생성
*/
(function() {
var SVG_ATTR = 'viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
var NAV_ITEMS = [
{
href: '/pages/dashboard-new.html',
label: '홈',
icon: '<svg ' + SVG_ATTR + '><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>'
},
{
href: '/pages/work/tbm-mobile.html',
label: 'TBM',
icon: '<svg ' + SVG_ATTR + '><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>'
},
{
href: '/pages/work/report-create-mobile.html',
label: '작업보고',
icon: '<svg ' + SVG_ATTR + '><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>'
},
{
href: '/pages/attendance/my-vacation-info.html',
label: '연차관리',
icon: '<svg ' + SVG_ATTR + '><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M9 16l2 2 4-4"/></svg>'
}
];
var currentPath = location.pathname;
var nav = document.createElement('nav');
nav.className = 'm-bottom-nav';
nav.innerHTML = NAV_ITEMS.map(function(item) {
var active = currentPath === item.href ? ' active' : '';
return '<a href="' + item.href + '" class="m-nav-item' + active + '">'
+ item.icon + '<span class="m-nav-label">' + item.label + '</span></a>';
}).join('');
document.body.appendChild(nav);
})();