## 주요 변경사항
### 1. TBM (Tool Box Meeting) 시스템 구축
- **데이터베이스 스키마** (5개 테이블 생성)
- tbm_sessions: TBM 세션 관리
- tbm_team_assignments: 팀 구성 관리
- tbm_safety_checks: 안전 체크리스트 마스터 (17개 항목)
- tbm_safety_records: 안전 체크 기록
- team_handovers: 작업 인계 관리
- **API 엔드포인트** (17개)
- TBM 세션 CRUD
- 팀 구성 관리
- 안전 체크리스트
- 작업 인계
- 통계 및 리포트
- **프론트엔드**
- TBM 관리 페이지 (/pages/work/tbm.html)
- 모달 기반 UI (세션 생성, 팀 구성, 안전 체크)
### 2. 페이지 권한 관리 시스템
- 페이지별 접근 권한 설정 기능
- 관리자 페이지 (/pages/admin/page-access.html)
- 사용자별 페이지 권한 부여/회수
- TBM 페이지 등록 및 권한 연동
### 3. 네비게이션 role 표시 버그 수정
- load-navbar.js: case-insensitive role 매칭 적용
- JWT의 "Admin" role이 "관리자"로 정상 표시
- admin-only 메뉴 항목 정상 표시
### 4. 대시보드 개선
- 작업 현황 테이블 가독성 향상
- 고대비 색상 및 명확한 구분선 적용
- 이모지 제거 및 SVG 아이콘 적용
### 5. 문서화
- TBM 배포 가이드 작성 (docs/TBM_DEPLOYMENT_GUIDE.md)
- 데이터베이스 스키마 상세 기록
- 배포 절차 및 체크리스트 제공
## 기술 스택
- Backend: Node.js, Express, MySQL
- Frontend: Vanilla JavaScript, HTML5, CSS3
- Database: MySQL (InnoDB)
## 파일 변경사항
### 신규 파일
- api.hyungi.net/db/migrations/20260120000000_create_tbm_system.js
- api.hyungi.net/db/migrations/20260120000001_add_tbm_page.js
- api.hyungi.net/models/tbmModel.js
- api.hyungi.net/models/pageAccessModel.js
- api.hyungi.net/controllers/tbmController.js
- api.hyungi.net/controllers/pageAccessController.js
- api.hyungi.net/routes/tbmRoutes.js
- web-ui/pages/work/tbm.html
- web-ui/pages/admin/page-access.html
- web-ui/js/page-access-management.js
- docs/TBM_DEPLOYMENT_GUIDE.md
### 수정 파일
- api.hyungi.net/config/routes.js (TBM 라우트 추가)
- web-ui/js/load-navbar.js (role 매칭 버그 수정)
- web-ui/pages/admin/workers.html (HTML 구조 수정)
- web-ui/pages/dashboard.html (이모지 제거)
- web-ui/css/design-system.css (색상 팔레트 추가)
- web-ui/css/modern-dashboard.css (가독성 개선)
- web-ui/js/modern-dashboard.js (SVG 아이콘 적용)
## 배포 시 주의사항
⚠️ 본 서버 배포 시 반드시 마이그레이션 실행 필요:
```bash
npm run db:migrate
```
상세한 배포 절차는 docs/TBM_DEPLOYMENT_GUIDE.md 참조
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## 주요 변경사항
### 1. Design System 색상 업데이트
- 하늘색 계열 primary 색상으로 변경 (#0ea5e9, #38bdf8, #7dd3fc)
- CSS 변수 추가: --header-gradient
### 2. Navbar 컴포넌트 표준화
- 50개 이상의 하드코딩 값을 CSS 변수로 변경
- 모든 페이지에서 동일한 헤더 스타일 적용
### 3. 중복 코드 제거 (102줄)
- dashboard.html: 50줄 → 2줄 (navbar 컴포넌트로 교체)
- work/report-view.html: 54줄 → 2줄 (navbar 컴포넌트로 교체)
- modern-dashboard.css: 중복 헤더 스타일 제거
- project-management.css: 중복 헤더 스타일 제거
### 4. 표준 레이아웃 템플릿 생성
- dashboard-layout.html (대시보드용)
- work-layout.html (작업 페이지용)
- admin-layout.html (관리자 페이지용)
- simple-layout.html (프로필/설정용)
- templates/README.md (사용 가이드)
### 5. 누락된 design-system.css 추가
- work/report-view.html
- work/analysis.html
- admin/accounts.html
### 6. ES6 Module 문법 수정
- load-navbar.js: type="module" 추가
- modern-dashboard.js: navbar 엘리먼트 안전 처리
## 문서 업데이트
- CODING_GUIDE.md: 표준 컴포넌트 사용법 추가
- 개발 log/2026-01-20-ui-standardization-phase1.md: 상세 작업 로그
## 영향
- 수정: 10개 파일
- 신규: 6개 파일 (템플릿 5개 + 로그 1개)
- 코드 감소: -102줄
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Backend: Auto-sync work reports with attendance records
- Backend: Lazy initialization of daily active worker records
- Frontend: Real-time attendance status on Group Leader Dashboard
- 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 오류 수정
- 월별 캘린더 UI로 작업 현황을 한눈에 확인 가능
- 미입력(빨강), 부분입력(주황), 확인필요(보라), 이상없음(초록) 상태 표시
- 범례 아이콘(●)을 사용한 직관적인 상태 표시
- 날짜 클릭 시 해당일 작업자별 상세 현황 모달
- 작업자 클릭 시 개별 작업 입력/수정 모달
- 휴가 처리 기능 (연차, 반차, 반반차, 조퇴)
- 월별 집계 데이터 최적화로 API 호출 최소화
백엔드:
- monthly_worker_status, monthly_summary 테이블 추가
- 자동 집계 stored procedure 및 trigger 구현
- 확인필요(12시간 초과) 상태 감지 로직
- 출석 관리 시스템 확장
프론트엔드:
- 캘린더 그리드 UI 구현
- 상태별 색상 및 아이콘 표시
- 모달 기반 상세 정보 표시
- 반응형 디자인 적용
🎯 문제 해결:
- 빠른 작업 카드들이 가운데 몰려있고 양쪽에 과도한 여백 발생
- 화면 공간 활용도가 낮아 사용자 경험 저하
📐 레이아웃 최적화:
1. 메인 컨테이너 확장:
- 최대 너비: 1400px → 1600px (200px 확장)
- 좌우 패딩: var(--space-6) → var(--space-4) (축소)
- 더 넓은 콘텐츠 영역 확보
2. 카드 그리드 개선:
- 카드 간격: var(--space-4) → var(--space-6) (확대)
- 전체 너비 활용: width: 100%, max-width: none
- 4개 카드가 화면 전체에 균등 분배
✅ 개선 효과:
- 양쪽 여백 최소화로 공간 효율성 극대화
- 카드들이 화면 전체에 균등하게 분산
- 더 넓은 클릭 영역으로 사용성 향상
- 시각적 균형감 개선
📱 반응형 호환성:
- 기존 태블릿/모바일 반응형 디자인 유지
- 데스크톱에서만 확장된 레이아웃 적용
- 모든 디바이스에서 최적화된 경험
🎨 시각적 개선:
- 카드 간 적절한 간격으로 가독성 향상
- 전체적인 레이아웃 밸런스 개선
- 프리미엄 느낌의 넓은 공간 활용
결과: 화면 공간을 효율적으로 활용하는 최적화된 레이아웃
테스트: http://localhost:20000/pages/dashboard/group-leader.html
🎨 프리미엄 카드 디자인:
1. 고급스러운 그라데이션 배경
- 기본: 화이트 → 라이트 그레이 그라데이션
- 호버: 화이트 → 블루 틴트 그라데이션
- 부드러운 색상 전환 효과
2. 동적 상단 그라데이션 바
- 4색 그라데이션 (블루, 퍼플, 시안, 그린)
- 3초 주기 애니메이션 효과
- 호버 시 나타나는 시각적 피드백
✨ 3D 호버 효과:
1. 카드 전체:
- Y축 -8px 이동 + 2% 확대
- 고급 그림자 효과 (다층 그림자)
- 0.4초 cubic-bezier 애니메이션
2. 아이콘 개선:
- 크기 확대 (64px → 80px)
- 호버 시 15% 확대 + 5도 회전
- 색상 변화 (라이트 블루 → 다크 블루)
- 3D 그림자 및 테두리 효과
🎯 인터랙션 개선:
1. 화살표 버튼:
- 원형 배경 추가 (32px)
- 슬라이드 + 스케일 애니메이션
- 호버 시 블루 그라데이션 활성화
2. 텍스트 색상 변화:
- 제목: 다크 그레이 → 다크 블루
- 설명: 미디엄 그레이 → 다크 그레이
- 부드러운 색상 전환
📱 반응형 최적화:
- 모바일: 아이콘 60px, 회전 각도 3도로 조정
- 태블릿: 2열 그리드 유지
- 데스크톱: 4열 그리드 최적화
🚀 성능 최적화:
- GPU 가속 애니메이션 (transform, opacity)
- 최적화된 cubic-bezier 전환
- 레이어 분리를 통한 렌더링 성능 향상
🎨 시각적 효과:
- 방사형 그라데이션 오버레이
- 다층 그림자 시스템
- 부드러운 색상 전환
- 프리미엄 느낌의 시각적 계층
결과: 사용자 경험을 크게 향상시키는 매력적이고 인터랙티브한 카드 디자인
테스트: http://localhost:20000/pages/dashboard/group-leader.html
🗑️ 불필요한 요소 제거:
- 상단 4개 요약 카드 완전 제거 (오늘 작업자, 총 작업시간, 진행 프로젝트, 오류발생)
- 복잡한 통계 정보 제거로 집중도 향상
- 관련 JavaScript 로직 정리
🔄 레이아웃 구조 개선:
1. 빠른 작업 섹션을 최상단으로 이동
- 4열 그리드로 확장 (기존 2x2 → 1x4)
- 전체 너비 활용으로 더 넓은 클릭 영역
- 주요 기능에 대한 접근성 극대화
2. 오늘의 작업 현황을 전체 너비로 확장
- 기존 50% → 100% 너비 활용
- 더 많은 정보 표시 공간 확보
- 시각적 중요도 강화
🎨 시각적 개선:
1. 작업 현황 컨테이너 개선:
- 그라데이션 배경 적용
- 상단 컬러 바 추가 (primary → secondary 그라데이션)
- 높이 증가 (300px → 400px)
- 더 세련된 시각적 효과
2. 반응형 디자인 최적화:
- 데스크톱: 4열 빠른 작업
- 태블릿: 2열 빠른 작업
- 모바일: 1열 빠른 작업
- 작업 현황 높이 자동 조정
✅ 사용자 경험 개선:
- 핵심 기능 우선 배치로 효율성 증대
- 불필요한 정보 제거로 인지 부하 감소
- 더 직관적이고 단순한 인터페이스
- 주요 작업에 대한 빠른 접근성
🎯 결과:
- 깔끔하고 집중된 대시보드
- 주요 기능 접근성 극대화
- 시각적 계층 구조 명확화
- 모든 디바이스에서 최적화된 경험
테스트: http://localhost:20000/pages/dashboard/group-leader.html
🗑️ 불필요한 섹션 제거:
- 작업자별 현황 섹션 완전 제거
- 뷰 컨트롤 버튼 (목록형/카드형) 제거
- 관련 JavaScript 로직 정리
🎨 빠른 작업 영역 대폭 개선:
1. 레이아웃 변경:
- 3열 → 2열 그리드로 변경 (더 넓은 공간 확보)
- 빠른 작업 영역 확대 (1/3 → 1/2)
2. 카드 디자인 개선:
- 2x2 그리드 레이아웃으로 4개 카드 배치
- 큰 아이콘 (64px) 및 중앙 정렬
- 그라데이션 배경 및 호버 효과
- 상단 컬러 바 및 화살표 애니메이션
3. 시각적 개선:
- 카드 높이 통일 (160px)
- 부드러운 호버 애니메이션 (translateY, scale)
- 아이콘 확대 효과 및 그라데이션
- 더 자세한 설명 텍스트
✅ 사용자 경험 개선:
- 핵심 기능에 집중된 깔끔한 레이아웃
- 직관적이고 매력적인 카드 디자인
- 반응형 디자인 (모바일: 1열, 태블릿: 2열)
- 접근성 향상 (큰 클릭 영역, 명확한 피드백)
🎯 결과:
- 불필요한 정보 제거로 집중도 향상
- 주요 기능 접근성 대폭 개선
- 모던하고 직관적인 사용자 인터페이스
테스트: http://localhost:20000/pages/dashboard/group-leader.html
🎨 한글 기반 모던 디자인 시스템:
- design-system.css: 포괄적인 디자인 토큰 및 컴포넌트 시스템
- CSS 변수 기반 색상, 타이포그래피, 간격, 그림자 체계
- 반응형 그리드, 플렉스 유틸리티, 애니메이션 시스템
- 카드, 버튼, 배지, 상태 표시기 등 재사용 가능한 컴포넌트
📊 모던 대시보드 구현:
- modern-dashboard.html: 깔끔하고 직관적인 대시보드 레이아웃
- 실시간 시간 표시, 사용자 프로필 드롭다운
- 4개 요약 카드: 작업자 수, 작업 시간, 프로젝트 수, 오류 건수
- 프로젝트별 작업 현황 시각화
- 작업자 현황 카드/리스트 뷰 전환 기능
🚀 고급 기능:
- modern-dashboard.js: ES6 모듈 기반 JavaScript
- 실시간 데이터 로딩 및 캐싱
- 토스트 알림 시스템
- 로딩/에러 상태 처리
- 반응형 디자인 (모바일 최적화)
✨ 사용자 경험 개선:
- 부드러운 애니메이션 및 호버 효과
- 직관적인 아이콘 및 한글 레이블
- 접근성 고려 (키보드 네비게이션, 색상 대비)
- 일관된 시각적 계층 구조
접근: http://localhost:20000/pages/dashboard/modern-dashboard.html
