TK-FB-Project/개발 log/2026-01-20.md

# 개발 로그 - 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] 로그인 기능 정상 작동 확인
- [ ] 모든 페이지 헤더 표시 확인
- [ ] 사용자 프로필 메뉴 동작 확인
- [ ] 실시간 시계 작동 확인
- [ ] 반응형 디자인 (모바일/태블릿) 확인

---

### 오후 - 네비게이션 구조 수정 (navbar-container 방식으로 통일)
- **작업**: 수정 및 복원
- **배경**:
  - 오전에 진행한 변경사항 중 일부가 잘못된 접근이었음
  - `daily-work-report.html`에 직접 header를 삽입한 것이 문제
  - 올바른 방식: navbar-container를 통한 컴포넌트 방식
- **문제점**:
  - `daily-work-report.html`은 참조 페이지로 변경하지 말았어야 함
  - 다른 페이지들이 이 페이지의 구조를 따라야 했음

#### 수정 내용
1. **daily-work-report.html 복원**:
   - 직접 삽입한 `<header class="dashboard-header">` 블록 제거
   - 원래의 `<div id="navbar-container"></div>` 방식으로 복원
   - 불필요하게 추가한 CSS/JS 임포트 제거

2. **관리 페이지들 구조 수정** (4개 파일):
   - `web-ui/pages/management/code-management.html`
   - `web-ui/pages/management/project-management.html`
   - `web-ui/pages/management/work-management.html`
   - `web-ui/pages/management/worker-management.html`

   **변경사항**:
   - `design-system.css` 임포트 추가 (navbar 스타일에 필요)
   - `navbar-container`를 `work-report-container` 내부로 이동

   ```html
   <!-- 이전 -->
   <body>
     <div id="navbar-container"></div>
     <div class="work-report-container">
       <main class="work-report-main">

   <!-- 이후 -->
   <body>
     <div class="work-report-container">
       <div id="navbar-container"></div>
       <main class="work-report-main">
   ```

#### 최종 결과
- ✅ 모든 페이지가 동일한 navbar-container 컴포넌트 방식 사용
- ✅ daily-work-report.html이 원래 구조로 복원됨
- ✅ 관리 페이지들의 구조가 표준에 맞게 수정됨
- ✅ design-system.css가 모든 페이지에 로드되어 일관된 스타일 적용

#### 변경된 파일
- **복원**: `web-ui/pages/common/daily-work-report.html` (git diff 없음 - 완전 복원)
- **수정**: 4개 관리 페이지 (각 7줄 변경)

---