🐛 문제 해결:
- 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
🎯 기존 페이지 개선 (별도 페이지 생성 X):
- group-leader.html을 모던 디자인 시스템으로 완전 리뉴얼
- 기존 복잡한 인라인 스타일 제거 → design-system.css 활용
- modern-dashboard.js 연동으로 실시간 데이터 로딩
✨ 모던 UI/UX 적용:
- 그라데이션 헤더 → 실시간 시간 표시 + 사용자 프로필
- 4개 요약 카드: 작업자 수, 작업 시간, 프로젝트 수, 오류 건수
- 프로젝트별 작업 현황 시각화 (실제 API 데이터 기반)
- 작업자별 현황 카드/리스트 뷰 전환
- 빠른 작업 메뉴 (작업 보고서, 현황 확인, 분석, 관리)
🚀 기능 개선:
- 실시간 데이터 로딩 (작업자, 작업 현황)
- 날짜 선택기로 특정 날짜 조회
- 토스트 알림 시스템
- 로딩/에러 상태 처리
- 반응형 디자인 (모바일 최적화)
🗑️ 정리:
- modern-dashboard.html 삭제 (기존 페이지 개선으로 불필요)
- 기존 복잡한 인라인 CSS 완전 제거
- 일관된 디자인 시스템 적용
접근: http://localhost:20000/pages/dashboard/group-leader.html
🎨 한글 기반 모던 디자인 시스템:
- design-system.css: 포괄적인 디자인 토큰 및 컴포넌트 시스템
- CSS 변수 기반 색상, 타이포그래피, 간격, 그림자 체계
- 반응형 그리드, 플렉스 유틸리티, 애니메이션 시스템
- 카드, 버튼, 배지, 상태 표시기 등 재사용 가능한 컴포넌트
📊 모던 대시보드 구현:
- modern-dashboard.html: 깔끔하고 직관적인 대시보드 레이아웃
- 실시간 시간 표시, 사용자 프로필 드롭다운
- 4개 요약 카드: 작업자 수, 작업 시간, 프로젝트 수, 오류 건수
- 프로젝트별 작업 현황 시각화
- 작업자 현황 카드/리스트 뷰 전환 기능
🚀 고급 기능:
- modern-dashboard.js: ES6 모듈 기반 JavaScript
- 실시간 데이터 로딩 및 캐싱
- 토스트 알림 시스템
- 로딩/에러 상태 처리
- 반응형 디자인 (모바일 최적화)
✨ 사용자 경험 개선:
- 부드러운 애니메이션 및 호버 효과
- 직관적인 아이콘 및 한글 레이블
- 접근성 고려 (키보드 네비게이션, 색상 대비)
- 일관된 시각적 계층 구조
접근: http://localhost:20000/pages/dashboard/modern-dashboard.html
- 성능 최적화로 변경된 API 응답 구조에 맞춰 JavaScript 수정
- management-dashboard.js: workers 데이터 접근 경로 수정 (data.data 지원)
- manage-worker.js: 작업자 목록 API 응답 구조 수정
- daily-work-report.js: workers, projects 데이터 접근 경로 수정
- login.js: 로그인 API 응답 구조 수정 (result.data.token 접근)
API 응답 구조: { success: true, data: [...], meta: {...} }
- 삭제된 DB 테이블들과 관련 코드 정리:
* 12개 사용하지 않는 테이블 삭제 (activity_logs, CuttingPlan, DailyIssueReports 등)
* 관련 모델, 컨트롤러, 라우트 파일들 삭제
* index.js에서 삭제된 라우트들 제거
- 웹 UI 페이지 정리:
* 21개 사용하지 않는 페이지 삭제
* issue-reports 폴더 전체 삭제
* 모든 사용자 권한을 그룹장 대시보드로 통일
- 데이터베이스 스키마 정리:
* v1 스키마로 통일 (daily_work_reports 테이블)
* JSON 데이터 임포트 스크립트 구현
* 외래키 관계 정리 및 데이터 일관성 확보
- 통합 Docker Compose 설정:
* 모든 서비스를 단일 docker-compose.yml로 통합
* 20000번대 포트 유지
* JWT 시크릿 및 환경변수 설정
- 문서화:
* DATABASE_SCHEMA.md: 현재 DB 스키마 문서화
* DELETED_TABLES.md: 삭제된 테이블 목록
* DELETED_PAGES.md: 삭제된 페이지 목록
- 시스템 관리자 전용 웹페이지 구현 (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 필드 추가
- 600줄에 달하는 project-analysis.js 파일을 API, Data, UI, Controller 네 개의 모듈로 분리
- 복잡한 데이터 처리 로직을 data 모듈로 위임하고, UI 렌더링 코드를 ui 모듈로 분리하여 관심사 분리 원칙(SoC) 적용
- 전역 상태를 최소화하고 데이터 흐름을 명확하게 개선하여 유지보수성 및 안정성 향상
- auth-check, load-navbar, load-sidebar 리팩토링
- auth.js 모듈을 활용하여 코드 중복 제거 및 일관성 확보
- DOMParser를 사용하여 컴포넌트 로딩 시 화면 깜빡임 현상 해결
- user-dashboard에 API 연동을 위한 견고한 기반 코드 마련
