Files
TK-FB-Project/web-ui/pages/dashboard.html
Hyungi Ahn 0ec099b493 feat: UI 표준화 Phase 1 - 네비게이션/헤더 통일
## 주요 변경사항

### 1. Design System 색상 업데이트
- 하늘색 계열 primary 색상으로 변경 (#0ea5e9, #38bdf8, #7dd3fc)
- CSS 변수 추가: --header-gradient

### 2. Navbar 컴포넌트 표준화
- 50개 이상의 하드코딩 값을 CSS 변수로 변경
- 모든 페이지에서 동일한 헤더 스타일 적용

### 3. 중복 코드 제거 (102줄)
- dashboard.html: 50줄 → 2줄 (navbar 컴포넌트로 교체)
- work/report-view.html: 54줄 → 2줄 (navbar 컴포넌트로 교체)
- modern-dashboard.css: 중복 헤더 스타일 제거
- project-management.css: 중복 헤더 스타일 제거

### 4. 표준 레이아웃 템플릿 생성
- dashboard-layout.html (대시보드용)
- work-layout.html (작업 페이지용)
- admin-layout.html (관리자 페이지용)
- simple-layout.html (프로필/설정용)
- templates/README.md (사용 가이드)

### 5. 누락된 design-system.css 추가
- work/report-view.html
- work/analysis.html
- admin/accounts.html

### 6. ES6 Module 문법 수정
- load-navbar.js: type="module" 추가
- modern-dashboard.js: navbar 엘리먼트 안전 처리

## 문서 업데이트
- CODING_GUIDE.md: 표준 컴포넌트 사용법 추가
- 개발 log/2026-01-20-ui-standardization-phase1.md: 상세 작업 로그

## 영향
- 수정: 10개 파일
- 신규: 6개 파일 (템플릿 5개 + 로그 1개)
- 코드 감소: -102줄

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-20 14:08:54 +09:00

130 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>작업 현황판 | 테크니컬코리아</title>
<!-- 모던 디자인 시스템 적용 -->
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/modern-dashboard.css?v=2">
<link rel="icon" type="image/png" href="/img/favicon.png">
<!-- 스크립트 (순서 중요: api-config.js가 먼저 로드되어야 함) -->
<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/modern-dashboard.js?v=10" defer></script>
<script type="module" src="/js/group-leader-dashboard.js?v=1" defer></script>
</head>
<body>
<!-- 메인 컨테이너 -->
<div class="dashboard-container">
<!-- 네비게이션 헤더 -->
<div id="navbar-container"></div>
<!-- 메인 콘텐츠 -->
<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">
<a href="/pages/work/report-create.html" class="quick-action-card">
<div class="action-icon-large">📝</div>
<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-icon-large">📋</div>
<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-icon-large">📈</div>
<div class="action-content">
<h3>작업 분석</h3>
<p>작업 효율성 및 통계를 분석합니다</p>
</div>
<div class="action-arrow"></div>
</a>
<a href="/pages/admin/index.html" class="quick-action-card admin-only">
<div class="action-icon-large">🔧</div>
<div class="action-content">
<h3>작업 관리</h3>
<p>작업자 및 프로젝트를 관리합니다</p>
</div>
<div class="action-arrow"></div>
</a>
</div>
</div>
</div>
</section>
<!-- 오늘의 작업 현황 -->
<section class="work-status-section">
<div class="card">
<div class="card-header">
<div class="flex justify-between items-center">
<h2 class="card-title">📊 오늘의 작업 현황</h2>
<div class="date-selector">
<input type="date" id="selectedDate" class="date-input">
<button class="btn btn-primary btn-sm" id="refreshBtn">
<span>🔄</span>
새로고침
</button>
</div>
</div>
</div>
<div class="card-body">
<div class="work-status-container-enhanced" id="workStatusContainer">
<div class="loading-state">
<div class="spinner"></div>
<p>작업 현황을 불러오는 중...</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 푸터 -->
<footer class="dashboard-footer">
<div class="footer-content">
<p class="footer-text">
© 2025 (주)테크니컬코리아. 모든 권리 보유.
</p>
<div class="footer-links">
<a href="#" class="footer-link">도움말</a>
<a href="#" class="footer-link">문의하기</a>
<a href="#" class="footer-link">개인정보처리방침</a>
</div>
</div>
</footer>
</div>
<!-- 알림 토스트 -->
<div class="toast-container" id="toastContainer"></div>
</body>
</html>