feat: TBM 시스템 구축 및 페이지 권한 관리 기능 추가

## 주요 변경사항 ### 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>
2026-01-20 15:38:17 +09:00
parent 0ec099b493
commit 4d0c4c0801
18 changed files with 3321 additions and 107 deletions
--- a/web-ui/css/design-system.css
+++ b/web-ui/css/design-system.css
@@ -58,6 +58,28 @@
  --info-500: #03a9f4;
  --info-700: #0288d1;

+  /* 따뜻한 중성 색상 (베이지/크림) */
+  --warm-50: #fafaf9;   /* 매우 밝은 크림 */
+  --warm-100: #f5f5f4;  /* 밝은 크림 */
+  --warm-200: #e7e5e4;  /* 베이지 */
+  --warm-300: #d6d3d1;  /* 중간 베이지 */
+  --warm-400: #a8a29e;  /* 진한 베이지 */
+  --warm-500: #78716c;  /* 그레이 베이지 */
+
+  /* 부드러운 작업 상태 색상 (눈이 편한 톤) */
+  --status-success-bg: #dcfce7;    /* 부드러운 초록 배경 */
+  --status-success-text: #16a34a;  /* 부드러운 초록 텍스트 */
+  --status-info-bg: #e0f2fe;       /* 부드러운 하늘색 배경 */
+  --status-info-text: #0284c7;     /* 부드러운 하늘색 텍스트 */
+  --status-warning-bg: #fef3c7;    /* 부드러운 노랑 배경 */
+  --status-warning-text: #ca8a04;  /* 부드러운 노랑 텍스트 */
+  --status-error-bg: #fee2e2;      /* 부드러운 빨강 배경 */
+  --status-error-text: #dc2626;    /* 부드러운 빨강 텍스트 */
+  --status-critical-bg: #fecaca;   /* 진한 빨강 배경 */
+  --status-critical-text: #b91c1c; /* 진한 빨강 텍스트 */
+  --status-vacation-bg: #fed7aa;   /* 부드러운 주황 배경 */
+  --status-vacation-text: #ea580c; /* 부드러운 주황 텍스트 */
+
  /* 배경 색상 */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
--- a/web-ui/css/modern-dashboard.css
+++ b/web-ui/css/modern-dashboard.css
@@ -1965,3 +1965,364 @@
  color: #6b7280;
  width: 100%;
 }
+
+/* ========== 작업 현황 테이블 ========== */
+.work-status-table-container {
+  background: white;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: 1px solid #d1d5db;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
+}
+
+.work-status-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: white;
+}
+
+.work-status-table thead {
+  background: #f9fafb;
+  border-bottom: 2px solid #d1d5db;
+}
+
+.work-status-table th {
+  padding: 1rem 1.25rem;
+  text-align: left;
+  font-weight: 600;
+  color: #374151;
+  font-size: 0.875rem;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+  border-right: 1px solid #e5e7eb;
+}
+
+.work-status-table th:last-child {
+  border-right: none;
+}
+
+.work-status-table tbody tr {
+  background: white;
+  border-bottom: 1px solid #e5e7eb;
+  transition: var(--transition-fast);
+}
+
+.work-status-table tbody tr:nth-child(even) {
+  background: #fafafa;
+}
+
+.work-status-table tbody tr:hover {
+  background: #f3f4f6;
+}
+
+.work-status-table tbody tr:last-child {
+  border-bottom: none;
+}
+
+.work-status-table td {
+  padding: 1rem 1.25rem;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  vertical-align: middle;
+  border-right: 1px solid #f3f4f6;
+  color: #1f2937;
+}
+
+.work-status-table td:last-child {
+  border-right: none;
+}
+
+/* 로딩 상태 */
+.work-status-table .loading-state {
+  text-align: center;
+  padding: var(--space-12);
+  color: var(--text-tertiary);
+}
+
+.work-status-table .loading-state .spinner {
+  margin: 0 auto var(--space-4);
+}
+
+/* 작업자 정보 셀 */
+.worker-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.worker-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.875rem;
+  flex-shrink: 0;
+}
+
+.worker-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.worker-name {
+  font-weight: 600;
+  color: #111827;
+  font-size: 0.9375rem;
+  line-height: 1.2;
+}
+
+.worker-job {
+  font-size: 0.8125rem;
+  color: #6b7280;
+  line-height: 1.2;
+}
+
+/* 상태 배지 */
+.worker-status {
+  white-space: nowrap;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.875rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  white-space: nowrap;
+  border: 1px solid;
+}
+
+.status-badge .status-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.status-badge.status-success {
+  background: #dcfce7;
+  color: #166534;
+  border-color: #86efac;
+}
+
+.status-badge.status-info {
+  background: #dbeafe;
+  color: #1e40af;
+  border-color: #93c5fd;
+}
+
+.status-badge.status-warning {
+  background: #fef3c7;
+  color: #92400e;
+  border-color: #fde047;
+}
+
+.status-badge.status-error {
+  background: #fee2e2;
+  color: #991b1b;
+  border-color: #fca5a5;
+}
+
+.status-badge.status-critical {
+  background: #fecaca;
+  color: #7f1d1d;
+  border-color: #f87171;
+}
+
+.status-badge.status-vacation {
+  background: #fed7aa;
+  color: #9a3412;
+  border-color: #fdba74;
+}
+
+.status-badge.status-incomplete {
+  background: #f3f4f6;
+  color: #374151;
+  border-color: #d1d5db;
+}
+
+.status-badge.status-overtime {
+  background: #e0e7ff;
+  color: #3730a3;
+  border-color: #a5b4fc;
+}
+
+/* 작업시간 셀 */
+.worker-hours {
+  white-space: nowrap;
+}
+
+.hours-value {
+  font-weight: 600;
+  color: #111827;
+  font-size: 1rem;
+}
+
+.hours-value.hours-warning {
+  color: #dc2626;
+  font-weight: 700;
+}
+
+/* 작업건수 셀 */
+.worker-tasks {
+  white-space: nowrap;
+}
+
+.tasks-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.task-count {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.task-label {
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.task-value {
+  color: #111827;
+  font-weight: 600;
+}
+
+.task-count.task-error .task-label {
+  color: #dc2626;
+}
+
+.task-count.task-error .task-value {
+  color: #991b1b;
+  font-weight: 700;
+}
+
+/* 액션 버튼 */
+.worker-actions {
+  white-space: nowrap;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.875rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: 1px solid;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.action-btn svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.action-btn.btn-edit {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.action-btn.btn-edit:hover {
+  background: #2563eb;
+  border-color: #2563eb;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+.action-btn.btn-vacation {
+  background: white;
+  color: #ea580c;
+  border-color: #ea580c;
+}
+
+.action-btn.btn-vacation:hover {
+  background: #ea580c;
+  color: white;
+}
+
+.action-btn.btn-confirm {
+  background: white;
+  color: #16a34a;
+  border-color: #16a34a;
+}
+
+.action-btn.btn-confirm:hover {
+  background: #16a34a;
+  color: white;
+}
+
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+  .work-status-table {
+    display: block;
+  }
+
+  .work-status-table thead {
+    display: none;
+  }
+
+  .work-status-table tbody,
+  .work-status-table tr,
+  .work-status-table td {
+    display: block;
+    width: 100%;
+  }
+
+  .work-status-table tr {
+    margin-bottom: 1rem;
+    border: 2px solid #d1d5db;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    background: white;
+  }
+
+  .work-status-table td {
+    padding: var(--space-3) 0;
+    border-bottom: 1px solid var(--warm-100);
+  }
+
+  .work-status-table td:last-child {
+    border-bottom: none;
+  }
+
+  .work-status-table td::before {
+    content: attr(data-label);
+    font-weight: var(--font-semibold);
+    display: block;
+    margin-bottom: var(--space-2);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+  }
+
+  .worker-actions {
+    flex-direction: column;
+  }
+
+  .action-btn {
+    width: 100%;
+    text-align: center;
+  }
+}