4d0c4c0801
## 주요 변경사항 ### 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>
237 lines
11 KiB
HTML
237 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>TBM 관리 | (주)테크니컬코리아</title>
|
||
<link rel="stylesheet" href="/css/design-system.css">
|
||
<link rel="stylesheet" href="/css/common.css?v=2">
|
||
<link rel="stylesheet" href="/css/project-management.css?v=3">
|
||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||
<script src="/js/auth-check.js?v=1" defer></script>
|
||
<script type="module" src="/js/api-config.js?v=3"></script>
|
||
</head>
|
||
<body>
|
||
<div class="work-report-container">
|
||
<!-- 네비게이션 바 -->
|
||
<div id="navbar-container"></div>
|
||
|
||
<!-- 메인 콘텐츠 -->
|
||
<main class="work-report-main">
|
||
<div class="dashboard-main">
|
||
<div class="page-header">
|
||
<div class="page-title-section">
|
||
<h1 class="page-title">
|
||
<span class="title-icon">🛠️</span>
|
||
TBM (Tool Box Meeting) 관리
|
||
</h1>
|
||
<p class="page-description">아침 안전 회의 및 팀 구성 관리</p>
|
||
</div>
|
||
|
||
<div class="page-actions">
|
||
<input type="date" id="tbmDate" class="form-control" style="display: inline-block; width: auto;">
|
||
<button class="btn btn-secondary" onclick="loadTodayTbm()">
|
||
<span class="btn-icon">📅</span>
|
||
오늘
|
||
</button>
|
||
<button class="btn btn-primary" onclick="openNewTbmModal()">
|
||
<span class="btn-icon">➕</span>
|
||
새 TBM 시작
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TBM 세션 목록 -->
|
||
<div class="projects-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">TBM 세션 목록</h2>
|
||
<div class="project-stats">
|
||
<span class="stat-item">
|
||
<span class="stat-icon">📋</span>
|
||
총 <span id="totalSessions">0</span>개
|
||
</span>
|
||
<span class="stat-item" style="color: #16a34a;">
|
||
<span class="stat-icon">✅</span>
|
||
완료 <span id="completedSessions">0</span>개
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="projects-grid" id="tbmSessionsGrid">
|
||
<!-- TBM 세션 카드들이 여기에 동적으로 생성됩니다 -->
|
||
</div>
|
||
|
||
<!-- Empty State -->
|
||
<div class="empty-state" id="emptyState" style="display: none;">
|
||
<div class="empty-icon">🛠️</div>
|
||
<h3>등록된 TBM 세션이 없습니다.</h3>
|
||
<p>\"새 TBM 시작\" 버튼을 눌러 오늘의 TBM을 시작해보세요.</p>
|
||
<button class="btn btn-primary" onclick="openNewTbmModal()">
|
||
➕ 첫 TBM 시작하기
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- TBM 생성/수정 모달 -->
|
||
<div id="tbmModal" class="modal-overlay" style="display: none;">
|
||
<div class="modal-container" style="max-width: 800px;">
|
||
<div class="modal-header">
|
||
<h2 id="modalTitle">새 TBM 시작</h2>
|
||
<button class="modal-close-btn" onclick="closeTbmModal()">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<form id="tbmForm" onsubmit="event.preventDefault(); saveTbmSession();">
|
||
<input type="hidden" id="sessionId">
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">TBM 날짜 *</label>
|
||
<input type="date" id="sessionDate" class="form-control" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">팀장 *</label>
|
||
<select id="leaderId" class="form-control" required>
|
||
<option value="">팀장 선택...</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">프로젝트</label>
|
||
<select id="projectId" class="form-control">
|
||
<option value="">프로젝트 선택...</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">작업 장소</label>
|
||
<input type="text" id="workLocation" class="form-control" placeholder="작업 현장 위치">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">작업 내용</label>
|
||
<textarea id="workDescription" class="form-control" rows="3" placeholder="오늘 진행할 작업 내용을 입력하세요"></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">안전 관련 특이사항</label>
|
||
<textarea id="safetyNotes" class="form-control" rows="2" placeholder="안전 주의사항이나 특이사항"></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">시작 시간</label>
|
||
<input type="time" id="startTime" class="form-control">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" onclick="closeTbmModal()">취소</button>
|
||
<button type="button" class="btn btn-primary" onclick="saveTbmSession()">
|
||
💾 저장 및 팀 구성하기
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 팀 구성 모달 -->
|
||
<div id="teamModal" class="modal-overlay" style="display: none;">
|
||
<div class="modal-container" style="max-width: 900px;">
|
||
<div class="modal-header">
|
||
<h2>팀 구성</h2>
|
||
<button class="modal-close-btn" onclick="closeTeamModal()">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div class="section-header" style="margin-bottom: 1rem;">
|
||
<h3 style="font-size: 1rem; font-weight: 600;">작업자 선택</h3>
|
||
<div>
|
||
<button class="btn btn-sm btn-secondary" onclick="selectAllWorkers()">전체 선택</button>
|
||
<button class="btn btn-sm btn-secondary" onclick="deselectAllWorkers()">전체 해제</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="workerSelectionGrid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; max-height: 400px; overflow-y: auto; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.5rem;">
|
||
<!-- 작업자 체크박스 목록이 여기에 생성됩니다 -->
|
||
</div>
|
||
|
||
<div style="margin-top: 1.5rem;">
|
||
<h3 style="font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem;">선택된 팀원 <span id="selectedCount">0</span>명</h3>
|
||
<div id="selectedWorkersList" style="display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 50px; padding: 0.75rem; background: #f9fafb; border-radius: 0.5rem;">
|
||
<p style="margin: 0; color: #9ca3af; font-size: 0.875rem;">작업자를 선택해주세요</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" onclick="closeTeamModal()">취소</button>
|
||
<button type="button" class="btn btn-primary" onclick="saveTeamComposition()">
|
||
👥 팀 구성 완료
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 안전 체크리스트 모달 -->
|
||
<div id="safetyModal" class="modal-overlay" style="display: none;">
|
||
<div class="modal-container" style="max-width: 700px;">
|
||
<div class="modal-header">
|
||
<h2>안전 체크리스트</h2>
|
||
<button class="modal-close-btn" onclick="closeSafetyModal()">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div id="safetyChecklistContainer" style="max-height: 500px; overflow-y: auto;">
|
||
<!-- 안전 체크리스트가 여기에 생성됩니다 -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" onclick="closeSafetyModal()">취소</button>
|
||
<button type="button" class="btn btn-primary" onclick="saveSafetyChecklist()">
|
||
✅ 안전 체크 완료
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TBM 완료 모달 -->
|
||
<div id="completeModal" class="modal-overlay" style="display: none;">
|
||
<div class="modal-container" style="max-width: 500px;">
|
||
<div class="modal-header">
|
||
<h2>TBM 완료</h2>
|
||
<button class="modal-close-btn" onclick="closeCompleteModal()">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<p style="margin-bottom: 1rem;">이 TBM 세션을 완료 처리하시겠습니까?</p>
|
||
<p style="color: #6b7280; font-size: 0.875rem;">완료 후에는 수정할 수 없습니다.</p>
|
||
|
||
<div class="form-group" style="margin-top: 1.5rem;">
|
||
<label class="form-label">종료 시간</label>
|
||
<input type="time" id="endTime" class="form-control">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" onclick="closeCompleteModal()">취소</button>
|
||
<button type="button" class="btn btn-primary" onclick="completeTbmSession()">
|
||
✅ 완료
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 토스트 알림 -->
|
||
<div class="toast-container" id="toastContainer"></div>
|
||
</div>
|
||
|
||
<script type="module" src="/js/load-navbar.js?v=5"></script>
|
||
<script type="module" src="/js/tbm.js?v=1"></script>
|
||
</body>
|
||
</html>
|