feat: 작업자-계정 통합 및 연차/출근 관리 시스템 구축
모든 작업자가 개인 계정으로 로그인하여 본인의 연차와 출근 기록을 확인할 수 있는 시스템을 구축했습니다. 주요 기능: - 작업자-계정 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>
This commit is contained in:
Hyungi Ahn
189
web-ui/js/my-dashboard.js
Normal file
189
web-ui/js/my-dashboard.js
Normal file
@@ -0,0 +1,189 @@
|
||||
// My Dashboard - 나의 대시보드 JavaScript
|
||||
|
||||
import './api-config.js';
|
||||
|
||||
// 전역 변수
|
||||
let currentYear = new Date().getFullYear();
|
||||
let currentMonth = new Date().getMonth() + 1;
|
||||
|
||||
// 페이지 초기화
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
console.log('📊 나의 대시보드 초기화 시작');
|
||||
|
||||
await loadUserInfo();
|
||||
await loadVacationBalance();
|
||||
await loadMonthlyCalendar();
|
||||
await loadWorkHoursStats();
|
||||
await loadRecentReports();
|
||||
|
||||
console.log('✅ 나의 대시보드 초기화 완료');
|
||||
});
|
||||
|
||||
// 사용자 정보 로드
|
||||
async function loadUserInfo() {
|
||||
try {
|
||||
const response = await apiCall('/users/me', 'GET');
|
||||
const user = response.data || response;
|
||||
|
||||
document.getElementById('userName').textContent = user.name || '사용자';
|
||||
document.getElementById('department').textContent = user.department || '-';
|
||||
document.getElementById('jobType').textContent = user.job_type || '-';
|
||||
document.getElementById('hireDate').textContent = user.hire_date || '-';
|
||||
} catch (error) {
|
||||
console.error('사용자 정보 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 연차 정보 로드
|
||||
async function loadVacationBalance() {
|
||||
try {
|
||||
const response = await apiCall('/users/me/vacation-balance', 'GET');
|
||||
const balance = response.data || response;
|
||||
|
||||
const total = balance.total_annual_leave || 15;
|
||||
const used = balance.used_annual_leave || 0;
|
||||
const remaining = total - used;
|
||||
|
||||
document.getElementById('totalLeave').textContent = total;
|
||||
document.getElementById('usedLeave').textContent = used;
|
||||
document.getElementById('remainingLeave').textContent = remaining;
|
||||
|
||||
// 프로그레스 바 업데이트
|
||||
const percentage = (used / total) * 100;
|
||||
document.getElementById('vacationProgress').style.width = `${percentage}%`;
|
||||
} catch (error) {
|
||||
console.error('연차 정보 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 월별 캘린더 로드
|
||||
async function loadMonthlyCalendar() {
|
||||
try {
|
||||
const response = await apiCall(
|
||||
`/users/me/attendance-records?year=${currentYear}&month=${currentMonth}`,
|
||||
'GET'
|
||||
);
|
||||
const records = response.data || response;
|
||||
|
||||
renderCalendar(currentYear, currentMonth, records);
|
||||
document.getElementById('currentMonth').textContent = `${currentYear}년 ${currentMonth}월`;
|
||||
} catch (error) {
|
||||
console.error('캘린더 로드 실패:', error);
|
||||
renderCalendar(currentYear, currentMonth, []);
|
||||
}
|
||||
}
|
||||
|
||||
// 캘린더 렌더링
|
||||
function renderCalendar(year, month, records) {
|
||||
const calendar = document.getElementById('calendar');
|
||||
const firstDay = new Date(year, month - 1, 1).getDay();
|
||||
const daysInMonth = new Date(year, month, 0).getDate();
|
||||
|
||||
let html = '';
|
||||
|
||||
// 요일 헤더
|
||||
const weekdays = ['일', '월', '화', '수', '목', '금', '토'];
|
||||
weekdays.forEach(day => {
|
||||
html += `<div class="calendar-header">${day}</div>`;
|
||||
});
|
||||
|
||||
// 빈 칸
|
||||
for (let i = 0; i < firstDay; i++) {
|
||||
html += '<div class="calendar-day empty"></div>';
|
||||
}
|
||||
|
||||
// 날짜
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
const record = Array.isArray(records) ? records.find(r => r.record_date === dateStr) : null;
|
||||
|
||||
let statusClass = '';
|
||||
if (record) {
|
||||
const typeCode = record.attendance_type_code || record.type_code || '';
|
||||
statusClass = typeCode.toLowerCase();
|
||||
}
|
||||
|
||||
html += `
|
||||
<div class="calendar-day ${statusClass}" title="${dateStr}">
|
||||
<span class="day-number">${day}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
calendar.innerHTML = html;
|
||||
}
|
||||
|
||||
// 근무 시간 통계 로드
|
||||
async function loadWorkHoursStats() {
|
||||
try {
|
||||
const response = await apiCall(
|
||||
`/users/me/monthly-stats?year=${currentYear}&month=${currentMonth}`,
|
||||
'GET'
|
||||
);
|
||||
const stats = response.data || response;
|
||||
|
||||
document.getElementById('monthHours').textContent = stats.month_hours || 0;
|
||||
document.getElementById('workDays').textContent = stats.work_days || 0;
|
||||
} catch (error) {
|
||||
console.error('근무 시간 통계 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 최근 작업 보고서 로드
|
||||
async function loadRecentReports() {
|
||||
try {
|
||||
const endDate = new Date().toISOString().split('T')[0];
|
||||
const startDate = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
|
||||
.toISOString().split('T')[0];
|
||||
|
||||
const response = await apiCall(
|
||||
`/users/me/work-reports?startDate=${startDate}&endDate=${endDate}`,
|
||||
'GET'
|
||||
);
|
||||
const reports = response.data || response;
|
||||
|
||||
const list = document.getElementById('recentReportsList');
|
||||
|
||||
if (!Array.isArray(reports) || reports.length === 0) {
|
||||
list.innerHTML = '<p class="empty-message">최근 7일간의 작업 보고서가 없습니다.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = reports.map(r => `
|
||||
<div class="report-item">
|
||||
<span class="date">${r.report_date}</span>
|
||||
<span class="project">${r.project_name || 'N/A'}</span>
|
||||
<span class="hours">${r.work_hours}시간</span>
|
||||
</div>
|
||||
`).join('');
|
||||
} catch (error) {
|
||||
console.error('최근 작업 보고서 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 이전 달
|
||||
function previousMonth() {
|
||||
currentMonth--;
|
||||
if (currentMonth < 1) {
|
||||
currentMonth = 12;
|
||||
currentYear--;
|
||||
}
|
||||
loadMonthlyCalendar();
|
||||
loadWorkHoursStats();
|
||||
}
|
||||
|
||||
// 다음 달
|
||||
function nextMonth() {
|
||||
currentMonth++;
|
||||
if (currentMonth > 12) {
|
||||
currentMonth = 1;
|
||||
currentYear++;
|
||||
}
|
||||
loadMonthlyCalendar();
|
||||
loadWorkHoursStats();
|
||||
}
|
||||
|
||||
// 전역 함수 노출
|
||||
window.previousMonth = previousMonth;
|
||||
window.nextMonth = nextMonth;
|
||||
window.loadMonthlyCalendar = loadMonthlyCalendar;
|
||||
Reference in New Issue
Block a user