feat: 대시보드 작업장 현황 지도 구현
- 실시간 작업장 현황을 지도로 시각화 - 작업장 관리 페이지에서 정의한 구역 정보 활용 - TBM 작업자 및 방문자 현황 표시 주요 변경사항: - dashboard.html: 작업장 현황 섹션 추가 (기존 작업 현황 테이블 제거) - workplace-status.js: 지도 렌더링 및 데이터 통합 로직 구현 - modern-dashboard.js: 삭제된 DOM 요소 조건부 체크 추가 시각화 방식: - 인원 없음: 회색 테두리 + 작업장 이름 - 내부 작업자: 파란색 영역 + 인원 수 - 외부 방문자: 보라색 영역 + 인원 수 - 둘 다: 초록색 영역 + 총 인원 수 기술 구현: - Canvas API 기반 사각형 영역 렌더링 - map-regions API를 통한 데이터 일관성 보장 - 클릭 이벤트로 상세 정보 모달 표시 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
138
DEV_LOG.md
138
DEV_LOG.md
@@ -1,6 +1,142 @@
|
||||
# 개발 진행 로그
|
||||
|
||||
## 📅 Recent Updates (2025-12-19)
|
||||
## 📅 Recent Updates (2026-01-29)
|
||||
|
||||
### 🗺️ 대시보드 작업장 현황 지도 구현 (2026-01-29)
|
||||
**개요**: 대시보드에 실시간 작업장 현황을 지도로 시각화하여 작업자 및 방문자 현황을 한눈에 파악
|
||||
|
||||
**배경**:
|
||||
- 기존 "오늘의 작업 현황" 테이블 방식은 직관성 부족
|
||||
- 작업장별 위치와 인원 현황을 시각적으로 표시할 필요
|
||||
- 작업장 관리 페이지에서 설정한 구역 정보 활용
|
||||
|
||||
**구현 내용**:
|
||||
1. **대시보드 UI 개편**
|
||||
- **제거**: "오늘의 작업 현황" 테이블 섹션
|
||||
- **추가**: "작업장 현황" 지도 섹션
|
||||
- 공장 선택 드롭다운 (제1공장 기본 선택)
|
||||
- 실시간 새로고침 버튼
|
||||
|
||||
2. **작업장 현황 지도 기능** (`web-ui/js/workplace-status.js`)
|
||||
- **데이터 소스**:
|
||||
- `map-regions` API: 작업장 관리 페이지에서 정의한 구역 정보
|
||||
- `tbm/sessions` API: 금일 TBM 작업 정보
|
||||
- `workplace-visits/requests` API: 금일 방문자 신청 정보
|
||||
|
||||
- **시각화 방식**:
|
||||
- 모든 작업장 구역을 사각형으로 표시
|
||||
- 인원 없음: 회색 테두리 + 작업장 이름
|
||||
- 내부 작업자만: 파란색 영역 + 인원 수 배지
|
||||
- 외부 방문자만: 보라색 영역 + 인원 수 배지
|
||||
- 작업자+방문자: 초록색 영역 + 총 인원 수 배지
|
||||
|
||||
- **상호작용**:
|
||||
- 작업장 구역 클릭 → 상세 정보 모달 표시
|
||||
- 내부 작업자: 작업명 + 인원 수 + 작업 위치 + 프로젝트명
|
||||
- 외부 방문자: 업체명 + 인원 수 + 방문 시간 + 목적
|
||||
|
||||
3. **TBM 데이터 통합**
|
||||
- 세션별 작업 정보 집계 (`task_name`, `team_member_count`)
|
||||
- 조장 포함 총 인원 계산
|
||||
- Draft 상태 세션도 예정 작업으로 표시
|
||||
|
||||
4. **기술적 구현**:
|
||||
- Canvas API 기반 지도 렌더링
|
||||
- 사각형 좌표 변환 (퍼센트 → 픽셀)
|
||||
- 마우스 클릭 위치를 영역 좌표로 매핑
|
||||
- 작업장 관리 페이지와 동일한 `map-regions` API 사용으로 데이터 일관성 보장
|
||||
|
||||
**수정 파일**:
|
||||
- `web-ui/pages/dashboard.html` - 작업장 현황 섹션 추가
|
||||
- `web-ui/js/workplace-status.js` - 신규 생성 (지도 렌더링 및 데이터 로직)
|
||||
- `web-ui/js/modern-dashboard.js` - 삭제된 DOM 요소 조건부 체크 추가
|
||||
|
||||
**효과**:
|
||||
- 작업장별 실시간 인원 현황을 시각적으로 파악 가능
|
||||
- 작업 배치 및 안전 관리 의사결정 지원
|
||||
- 외부 방문자 위치 추적으로 안전 관리 강화
|
||||
|
||||
---
|
||||
|
||||
### 🏖️ 휴가 관리 시스템 리팩토링 및 페이지 분리 (2026-01-29)
|
||||
**개요**: 코딩 가이드 준수를 위해 536줄의 단일 파일을 2개 페이지로 분리하고 공통 함수 라이브러리 생성
|
||||
|
||||
**배경**:
|
||||
- 기존 `vacation-management.html` (536줄) - 코딩 가이드 위반 (파일 길이 초과)
|
||||
- 단일 파일에 작업자/관리자 기능이 혼재
|
||||
- 코드 중복 발생
|
||||
|
||||
**구조 개선**:
|
||||
1. **공통 함수 라이브러리 생성**
|
||||
- **파일**: `web-ui/js/vacation-common.js`
|
||||
- **역할**: 모든 휴가 페이지에서 사용하는 공통 함수 모음
|
||||
- **주요 함수**:
|
||||
- `loadWorkers()`: 작업자 목록 로드
|
||||
- `loadVacationTypes()`: 휴가 유형 로드
|
||||
- `getCurrentUser()`: 현재 사용자 정보 조회
|
||||
- `renderVacationRequests()`: 휴가 신청 목록 렌더링
|
||||
- `approveVacationRequest()`: 휴가 승인
|
||||
- `rejectVacationRequest()`: 휴가 거부
|
||||
- `deleteVacationRequest()`: 휴가 신청 삭제
|
||||
|
||||
2. **2개 페이지로 분리**
|
||||
- **`vacation-request.html`** (작업자 휴가 신청)
|
||||
- 역할: 휴가 신청 및 본인 신청 내역 확인
|
||||
- 권한: 모든 작업자 (자동으로 본인 선택됨)
|
||||
- 기능:
|
||||
- 휴가 잔여 현황 표시
|
||||
- 휴가 신청 폼
|
||||
- 내 신청 내역 (삭제 가능 - pending만)
|
||||
|
||||
- **`vacation-management.html`** (관리자 휴가 관리)
|
||||
- 역할: 휴가 승인/직접입력/전체내역 관리 (3개 탭)
|
||||
- 권한: 관리자 전용 (system/admin)
|
||||
- 기능:
|
||||
- **탭 1: 승인 대기 목록** - 승인/거부 버튼
|
||||
- **탭 2: 직접 입력** - 승인 절차 없이 휴가 정보 직접 입력
|
||||
- 작업자 선택 시 휴가 잔여 표시
|
||||
- 입력 즉시 승인 상태로 저장
|
||||
- 최근 입력 내역 표시
|
||||
- **탭 3: 전체 신청 내역** - 날짜 필터링 지원
|
||||
|
||||
3. **데이터베이스 페이지 등록**
|
||||
- **마이그레이션**: `20260129000003_update_vacation_pages.js`
|
||||
- **변경사항**:
|
||||
- 기존 `vacation-management` 페이지 삭제
|
||||
- 신규 2개 페이지 등록 (vacation-request, vacation-management)
|
||||
- `is_admin_only` 플래그로 권한 구분 (vacation-request: 0, vacation-management: 1)
|
||||
- `display_order`로 표시 순서 관리
|
||||
|
||||
4. **파일 정리**
|
||||
- 기존: `vacation-management.html` → `.old` 확장자로 이름 변경
|
||||
- 향후: 충분한 테스트 후 삭제 예정
|
||||
|
||||
**기술적 개선사항**:
|
||||
- 코드 중복 제거: 공통 함수를 vacation-common.js로 추출
|
||||
- 권한 체크 강화: 페이지 로드 시 access_level 확인 및 리다이렉트
|
||||
- 이벤트 기반 UI 업데이트: 'vacation-updated' 이벤트로 페이지 간 동기화
|
||||
- 역할 기반 접근 제어: 작업자는 본인 정보만, 관리자는 전체 관리
|
||||
- 탭 기반 UI: 관리자 페이지는 3개 탭으로 기능 구분
|
||||
|
||||
**파일 변경사항**:
|
||||
```
|
||||
[NEW] web-ui/js/vacation-common.js (공통 함수 라이브러리)
|
||||
[NEW] web-ui/pages/common/vacation-request.html (작업자 휴가 신청)
|
||||
[NEW] web-ui/pages/common/vacation-management.html (관리자 3-탭 관리)
|
||||
[NEW] api.hyungi.net/db/migrations/20260129000003_update_vacation_pages.js
|
||||
[UPDATED] web-ui/pages/dashboard.html (휴가 관련 링크 업데이트)
|
||||
[RENAMED] web-ui/pages/common/vacation-management.html → vacation-management.html.old
|
||||
```
|
||||
|
||||
**코딩 가이드 준수**:
|
||||
- ✅ 파일 길이 제한 준수 (기존 536줄 → 각 350줄 이하)
|
||||
- ✅ 공통 로직 분리 (DRY 원칙)
|
||||
- ✅ 단일 책임 원칙 (각 페이지가 명확한 역할)
|
||||
- ✅ 역할 기반 접근 제어 명확화
|
||||
|
||||
---
|
||||
|
||||
## 📅 Previous Updates (2025-12-19)
|
||||
|
||||
### WorkAnalysis 리팩토링 완료
|
||||
**내용**: 복잡한 통계 로직을 포함하던 `workAnalysisController.js`를 리팩토링함.
|
||||
|
||||
Reference in New Issue
Block a user