Files
TK-FB-Project/DEV_LOG.md
Hyungi Ahn b6485e3140 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>
2026-01-29 15:46:47 +09:00

10 KiB

개발 진행 로그

📅 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를 리팩토링함.

  • [NEW] Service Layer: services/workAnalysisService.js 생성. 비즈니스 로직 이관.
  • [UPDATE] Model Layer: Raw SQL 쿼리를 Controller에서 Model(models/WorkAnalysis.js)로 이동. getProjectWorkTypeRawData 메서드 추가.
  • [CLEANUP] Controller: getProjectWorkTypeAnalysis 메서드가 Service를 호출하도록 단순화.

🐛 심각한 버그 수정 및 시스템 정상화 (2025-12-19)

개요: 로그인 500 에러 및 대시보드 데이터 미표시 문제 해결.

  1. DB 정상화 (Login 500 Fix)

    • 원인: 초기화된 DB(Empty) 및 테이블명 대소문자 불일치(Users vs users).
    • 조치: hyungi.sql 복원 후, 컨벤션에 맞춰 테이블명 일괄 변경(Usersusers, Projectsprojects, Workersworkers, Taskstasks).
    • 코드 수정: userModel.js, authController.js 등 관련 코드의 테이블 참조 수정.
  2. 프로젝트 조회 오류 수정 (Project API 500 Fix)

    • 원인: 구버전 스키마 복원으로 인한 projects 테이블 컬럼 부족(is_active, project_status, completed_date).
    • 조치: 마이그레이션 실행하여 누락된 컬럼 추가.
  3. 대시보드 작업자 미표시 수정

    • 원인 1 (Data): workers 테이블 내 status 값이 유효하지 않음(..). → active로 일괄 수정.
    • 원인 2 (Logic): INNER JOIN 사용으로 통계가 없는 작업자 누락. → LEFT JOIN으로 쿼리 개선(MonthlyStatusModel.js).
  4. 테스트 계정 생성

    • tester / 000000 관리자(Leader) 계정 생성.

🛠️ 작업자 및 프로젝트 관리 기능 개선 (2026-01-06)

개요: 작업자/프로젝트의 비활성화(퇴사/종료) 처리가 즉시 반영되지 않는 문제 및 로직 오류 수정.

  1. 캐시 무효화 및 필터링 적용 (Cache & Filtering)

    • 문제: 작업자/프로젝트 상태 변경 후에도 캐시가 남아있어 드롭다운 목록에서 사라지지 않음.
    • 해결:
      • WorkerController, ProjectController: 생성/수정/삭제 시 request 단위의 캐시 즉시 무효화 로직 추가.
      • WorkerController: 목록 조회 시 status 파라미터 지원 추가.
      • daily-work-report.js: 작업보고서 작성 시 active 상태인 작업자만 필터링하여 조회하도록 수정.
  2. 작업자 비활성화 오류 수정 (Bug Fix)

    • 원인: workerModel.update 쿼리에 DB에 존재하지 않는 join_date 컬럼을 업데이트하려는 시도가 있어 SQL 에러 발생.
    • 해결: workerModel.js에서 잘못된 컬럼(join_date) 참조 제거. (올바른 컬럼 hire_date는 유지)
  3. 일일 근태 추적 시스템 구현 (Daily Attendance Tracking)

    • Backend:
      • AttendanceModel.initializeDailyRecords 추가: 모든 활성 작업자에 대해 'incomplete' 상태의 근태 기록 자동 생성 (Lazy Initialization).
      • AttendanceModel.syncWithWorkReports 추가: 작업 보고서 작성/수정/삭제 시 근태 상태(미제출/부분/완료/초과) 자동 동기화.
      • dailyWorkReportModel.js에 동기화 로직 통합 (트랜잭션 후 처리).
      • attendanceService에서 상태 조회 시 초기화 로직 수행.
    • Frontend:
      • group-leader-dashboard.js 리팩토링: 모의 데이터 대신 실제 API(/attendance/daily-status) 연동.
      • modern-dashboard.css: 근태 현황 카드(worker-card) 및 그리드 스타일 추가.
      • group-leader.html: 스크립트 로드 추가 및 DOM 구조 확인.

🛡보안 및 검토 리포트 (History)

2025-07-29 보안 취약점 분석

api.hyungi.net 백엔드 서버 취약점 점검 결과.

라이브러리 심각도 상태 조치사항
tar-fs High 해결가능 npm audit fix 권장 (완료됨)
brace-expansion Low 해결가능 npm audit fix 권장 (완료됨)
pm2 Low 미해결 업데이트 대기 필요

📋 향후 계획

  1. 테스트 커버리지 확보: 리팩토링된 Service Layer에 대한 Unit Test 보강.
  2. Knex 마이그레이션: 남은 Raw SQL(Model Layer)을 Knex 쿼리빌더로 점진적 전환.
  3. API 문서화: Swagger/OpenAPI 도입 검토.