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.
- Added cache invalidation for Workers and Projects
- Implemented server-side status filtering for Workers
- Fixed worker update query bug (removed non-existent join_date column)
- Updated daily-work-report UI to fetch only active workers
- Replaced SELECT* queries in 8 models with explicit columns.
- Began modularizing work-report-calendar.js by creating CalendarAPI.js, CalendarState.js, and CalendarView.js.
- Refactored manage-project.js to use global API helpers.
- Fixed API container crash by adding missing volume mounts to docker-compose.yml.
- Added new migration for missing columns in the projects table.
- Documented current DB schema and deployment notes.
Initiated the process of refactoring the monolithic `work-report-calendar.js` file as outlined in the Phase 2 frontend modernization plan.
- Created `CalendarAPI.js` to encapsulate all API calls related to the calendar, centralizing data fetching logic.
- Created `CalendarState.js` to manage the component's state, removing global variables from the main script.
- Refactored `work-report-calendar.js` to use the new state and API modules.
- Refactored `manage-project.js` to use the existing global API helpers, providing a consistent example for API usage.
## 🚨 보안 강화
- 하드코딩된 비밀번호를 환경변수로 전환
- .env.example 생성 및 보안 가이드 추가
- docker-compose.yml 환경변수 적용
- README.md에서 실제 비밀번호 제거
## 🗑️ 중복 제거
- synology_deployment/ 디렉토리 제거 (268MB)
- synology_deployment*.tar.gz 아카이브 제거 (234MB)
- 총 502MB의 중복 파일 삭제
## 🧹 백업 파일 정리
- *.backup 파일 제거 (10개)
- *복사본* 파일 제거
- *이전* 파일 제거
- json(백업)/ 디렉토리 제거
## 📋 .gitignore 업데이트
- 백업 파일 패턴 추가
- 보안 파일 제외 (.env, *.pem, *.key)
- 임시 파일 제외 (*.tmp, *.new)
- 빌드 아티팩트 제외 (*.tar.gz)
## 📚 문서화
- docs/ 디렉토리 구조 생성
- 리팩토링 분석 및 계획 문서 작성
- 코딩 스타일 가이드 작성
- 개발 환경 설정 가이드 작성
- 시스템 아키텍처 문서 작성
## 변경된 파일
- .env.example (신규)
- .gitignore (업데이트)
- docker-compose.yml (환경변수 적용)
- README.md (보안 정보 제거)
- docs/* (신규 문서 7개)
## 보안 개선 효과
✅ 비밀번호 노출 위험 제거
✅ Git 히스토리에서 민감 정보 분리
✅ 환경별 설정 분리 가능
✅ 배포 보안 강화
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
작업자 퇴사 시 비활성화 기능이 제대로 작동하지 않던 문제 해결
백엔드 수정:
- is_active 가상 필드 추가 (status 기반 자동 생성)
- ISO 8601 날짜 형식을 MySQL DATE 형식으로 변환
- 작업자 업데이트 필드 오류 수정 (salary, annual_leave 제거)
프론트엔드 수정 (11개 파일):
- 모든 페이지에서 비활성 작업자 필터링 로직 추가
- 대시보드, 작업보고서, 근태관리, 사용자관리 등 전체 페이지 적용
영향받는 기능:
- 작업자 관리: 비활성화 상태가 DB에 저장되고 새로고침 후에도 유지
- 모든 페이지: 비활성화된 작업자가 선택 목록에서 제외됨
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
### 주요 변경사항
1. 작업 현황 모달 중복 카드 문제 근본 해결
- monthlyStatusModel.getDailyWorkerStatus() 리팩토링
- 집계 테이블 대신 daily_work_reports에서 직접 조회
- GROUP BY로 작업자별 1개 카드 보장
2. 삭제 권한 강화
- 작업보고서 삭제는 그룹장/시스템/관리자만 가능
- 권한 없는 사용자는 403 에러 반환
3. 작업 입력 UI 개선
- 작업 항목 삭제 버튼 스타일 개선 (이모지 + 빨간색)
- 삭제 버튼 호버 효과 추가
4. 작업 현황 모달에 삭제 기능 추가
- 관리자/그룹장만 삭제 버튼 표시
- 작업자의 해당 날짜 전체 작업 삭제 가능
5. 시놀로지 배포 스크립트 추가
- update.sh: DB 보존하면서 코드만 업데이트
- 안전한 배포 절차 자동화
- monthly_worker_status 조회 시 GROUP BY로 중복 데이터 합산
- 작업보고서 삭제 권한을 그룹장 이상으로 제한 (admin, system, group_leader)
- 중복 데이터 정리를 위한 마이그레이션 SQL 추가 (009_fix_duplicate_monthly_status.sql)
- synology_deployment 버전에도 동일 수정 적용
🔧 그룹 리더 대시보드 수정사항:
- API 호출 방식 수정 (modern-dashboard.js)
- 서버 API 요구사항에 맞는 데이터 구조 변경
- work_entries 배열 구조로 변경
- work_type_id → task_id 필드명 매핑
- 400 Bad Request 오류 해결
⚡ 작업 분석 시스템 성능 최적화:
- 중복 함수 제거 (isWeekend, isVacationProject 통합)
- WorkAnalysisAPI 캐싱 시스템 구현 (5분 만료)
- 네임스페이스 조직화 (utils, ui, analysis, render)
- ErrorHandler 통합 에러 처리 시스템
- 성능 모니터링 및 메모리 누수 방지
- GPU 가속 CSS 애니메이션 추가
- 디바운스/스로틀 함수 적용
- 의미 없는 통계 카드 제거
📊 작업 분석 페이지 개선:
- 프로그레스 바 애니메이션
- 토스트 알림 시스템
- 부드러운 전환 효과
- 반응형 최적화
- 메모리 사용량 모니터링
✨ 새로운 기능:
- 작업 분석 페이지 구현 (기간별, 프로젝트별, 작업자별, 오류별)
- 개별 분석 실행 버튼으로 API 부하 최적화
- 연차/휴무 집계 방식 개선 (주말 제외, 작업내용 통합)
- 프로젝트 관리 시스템 (활성화/비활성화)
- 작업자 관리 시스템 (CRUD 기능)
- 코드 관리 시스템 (작업유형, 작업상태, 오류유형)
🎨 UI/UX 개선:
- 기간별 작업 현황을 테이블 형태로 변경
- 작업자별 rowspan 그룹화로 가독성 향상
- 연차/휴무 프로젝트 하단 배치 및 시각적 구분
- 기간 확정 시스템으로 사용자 경험 개선
- 반응형 디자인 적용
🔧 기술적 개선:
- Rate Limiting 제거 (내부 시스템 최적화)
- 주말 연차/휴무 자동 제외 로직
- 작업공수 계산 정확도 향상
- 데이터베이스 마이그레이션 추가
- API 엔드포인트 확장 및 최적화
🐛 버그 수정:
- projectSelect 요소 참조 오류 해결
- 차트 높이 무한 증가 문제 해결
- 날짜 표시 형식 단순화
- 작업보고서 저장 validation 오류 수정
- 월별 캘린더 UI로 작업 현황을 한눈에 확인 가능
- 미입력(빨강), 부분입력(주황), 확인필요(보라), 이상없음(초록) 상태 표시
- 범례 아이콘(●)을 사용한 직관적인 상태 표시
- 날짜 클릭 시 해당일 작업자별 상세 현황 모달
- 작업자 클릭 시 개별 작업 입력/수정 모달
- 휴가 처리 기능 (연차, 반차, 반반차, 조퇴)
- 월별 집계 데이터 최적화로 API 호출 최소화
백엔드:
- monthly_worker_status, monthly_summary 테이블 추가
- 자동 집계 stored procedure 및 trigger 구현
- 확인필요(12시간 초과) 상태 감지 로직
- 출석 관리 시스템 확장
프론트엔드:
- 캘린더 그리드 UI 구현
- 상태별 색상 및 아이콘 표시
- 모달 기반 상세 정보 표시
- 반응형 디자인 적용
🎨 모던한 카드형 레이아웃:
1. 작업 항목 디자인 완전 개편:
- 그라데이션 배경 (primary → tertiary)
- 상단 컬러 바 호버 효과
- 향상된 그림자 및 호버 애니메이션
- 2xl 테두리 반경으로 부드러운 외관
2. 폼 필드 그룹화:
- form-field-group 컨테이너 도입
- 아이콘과 라벨 조합으로 직관성 향상
- 포커스 상태 시각적 피드백
- 호버 효과로 상호작용성 증대
✨ 에러 유형 조건부 표시 개선:
1. 스마트한 UI 로직:
- 업무 상태가 '에러'일 때만 에러 유형 섹션 표시
- 부드러운 슬라이드 다운 애니메이션 (0.4s cubic-bezier)
- opacity, max-height, transform 조합 애니메이션
2. 시각적 구분:
- 에러 섹션: error-50 → warning-50 그라데이션
- 에러 테두리: error-200 컬러
- 에러 아이콘 및 라벨: error-500/700 컬러
🚀 빠른 시간 버튼 고도화:
1. 프리미엄 디자인:
- 그라데이션 배경 (primary-100 → primary-200)
- 호버 시: primary-500 → primary-600 그라데이션
- 반짝이는 효과 (::before 슬라이드 애니메이션)
- 3D 변형 효과 (scale, translateY)
2. 향상된 상호작용:
- 30분 옵션 추가 (0.5시간)
- 클릭 시 스케일 애니메이션
- 중앙 정렬 및 최소 너비 설정
- cubic-bezier 전환 효과
🎯 사용자 경험 개선:
1. 직관적인 인터페이스:
- 아이콘으로 필드 구분 (🏗️ 프로젝트, ⚙️ 작업유형, 📊 업무상태, ⚠️ 에러유형, ⏰ 시간)
- 명확한 플레이스홀더 텍스트
- 논리적인 필드 배치 (2열 그리드)
2. 반응형 최적화:
- 모바일에서 적절한 패딩 및 폰트 크기
- 터치 친화적 버튼 크기
- 유연한 그리드 레이아웃
🔧 기술적 개선:
1. JavaScript 로직 강화:
- setupWorkEntryEvents 함수 완전 재작성
- 폼 필드 포커스 효과 추가
- 에러 타입 조건부 표시 로직 개선
- 버튼 클릭 피드백 애니메이션
2. CSS 아키텍처:
- 컴포넌트 기반 스타일링
- CSS 변수 활용한 일관된 디자인
- 애니메이션 키프레임 정의
- 계층적 스타일 구조
🎯 결과:
- 허접했던 UI → 프로페셔널한 모던 인터페이스
- 에러 유형 조건부 표시로 사용성 대폭 향상
- 직관적이고 아름다운 작업 입력 경험
- 대시보드와 완벽한 디자인 일관성
테스트: http://localhost:20000/pages/common/daily-work-report.html
🎨 모던 디자인 시스템 적용:
1. 대시보드와 일관된 디자인 언어:
- design-system.css 활용한 통일된 색상, 타이포그래피
- 동일한 카드, 버튼, 애니메이션 스타일
- 일관된 간격, 그림자, 테두리 반경
2. 새로운 CSS 파일 분리:
- daily-work-report.css 생성 (673줄)
- 인라인 스타일 완전 제거 (926줄 → 0줄)
- 모듈화된 스타일 관리
🚀 사용자 경험 대폭 개선:
1. 모던한 진행 단계 표시:
- 상단 3단계 진행 바 추가
- 실시간 단계 상태 표시 (활성/완료)
- 시각적 진행도 피드백
2. 개선된 레이아웃 구조:
- 헤더: 그라데이션 배경, 중앙 정렬
- 메인: 최대 너비 1200px, 중앙 배치
- 카드: 일관된 패딩, 그림자, 테두리
3. 향상된 작업자 선택 UI:
- worker-btn → worker-card 클래스 변경
- 카드형 디자인으로 시각적 개선
- 호버 효과: 상단 컬러 바, 배경 변화
- 선택 상태: 그라데이션 배경, 흰색 텍스트
✨ 인터랙션 개선:
1. 버튼 디자인 통일:
- 일관된 패딩, 높이 (48px)
- 호버 효과: translateY(-2px), 그림자 확대
- 색상: primary, success, secondary 통일
2. 폼 요소 개선:
- form-input 클래스로 통일된 스타일
- 포커스 상태: 테두리 색상, 그림자 효과
- 라벨: 명확한 계층 구조
3. 애니메이션 효과:
- 단계 전환: opacity, transform 애니메이션
- 카드 호버: translateY, 그림자 변화
- 부드러운 전환: var(--transition-normal)
📱 반응형 디자인 최적화:
1. 모바일 (768px 이하):
- 진행 단계: 세로 배치
- 작업자 그리드: 1열로 변경
- 패딩, 폰트 크기 조정
2. 태블릿 (1024px 이하):
- 적절한 그리드 컬럼 수 조정
- 터치 친화적 버튼 크기
🔧 기술적 개선:
1. JavaScript 업데이트:
- updateProgressSteps() 함수 추가
- 진행 단계 실시간 업데이트
- CSS 클래스명 변경 반영
2. HTML 구조 개선:
- 시맨틱 태그 활용 (header, main)
- 접근성 향상 (label, aria 속성)
- 깔끔한 마크업 구조
🎯 결과:
- 대시보드와 완벽한 디자인 일관성
- 직관적이고 사용하기 쉬운 인터페이스
- 모든 디바이스에서 최적화된 경험
- 프로페셔널한 시각적 품질
테스트: http://localhost:20000/pages/common/daily-work-report.html
🔐 토큰 만료 시 자동 로그아웃 기능:
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 정상 작동 확인
🗑️ 불필요한 기능 제거:
- 문서 관리 시스템 섹션 완전 제거
- 관련 CSS 스타일 정리
- 깔끔한 로그인 페이지 구성
🔧 JavaScript 브라우저 호환성 개선:
1. api-helper.js:
- ES6 import/export → 브라우저 호환 스크립트
- 함수들을 window 객체에 등록
- 의존성 제거 (API_BASE_URL, getToken, clearAuthData 직접 구현)
2. login.js:
- ES6 import 제거
- saveAuthData, clearAuthData 직접 구현
- window.login 함수 사용
3. index.html:
- type="module" 제거
- 스크립트 로딩 순서 최적화 (api-config.js → api-helper.js → login.js)
✅ 개선 효과:
- SyntaxError: Importing binding name 'API_BASE_URL' is not found 해결
- 모든 브라우저에서 로그인 기능 정상 작동
- 깔끔하고 집중된 로그인 UI
- 안정적인 스크립트 로딩
🎯 사용자 경험:
- 불필요한 요소 제거로 집중도 향상
- 빠른 로딩 속도
- 오류 없는 안정적인 로그인
테스트: http://localhost:20000/
🐛 해결된 문제:
- 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
🐛 해결된 문제:
- auth-check.js의 ES6 import 문법 오류
- window.apiCall is not a function 오류
- 스크립트 로딩 순서로 인한 의존성 문제
🔧 수정 내용:
1. auth-check.js:
- ES6 import 제거 → 함수 직접 구현
- isLoggedIn, getUser, clearAuthData 내장
- 모듈 의존성 완전 제거
2. 스크립트 로딩 순서 최적화:
- api-config.js: defer 제거 (즉시 로드)
- auth-check.js: defer 유지
- modern-dashboard.js: defer 유지
3. modern-dashboard.js:
- API 함수 로드 대기 로직 추가
- 최대 5초 대기 후 오류 처리
- 안전한 초기화 보장
✅ 개선 효과:
- 모든 JavaScript 오류 해결
- 안정적인 스크립트 로딩 순서
- API 함수 의존성 문제 해결
- 대시보드 정상 초기화 보장
테스트: 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
🎨 한글 기반 모던 디자인 시스템:
- 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 연동을 위한 견고한 기반 코드 마련
