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
parent 6b7f9d4627
commit 0ec099b493
16 changed files with 1400 additions and 273 deletions
--- a/CODING_GUIDE.md
+++ b/CODING_GUIDE.md
@@ -123,6 +123,74 @@ web-ui/pages/
 - 2차: `admin/index.html` (관리 허브)
 - 모든 페이지: navbar를 통해 profile, 작업 페이지로 이동 가능

+### 표준 컴포넌트 (2026-01-20 업데이트)
+
+#### 네비게이션 헤더
+모든 페이지는 표준 navbar 컴포넌트를 사용합니다:
+
+```html
+<!-- HTML에 컨테이너 추가 -->
+<div id="navbar-container"></div>
+
+<!-- 스크립트로 로드 -->
+<script src="/js/load-navbar.js"></script>
+```
+
+**특징**:
+- 자동으로 사용자 정보 표시 (이름, 역할)
+- 프로필 메뉴 (내 프로필, 비밀번호 변경, 로그아웃)
+- 관리자 전용 메뉴 자동 표시/숨김
+- 현재 시각 실시간 표시
+- 대시보드 버튼
+
+#### CSS 변수 시스템
+모든 스타일은 `design-system.css`의 CSS 변수를 사용합니다:
+
+```css
+/* 색상 - 하늘색 계열 primary */
+var(--primary-500)      /* 기본 하늘색: #0ea5e9 */
+var(--primary-400)      /* 밝은 하늘색: #38bdf8 */
+var(--header-gradient)  /* 헤더 그라디언트 */
+
+/* 간격 */
+var(--space-2)   /* 8px */
+var(--space-4)   /* 16px */
+var(--space-6)   /* 24px */
+
+/* 타이포그래피 */
+var(--text-sm)        /* 14px */
+var(--text-base)      /* 16px */
+var(--font-medium)    /* 500 */
+
+/* 기타 */
+var(--radius-md)         /* 8px 둥근 모서리 */
+var(--shadow-md)         /* 그림자 */
+var(--transition-fast)   /* 150ms */
+```
+
+**금지**: 하드코딩된 색상 값 사용 (`#0ea5e9` 대신 `var(--primary-500)` 사용)
+
+#### 페이지 레이아웃 템플릿
+`web-ui/templates/` 디렉토리에 4가지 표준 템플릿 제공:
+
+1. **dashboard-layout.html**: 메인 대시보드, 통계 페이지
+2. **work-layout.html**: 작업 관련 페이지 (보고서, 분석)
+3. **admin-layout.html**: 관리자 페이지 (테이블, CRUD)
+4. **simple-layout.html**: 프로필, 설정 등 단순 페이지
+
+새 페이지 생성 시:
+```bash
+# 템플릿 복사
+cp web-ui/templates/work-layout.html web-ui/pages/work/new-page.html
+
+# 내용 수정
+# - <title> 변경
+# - 페이지별 CSS/JS 추가
+# - 콘텐츠 작성
+```
+
+상세한 사용법은 `web-ui/templates/README.md` 참조.
+
 ---

 ## 📡 API 개발 가이드
--- a/web-ui/components/navbar.html
+++ b/web-ui/components/navbar.html
@@ -59,10 +59,10 @@
 <style>
 /* 최신 대시보드 헤더 스타일 */
 .dashboard-header {
-  background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%);
-  color: white;
-  padding: 1rem 1.5rem;
-  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+  background: var(--header-gradient);
+  color: var(--text-inverse);
+  padding: var(--space-4) var(--space-6);
+  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 0;
  z-index: 100;
@@ -79,56 +79,56 @@
 .header-left .brand {
  display: flex;
  align-items: center;
-  gap: 0.75rem;
+  gap: var(--space-3);
 }

 .header-right {
  display: flex;
  align-items: center;
-  gap: 1rem;
+  gap: var(--space-4);
 }

 .brand-logo {
  width: 48px;
  height: 48px;
-  border-radius: 0.75rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
 }

 .brand-title {
-  font-size: 1.5rem;
-  font-weight: 700;
+  font-size: var(--text-2xl);
+  font-weight: var(--font-bold);
  margin: 0;
  line-height: 1.2;
 }

 .brand-subtitle {
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
  opacity: 0.9;
  margin: 0;
-  font-weight: 400;
+  font-weight: var(--font-normal);
 }

 .header-center .current-time {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 9999px;
-  padding: 0.75rem 1rem;
+  border-radius: var(--radius-full);
+  padding: var(--space-3) var(--space-4);
  text-align: center;
 }

 .time-label {
  display: block;
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
  opacity: 0.8;
-  margin-bottom: 4px;
+  margin-bottom: var(--space-1);
 }

 .time-value {
  display: block;
-  font-size: 1.125rem;
-  font-weight: 700;
+  font-size: var(--text-lg);
+  font-weight: var(--font-bold);
  font-family: 'Courier New', monospace;
 }

@@ -136,14 +136,14 @@
  position: relative;
  display: flex;
  align-items: center;
-  gap: 0.75rem;
+  gap: var(--space-3);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 9999px;
-  padding: 0.5rem 1rem;
+  border-radius: var(--radius-full);
+  padding: var(--space-2) var(--space-4);
  cursor: pointer;
-  transition: all 0.25s ease;
+  transition: var(--transition-normal);
 }

 .user-profile:hover {
@@ -153,13 +153,13 @@
 .user-avatar {
  width: 40px;
  height: 40px;
-  border-radius: 9999px;
-  background: #90caf9;
+  border-radius: var(--radius-full);
+  background: var(--primary-200);
  display: flex;
  align-items: center;
  justify-content: center;
-  font-weight: 700;
-  color: #0d47a1;
+  font-weight: var(--font-bold);
+  color: var(--primary-900);
 }

 .user-info {
@@ -168,13 +168,13 @@
 }

 .user-name {
-  font-size: 0.875rem;
-  font-weight: 600;
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
  line-height: 1.2;
 }

 .user-role {
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
  opacity: 0.8;
 }

@@ -182,16 +182,16 @@
  position: absolute;
  top: 100%;
  right: 0;
-  margin-top: 0.5rem;
-  background: linear-gradient(135deg, #ffffff, #f8fafc);
-  border-radius: 0.75rem;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
-  border: 2px solid rgba(59, 130, 246, 0.2);
+  margin-top: var(--space-2);
+  background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  border: 2px solid rgba(14, 165, 233, 0.2);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
-  transition: all 0.3s ease;
+  transition: var(--transition-slow);
  z-index: 1000;
  backdrop-filter: blur(20px);
 }
@@ -206,41 +206,41 @@
 .menu-item {
  display: flex;
  align-items: center;
-  gap: 0.75rem;
-  padding: 0.875rem 1.25rem;
-  color: #374151;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-5);
+  color: var(--text-secondary);
  text-decoration: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
-  font-size: 0.9rem;
-  font-weight: 500;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
  cursor: pointer;
-  transition: all 0.3s ease;
-  border-radius: 0.5rem;
-  margin: 0.25rem;
+  transition: var(--transition-slow);
+  border-radius: var(--radius-md);
+  margin: var(--space-1);
  font-family: inherit;
 }

 .menu-item:hover {
-  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
-  color: #1f2937;
+  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
+  color: var(--text-primary);
  transform: translateX(2px);
 }

 .menu-item:first-child {
-  border-radius: 0.5rem;
-  margin-top: 0.5rem;
+  border-radius: var(--radius-md);
+  margin-top: var(--space-2);
 }

 .menu-item:last-child {
-  border-radius: 0.5rem;
-  margin-bottom: 0.5rem;
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-2);
 }

 .menu-icon {
-  font-size: 1.1rem;
+  font-size: var(--text-lg);
  width: 1.5rem;
  text-align: center;
  opacity: 0.8;
@@ -251,31 +251,31 @@
 }

 .logout-btn {
-  color: #dc2626 !important;
-  border-top: 1px solid #e5e7eb;
-  margin-top: 0.5rem;
-  padding-top: 0.875rem;
-  font-weight: 600;
+  color: var(--error-500) !important;
+  border-top: 1px solid var(--border-light);
+  margin-top: var(--space-2);
+  padding-top: var(--space-3);
+  font-weight: var(--font-semibold);
 }

 .logout-btn:hover {
-  background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
-  color: #b91c1c !important;
+  background: linear-gradient(135deg, var(--error-50), #fee2e2) !important;
+  color: var(--error-700) !important;
 }

 /* 대시보드 버튼 */
 .dashboard-btn {
  display: flex;
  align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1.25rem;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-5);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
-  border-radius: 0.75rem;
-  font-weight: 600;
-  font-size: 0.9rem;
-  transition: all 0.3s ease;
+  border-radius: var(--radius-lg);
+  font-weight: var(--font-semibold);
+  font-size: var(--text-sm);
+  transition: var(--transition-slow);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
 }
@@ -283,11 +283,11 @@
 .dashboard-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-md);
 }

 .dashboard-btn .btn-icon {
-  font-size: 1.1rem;
+  font-size: var(--text-lg);
 }

 .dashboard-btn .btn-text {
@@ -297,15 +297,15 @@
 /* 반응형 디자인 */
@media (max-width: 768px) {
  .dashboard-header {
-    padding: 0.75rem 1rem;
+    padding: var(--space-3) var(--space-4);
  }

  .brand-title {
-    font-size: 1.125rem;
+    font-size: var(--text-lg);
  }

  .brand-subtitle {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
  }

  .header-center {
@@ -321,7 +321,7 @@
  }

  .dashboard-btn {
-    padding: 0.5rem 0.75rem;
+    padding: var(--space-2) var(--space-3);
  }
 }
 </style>
--- a/web-ui/css/design-system.css
+++ b/web-ui/css/design-system.css
@@ -2,17 +2,20 @@

 /* ========== 색상 시스템 ========== */
 :root {
-  /* 주요 브랜드 색상 */
-  --primary-50: #e3f2fd;
-  --primary-100: #bbdefb;
-  --primary-200: #90caf9;
-  --primary-300: #64b5f6;
-  --primary-400: #42a5f5;
-  --primary-500: #2196f3;
-  --primary-600: #1e88e5;
-  --primary-700: #1976d2;
-  --primary-800: #1565c0;
-  --primary-900: #0d47a1;
+  /* 주요 브랜드 색상 (하늘색 계열) */
+  --primary-50: #f0f9ff;
+  --primary-100: #e0f2fe;
+  --primary-200: #bae6fd;
+  --primary-300: #7dd3fc;
+  --primary-400: #38bdf8;
+  --primary-500: #0ea5e9;
+  --primary-600: #0284c7;
+  --primary-700: #0369a1;
+  --primary-800: #075985;
+  --primary-900: #0c4a6e;
+
+  /* 헤더 그라디언트 */
+  --header-gradient: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%);

  /* 보조 색상 */
  --secondary-50: #f3e5f5;
--- a/web-ui/css/modern-dashboard.css
+++ b/web-ui/css/modern-dashboard.css
@@ -16,35 +16,8 @@
 }

 /* ========== 헤더 ========== */
-.dashboard-header {
-  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #2563eb 100%);
-  color: white;
-  padding: 1rem 1.5rem;
-  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.header-left .brand {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
+/* Navbar 컴포넌트가 헤더 스타일을 관리하므로 여기서는 제거 */
+/* 필요한 경우 navbar.html의 <style> 태그에서 수정하세요 */

 .header-actions {
  display: flex;
--- a/web-ui/css/project-management.css
+++ b/web-ui/css/project-management.css
@@ -9,31 +9,8 @@ body {
  min-height: 100vh;
 }

-/* 헤더 스타일 (work-management.css와 동일) */
-.dashboard-header {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  padding: 1rem 2rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-}
-
-.logo-section {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
+/* 헤더 스타일은 navbar 컴포넌트가 관리 */
+/* 필요한 경우 navbar.html에서 수정하세요 */

 .logo {
  height: 40px;
--- a/web-ui/js/modern-dashboard.js
+++ b/web-ui/js/modern-dashboard.js
@@ -105,23 +105,30 @@ function setupUserInfo() {
  const authData = getAuthData();
  if (authData && authData.user) {
    currentUser = authData.user;
-    
-    // 사용자 이름 설정
-    elements.userName.textContent = currentUser.name || currentUser.username;
-    
-    // 사용자 역할 설정
-    const roleMap = {
-      'admin': '관리자',
-      'system': '시스템 관리자',
-      'group_leader': '그룹장',
-      'leader': '그룹장',
-      'user': '작업자'
-    };
-    elements.userRole.textContent = roleMap[currentUser.role] || '작업자';
-    
-    // 아바타 초기값 설정
-    const initial = (currentUser.name || currentUser.username).charAt(0);
-    elements.userInitial.textContent = initial;
+
+    // Navbar 컴포넌트가 사용자 정보를 처리하므로 여기서는 currentUser만 설정
+    // 사용자 이름 설정 (navbar 컴포넌트가 없는 경우에만)
+    if (elements.userName) {
+      elements.userName.textContent = currentUser.name || currentUser.username;
+    }
+
+    // 사용자 역할 설정 (navbar 컴포넌트가 없는 경우에만)
+    if (elements.userRole) {
+      const roleMap = {
+        'admin': '관리자',
+        'system': '시스템 관리자',
+        'group_leader': '그룹장',
+        'leader': '그룹장',
+        'user': '작업자'
+      };
+      elements.userRole.textContent = roleMap[currentUser.role] || '작업자';
+    }
+
+    // 아바타 초기값 설정 (navbar 컴포넌트가 없는 경우에만)
+    if (elements.userInitial) {
+      const initial = (currentUser.name || currentUser.username).charAt(0);
+      elements.userInitial.textContent = initial;
+    }
    
    console.log('👤 사용자 정보 설정 완료:', currentUser.name);
  }
@@ -129,14 +136,17 @@ function setupUserInfo() {

 // ========== 시간 업데이트 ========== //
 function updateCurrentTime() {
-  const now = new Date();
-  const timeString = now.toLocaleTimeString('ko-KR', {
-    hour12: false,
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  });
-  elements.timeValue.textContent = timeString;
+  // Navbar 컴포넌트가 시간을 처리하므로 여기서는 timeValue가 있을 때만 업데이트
+  if (elements.timeValue) {
+    const now = new Date();
+    const timeString = now.toLocaleTimeString('ko-KR', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    });
+    elements.timeValue.textContent = timeString;
+  }
 }

 // ========== 이벤트 리스너 ========== //
@@ -153,13 +163,15 @@ function setupEventListeners() {
    showToast('데이터를 새로고침했습니다.', 'success');
  });
  
-  // 로그아웃 버튼
-  elements.logoutBtn.addEventListener('click', () => {
-    if (confirm('로그아웃하시겠습니까?')) {
-      localStorage.clear();
-      window.location.href = '/index.html';
-    }
-  });
+  // 로그아웃 버튼 (navbar 컴포넌트가 이미 처리하므로 버튼이 있을 때만)
+  if (elements.logoutBtn) {
+    elements.logoutBtn.addEventListener('click', () => {
+      if (confirm('로그아웃하시겠습니까?')) {
+        localStorage.clear();
+        window.location.href = '/index.html';
+      }
+    });
+  }
  
  // 뷰 컨트롤 버튼들
  const listViewBtn = document.getElementById('listViewBtn');
--- a/web-ui/pages/admin/accounts.html
+++ b/web-ui/pages/admin/accounts.html
@@ -4,6 +4,7 @@
    <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/common.css?v=1">
    <link rel="stylesheet" href="/css/admin-settings.css?v=1">
    <link rel="icon" type="image/png" href="/img/favicon.png">
--- a/web-ui/pages/dashboard.html
+++ b/web-ui/pages/dashboard.html
@@ -14,6 +14,7 @@
  <!-- 스크립트 (순서 중요: 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>
@@ -22,57 +23,8 @@
  <!-- 메인 컨테이너 -->
  <div class="dashboard-container">

-    <!-- 헤더 -->
-    <header class="dashboard-header">
-      <div class="header-content">
-        <div class="header-left">
-          <div class="brand">
-            <img src="/img/logo.png" alt="테크니컬코리아" class="brand-logo">
-            <div class="brand-text">
-              <h1 class="brand-title">테크니컬코리아</h1>
-              <p class="brand-subtitle">작업 현황판</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="header-center">
-          <div class="current-time" id="currentTime">
-            <span class="time-label">현재 시각</span>
-            <span class="time-value" id="timeValue">--:--:--</span>
-          </div>
-        </div>
-
-        <div class="header-right">
-          <div class="user-profile" id="userProfile">
-            <div class="user-avatar">
-              <span class="avatar-text" id="userInitial">사</span>
-            </div>
-            <div class="user-info">
-              <span class="user-name" id="userName">사용자</span>
-              <span class="user-role" id="userRole">작업자</span>
-            </div>
-            <div class="profile-menu" id="profileMenu">
-              <a href="/pages/profile/my-profile.html" class="menu-item">
-                <span class="menu-icon">👤</span>
-                내 프로필
-              </a>
-              <a href="/pages/profile/change-password.html" class="menu-item">
-                <span class="menu-icon">🔐</span>
-                비밀번호 변경
-              </a>
-              <a href="/pages/profile/admin-settings.html" class="menu-item admin-only">
-                <span class="menu-icon">⚙️</span>
-                관리자 설정
-              </a>
-              <button class="menu-item logout-btn" id="logoutBtn">
-                <span class="menu-icon">🚪</span>
-                로그아웃
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
+    <!-- 네비게이션 헤더 -->
+    <div id="navbar-container"></div>

    <!-- 메인 콘텐츠 -->
    <main class="dashboard-main">
--- a/web-ui/pages/work/analysis.html
+++ b/web-ui/pages/work/analysis.html
@@ -7,6 +7,7 @@
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/design-system.css">
    <link rel="stylesheet" href="/css/work-analysis.css?v=41">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <script src="/js/auth-check.js?v=1" defer></script>
--- a/web-ui/pages/work/report-view.html
+++ b/web-ui/pages/work/report-view.html
@@ -4,65 +4,14 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>작업 현황 확인 - TK 건설</title>
+    <link rel="stylesheet" href="/css/design-system.css">
    <link rel="stylesheet" href="/css/common.css?v=13">
    <link rel="stylesheet" href="/css/modern-dashboard.css?v=14">
    <link rel="stylesheet" href="/css/work-report-calendar.css?v=29">
 </head>
 <body>
-    <!-- 대시보드 헤더 -->
-    <header class="dashboard-header">
-        <div class="header-content">
-            <div class="header-left">
-                <div class="brand">
-                    <img src="/img/logo.png" alt="테크니컬코리아" class="brand-logo">
-                    <div class="brand-text">
-                        <h1 class="brand-title">테크니컬코리아</h1>
-                        <p class="brand-subtitle">작업 현황 확인</p>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="header-center">
-                <div class="current-time" id="currentTime">
-                    <span class="time-label">현재 시각</span>
-                    <span class="time-value" id="timeValue">--:--:--</span>
-                </div>
-            </div>
-            
-            <div class="header-right">
-                <div class="header-actions">
-                    <button class="btn btn-secondary dashboard-btn" onclick="window.location.href='/pages/dashboard.html'">
-                        <span class="btn-icon">🏠</span>
-                        대시보드
-                    </button>
-                </div>
-                
-                <div class="user-profile" id="userProfile">
-                    <div class="user-avatar">
-                        <span class="avatar-text" id="userInitial">사</span>
-                    </div>
-                    <div class="user-info">
-                        <span class="user-name" id="userName">사용자</span>
-                        <span class="user-role" id="userRole">작업자</span>
-                    </div>
-                    <div class="profile-menu" id="profileMenu">
-                        <a href="/pages/profile/my-profile.html" class="menu-item">
-                            <span class="menu-icon">👤</span>
-                            내 프로필
-                        </a>
-                        <a href="/pages/profile/change-password.html" class="menu-item">
-                            <span class="menu-icon">🔐</span>
-                            비밀번호 변경
-                        </a>
-                        <button class="menu-item logout-btn" id="logoutBtn">
-                            <span class="menu-icon">🚪</span>
-                            로그아웃
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </header>
+    <!-- 네비게이션 헤더 -->
+    <div id="navbar-container"></div>

    <!-- 메인 콘텐츠 -->
    <main class="dashboard-main">
@@ -335,8 +284,8 @@

    <!-- JavaScript -->
    <script type="module" src="/js/api-config.js?v=13"></script>
-    <script src="/js/auth-check.js?v=13"></script>
-    <!-- load-navbar.js 제거: 이 페이지는 자체 헤더 사용 -->
+    <script type="module" src="/js/auth-check.js?v=13"></script>
+    <script type="module" src="/js/load-navbar.js"></script>
    <script src="/js/modules/calendar/CalendarState.js?v=1"></script>
    <script src="/js/modules/calendar/CalendarAPI.js?v=1"></script>
    <script src="/js/modules/calendar/CalendarView.js?v=1"></script>
--- a/web-ui/templates/README.md
+++ b/web-ui/templates/README.md
@@ -0,0 +1,196 @@
+# 페이지 레이아웃 템플릿 가이드
+
+이 디렉토리에는 프로젝트의 표준 페이지 레이아웃 템플릿이 포함되어 있습니다.
+
+## 📋 사용 가능한 템플릿
+
+### 1. `dashboard-layout.html`
+**용도**: 메인 대시보드 페이지
+**특징**:
+- 빠른 작업 섹션 포함
+- 여러 콘텐츠 섹션 지원
+- 푸터 포함
+- 토스트 알림 지원
+
+**적합한 페이지**:
+- `dashboard.html` (메인 대시보드)
+- 통계/분석 대시보드
+
+---
+
+### 2. `work-layout.html`
+**용도**: 작업 관련 페이지
+**특징**:
+- 페이지 제목 및 설명 섹션
+- 검색/필터 영역
+- 작업 콘텐츠 카드
+- 로딩 스피너
+- 모달 지원
+
+**적합한 페이지**:
+- `work/report-create.html` (작업 보고서 작성)
+- `work/report-view.html` (작업 현황 확인)
+- `work/analysis.html` (작업 분석)
+
+---
+
+### 3. `admin-layout.html`
+**용도**: 관리자 기능 페이지
+**특징**:
+- 뒤로가기 버튼이 있는 헤더
+- 탭 네비게이션 지원
+- 데이터 테이블 레이아웃
+- 페이지네이션
+- 일괄 선택 기능
+- 확인 모달
+
+**적합한 페이지**:
+- `admin/projects.html` (프로젝트 관리)
+- `admin/workers.html` (작업자 관리)
+- `admin/codes.html` (코드 관리)
+- `admin/accounts.html` (계정 관리)
+
+---
+
+### 4. `simple-layout.html`
+**용도**: 단순한 폼/프로필 페이지
+**특징**:
+- 좁은 중앙 컨테이너 (최대 800px)
+- 폼 요소 스타일링
+- 뒤로가기 버튼
+- 정보 표시 리스트
+- 반응형 폼 레이아웃
+
+**적합한 페이지**:
+- `profile/info.html` (내 프로필)
+- `profile/password.html` (비밀번호 변경)
+- 설정 페이지
+
+---
+
+## 🎨 공통 요소
+
+모든 템플릿에는 다음이 포함됩니다:
+
+### CSS
+```html
+<link rel="stylesheet" href="/css/design-system.css">
+```
+- 색상, 타이포그래피, 간격 등 CSS 변수
+- 공통 컴포넌트 스타일 (버튼, 카드, 배지 등)
+
+### 네비게이션
+```html
+<div id="navbar-container"></div>
+<script src="/js/load-navbar.js"></script>
+```
+- 자동으로 로드되는 표준 네비게이션 헤더
+- 사용자 프로필 메뉴, 로그아웃 기능 포함
+
+### 인증
+```html
+<script src="/js/auth-check.js"></script>
+```
+- 페이지 접근 시 자동 로그인 확인
+- 미인증 시 로그인 페이지로 리다이렉트
+
+---
+
+## 🚀 템플릿 사용 방법
+
+### 1단계: 템플릿 복사
+```bash
+cp web-ui/templates/work-layout.html web-ui/pages/work/new-page.html
+```
+
+### 2단계: 메타데이터 수정
+```html
+<title>새 페이지 | 테크니컬코리아</title>
+```
+
+### 3단계: CSS/JS 추가
+```html
+<!-- 페이지별 CSS -->
+<link rel="stylesheet" href="/css/new-page.css">
+
+<!-- 페이지별 JS -->
+<script type="module" src="/js/new-page.js" defer></script>
+```
+
+### 4단계: 콘텐츠 작성
+템플릿의 주석 처리된 예시 코드를 참고하여 실제 콘텐츠로 교체합니다.
+
+---
+
+## 📐 CSS 변수 활용
+
+모든 템플릿은 `design-system.css`의 CSS 변수를 사용합니다:
+
+### 색상
+```css
+var(--primary-500)    /* 하늘색 (기본) */
+var(--success-500)    /* 성공 (녹색) */
+var(--error-500)      /* 오류 (빨간색) */
+var(--text-primary)   /* 주요 텍스트 */
+```
+
+### 간격
+```css
+var(--space-2)  /* 8px */
+var(--space-4)  /* 16px */
+var(--space-6)  /* 24px */
+```
+
+### 타이포그래피
+```css
+var(--text-sm)       /* 14px */
+var(--text-base)     /* 16px */
+var(--font-medium)   /* 500 */
+var(--font-bold)     /* 700 */
+```
+
+### 기타
+```css
+var(--radius-md)         /* 8px 둥근 모서리 */
+var(--shadow-md)         /* 중간 그림자 */
+var(--transition-fast)   /* 150ms 전환 */
+```
+
+---
+
+## ✅ 모범 사례
+
+### DO ✅
+- 템플릿을 복사하여 시작
+- CSS 변수 사용
+- 의미있는 클래스명 사용
+- 주석으로 섹션 구분
+- 반응형 디자인 고려
+
+### DON'T ❌
+- 하드코딩된 색상 사용 (`#0ea5e9` 대신 `var(--primary-500)`)
+- 인라인 스타일 남발
+- 중복 코드 작성
+- 템플릿 구조 크게 변경
+
+---
+
+## 🔄 템플릿 업데이트
+
+템플릿이 업데이트되면:
+1. 기존 페이지를 즉시 수정할 필요는 없음
+2. 새 기능이 필요한 페이지만 선택적으로 적용
+3. 주요 변경사항은 `개발 log/` 디렉토리에 문서화
+
+---
+
+## 📞 문의
+
+템플릿 사용에 대한 질문이나 개선 제안이 있으면:
+- `CODING_GUIDE.md` 참조
+- 개발팀에 문의
+
+---
+
+**마지막 업데이트**: 2026-01-20
+**버전**: 1.0.0
--- a/web-ui/templates/admin-layout.html
+++ b/web-ui/templates/admin-layout.html
@@ -0,0 +1,153 @@
+<!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/common.css">
+  <link rel="stylesheet" href="/css/modern-dashboard.css">
+  <!-- 페이지별 CSS 추가 -->
+  <!-- <link rel="stylesheet" href="/css/your-admin-page.css"> -->
+
+  <!-- 필수 스크립트 (순서 중요) -->
+  <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/your-admin-page.js" defer></script> -->
+</head>
+
+<body>
+  <!-- 네비게이션 헤더 (자동 로드됨) -->
+  <div id="navbar-container"></div>
+
+  <!-- 메인 콘텐츠 -->
+  <main class="dashboard-main">
+    <div class="admin-page-container">
+
+      <!-- 페이지 헤더 -->
+      <div class="page-header">
+        <div class="page-header-left">
+          <button class="btn btn-secondary" onclick="history.back()">
+            <span>←</span>
+            뒤로
+          </button>
+        </div>
+        <div class="page-header-center">
+          <h2 class="page-title">⚙️ 관리 페이지</h2>
+          <p class="page-subtitle">시스템 설정 및 데이터 관리</p>
+        </div>
+        <div class="page-header-right">
+          <!-- 추가 액션 버튼 -->
+          <button class="btn btn-primary">
+            <span>➕</span>
+            추가
+          </button>
+        </div>
+      </div>
+
+      <!-- 관리 콘텐츠 카드 -->
+      <div class="admin-card">
+        <!-- 탭 네비게이션 (선택사항) -->
+        <div class="tab-navigation">
+          <button class="tab-btn active" data-tab="tab1">탭 1</button>
+          <button class="tab-btn" data-tab="tab2">탭 2</button>
+          <button class="tab-btn" data-tab="tab3">탭 3</button>
+        </div>
+
+        <!-- 검색/필터 영역 -->
+        <div class="admin-filters">
+          <div class="filter-group">
+            <label class="filter-label">검색</label>
+            <input type="text" class="filter-input" placeholder="검색어 입력">
+          </div>
+          <div class="filter-group">
+            <label class="filter-label">상태</label>
+            <select class="filter-select">
+              <option value="all">전체</option>
+              <option value="active">활성</option>
+              <option value="inactive">비활성</option>
+            </select>
+          </div>
+          <button class="btn btn-primary">
+            <span>🔍</span>
+            검색
+          </button>
+        </div>
+
+        <!-- 데이터 테이블 영역 -->
+        <div class="admin-table-container">
+          <table class="admin-table">
+            <thead>
+              <tr>
+                <th>
+                  <input type="checkbox" id="selectAll">
+                </th>
+                <th>ID</th>
+                <th>이름</th>
+                <th>상태</th>
+                <th>등록일</th>
+                <th>작업</th>
+              </tr>
+            </thead>
+            <tbody id="tableBody">
+              <!-- 데이터 행들이 동적으로 추가됩니다 -->
+              <tr>
+                <td><input type="checkbox"></td>
+                <td>1</td>
+                <td>샘플 데이터</td>
+                <td><span class="badge badge-success">활성</span></td>
+                <td>2025-01-20</td>
+                <td>
+                  <button class="btn btn-sm btn-secondary">수정</button>
+                  <button class="btn btn-sm btn-error">삭제</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- 페이지네이션 (선택사항) -->
+        <div class="pagination">
+          <button class="pagination-btn" disabled>이전</button>
+          <span class="pagination-info">1 / 10</span>
+          <button class="pagination-btn">다음</button>
+        </div>
+      </div>
+
+    </div>
+  </main>
+
+  <!-- 로딩 스피너 -->
+  <div id="loadingSpinner" class="loading-overlay" style="display: none;">
+    <div class="loading-content">
+      <div class="spinner"></div>
+      <p>처리 중...</p>
+    </div>
+  </div>
+
+  <!-- 확인 모달 -->
+  <div id="confirmModal" class="modal-overlay" style="display: none;">
+    <div class="modal-container">
+      <div class="modal-header">
+        <h2 id="confirmModalTitle">확인</h2>
+        <button class="modal-close-btn" onclick="closeConfirmModal()">×</button>
+      </div>
+      <div class="modal-body">
+        <p id="confirmModalMessage">작업을 진행하시겠습니까?</p>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary" onclick="closeConfirmModal()">취소</button>
+        <button class="btn btn-primary" id="confirmModalBtn">확인</button>
+      </div>
+    </div>
+  </div>
+
+</body>
+
+</html>
--- a/web-ui/templates/dashboard-layout.html
+++ b/web-ui/templates/dashboard-layout.html
@@ -0,0 +1,100 @@
+<!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">
+  <link rel="icon" type="image/png" href="/img/favicon.png">
+
+  <!-- 필수 스크립트 (순서 중요) -->
+  <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/your-page.js" 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="#" 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>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 주요 콘텐츠 섹션 -->
+      <section class="content-section">
+        <div class="card">
+          <div class="card-header">
+            <div class="flex justify-between items-center">
+              <h2 class="card-title">📊 콘텐츠 제목</h2>
+              <!-- 헤더 액션 버튼들 -->
+              <div class="header-actions">
+                <button class="btn btn-primary btn-sm">
+                  <span>➕</span>
+                  추가
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="card-body">
+            <!-- 메인 콘텐츠 영역 -->
+            <p>여기에 페이지 콘텐츠를 추가하세요.</p>
+          </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>
--- a/web-ui/templates/simple-layout.html
+++ b/web-ui/templates/simple-layout.html
@@ -0,0 +1,295 @@
+<!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/common.css">
+  <!-- 페이지별 CSS 추가 -->
+  <!-- <link rel="stylesheet" href="/css/your-page.css"> -->
+
+  <!-- 필수 스크립트 (순서 중요) -->
+  <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/your-page.js" defer></script> -->
+</head>
+
+<body>
+  <!-- 네비게이션 헤더 (자동 로드됨) -->
+  <div id="navbar-container"></div>
+
+  <!-- 메인 콘텐츠 -->
+  <main class="simple-main">
+    <div class="simple-container">
+
+      <!-- 페이지 헤더 -->
+      <div class="page-header-simple">
+        <button class="btn btn-secondary" onclick="history.back()">
+          <span>←</span>
+          뒤로
+        </button>
+        <h2 class="page-title">페이지 제목</h2>
+      </div>
+
+      <!-- 콘텐츠 카드 -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">섹션 제목</h3>
+        </div>
+        <div class="card-body">
+
+          <!-- 폼 예시 -->
+          <form id="simpleForm" class="simple-form">
+
+            <!-- 입력 필드 그룹 -->
+            <div class="form-group">
+              <label class="form-label" for="input1">
+                입력 필드 1
+                <span class="required">*</span>
+              </label>
+              <input
+                type="text"
+                id="input1"
+                class="form-control"
+                placeholder="값을 입력하세요"
+                required
+              >
+              <small class="form-help">도움말 텍스트</small>
+            </div>
+
+            <!-- 선택 필드 -->
+            <div class="form-group">
+              <label class="form-label" for="select1">
+                선택 필드
+              </label>
+              <select id="select1" class="form-control">
+                <option value="">선택하세요</option>
+                <option value="option1">옵션 1</option>
+                <option value="option2">옵션 2</option>
+              </select>
+            </div>
+
+            <!-- 텍스트 영역 -->
+            <div class="form-group">
+              <label class="form-label" for="textarea1">
+                텍스트 영역
+              </label>
+              <textarea
+                id="textarea1"
+                class="form-control"
+                rows="4"
+                placeholder="내용을 입력하세요"
+              ></textarea>
+            </div>
+
+            <!-- 체크박스 -->
+            <div class="form-group">
+              <label class="checkbox-label">
+                <input type="checkbox" id="checkbox1">
+                <span>동의합니다</span>
+              </label>
+            </div>
+
+            <!-- 라디오 버튼 -->
+            <div class="form-group">
+              <label class="form-label">옵션 선택</label>
+              <div class="radio-group">
+                <label class="radio-label">
+                  <input type="radio" name="option" value="1" checked>
+                  <span>옵션 1</span>
+                </label>
+                <label class="radio-label">
+                  <input type="radio" name="option" value="2">
+                  <span>옵션 2</span>
+                </label>
+              </div>
+            </div>
+
+            <!-- 버튼 그룹 -->
+            <div class="form-actions">
+              <button type="button" class="btn btn-secondary" onclick="history.back()">
+                취소
+              </button>
+              <button type="submit" class="btn btn-primary">
+                저장
+              </button>
+            </div>
+
+          </form>
+
+        </div>
+      </div>
+
+      <!-- 추가 정보 카드 (선택사항) -->
+      <div class="card" style="margin-top: var(--space-6);">
+        <div class="card-header">
+          <h3 class="card-title">추가 정보</h3>
+        </div>
+        <div class="card-body">
+          <div class="info-list">
+            <div class="info-item">
+              <span class="info-label">항목 1:</span>
+              <span class="info-value">값 1</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">항목 2:</span>
+              <span class="info-value">값 2</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">항목 3:</span>
+              <span class="info-value">값 3</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </main>
+
+  <!-- 로딩 스피너 (선택사항) -->
+  <div id="loadingSpinner" class="loading-overlay" style="display: none;">
+    <div class="loading-content">
+      <div class="spinner"></div>
+      <p>처리 중...</p>
+    </div>
+  </div>
+
+  <!-- 알림 토스트 (선택사항) -->
+  <div class="toast-container" id="toastContainer"></div>
+
+  <style>
+    /* Simple Layout 전용 스타일 */
+    .simple-main {
+      min-height: calc(100vh - 80px);
+      padding: var(--space-6);
+      background: var(--bg-secondary);
+    }
+
+    .simple-container {
+      max-width: 800px;
+      margin: 0 auto;
+    }
+
+    .page-header-simple {
+      display: flex;
+      align-items: center;
+      gap: var(--space-4);
+      margin-bottom: var(--space-6);
+    }
+
+    .simple-form {
+      max-width: 600px;
+    }
+
+    .form-group {
+      margin-bottom: var(--space-6);
+    }
+
+    .form-label {
+      display: block;
+      font-weight: var(--font-medium);
+      margin-bottom: var(--space-2);
+      color: var(--text-primary);
+    }
+
+    .form-label .required {
+      color: var(--error-500);
+    }
+
+    .form-control {
+      width: 100%;
+      padding: var(--space-3);
+      border: 1px solid var(--border-medium);
+      border-radius: var(--radius-md);
+      font-size: var(--text-base);
+      transition: var(--transition-fast);
+    }
+
+    .form-control:focus {
+      outline: none;
+      border-color: var(--primary-500);
+      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+    }
+
+    .form-help {
+      display: block;
+      margin-top: var(--space-1);
+      font-size: var(--text-sm);
+      color: var(--text-tertiary);
+    }
+
+    .checkbox-label,
+    .radio-label {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      cursor: pointer;
+      font-size: var(--text-base);
+    }
+
+    .radio-group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+    }
+
+    .form-actions {
+      display: flex;
+      gap: var(--space-3);
+      justify-content: flex-end;
+      margin-top: var(--space-8);
+      padding-top: var(--space-6);
+      border-top: 1px solid var(--border-light);
+    }
+
+    .info-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
+    }
+
+    .info-item {
+      display: flex;
+      justify-content: space-between;
+      padding: var(--space-3) 0;
+      border-bottom: 1px solid var(--border-light);
+    }
+
+    .info-item:last-child {
+      border-bottom: none;
+    }
+
+    .info-label {
+      font-weight: var(--font-medium);
+      color: var(--text-secondary);
+    }
+
+    .info-value {
+      color: var(--text-primary);
+    }
+
+    @media (max-width: 768px) {
+      .simple-main {
+        padding: var(--space-4);
+      }
+
+      .form-actions {
+        flex-direction: column;
+      }
+
+      .form-actions .btn {
+        width: 100%;
+      }
+    }
+  </style>
+
+</body>
+
+</html>
--- a/web-ui/templates/work-layout.html
+++ b/web-ui/templates/work-layout.html
@@ -0,0 +1,127 @@
+<!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/common.css">
+  <link rel="stylesheet" href="/css/modern-dashboard.css">
+  <!-- 페이지별 CSS 추가 -->
+  <!-- <link rel="stylesheet" href="/css/your-page.css"> -->
+
+  <!-- 필수 스크립트 (순서 중요) -->
+  <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/your-page.js" defer></script> -->
+</head>
+
+<body>
+  <!-- 네비게이션 헤더 (자동 로드됨) -->
+  <div id="navbar-container"></div>
+
+  <!-- 메인 콘텐츠 -->
+  <main class="dashboard-main">
+    <div class="work-page-container">
+
+      <!-- 페이지 제목 섹션 -->
+      <div class="page-title-section">
+        <h2 class="page-title">📋 페이지 제목</h2>
+        <p class="page-subtitle">페이지 설명을 여기에 작성하세요</p>
+      </div>
+
+      <!-- 작업 콘텐츠 카드 -->
+      <div class="work-card">
+        <!-- 필터/검색 영역 (선택사항) -->
+        <div class="work-filters">
+          <div class="filter-group">
+            <label class="filter-label">검색</label>
+            <input type="text" class="filter-input" placeholder="검색어 입력">
+          </div>
+          <div class="filter-group">
+            <label class="filter-label">필터</label>
+            <select class="filter-select">
+              <option value="all">전체</option>
+              <option value="active">활성</option>
+              <option value="inactive">비활성</option>
+            </select>
+          </div>
+          <button class="btn btn-primary">
+            <span>🔍</span>
+            검색
+          </button>
+        </div>
+
+        <!-- 작업 콘텐츠 영역 -->
+        <div class="work-content">
+          <p>여기에 작업 관련 콘텐츠를 추가하세요.</p>
+
+          <!-- 예시: 데이터 테이블 -->
+          <!--
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th>컬럼1</th>
+                <th>컬럼2</th>
+                <th>작업</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>데이터1</td>
+                <td>데이터2</td>
+                <td>
+                  <button class="btn btn-sm btn-secondary">수정</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          -->
+        </div>
+
+        <!-- 액션 버튼 영역 (선택사항) -->
+        <div class="work-actions">
+          <button class="btn btn-secondary">취소</button>
+          <button class="btn btn-primary">저장</button>
+        </div>
+      </div>
+
+    </div>
+  </main>
+
+  <!-- 로딩 스피너 (선택사항) -->
+  <div id="loadingSpinner" class="loading-overlay" style="display: none;">
+    <div class="loading-content">
+      <div class="spinner"></div>
+      <p>데이터를 불러오는 중...</p>
+    </div>
+  </div>
+
+  <!-- 모달 (선택사항) -->
+  <!--
+  <div id="modal" class="modal-overlay" style="display: none;">
+    <div class="modal-container">
+      <div class="modal-header">
+        <h2 id="modalTitle">모달 제목</h2>
+        <button class="modal-close-btn" onclick="closeModal()">×</button>
+      </div>
+      <div class="modal-body">
+        모달 콘텐츠
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary" onclick="closeModal()">취소</button>
+        <button class="btn btn-primary">확인</button>
+      </div>
+    </div>
+  </div>
+  -->
+
+</body>
+
+</html>
--- a/log/2026-01-20-ui-standardization-phase1.md
+++ b/log/2026-01-20-ui-standardization-phase1.md
@@ -0,0 +1,320 @@
+# UI 표준화 Phase 1: 네비게이션/헤더 통일 - 2026-01-20
+
+## 배경
+페이지마다 서로 다른 헤더 구현 방식과 하드코딩된 색상 값으로 인해 일관성이 부족했습니다:
+- dashboard.html과 work/report-view.html이 각각 독립적인 헤더 코드 보유
+- 색상 값이 하드코딩되어 있어 변경 시 여러 곳 수정 필요
+- CSS 변수 시스템이 있지만 활용도 낮음
+- 새 페이지 작성 시 참고할 표준 템플릿 부재
+
+## 목표
+1. ✅ 하늘색 계열 primary 색상으로 통일
+2. ✅ Navbar 컴포넌트에 CSS 변수 적용
+3. ✅ 인라인 헤더를 navbar 컴포넌트로 교체
+4. ✅ 4가지 표준 레이아웃 템플릿 생성
+5. ✅ CODING_GUIDE.md 업데이트
+
+---
+
+## 변경 내용
+
+### 1. Design System 색상 변수 업데이트
+
+**파일**: `web-ui/css/design-system.css`
+
+기존 파란색 primary 색상을 하늘색 계열로 변경:
+
+```css
+/* 변경 전 (파란색) */
+--primary-400: #42a5f5
+--primary-500: #2196f3
+--primary-600: #1e88e5
+
+/* 변경 후 (하늘색) */
+--primary-400: #38bdf8  /* 밝은 하늘색 */
+--primary-500: #0ea5e9  /* 기본 하늘색 */
+--primary-600: #0284c7  /* 진한 하늘색 */
+
+/* 새로 추가 */
+--header-gradient: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%);
+```
+
+### 2. Navbar 컴포넌트 CSS 변수 적용
+
+**파일**: `web-ui/components/navbar.html`
+
+모든 하드코딩된 스타일 값을 CSS 변수로 변경:
+
+| 기존 하드코딩 | 변경 후 CSS 변수 |
+|------------|----------------|
+| `linear-gradient(135deg, #0ea5e9...)` | `var(--header-gradient)` |
+| `color: white` | `var(--text-inverse)` |
+| `padding: 1rem 1.5rem` | `var(--space-4) var(--space-6)` |
+| `font-size: 1.5rem` | `var(--text-2xl)` |
+| `font-weight: 700` | `var(--font-bold)` |
+| `border-radius: 9999px` | `var(--radius-full)` |
+| `background: #90caf9` | `var(--primary-200)` |
+| `color: #0d47a1` | `var(--primary-900)` |
+
+**변경 라인**: 약 50개 이상의 스타일 속성 업데이트
+
+### 3. 인라인 헤더 제거 및 컴포넌트 적용
+
+#### dashboard.html
+**변경 전** (50줄의 인라인 헤더 코드):
+```html
+<header class="dashboard-header">
+  <div class="header-content">
+    <!-- 50줄의 헤더 코드 -->
+  </div>
+</header>
+```
+
+**변경 후** (2줄):
+```html
+<!-- 네비게이션 헤더 -->
+<div id="navbar-container"></div>
+
+<!-- 스크립트 -->
+<script src="/js/load-navbar.js"></script>
+```
+
+#### work/report-view.html
+동일한 방식으로 인라인 헤더 제거 및 컴포넌트 적용:
+- 54줄 → 2줄로 축소
+- 오래된 프로필 메뉴 링크 자동 수정 (navbar 컴포넌트 사용)
+
+### 4. 표준 레이아웃 템플릿 생성
+
+**디렉토리**: `web-ui/templates/`
+
+새로 생성된 파일:
+```
+templates/
+├── README.md                   # 템플릿 사용 가이드
+├── dashboard-layout.html       # 대시보드용 템플릿
+├── work-layout.html           # 작업 페이지용 템플릿
+├── admin-layout.html          # 관리자 페이지용 템플릿
+└── simple-layout.html         # 프로필/설정용 템플릿
+```
+
+#### 템플릿별 특징
+
+**dashboard-layout.html**:
+- 빠른 작업 섹션 포함
+- 여러 콘텐츠 카드 지원
+- 푸터 포함
+- 토스트 알림 영역
+
+**work-layout.html**:
+- 페이지 제목 섹션
+- 검색/필터 영역
+- 작업 콘텐츠 카드
+- 로딩 스피너
+- 모달 예시 코드
+
+**admin-layout.html**:
+- 뒤로가기 버튼 헤더
+- 탭 네비게이션
+- 데이터 테이블 레이아웃
+- 체크박스 일괄 선택
+- 페이지네이션
+- 확인 모달
+
+**simple-layout.html**:
+- 중앙 정렬 (최대 800px)
+- 폼 요소 스타일링
+- 정보 표시 리스트
+- 반응형 레이아웃
+- 완전한 폼 예시
+
+### 5. CODING_GUIDE.md 업데이트
+
+**파일**: `CODING_GUIDE.md`
+
+새로 추가된 섹션:
+- **표준 컴포넌트**: Navbar 사용법, CSS 변수 시스템
+- **CSS 변수 시스템**: 주요 변수 목록 및 사용 예시
+- **페이지 레이아웃 템플릿**: 4가지 템플릿 소개 및 사용법
+
+---
+
+## 테스트 결과
+
+### 자동 테스트 (curl)
+
+```bash
+✓ Dashboard: 200
+✓ Navbar container found in dashboard.html
+✓ Work Report View: 200
+✓ Navbar container found in work/report-view.html
+✓ Navbar Component: 200
+✓ Navbar component loads correctly
+✓ Sky blue color variables found in design-system.css
+✓ Templates README: 200
+✓ Templates directory accessible
+✓ Navbar component uses CSS variables
+```
+
+### 파일 변경 통계
+
+| 파일 | 상태 | 변경 내용 |
+|-----|------|---------|
+| `design-system.css` | 수정 | +2줄 (color variables) |
+| `navbar.html` | 수정 | ~50개 속성 CSS 변수화 |
+| `dashboard.html` | 수정 | -48줄 (헤더 제거) +2줄 (컴포넌트) |
+| `work/report-view.html` | 수정 | -52줄 (헤더 제거) +1줄 (스크립트) |
+| `CODING_GUIDE.md` | 수정 | +68줄 (새 섹션) |
+| `templates/*.html` | 신규 | 4개 템플릿 생성 |
+| `templates/README.md` | 신규 | 가이드 문서 생성 |
+
+**총 파일**: 8개 (수정 5개, 신규 3개 + 4 templates)
+
+---
+
+## 혜택 및 개선 사항
+
+### 코드 중복 제거
+- dashboard.html: 50줄 → 2줄 (96% 감소)
+- work/report-view.html: 54줄 → 2줄 (96% 감소)
+- **총 102줄의 중복 코드 제거**
+
+### 유지보수성 향상
+- 헤더 수정 시 navbar.html 한 곳만 수정
+- 색상 변경 시 design-system.css 한 곳만 수정
+- CSS 변수로 인한 일관성 보장
+
+### 개발 생산성 향상
+- 새 페이지 작성 시 템플릿 복사로 시작
+- 표준화된 구조로 코드 리뷰 용이
+- 신규 개발자 온보딩 시간 단축
+
+### 디자인 일관성
+- 모든 페이지 동일한 헤더 스타일
+- 통일된 색상 체계 (하늘색)
+- 일관된 간격 및 타이포그래피
+
+---
+
+## 향후 계획 (Phase 2-4)
+
+### Phase 2: 버튼/카드 컴포넌트 통일 (예정)
+- 26개 CSS 파일의 중복된 버튼 스타일 통합
+- 카드 컴포넌트 표준화
+
+### Phase 3: CSS 파일 구조 개선 (예정)
+- 26개 → 8개 CSS 파일로 통합
+- 페이지별 CSS를 모듈화
+
+### Phase 4: 폰트 시스템 완전 통일 (예정)
+- Pretendard로 완전히 통일
+- 불필요한 폰트 제거
+
+---
+
+## 트러블슈팅
+
+### 문제: 페이지마다 네비게이션 색상이 다름
+
+**증상**:
+- 일부 페이지는 파란색, 일부는 흰색, 일부는 하늘색 네비게이션 표시
+
+**원인**:
+1. CSS 파일에 `.dashboard-header` 스타일이 중복 정의되어 navbar 컴포넌트 스타일을 덮어씀
+2. 일부 페이지에 `design-system.css`가 누락되어 CSS 변수가 작동하지 않음
+
+**해결**:
+```bash
+# 1. 중복된 헤더 스타일 제거
+- modern-dashboard.css: .dashboard-header 스타일 제거
+- project-management.css: .dashboard-header 스타일 제거
+
+# 2. 누락된 design-system.css 추가
+- work/report-view.html
+- work/analysis.html
+- admin/accounts.html
+```
+
+**체크리스트 (새 페이지 작성 시)**:
+- [ ] `<link rel="stylesheet" href="/css/design-system.css">` 최상단에 추가
+- [ ] `<script type="module" src="/js/load-navbar.js"></script>` 추가
+- [ ] `<div id="navbar-container"></div>` 추가
+- [ ] CSS 파일에 `.dashboard-header` 스타일 작성 금지 (navbar.html에서 관리)
+
+---
+
+## 사용 가이드
+
+### 기존 페이지 수정 방법
+
+기존 페이지에 인라인 헤더가 있다면:
+
+```html
+<!-- 1. 기존 헤더 코드 제거 -->
+<!-- <header class="dashboard-header">...</header> -->
+
+<!-- 2. 컴포넌트로 교체 -->
+<div id="navbar-container"></div>
+
+<!-- 3. 스크립트 추가 -->
+<script src="/js/load-navbar.js"></script>
+```
+
+### 새 페이지 작성 방법
+
+```bash
+# 1. 용도에 맞는 템플릿 선택
+cd web-ui/templates
+ls -la  # 4가지 템플릿 확인
+
+# 2. 템플릿 복사
+cp work-layout.html ../pages/work/new-page.html
+
+# 3. 내용 수정
+# - <title> 변경
+# - 페이지별 CSS/JS 추가
+# - 콘텐츠 작성
+
+# 4. 테스트
+open http://localhost:20000/pages/work/new-page.html
+```
+
+### CSS 변수 사용 예시
+
+```css
+/* ❌ 나쁜 예 - 하드코딩 */
+.my-button {
+  background: #0ea5e9;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+/* ✅ 좋은 예 - CSS 변수 */
+.my-button {
+  background: var(--primary-500);
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+}
+```
+
+---
+
+## 참고 문서
+
+- `web-ui/templates/README.md`: 템플릿 상세 가이드
+- `CODING_GUIDE.md`: 전체 개발 가이드
+- `개발 log/2026-01-20-page-restructure.md`: 페이지 구조 개편 로그
+
+---
+
+## 커밋 정보
+
+- **날짜**: 2026-01-20
+- **작업자**: Claude AI
+- **Phase**: 1 (네비게이션/헤더 통일)
+- **영향받는 파일**: 8개
+- **코드 감소**: -102줄 (중복 제거)
+
+---
+
+**다음 단계**: Phase 2 버튼/카드 컴포넌트 통일 작업 예정