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으로 수정
• 변경 내용:

  // 이전
  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 컴포넌트만 유지
• 제거된 헤더 예시:

  <!-- 제거됨 -->
  <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. 사용자 정보 채우기 함수 수정:

     // 이전
     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
• ⏰ 모든 페이지에서 실시간 시계 확인 가능
• 🎨 향상된 비주얼 디자인
• 📱 반응형 디자인 지원
• ⚡ 더 부드러운 애니메이션과 트랜지션

테스트 필요

• 로그인 기능 정상 작동 확인
• 모든 페이지 헤더 표시 확인
• 사용자 프로필 메뉴 동작 확인
• 실시간 시계 작동 확인
• 반응형 디자인 (모바일/태블릿) 확인

---