- 페이지 폴더 재구성: safety/, attendance/ 폴더 신규 생성
- work/ → safety/: 이슈 신고, 출입 신청 관련 페이지 이동
- common/ → attendance/: 근태/휴가 관련 페이지 이동
- admin/ 정리: safety-* 파일들을 safety/로 이동
- 사이드바 네비게이션 메뉴 구현
- 카테고리별 메뉴: 작업관리, 안전관리, 근태관리, 시스템관리
- 접기/펼치기 기능 및 상태 저장
- 관리자 전용 메뉴 자동 표시/숨김
- 날씨 API 연동 (기상청 단기예보)
- TBM 및 navbar에 현재 날씨 표시
- weatherService.js 추가
- 안전 체크리스트 확장
- 기본/날씨별/작업별 체크 유형 추가
- checklist-manage.html 페이지 추가
- 이슈 신고 시스템 구현
- workIssueController, workIssueModel, workIssueRoutes 추가
- DB 마이그레이션 파일 추가 (실행 대기)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 실시간 작업장 현황을 지도로 시각화
- 작업장 관리 페이지에서 정의한 구역 정보 활용
- 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>
모든 화면 크기에서 일관되고 안정적인 사용자 경험을 제공하도록
UI 컴포넌트를 전면 개선했습니다.
주요 변경사항:
- 네비게이션 바: flex-wrap, rem 단위, sticky positioning 적용
- 사용자 정보 영역: max-width로 크기 제한, 텍스트 overflow 처리
- 공통 헤더: clamp()로 반응형 폰트, 반응형 패딩 적용
- 모든 관리 페이지: ES6 모듈 로딩 통일 (type="module")
- 반응형 breakpoint: 1200px, 768px, 640px, 480px
개선 효과:
✅ 모든 페이지에서 일관된 헤더 표시
✅ 사용자 정보 영역 늘어나는 문제 해결
✅ 모든 화면 크기에서 최적화된 레이아웃
✅ rem 단위 사용으로 접근성 개선
수정된 파일:
- web-ui/components/navbar.html: 전면 리팩토링
- web-ui/css/common.css: 반응형 스타일 추가
- web-ui/pages/**/*.html: 모듈 로딩 및 버전 업데이트 (13개 파일)
- web-ui/js/*.js: 모듈 시스템 개선
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## 수정 내용
### 1. JavaScript 모듈 로딩 문제 수정
- ES6 import 사용 파일에 type="module" 속성 추가
- api-config.js, load-navbar.js, worker-management.js, project-management.js
### 2. DB 스키마 불일치 해결
- workers 테이블 실제 구조에 맞게 코드 수정
- 존재하지 않는 컬럼 제거: phone_number, email, hire_date, department, notes
- 실제 컬럼 사용: join_date, salary, annual_leave
### 3. 백엔드 수정
- workerModel.js: create, update 함수를 실제 테이블 구조에 맞게 수정
- workerController.js: 상세 로깅 추가
### 4. 프론트엔드 수정
- worker-management.js: 데이터 전송 구조 수정
- api-config.js: 에러 로깅 개선
- HTML 파일: 스크립트 type="module" 추가 및 버전 업데이트
### 5. 개발 문서
- 개발로그 추가: 2026-01-19_작업자관리_스키마_동기화.md
## 영향 범위
- 작업자 관리 페이지: 상태 변경 기능 정상화
- 프로젝트 관리 페이지: 모듈 로딩 오류 수정
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit introduces a series of refactoring changes to the web-ui
to remove hardcoded values and improve page integration.
- **Centralized Configuration:** Created to
centralize API ports, paths, and navigation URLs, replacing
hardcoded values across multiple files.
- **Modular Component Loading:** Introduced
to handle dynamic loading of common HTML components (e.g., sidebar, navbar),
using paths from .
- **Modular Navigation:** Created to centralize
page redirection logic, improving maintainability and reducing direct
manipulations.
- **Refactored Existing Modules:** Updated ,
, , and
to utilize the new , ,
and modules.
- **ES6 Module Compatibility:** Ensured loads scripts
as ES6 modules () to support statements.
- 월별 캘린더 UI로 작업 현황을 한눈에 확인 가능
- 미입력(빨강), 부분입력(주황), 확인필요(보라), 이상없음(초록) 상태 표시
- 범례 아이콘(●)을 사용한 직관적인 상태 표시
- 날짜 클릭 시 해당일 작업자별 상세 현황 모달
- 작업자 클릭 시 개별 작업 입력/수정 모달
- 휴가 처리 기능 (연차, 반차, 반반차, 조퇴)
- 월별 집계 데이터 최적화로 API 호출 최소화
백엔드:
- monthly_worker_status, monthly_summary 테이블 추가
- 자동 집계 stored procedure 및 trigger 구현
- 확인필요(12시간 초과) 상태 감지 로직
- 출석 관리 시스템 확장
프론트엔드:
- 캘린더 그리드 UI 구현
- 상태별 색상 및 아이콘 표시
- 모달 기반 상세 정보 표시
- 반응형 디자인 적용
🔐 토큰 만료 시 자동 로그아웃 기능:
1. JWT 토큰 만료 시간 대폭 연장:
- 액세스 토큰: 24시간 → 7일
- 리프레시 토큰: 7일 → 30일
- 사용자 편의성 크게 향상
2. 토큰 만료 감지 및 처리:
- isTokenExpired() 함수 추가
- JWT 페이로드 파싱하여 exp 확인
- 현재 시간과 비교하여 만료 여부 판단
3. 자동 로그아웃 처리:
- API 호출 시 401 오류 감지
- 주기적 토큰 만료 확인 (5분마다)
- 만료 시 자동 인증 데이터 정리
- 사용자 알림 후 로그인 페이지 리다이렉트
4. 개선된 인증 데이터 관리:
- clearAuthData() 함수로 통합 관리
- token, user, userInfo, currentUser 모두 정리
- 메모리 누수 방지
🐛 데이터베이스 테이블명 수정:
1. projectModel.js:
- Projects → projects (대문자 → 소문자)
- 실제 DB 테이블명과 일치
2. taskModel.js:
- Tasks → tasks (대문자 → 소문자)
- 실제 DB 테이블명과 일치
3. API 오류 해결:
- '테이블이 존재하지 않습니다' 오류 수정
- projects, tasks API 정상 작동
✅ 사용자 경험 개선:
- 토큰 만료로 인한 예상치 못한 오류 방지
- 명확한 만료 알림 메시지
- 자동 로그아웃으로 보안 강화
- 더 긴 세션 유지로 편의성 향상
🔧 기술적 개선:
- JWT 페이로드 안전한 파싱
- 에러 핸들링 강화
- 주기적 백그라운드 확인
- 전역 함수로 재사용성 향상
🎯 결과:
- 안정적인 인증 시스템
- 사용자 친화적인 세션 관리
- 보안성과 편의성의 균형
- API 호출 오류 해결
테스트:
- 토큰 만료 후 자동 로그아웃 확인
- projects, tasks API 정상 작동 확인
🐛 해결된 문제:
- SyntaxError: Unexpected keyword 'export' (api-config.js:46)
- API 함수를 로드할 수 없는 문제
🔧 수정 내용:
- export function getAuthHeaders() → function getAuthHeaders()
- export async function testApiConnection() → async function testApiConnection()
- 모든 ES6 모듈 문법 완전 제거
✅ 최종 결과:
- 모든 JavaScript 오류 해결
- window.apiCall 정상 로드
- 대시보드 완전 정상 작동
테스트: http://localhost:20000/pages/dashboard/group-leader.html
🐛 문제 해결:
- SyntaxError: Unexpected token '{'. import call expects one or two arguments
- SyntaxError: Unexpected keyword 'export'
- ES6 모듈 문법이 브라우저에서 제대로 로드되지 않는 문제
🔧 수정 내용:
- modern-dashboard.js: ES6 import/export → 브라우저 호환 스크립트
- api-config.js: export 문법 → window 전역 변수 설정
- group-leader.html: type="module" 제거, 일반 스크립트 로딩
✅ 브라우저 호환성:
- window.API, window.apiCall 전역 변수 사용
- window.getAuthHeaders, window.ensureAuthenticated 함수 제공
- 모든 함수를 window 객체에 등록하여 전역 접근 가능
🚀 개선 효과:
- 모든 브라우저에서 JavaScript 오류 없이 로딩
- 모던 대시보드 기능 정상 작동
- API 호출 및 인증 시스템 안정화
테스트: http://localhost:20000/pages/dashboard/group-leader.html
- 시스템 관리자 전용 웹페이지 구현 (system.html)
- 깔끔한 흰색 배경의 올드스쿨 스타일 적용
- 반응형 그리드 레이아웃으로 카드 배치 개선
- ES6 모듈 방식으로 JavaScript 구조 개선
- 이벤트 리스너 방식으로 버튼 클릭 처리 변경
- 시스템 상태, 사용자 통계, 계정 관리 기능 구현
- 시스템 로그 조회 기능 추가
- 나머지 관리 기능들 스켈레톤 구현 (개발 중 상태)
- 인코딩 문제 해결을 위한 영어 로그 메시지 적용
- hyungi 계정을 system 권한으로 설정
- JWT 토큰에 role 필드 추가
- 시스템 전용 API 엔드포인트 구현
주요 변경사항:
- web-ui/pages/dashboard/system.html: 시스템 관리자 전용 페이지
- web-ui/css/system-dashboard.css: 시스템 대시보드 전용 스타일
- web-ui/js/system-dashboard.js: 시스템 대시보드 로직
- api.hyungi.net/controllers/systemController.js: 시스템 API 컨트롤러
- api.hyungi.net/routes/systemRoutes.js: 시스템 API 라우트
- api.hyungi.net/controllers/authController.js: 시스템 권한 로그인 처리
- api.hyungi.net/services/auth.service.js: JWT 토큰에 role 필드 추가
