hyungi/TK-FB-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 헤더/사이드바 레이아웃 개선 및 템플릿 표준화

Browse Source 
- 헤더를 fixed로 변경하고 z-index를 200으로 높여 사이드바와 겹침 방지
- 대시보드에서 빠른 작업 섹션 제거 (사이드바로 대체)
- 모든 템플릿(4개)에 사이드바 네비게이션 추가
- 템플릿 README에 사이드바 설명 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-02-02 14:30:47 +09:00
parent 74d3a78aa3
commit 9998d9df96
7 changed files with 42 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web-ui/components/navbar.html
View File

@@ -70,9 +70,19 @@
color: var(--text-inverse);
padding: var(--space-4) var(--space-6);
box-shadow: var(--shadow-lg);
position: sticky;
position: fixed;
top: 0;
z-index: 100;
left: 0;
right: 0;
z-index: 200;
height: 80px;
display: flex;
align-items: center;
}
/* 헤더 높이만큼 본문 여백 추가 */
body {
padding-top: 80px;
}
.header-content {

149
web-ui/pages/dashboard.html
View File

@@ -31,155 +31,6 @@
<!-- 메인 콘텐츠 -->
<main class="dashboard-main">
<!-- 빠른 작업 섹션 -->
<section class="quick-actions-section">
<div class="card">
<div class="card-header">
<h2 class="card-title">빠른 작업</h2>
</div>
<div class="card-body">
<div class="quick-actions-grid-full">
<!-- TBM 관리 (페이지 권한 체크) -->
<a href="/pages/work/tbm.html" class="quick-action-card" id="tbmQuickAction" style="display: none; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;">
<div class="action-content">
<h3 style="color: white;">🛠️ TBM 관리</h3>
<p style="color: rgba(255, 255, 255, 0.9);">아침 안전 회의 및 팀 구성을 관리합니다</p>
</div>
<div class="action-arrow" style="color: white;">→</div>
</a>
<a href="/pages/safety/visit-request.html" class="quick-action-card" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white;">
<div class="action-content">
<h3 style="color: white;">🚪 출입 신청</h3>
<p style="color: rgba(255, 255, 255, 0.9);">작업장 출입 및 안전교육을 신청합니다</p>
</div>
<div class="action-arrow" style="color: white;">→</div>
</a>
<a href="/pages/safety/management.html" class="quick-action-card admin-only" style="background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); color: white;">
<div class="action-content">
<h3 style="color: white;">🛡️ 안전관리</h3>
<p style="color: rgba(255, 255, 255, 0.9);">출입 신청 승인 및 안전교육 관리</p>
</div>
<div class="action-arrow" style="color: white;">→</div>
</a>
<a href="/pages/safety/checklist-manage.html" class="quick-action-card admin-only" style="background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); color: white;">
<div class="action-content">
<h3 style="color: white;">📋 안전 체크리스트 관리</h3>
<p style="color: rgba(255, 255, 255, 0.9);">TBM 안전 체크 항목 관리 (기본/날씨/작업별)</p>
</div>
<div class="action-arrow" style="color: white;">→</div>
</a>
<a href="/pages/safety/issue-report.html" class="quick-action-card" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white;">
<div class="action-content">
<h3 style="color: white;">⚠️ 문제 신고</h3>
<p style="color: rgba(255, 255, 255, 0.9);">작업 중 발생한 문제를 신고합니다</p>
</div>
<div class="action-arrow" style="color: white;">→</div>
</a>
<a href="/pages/safety/issue-list.html" class="quick-action-card" style="background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: white;">
<div class="action-content">
<h3 style="color: white;">📋 신고 현황</h3>
<p style="color: rgba(255, 255, 255, 0.9);">신고 목록 및 처리 현황을 확인합니다</p>
</div>
<div class="action-arrow" style="color: white;">→</div>
</a>
<a href="/pages/work/report-create.html" class="quick-action-card">
<div class="action-content">
<h3>작업 보고서 작성</h3>
<p>오늘의 작업 내용을 입력하고 관리합니다</p>
</div>
<div class="action-arrow">→</div>
</a>
<a href="/pages/work/report-view.html" class="quick-action-card">
<div class="action-content">
<h3>작업 현황 확인</h3>
<p>팀원들의 작업 현황을 실시간으로 조회합니다</p>
</div>
<div class="action-arrow">→</div>
</a>
<a href="/pages/work/analysis.html" class="quick-action-card admin-only">
<div class="action-content">
<h3>작업 분석</h3>
<p>작업 효율성 및 통계를 분석합니다</p>
</div>
<div class="action-arrow">→</div>
</a>
<a href="/pages/admin/projects.html" class="quick-action-card admin-only">
<div class="action-content">
<h3>기본 정보 관리</h3>
<p>프로젝트, 작업자, 코드를 관리합니다</p>
</div>
<div class="action-arrow">→</div>
</a>
<a href="/pages/attendance/daily.html" class="quick-action-card" style="background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: white;">
<div class="action-content">
<h3 style="color: white;">📅 일일 출퇴근 입력</h3>
<p style="color: rgba(255, 255, 255, 0.9);">오늘의 출퇴근 기록을 입력합니다</p>
</div>
<div class="action-arrow" style="color: white;">→</div>
</a>
<a href="/pages/attendance/monthly.html" class="quick-action-card">
<div class="action-content">
<h3>📆 월별 출퇴근 현황</h3>
<p>이번 달 출퇴근 현황을 조회합니다</p>
</div>
<div class="action-arrow">→</div>
</a>
<a href="/pages/attendance/vacation-request.html" class="quick-action-card">
<div class="action-content">
<h3>📝 휴가 신청</h3>
<p>휴가를 신청하고 신청 내역을 확인합니다</p>
</div>
<div class="action-arrow">→</div>
</a>
<a href="/pages/attendance/vacation-management.html" class="quick-action-card admin-only">
<div class="action-content">
<h3>🏖️ 휴가 관리</h3>
<p>휴가 승인, 직접 입력, 전체 내역을 관리합니다</p>
</div>
<div class="action-arrow">→</div>
</a>
<a href="/pages/attendance/annual-overview.html" class="quick-action-card admin-only">
<div class="action-content">
<h3>📊 연간 연차 현황</h3>
<p>모든 작업자의 연간 휴가 현황을 차트로 확인합니다</p>
</div>
<div class="action-arrow">→</div>
</a>
<a href="/pages/attendance/vacation-allocation.html" class="quick-action-card admin-only">
<div class="action-content">
<h3>➕ 휴가 발생 입력</h3>
<p>작업자별 휴가를 입력하고 특별 휴가를 관리합니다</p>
</div>
<div class="action-arrow">→</div>
</a>
<a href="/pages/admin/attendance-report.html" class="quick-action-card admin-only">
<div class="action-content">
<h3>🔍 출퇴근-작업보고서 대조</h3>
<p>출퇴근 기록과 작업보고서를 비교 분석합니다</p>
</div>
<div class="action-arrow">→</div>
</a>
</div>
</div>
</div>
</section>
<!-- 작업장 현황 -->
<section class="workplace-status-section">
<div class="card">

17
web-ui/templates/README.md
View File

@@ -79,17 +79,28 @@
- 색상, 타이포그래피, 간격 등 CSS 변수
- 공통 컴포넌트 스타일 (버튼, 카드, 배지 등)
### 네비게이션
### 상단 네비게이션 (Navbar)
```html
<div id="navbar-container"></div>
<script src="/js/load-navbar.js"></script>
<script type="module" src="/js/load-navbar.js"></script>
```
- 자동으로 로드되는 표준 네비게이션 헤더
- 사용자 프로필 메뉴, 로그아웃 기능 포함
- 현재 시각 표시
### 사이드바 네비게이션 (Sidebar)
```html
<div id="sidebar-container"></div>
<script type="module" src="/js/load-sidebar.js"></script>
```
- 카테고리별 접이식 메뉴 (작업관리, 안전관리, 근태관리, 시스템관리)
- 사용자 권한에 따른 메뉴 자동 필터링
- 접기/펼치기 상태 자동 저장 (localStorage)
- 현재 페이지 자동 하이라이트
### 인증
```html
<script src="/js/auth-check.js"></script>
<script type="module" src="/js/auth-check.js"></script>
```
- 페이지 접근 시 자동 로그인 확인
- 미인증 시 로그인 페이지로 리다이렉트

4
web-ui/templates/admin-layout.html
View File

@@ -17,12 +17,16 @@
<script type="module" src="/js/api-config.js"></script>
<script type="module" src="/js/auth-check.js"></script>
<script type="module" src="/js/load-navbar.js"></script>
<script type="module" src="/js/load-sidebar.js"></script>
<!-- 페이지별 스크립트 추가 -->
<!-- <script type="module" src="/js/your-admin-page.js" defer></script> -->
</head>
<body>
<!-- 사이드바 네비게이션 (자동 로드됨) -->
<div id="sidebar-container"></div>
<!-- 네비게이션 헤더 (자동 로드됨) -->
<div id="navbar-container"></div>

4
web-ui/templates/dashboard-layout.html
View File

@@ -15,12 +15,16 @@
<script type="module" src="/js/api-config.js"></script>
<script type="module" src="/js/auth-check.js" defer></script>
<script type="module" src="/js/load-navbar.js"></script>
<script type="module" src="/js/load-sidebar.js"></script>
<!-- 페이지별 스크립트 추가 -->
<!-- <script type="module" src="/js/your-page.js" defer></script> -->
</head>
<body>
<!-- 사이드바 네비게이션 (자동 로드됨) -->
<div id="sidebar-container"></div>
<!-- 메인 컨테이너 -->
<div class="dashboard-container">

4
web-ui/templates/simple-layout.html
View File

@@ -16,12 +16,16 @@
<script type="module" src="/js/api-config.js"></script>
<script type="module" src="/js/auth-check.js"></script>
<script type="module" src="/js/load-navbar.js"></script>
<script type="module" src="/js/load-sidebar.js"></script>
<!-- 페이지별 스크립트 추가 -->
<!-- <script type="module" src="/js/your-page.js" defer></script> -->
</head>
<body>
<!-- 사이드바 네비게이션 (자동 로드됨) -->
<div id="sidebar-container"></div>
<!-- 네비게이션 헤더 (자동 로드됨) -->
<div id="navbar-container"></div>

4
web-ui/templates/work-layout.html
View File

@@ -17,12 +17,16 @@
<script type="module" src="/js/api-config.js"></script>
<script type="module" src="/js/auth-check.js"></script>
<script type="module" src="/js/load-navbar.js"></script>
<script type="module" src="/js/load-sidebar.js"></script>
<!-- 페이지별 스크립트 추가 -->
<!-- <script type="module" src="/js/your-page.js" defer></script> -->
</head>
<body>
<!-- 사이드바 네비게이션 (자동 로드됨) -->
<div id="sidebar-container"></div>
<!-- 네비게이션 헤더 (자동 로드됨) -->
<div id="navbar-container"></div>