refactor: 네비게이션 헤더 최신 디자인으로 전면 개편 및 로그인 버그 수정

- fix: 로그인 API에서 user.role_name 필드 올바르게 사용 (auth.service.js) - refactor: navbar 컴포넌트를 최신 dashboard-header 스타일로 전환 - refactor: 구버전 work-report-header 제거 (6개 페이지) - refactor: load-navbar.js를 최신 헤더 구조에 맞게 업데이트 - style: 파란색 그라데이션 헤더, 실시간 시계, 향상된 프로필 메뉴 - docs: 2026-01-20 개발 로그 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-20 08:40:19 +09:00
parent 6933f67a2e
commit 4ac0605887
24 changed files with 1614 additions and 524 deletions
--- a/log/2026-01-20.md
+++ b/log/2026-01-20.md
@@ -0,0 +1,180 @@
+# 개발 로그 - 2026-01-20
+
+## 타임라인
+
+### 오전 - 로그인 API 500 에러 수정
+- **작업**: 수정
+- **대상**: `api.hyungi.net/services/auth.service.js`
+- **문제**:
+  - 로그인 페이지에서 500 Internal Server Error 발생
+  - 브라우저 콘솔 에러: "Failed to load resource: the server responded with a status of 500"
+- **원인**:
+  - `userModel.findByUsername()`은 `role_name` 필드를 반환하는데
+  - `auth.service.js:84`에서 `user.role`로 접근하여 undefined 발생
+  - 응답 객체에 undefined 값이 포함되어 JSON 직렬화 실패
+- **해결방법**:
+  - `role: user.role` → `role: user.role_name`으로 수정
+- **변경 내용**:
+  ```javascript
+  // 이전
+  user: {
+    user_id: user.user_id,
+    username: user.username,
+    name: user.name || user.username,
+    role: user.role,  // undefined
+    access_level: user.access_level,
+    worker_id: user.worker_id
+  }
+
+  // 이후
+  user: {
+    user_id: user.user_id,
+    username: user.username,
+    name: user.name || user.username,
+    role: user.role_name,  // 올바른 필드 사용
+    access_level: user.access_level,
+    worker_id: user.worker_id
+  }
+  ```
+- **파일**: `api.hyungi.net/services/auth.service.js:83`
+
+---
+
+### 오전 - 네비게이션 헤더 전면 개편
+- **작업**: 대규모 리팩토링
+- **대상**: navbar 컴포넌트 및 관련 페이지 전체
+- **배경**:
+  - 구식 navbar 디자인 사용 중
+  - group-leader.html의 최신 dashboard-header 스타일이 표준
+  - 모든 페이지를 최신 디자인으로 통일 필요
+
+#### 1단계: 구버전 헤더 제거
+- **작업**: 수정
+- **대상**: 6개 페이지
+- **문제**:
+  - `work-report-header` 클래스의 구버전 헤더가 navbar와 중복 표시
+  - 페이지마다 불필요한 제목과 설명 중복
+- **해결방법**:
+  - 모든 페이지에서 `<header class="work-report-header">` 블록 제거
+  - navbar 컴포넌트만 유지
+- **제거된 헤더 예시**:
+  ```html
+  <!-- 제거됨 -->
+  <header class="work-report-header">
+    <h1>🔧 작업 관리</h1>
+    <p class="subtitle">프로젝트, 작업자, 작업 유형 등 기본 데이터를 관리합니다</p>
+  </header>
+  ```
+- **수정된 파일** (6개):
+  - `web-ui/pages/management/work-management.html`
+  - `web-ui/pages/management/project-management.html`
+  - `web-ui/pages/management/code-management.html`
+  - `web-ui/pages/management/worker-management.html`
+  - `web-ui/pages/common/worker-individual-report.html`
+  - `web-ui/pages/common/daily-work-report.html`
+
+#### 2단계: navbar 컴포넌트 최신화
+- **작업**: 전면 재작성
+- **대상**: `web-ui/components/navbar.html`
+- **변경 내용**:
+  1. **HTML 구조 변경**:
+     - 기존: `<nav class="navbar">` 구조
+     - 신규: `<header class="dashboard-header">` 구조 (group-leader.html과 동일)
+  2. **레이아웃 3분할**:
+     - `header-left`: 브랜드 로고 + 회사명
+     - `header-center`: 실시간 시계
+     - `header-right`: 사용자 프로필 메뉴
+  3. **스타일 전면 교체**:
+     - 구버전 navbar 스타일 (470줄) 삭제
+     - modern-dashboard.css 기반 최신 스타일 (230줄) 적용
+     - 파란색 그라데이션 배경 (`#1e40af` → `#2563eb`)
+     - 향상된 hover 효과 및 애니메이션
+  4. **프로필 메뉴 개선**:
+     - 드롭다운 메뉴를 user-profile hover 시 자동 표시
+     - 기존의 클릭 기반 → hover 기반으로 변경
+     - 더 부드러운 트랜지션 효과
+- **파일**: `web-ui/components/navbar.html:1-287` (전체)
+
+#### 3단계: navbar 로더 스크립트 업데이트
+- **작업**: 수정
+- **대상**: `web-ui/js/load-navbar.js`
+- **변경 내용**:
+  1. **사용자 정보 채우기 함수 수정**:
+     ```javascript
+     // 이전
+     const elements = {
+       'user-name': displayName,
+       'user-role': roleName,
+       'dropdown-user-fullname': displayName,
+       'dropdown-user-id': `@${user.username}`,
+     };
+
+     // 이후 (새 ID에 맞춤)
+     const elements = {
+       'userName': displayName,
+       'userRole': roleName,
+       'userInitial': displayName.charAt(0),
+     };
+     ```
+  2. **이벤트 리스너 단순화**:
+     - 복잡한 드롭다운 토글 로직 제거
+     - 로그아웃 버튼 이벤트만 유지 (CSS hover로 처리)
+  3. **시계 업데이트 함수 수정**:
+     - 'current-time' → 'timeValue' ID로 변경
+- **파일**: `web-ui/js/load-navbar.js:55-95`
+
+---
+
+## 요약
+
+### 주요 변경사항
+
+#### 백엔드 수정
+1. **로그인 API 버그 수정**:
+   - auth.service.js에서 role_name 필드 올바르게 사용
+   - 500 에러 해결
+
+#### 프론트엔드 대규모 리팩토링
+1. **네비게이션 전면 개편**:
+   - navbar 컴포넌트를 최신 dashboard-header 스타일로 전환
+   - 구버전 work-report-header 제거 (6개 페이지)
+   - 모든 페이지에 일관된 최신 헤더 적용
+
+2. **디자인 통일**:
+   - group-leader.html의 모던 디자인이 전체 표준이 됨
+   - 파란색 그라데이션 헤더
+   - 실시간 시계 표시
+   - 향상된 사용자 프로필 메뉴
+
+3. **코드 정리**:
+   - 470줄의 구식 CSS → 230줄의 최신 CSS
+   - 불필요한 이벤트 리스너 제거 (hover로 대체)
+   - 더 간결하고 유지보수 쉬운 코드
+
+### 영향받는 파일
+- **수정**: 9개 파일
+  - api.hyungi.net/services/auth.service.js
+  - web-ui/components/navbar.html
+  - web-ui/js/load-navbar.js
+  - web-ui/pages/management/work-management.html
+  - web-ui/pages/management/project-management.html
+  - web-ui/pages/management/code-management.html
+  - web-ui/pages/management/worker-management.html
+  - web-ui/pages/common/worker-individual-report.html
+  - web-ui/pages/common/daily-work-report.html
+
+### 사용자 경험 개선
+- ✨ 모던하고 일관된 UI/UX
+- ⏰ 모든 페이지에서 실시간 시계 확인 가능
+- 🎨 향상된 비주얼 디자인
+- 📱 반응형 디자인 지원
+- ⚡ 더 부드러운 애니메이션과 트랜지션
+
+### 테스트 필요
+- [x] 로그인 기능 정상 작동 확인
+- [ ] 모든 페이지 헤더 표시 확인
+- [ ] 사용자 프로필 메뉴 동작 확인
+- [ ] 실시간 시계 작동 확인
+- [ ] 반응형 디자인 (모바일/태블릿) 확인
+
+---