- 설비 마커 클릭 시 슬라이드 패널로 상세 정보 표시
- 설비 사진 업로드/삭제 기능
- 설비 임시 이동 기능 (3단계 지도 기반 선택)
- Step 1: 공장 선택
- Step 2: 레이아웃 지도에서 작업장 선택
- Step 3: 상세 지도에서 위치 선택
- 설비 외부 반출/반입 기능
- 설비 수리 신청 기능 (기존 신고 시스템 연동)
- DB 마이그레이션 추가 (사진, 임시이동, 외부반출 테이블)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 일일순회점검 시스템 신규 구현
- DB 테이블: patrol_checklist_items, daily_patrol_sessions, patrol_check_records, workplace_items, item_types
- API: /api/patrol/* 엔드포인트
- 프론트엔드: 지도 기반 작업장 점검 UI
- 설비 관리 기능 개선
- 구매 관련 필드 추가 (구매일, 가격, 공급업체 등)
- 설비 코드 자동 생성 (TKP-XXX 형식)
- 작업장 관리 개선
- 레이아웃 이미지 업로드 기능
- 마커 위치 저장 기능
- 부서 관리 기능 추가
- 사이드바 네비게이션 카테고리 재구성
- 이미지 401 오류 수정 (정적 파일 경로 처리)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 부적합 API 호출 형식 수정 (카테고리/아이템 추가 시)
- 부적합 저장 시 내부 플래그 제거 후 백엔드 전송
- 기본 부적합 객체 구조 수정 (category_id, item_id 추가)
- 날씨 API 시간대 수정 (UTC → KST 변환)
- 신고 카테고리 관리 페이지 추가 (/pages/admin/issue-categories.html)
- 부적합 입력 UI 개선 (대분류→소분류 캐스케이딩 선택)
- 저장된 부적합 분리 표시 및 수정/삭제 기능
- 디버깅 로그 추가
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 페이지 폴더 재구성: 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>
작업보고서 작성 페이지의 시간 입력을 모바일/터치 환경에 최적화
주요 변경사항:
- 기존 number input → 큰 버튼 기반 팝오버 방식으로 전환
- 퀵 선택 버튼 5개 (30분, 1시간, 2시간, 4시간, 8시간)
- ±30분 미세 조정 버튼 추가
- 터치 타겟 최소 48-64px로 확대
- "8시간 30분" 형식으로 직관적 표시
- TBM 작업보고 및 수동 입력 모두 적용
기술 구현:
- Hidden input + display div 패턴으로 폼 호환성 유지
- 팝오버 오버레이 with ESC/클릭 외부 닫기
- CSS 애니메이션 추가
- 캐시 버스팅 (CSS v9, JS v24)
문서:
- 개발 로그: 개발 log/2026-01-27-time-input-ux-improvement.md
- 사용자 가이드: docs/guides/work-report-time-input-guide.md
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## 변경 사항
- UI 형식: 카드 그리드 → 엑셀 스타일 테이블
- 더 많은 정보를 한눈에 볼 수 있음
- 공간 활용 효율성 향상
## HTML 변경 (workers.html)
- 테이블 구조 추가
- 컬럼: 상태, 이름, 직책, 전화번호, 이메일, 입사일, 부서, 계정, 현장직, 등록일, 관리
- tbody id="workersGrid" 유지 (기존 코드 호환성)
## JavaScript 변경 (worker-management.js)
- renderWorkers() 함수 리팩토링
- 카드 HTML 생성 → 테이블 행 생성
- 상태 배지: 현장직(초록), 사무직(노랑), 퇴사(빨강)
- 아바타 아이콘 유지 (이름 첫 글자)
- 아이콘 버튼으로 편집/상태변경/삭제 기능
## CSS 변경 (admin-pages.css)
- 테이블 내 버튼 스타일 추가
- .data-table .btn-icon
- hover 효과 및 transform
## 유지된 기능
- 검색 및 필터링
- 정렬
- 통계 표시
- 편집/삭제/상태 변경
- Empty state
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## 문제
- 선택된 탭이 파란색 배경으로 가득 채워져 보기 안 좋음
- 모든 관리 페이지(프로젝트, 작업자, 작업장, 작업 등)에서 동일한 문제
## 해결
- .tab-btn.active 스타일 변경
- Before: 전체 배경 파란색 (background: var(--color-primary))
- After: 연한 배경 + 하단 border 강조
- color: var(--color-primary) (텍스트 파란색)
- background: var(--color-primary-light) (연한 배경)
- border-bottom: 3px solid var(--color-primary) (하단 강조)
- font-weight: 600 (글자 굵게)
## 영향
- 모든 관리 페이지의 탭 UI 개선
- 가독성 향상
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## 변경사항
- 프로젝트 카드 메타 정보를 key-value 형식으로 재구성
- 빈 값은 '-'로 표시하여 일관성 향상
- 버튼 텍스트 추가 (✏️ 수정, 🗑️ 삭제)
- 메인 콘텐츠 영역 최대폭 1600px 제한 및 중앙 정렬
- 그리드 정렬 개선
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## 주요 변경사항
- 프로젝트/작업자/코드 관리 페이지 2단 레이아웃(사이드바+메인) 적용
- 통일된 3열 카드 그리드 레이아웃 구현
- 코드 관리 페이지 탭 및 카드 디자인 개선
- 관리 페이지 표준 가이드 문서 작성
## 세부 내용
### HTML 구조 개선
- `.page-container` flexbox 레이아웃으로 변경
- 240px 고정폭 사이드바 네비게이션 추가
- 페이지 헤더를 카드 형태로 분리
### CSS 개선
- admin-pages.css 신규 생성 (v7)
- 3열 그리드 레이아웃 (repeat(3, 1fr))
- 카드 높이 통일 (프로젝트/작업자: 420px, 코드: 최소 200px)
- 반응형 디자인 (1200px: 2열, 768px: 1열)
### 코드 관리 페이지 특화
- 탭 네비게이션 스타일 개선
- 상태별/심각도별 컬러 보더 적용
- 해결 가이드 섹션 스타일링
- 아이콘 48x48 둥근 박스 디자인
### 문서화
- ADMIN_PAGE_STANDARD.md 생성
- HTML 템플릿, CSS 클래스, 파일 명명 규칙 정의
- 3가지 페이지 타입(카드 그리드/테이블/탭) 표준화
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## 주요 변경사항
### 1. TBM (Tool Box Meeting) 시스템 구축
- **데이터베이스 스키마** (5개 테이블 생성)
- tbm_sessions: TBM 세션 관리
- tbm_team_assignments: 팀 구성 관리
- tbm_safety_checks: 안전 체크리스트 마스터 (17개 항목)
- tbm_safety_records: 안전 체크 기록
- team_handovers: 작업 인계 관리
- **API 엔드포인트** (17개)
- TBM 세션 CRUD
- 팀 구성 관리
- 안전 체크리스트
- 작업 인계
- 통계 및 리포트
- **프론트엔드**
- TBM 관리 페이지 (/pages/work/tbm.html)
- 모달 기반 UI (세션 생성, 팀 구성, 안전 체크)
### 2. 페이지 권한 관리 시스템
- 페이지별 접근 권한 설정 기능
- 관리자 페이지 (/pages/admin/page-access.html)
- 사용자별 페이지 권한 부여/회수
- TBM 페이지 등록 및 권한 연동
### 3. 네비게이션 role 표시 버그 수정
- load-navbar.js: case-insensitive role 매칭 적용
- JWT의 "Admin" role이 "관리자"로 정상 표시
- admin-only 메뉴 항목 정상 표시
### 4. 대시보드 개선
- 작업 현황 테이블 가독성 향상
- 고대비 색상 및 명확한 구분선 적용
- 이모지 제거 및 SVG 아이콘 적용
### 5. 문서화
- TBM 배포 가이드 작성 (docs/TBM_DEPLOYMENT_GUIDE.md)
- 데이터베이스 스키마 상세 기록
- 배포 절차 및 체크리스트 제공
## 기술 스택
- Backend: Node.js, Express, MySQL
- Frontend: Vanilla JavaScript, HTML5, CSS3
- Database: MySQL (InnoDB)
## 파일 변경사항
### 신규 파일
- api.hyungi.net/db/migrations/20260120000000_create_tbm_system.js
- api.hyungi.net/db/migrations/20260120000001_add_tbm_page.js
- api.hyungi.net/models/tbmModel.js
- api.hyungi.net/models/pageAccessModel.js
- api.hyungi.net/controllers/tbmController.js
- api.hyungi.net/controllers/pageAccessController.js
- api.hyungi.net/routes/tbmRoutes.js
- web-ui/pages/work/tbm.html
- web-ui/pages/admin/page-access.html
- web-ui/js/page-access-management.js
- docs/TBM_DEPLOYMENT_GUIDE.md
### 수정 파일
- api.hyungi.net/config/routes.js (TBM 라우트 추가)
- web-ui/js/load-navbar.js (role 매칭 버그 수정)
- web-ui/pages/admin/workers.html (HTML 구조 수정)
- web-ui/pages/dashboard.html (이모지 제거)
- web-ui/css/design-system.css (색상 팔레트 추가)
- web-ui/css/modern-dashboard.css (가독성 개선)
- web-ui/js/modern-dashboard.js (SVG 아이콘 적용)
## 배포 시 주의사항
⚠️ 본 서버 배포 시 반드시 마이그레이션 실행 필요:
```bash
npm run db:migrate
```
상세한 배포 절차는 docs/TBM_DEPLOYMENT_GUIDE.md 참조
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## 주요 변경사항
### 1. Design System 색상 업데이트
- 하늘색 계열 primary 색상으로 변경 (#0ea5e9, #38bdf8, #7dd3fc)
- CSS 변수 추가: --header-gradient
### 2. Navbar 컴포넌트 표준화
- 50개 이상의 하드코딩 값을 CSS 변수로 변경
- 모든 페이지에서 동일한 헤더 스타일 적용
### 3. 중복 코드 제거 (102줄)
- dashboard.html: 50줄 → 2줄 (navbar 컴포넌트로 교체)
- work/report-view.html: 54줄 → 2줄 (navbar 컴포넌트로 교체)
- modern-dashboard.css: 중복 헤더 스타일 제거
- project-management.css: 중복 헤더 스타일 제거
### 4. 표준 레이아웃 템플릿 생성
- dashboard-layout.html (대시보드용)
- work-layout.html (작업 페이지용)
- admin-layout.html (관리자 페이지용)
- simple-layout.html (프로필/설정용)
- templates/README.md (사용 가이드)
### 5. 누락된 design-system.css 추가
- work/report-view.html
- work/analysis.html
- admin/accounts.html
### 6. ES6 Module 문법 수정
- load-navbar.js: type="module" 추가
- modern-dashboard.js: navbar 엘리먼트 안전 처리
## 문서 업데이트
- CODING_GUIDE.md: 표준 컴포넌트 사용법 추가
- 개발 log/2026-01-20-ui-standardization-phase1.md: 상세 작업 로그
## 영향
- 수정: 10개 파일
- 신규: 6개 파일 (템플릿 5개 + 로그 1개)
- 코드 감소: -102줄
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
변경사항:
1. navbar 배경색을 하늘색 계열로 변경 (#0ea5e9, #38bdf8, #7dd3fc)
2. 대시보드 버튼을 header에 눈에 띄게 추가
3. work-management.css의 navbar 관련 중복 스타일 제거하여 레이아웃 충돌 해결
수정된 파일:
- web-ui/components/navbar.html
- web-ui/css/work-management.css
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- fix: 로그인 API에서 user.role_name 필드 올바르게 사용 (auth.service.js)
- refactor: navbar 컴포넌트를 최신 dashboard-header 스타일로 전환
- refactor: 구버전 work-report-header 제거 (6개 페이지)
- refactor: load-navbar.js를 최신 헤더 구조에 맞게 업데이트
- style: 파란색 그라데이션 헤더, 실시간 시계, 향상된 프로필 메뉴
- docs: 2026-01-20 개발 로그 추가
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
모든 작업자가 개인 계정으로 로그인하여 본인의 연차와 출근 기록을 확인할 수 있는 시스템을 구축했습니다.
주요 기능:
- 작업자-계정 1:1 통합 (기존 작업자 자동 계정 생성)
- 연차 관리 시스템 (연도별 잔액 관리)
- 출근 기록 시스템 (일일 근태 기록)
- 나의 대시보드 페이지 (개인 정보 조회)
데이터베이스:
- workers 테이블에 salary, base_annual_leave 컬럼 추가
- work_attendance_types, vacation_types 테이블 생성
- daily_attendance_records 테이블 생성
- worker_vacation_balance 테이블 생성
- 기존 작업자 자동 계정 생성 (username: 이름 기반)
- Guest 역할 추가
백엔드 API:
- 한글→영문 변환 유틸리티 (hangulToRoman.js)
- UserRoutes에 개인 정보 조회 API 추가
- GET /api/users/me (내 정보)
- GET /api/users/me/attendance-records (출근 기록)
- GET /api/users/me/vacation-balance (연차 잔액)
- GET /api/users/me/work-reports (작업 보고서)
- GET /api/users/me/monthly-stats (월별 통계)
프론트엔드:
- 나의 대시보드 페이지 (my-dashboard.html)
- 연차 정보 위젯 (총/사용/잔여)
- 월별 출근 캘린더
- 근무 시간 통계
- 최근 작업 보고서 목록
- 네비게이션 바에 "나의 대시보드" 메뉴 추가
배포 시 주의사항:
- 마이그레이션 실행 필요
- 자동 생성된 계정 초기 비밀번호: 1234
- 작업자들에게 첫 로그인 후 비밀번호 변경 안내 필요
🤖 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>
- Backend: Auto-sync work reports with attendance records
- Backend: Lazy initialization of daily active worker records
- Frontend: Real-time attendance status on Group Leader Dashboard
## 🚨 보안 강화
- 하드코딩된 비밀번호를 환경변수로 전환
- .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>
### 주요 변경사항
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 애니메이션 추가
- 디바운스/스로틀 함수 적용
- 의미 없는 통계 카드 제거
📊 작업 분석 페이지 개선:
- 프로그레스 바 애니메이션
- 토스트 알림 시스템
- 부드러운 전환 효과
- 반응형 최적화
- 메모리 사용량 모니터링
✨ 주요 기능
- Production Report 스타일 오류 분석 테이블 구현
- 작업 형태 중심의 데이터 집계 및 표시
- 프로젝트별 그룹화 (rowspan 적용)
- 연차/휴무 통합 처리 및 주말 제외
📊 테이블 구조 개선
- Job No. → 프로젝트명 표시
- 작업내용 → 작업 형태 (Base, Vessel, Piping Assembly)
- 총 시간 → 작업 형태별 총 시간
- 세부시간 → 정규/오류 유형별 세분화
- 백분율 → 오류율로 변경
🎨 UI/UX 개선
- 프로젝트별 rowspan 그룹화
- 정규(녹색)/오류(빨간색) 시각적 구분
- 연차/휴무 오렌지 색상 테마
- 프로젝트 그룹 경계선 추가
🔧 데이터 처리 로직
- 작업 형태별 오류 데이터 집계
- 오류 유형별 세분화 (설계미스, 발주미스 등)
- 주말 연차/휴무 자동 제외
- 모든 연차/휴무 하나로 통합
🛡️ 안정성 개선
- DOM 요소 null 체크 및 안전한 접근
- 디버깅 로그 추가
- 에러 핸들링 강화
✨ 주요 기능
- 프로젝트별 → 작업유형별 데이터 취합 및 표시
- Production Report 스타일 테이블 구현
- 연차/휴무 별도 처리 (주말 제외, 녹색 테마)
- Job No. 정확한 표시 (중복 제거)
🔧 API 개선
- recent-work API에 job_no 필드 추가
- MySQL 쿼리 결과 처리 수정 (results[0] 사용)
- Projects 테이블 대소문자 조인 문제 해결
🎨 UI/UX 개선
- 탭 기반 분석 인터페이스
- 색상 팔레트 개선 (파란색/녹색/노란색 계열)
- 텍스트 방향 수정 (가로 표시)
- 프로젝트별 합계 행 추가
📊 계산 로직
- 공수: 시간 ÷ 8
- 부하율: (개별 시간 ÷ 전체 시간) × 100%
- 인건비: 공수 × 350,000원
- 주말 연차 자동 제외
✨ 새로운 기능:
- 작업 분석 페이지 구현 (기간별, 프로젝트별, 작업자별, 오류별)
- 개별 분석 실행 버튼으로 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. 메인 컨테이너 확장:
- 최대 너비: 1400px → 1600px (200px 확장)
- 좌우 패딩: var(--space-6) → var(--space-4) (축소)
- 더 넓은 콘텐츠 영역 확보
2. 카드 그리드 개선:
- 카드 간격: var(--space-4) → var(--space-6) (확대)
- 전체 너비 활용: width: 100%, max-width: none
- 4개 카드가 화면 전체에 균등 분배
✅ 개선 효과:
- 양쪽 여백 최소화로 공간 효율성 극대화
- 카드들이 화면 전체에 균등하게 분산
- 더 넓은 클릭 영역으로 사용성 향상
- 시각적 균형감 개선
📱 반응형 호환성:
- 기존 태블릿/모바일 반응형 디자인 유지
- 데스크톱에서만 확장된 레이아웃 적용
- 모든 디바이스에서 최적화된 경험
🎨 시각적 개선:
- 카드 간 적절한 간격으로 가독성 향상
- 전체적인 레이아웃 밸런스 개선
- 프리미엄 느낌의 넓은 공간 활용
결과: 화면 공간을 효율적으로 활용하는 최적화된 레이아웃
테스트: http://localhost:20000/pages/dashboard/group-leader.html
🎨 프리미엄 카드 디자인:
1. 고급스러운 그라데이션 배경
- 기본: 화이트 → 라이트 그레이 그라데이션
- 호버: 화이트 → 블루 틴트 그라데이션
- 부드러운 색상 전환 효과
2. 동적 상단 그라데이션 바
- 4색 그라데이션 (블루, 퍼플, 시안, 그린)
- 3초 주기 애니메이션 효과
- 호버 시 나타나는 시각적 피드백
✨ 3D 호버 효과:
1. 카드 전체:
- Y축 -8px 이동 + 2% 확대
- 고급 그림자 효과 (다층 그림자)
- 0.4초 cubic-bezier 애니메이션
2. 아이콘 개선:
- 크기 확대 (64px → 80px)
- 호버 시 15% 확대 + 5도 회전
- 색상 변화 (라이트 블루 → 다크 블루)
- 3D 그림자 및 테두리 효과
🎯 인터랙션 개선:
1. 화살표 버튼:
- 원형 배경 추가 (32px)
- 슬라이드 + 스케일 애니메이션
- 호버 시 블루 그라데이션 활성화
2. 텍스트 색상 변화:
- 제목: 다크 그레이 → 다크 블루
- 설명: 미디엄 그레이 → 다크 그레이
- 부드러운 색상 전환
📱 반응형 최적화:
- 모바일: 아이콘 60px, 회전 각도 3도로 조정
- 태블릿: 2열 그리드 유지
- 데스크톱: 4열 그리드 최적화
🚀 성능 최적화:
- GPU 가속 애니메이션 (transform, opacity)
- 최적화된 cubic-bezier 전환
- 레이어 분리를 통한 렌더링 성능 향상
🎨 시각적 효과:
- 방사형 그라데이션 오버레이
- 다층 그림자 시스템
- 부드러운 색상 전환
- 프리미엄 느낌의 시각적 계층
결과: 사용자 경험을 크게 향상시키는 매력적이고 인터랙티브한 카드 디자인
테스트: http://localhost:20000/pages/dashboard/group-leader.html
🗑️ 불필요한 요소 제거:
- 상단 4개 요약 카드 완전 제거 (오늘 작업자, 총 작업시간, 진행 프로젝트, 오류발생)
- 복잡한 통계 정보 제거로 집중도 향상
- 관련 JavaScript 로직 정리
🔄 레이아웃 구조 개선:
1. 빠른 작업 섹션을 최상단으로 이동
- 4열 그리드로 확장 (기존 2x2 → 1x4)
- 전체 너비 활용으로 더 넓은 클릭 영역
- 주요 기능에 대한 접근성 극대화
2. 오늘의 작업 현황을 전체 너비로 확장
- 기존 50% → 100% 너비 활용
- 더 많은 정보 표시 공간 확보
- 시각적 중요도 강화
🎨 시각적 개선:
1. 작업 현황 컨테이너 개선:
- 그라데이션 배경 적용
- 상단 컬러 바 추가 (primary → secondary 그라데이션)
- 높이 증가 (300px → 400px)
- 더 세련된 시각적 효과
2. 반응형 디자인 최적화:
- 데스크톱: 4열 빠른 작업
- 태블릿: 2열 빠른 작업
- 모바일: 1열 빠른 작업
- 작업 현황 높이 자동 조정
✅ 사용자 경험 개선:
- 핵심 기능 우선 배치로 효율성 증대
- 불필요한 정보 제거로 인지 부하 감소
- 더 직관적이고 단순한 인터페이스
- 주요 작업에 대한 빠른 접근성
🎯 결과:
- 깔끔하고 집중된 대시보드
- 주요 기능 접근성 극대화
- 시각적 계층 구조 명확화
- 모든 디바이스에서 최적화된 경험
테스트: http://localhost:20000/pages/dashboard/group-leader.html
🗑️ 불필요한 섹션 제거:
- 작업자별 현황 섹션 완전 제거
- 뷰 컨트롤 버튼 (목록형/카드형) 제거
- 관련 JavaScript 로직 정리
🎨 빠른 작업 영역 대폭 개선:
1. 레이아웃 변경:
- 3열 → 2열 그리드로 변경 (더 넓은 공간 확보)
- 빠른 작업 영역 확대 (1/3 → 1/2)
2. 카드 디자인 개선:
- 2x2 그리드 레이아웃으로 4개 카드 배치
- 큰 아이콘 (64px) 및 중앙 정렬
- 그라데이션 배경 및 호버 효과
- 상단 컬러 바 및 화살표 애니메이션
3. 시각적 개선:
- 카드 높이 통일 (160px)
- 부드러운 호버 애니메이션 (translateY, scale)
- 아이콘 확대 효과 및 그라데이션
- 더 자세한 설명 텍스트
✅ 사용자 경험 개선:
- 핵심 기능에 집중된 깔끔한 레이아웃
- 직관적이고 매력적인 카드 디자인
- 반응형 디자인 (모바일: 1열, 태블릿: 2열)
- 접근성 향상 (큰 클릭 영역, 명확한 피드백)
🎯 결과:
- 불필요한 정보 제거로 집중도 향상
- 주요 기능 접근성 대폭 개선
- 모던하고 직관적인 사용자 인터페이스
테스트: 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
- 삭제된 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 필드 추가
