- 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>
모든 화면 크기에서 일관되고 안정적인 사용자 경험을 제공하도록
UI 컴포넌트를 전면 개선했습니다.
주요 변경사항:
- 네비게이션 바: flex-wrap, rem 단위, sticky positioning 적용
- 사용자 정보 영역: max-width로 크기 제한, 텍스트 overflow 처리
- 공통 헤더: clamp()로 반응형 폰트, 반응형 패딩 적용
- 모든 관리 페이지: ES6 모듈 로딩 통일 (type="module")
- 반응형 breakpoint: 1200px, 768px, 640px, 480px
개선 효과:
✅ 모든 페이지에서 일관된 헤더 표시
✅ 사용자 정보 영역 늘어나는 문제 해결
✅ 모든 화면 크기에서 최적화된 레이아웃
✅ rem 단위 사용으로 접근성 개선
수정된 파일:
- web-ui/components/navbar.html: 전면 리팩토링
- web-ui/css/common.css: 반응형 스타일 추가
- web-ui/pages/**/*.html: 모듈 로딩 및 버전 업데이트 (13개 파일)
- web-ui/js/*.js: 모듈 시스템 개선
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- monthly_worker_status 조회 시 GROUP BY로 중복 데이터 합산
- 작업보고서 삭제 권한을 그룹장 이상으로 제한 (admin, system, group_leader)
- 중복 데이터 정리를 위한 마이그레이션 SQL 추가 (009_fix_duplicate_monthly_status.sql)
- synology_deployment 버전에도 동일 수정 적용
✨ 새로운 기능:
- 작업 분석 페이지 구현 (기간별, 프로젝트별, 작업자별, 오류별)
- 개별 분석 실행 버튼으로 API 부하 최적화
- 연차/휴무 집계 방식 개선 (주말 제외, 작업내용 통합)
- 프로젝트 관리 시스템 (활성화/비활성화)
- 작업자 관리 시스템 (CRUD 기능)
- 코드 관리 시스템 (작업유형, 작업상태, 오류유형)
🎨 UI/UX 개선:
- 기간별 작업 현황을 테이블 형태로 변경
- 작업자별 rowspan 그룹화로 가독성 향상
- 연차/휴무 프로젝트 하단 배치 및 시각적 구분
- 기간 확정 시스템으로 사용자 경험 개선
- 반응형 디자인 적용
🔧 기술적 개선:
- Rate Limiting 제거 (내부 시스템 최적화)
- 주말 연차/휴무 자동 제외 로직
- 작업공수 계산 정확도 향상
- 데이터베이스 마이그레이션 추가
- API 엔드포인트 확장 및 최적화
🐛 버그 수정:
- projectSelect 요소 참조 오류 해결
- 차트 높이 무한 증가 문제 해결
- 날짜 표시 형식 단순화
- 작업보고서 저장 validation 오류 수정
🎨 모던 디자인 시스템 적용:
1. 대시보드와 일관된 디자인 언어:
- design-system.css 활용한 통일된 색상, 타이포그래피
- 동일한 카드, 버튼, 애니메이션 스타일
- 일관된 간격, 그림자, 테두리 반경
2. 새로운 CSS 파일 분리:
- daily-work-report.css 생성 (673줄)
- 인라인 스타일 완전 제거 (926줄 → 0줄)
- 모듈화된 스타일 관리
🚀 사용자 경험 대폭 개선:
1. 모던한 진행 단계 표시:
- 상단 3단계 진행 바 추가
- 실시간 단계 상태 표시 (활성/완료)
- 시각적 진행도 피드백
2. 개선된 레이아웃 구조:
- 헤더: 그라데이션 배경, 중앙 정렬
- 메인: 최대 너비 1200px, 중앙 배치
- 카드: 일관된 패딩, 그림자, 테두리
3. 향상된 작업자 선택 UI:
- worker-btn → worker-card 클래스 변경
- 카드형 디자인으로 시각적 개선
- 호버 효과: 상단 컬러 바, 배경 변화
- 선택 상태: 그라데이션 배경, 흰색 텍스트
✨ 인터랙션 개선:
1. 버튼 디자인 통일:
- 일관된 패딩, 높이 (48px)
- 호버 효과: translateY(-2px), 그림자 확대
- 색상: primary, success, secondary 통일
2. 폼 요소 개선:
- form-input 클래스로 통일된 스타일
- 포커스 상태: 테두리 색상, 그림자 효과
- 라벨: 명확한 계층 구조
3. 애니메이션 효과:
- 단계 전환: opacity, transform 애니메이션
- 카드 호버: translateY, 그림자 변화
- 부드러운 전환: var(--transition-normal)
📱 반응형 디자인 최적화:
1. 모바일 (768px 이하):
- 진행 단계: 세로 배치
- 작업자 그리드: 1열로 변경
- 패딩, 폰트 크기 조정
2. 태블릿 (1024px 이하):
- 적절한 그리드 컬럼 수 조정
- 터치 친화적 버튼 크기
🔧 기술적 개선:
1. JavaScript 업데이트:
- updateProgressSteps() 함수 추가
- 진행 단계 실시간 업데이트
- CSS 클래스명 변경 반영
2. HTML 구조 개선:
- 시맨틱 태그 활용 (header, main)
- 접근성 향상 (label, aria 속성)
- 깔끔한 마크업 구조
🎯 결과:
- 대시보드와 완벽한 디자인 일관성
- 직관적이고 사용하기 쉬운 인터페이스
- 모든 디바이스에서 최적화된 경험
- 프로페셔널한 시각적 품질
테스트: http://localhost:20000/pages/common/daily-work-report.html
🔐 토큰 만료 시 자동 로그아웃 기능:
1. JWT 토큰 만료 시간 대폭 연장:
- 액세스 토큰: 24시간 → 7일
- 리프레시 토큰: 7일 → 30일
- 사용자 편의성 크게 향상
2. 토큰 만료 감지 및 처리:
- isTokenExpired() 함수 추가
- JWT 페이로드 파싱하여 exp 확인
- 현재 시간과 비교하여 만료 여부 판단
3. 자동 로그아웃 처리:
- API 호출 시 401 오류 감지
- 주기적 토큰 만료 확인 (5분마다)
- 만료 시 자동 인증 데이터 정리
- 사용자 알림 후 로그인 페이지 리다이렉트
4. 개선된 인증 데이터 관리:
- clearAuthData() 함수로 통합 관리
- token, user, userInfo, currentUser 모두 정리
- 메모리 누수 방지
🐛 데이터베이스 테이블명 수정:
1. projectModel.js:
- Projects → projects (대문자 → 소문자)
- 실제 DB 테이블명과 일치
2. taskModel.js:
- Tasks → tasks (대문자 → 소문자)
- 실제 DB 테이블명과 일치
3. API 오류 해결:
- '테이블이 존재하지 않습니다' 오류 수정
- projects, tasks API 정상 작동
✅ 사용자 경험 개선:
- 토큰 만료로 인한 예상치 못한 오류 방지
- 명확한 만료 알림 메시지
- 자동 로그아웃으로 보안 강화
- 더 긴 세션 유지로 편의성 향상
🔧 기술적 개선:
- JWT 페이로드 안전한 파싱
- 에러 핸들링 강화
- 주기적 백그라운드 확인
- 전역 함수로 재사용성 향상
🎯 결과:
- 안정적인 인증 시스템
- 사용자 친화적인 세션 관리
- 보안성과 편의성의 균형
- API 호출 오류 해결
테스트:
- 토큰 만료 후 자동 로그아웃 확인
- projects, tasks API 정상 작동 확인
