70630b380a
모든 작업자가 개인 계정으로 로그인하여 본인의 연차와 출근 기록을 확인할 수 있는 시스템을 구축했습니다. 주요 기능: - 작업자-계정 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>
112 lines
3.6 KiB
HTML
112 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>나의 대시보드 | (주)테크니컬코리아</title>
|
|
<link rel="stylesheet" href="/css/common.css?v=2">
|
|
<link rel="stylesheet" href="/css/my-dashboard.css?v=1">
|
|
<link rel="icon" type="image/png" href="/img/favicon.png">
|
|
<script type="module" src="/js/api-config.js?v=3"></script>
|
|
</head>
|
|
<body>
|
|
<div id="navbar-container"></div>
|
|
|
|
<main class="dashboard-container">
|
|
<a href="javascript:history.back()" class="back-button">
|
|
← 뒤로가기
|
|
</a>
|
|
|
|
<header class="page-header">
|
|
<h1>📊 나의 대시보드</h1>
|
|
<p>안녕하세요, <span id="userName"></span>님!</p>
|
|
</header>
|
|
|
|
<!-- 사용자 정보 카드 -->
|
|
<section class="user-info-card">
|
|
<div class="info-row">
|
|
<div class="info-item">
|
|
<span class="label">부서:</span>
|
|
<span id="department">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">직책:</span>
|
|
<span id="jobType">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">입사일:</span>
|
|
<span id="hireDate">-</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 연차 정보 위젯 -->
|
|
<section class="vacation-widget">
|
|
<h2>💼 연차 정보</h2>
|
|
<div class="vacation-summary">
|
|
<div class="stat">
|
|
<span class="label">총 연차</span>
|
|
<span class="value" id="totalLeave">15</span>일
|
|
</div>
|
|
<div class="stat">
|
|
<span class="label">사용</span>
|
|
<span class="value used" id="usedLeave">0</span>일
|
|
</div>
|
|
<div class="stat">
|
|
<span class="label">잔여</span>
|
|
<span class="value remaining" id="remainingLeave">15</span>일
|
|
</div>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress" id="vacationProgress" style="width: 0%"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 월별 출근 캘린더 -->
|
|
<section class="calendar-section">
|
|
<h2>📅 이번 달 출근 현황</h2>
|
|
<div class="calendar-controls">
|
|
<button onclick="previousMonth()">◀</button>
|
|
<span id="currentMonth">2026년 1월</span>
|
|
<button onclick="nextMonth()">▶</button>
|
|
</div>
|
|
<div id="calendar" class="calendar-grid">
|
|
<!-- 동적 생성 -->
|
|
</div>
|
|
<div class="calendar-legend">
|
|
<span><span class="dot normal"></span> 정상</span>
|
|
<span><span class="dot late"></span> 지각</span>
|
|
<span><span class="dot vacation"></span> 휴가</span>
|
|
<span><span class="dot absent"></span> 결근</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 근무 시간 통계 -->
|
|
<section class="work-hours-stats">
|
|
<h2>⏱️ 근무 시간 통계</h2>
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<span class="label">이번 달</span>
|
|
<span class="value" id="monthHours">0</span>시간
|
|
</div>
|
|
<div class="stat-card">
|
|
<span class="label">근무 일수</span>
|
|
<span class="value" id="workDays">0</span>일
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 최근 작업 보고서 -->
|
|
<section class="recent-reports">
|
|
<h2>📝 최근 작업 보고서</h2>
|
|
<div id="recentReportsList">
|
|
<p class="empty-message">최근 7일간의 작업 보고서가 없습니다.</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="module" src="/js/load-navbar.js?v=5"></script>
|
|
<script type="module" src="/js/my-dashboard.js?v=1"></script>
|
|
</body>
|
|
</html>
|