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

테스트 필요

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

---

오후 - 네비게이션 구조 수정 (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 내부로 이동

   <!-- 이전 -->
   <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줄 변경)

---