From f58dd115c961369ff4109dce55dbd8f84b7363ad Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Tue, 31 Mar 2026 10:26:54 +0900 Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20=EC=97=B0=EC=B0=A8/=EC=97=B0?= =?UTF-8?q?=EC=9E=A5=EA=B7=BC=EB=A1=9C=20=ED=86=B5=ED=95=A9=20+=20?= =?UTF-8?q?=EC=97=B0=EC=B0=A8=20=EC=83=81=EC=84=B8=20=EB=AA=A8=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 백엔드: type_code ANNUAL 매칭 실패 → 전체 합산으로 수정 details에 balance_type, expires_at 포함 - 프론트: 2열 카드 → 통합 리스트 (연차 탭 + 연장근로 행) - 연차 행 클릭 → 상세 모달 (이월/정기/장기/경조사 breakdown) 이월 소진/만료 isExpired() 적용 - 내 메뉴에서 "내 연차 정보" 자동 제거 Co-Authored-By: Claude Opus 4.6 (1M context) --- .../api/controllers/dashboardController.js | 10 +- .../web/css/production-dashboard.css | 52 ++++++-- .../web/js/production-dashboard.js | 126 ++++++++++++++---- system1-factory/web/pages/dashboard-new.html | 15 ++- 4 files changed, 160 insertions(+), 43 deletions(-) diff --git a/system1-factory/api/controllers/dashboardController.js b/system1-factory/api/controllers/dashboardController.js index 822b14c..a43eaa3 100644 --- a/system1-factory/api/controllers/dashboardController.js +++ b/system1-factory/api/controllers/dashboardController.js @@ -37,15 +37,17 @@ const DashboardController = { const details = vacationRows.map(v => ({ type_name: v.type_name, type_code: v.type_code, + balance_type: v.balance_type || 'AUTO', + expires_at: v.expires_at || null, total: parseFloat(v.total_days) || 0, used: parseFloat(v.used_days) || 0, remaining: parseFloat(v.remaining_days) || 0 })); - const annualRow = vacationRows.find(v => v.type_code === 'ANNUAL'); - const totalDays = annualRow ? parseFloat(annualRow.total_days) || 0 : 0; - const usedDays = annualRow ? parseFloat(annualRow.used_days) || 0 : 0; - const remainingDays = annualRow ? parseFloat(annualRow.remaining_days) || 0 : 0; + // 모든 balance_type 합산 + const totalDays = vacationRows.reduce((s, v) => s + (parseFloat(v.total_days) || 0), 0); + const usedDays = vacationRows.reduce((s, v) => s + (parseFloat(v.used_days) || 0), 0); + const remainingDays = totalDays - usedDays; res.json({ success: true, diff --git a/system1-factory/web/css/production-dashboard.css b/system1-factory/web/css/production-dashboard.css index 308a529..13989e3 100644 --- a/system1-factory/web/css/production-dashboard.css +++ b/system1-factory/web/css/production-dashboard.css @@ -24,21 +24,53 @@ .pd-profile-name { font-size: 18px; font-weight: 700; } .pd-profile-sub { font-size: 13px; opacity: 0.8; margin-top: 2px; } -/* 현황 카드 */ -.pd-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } -.pd-stat-card { - background: rgba(255,255,255,0.15); border-radius: 12px; padding: 14px; - backdrop-filter: blur(4px); +/* 통합 정보 리스트 */ +.pd-info-list { display: flex; flex-direction: column; gap: 2px; } +.pd-info-row { + display: flex; justify-content: space-between; align-items: center; + background: rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 12px; + cursor: pointer; -webkit-tap-highlight-color: transparent; } -.pd-stat-label { font-size: 11px; opacity: 0.8; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; } -.pd-stat-value { font-size: 22px; font-weight: 800; } -.pd-stat-sub { font-size: 11px; opacity: 0.7; margin-top: 2px; } -.pd-progress-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.2); margin-top: 8px; overflow: hidden; } -.pd-progress-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; } +.pd-info-row:active { background: rgba(255,255,255,0.18); } +.pd-info-left { display: flex; align-items: center; gap: 8px; } +.pd-info-icon { font-size: 14px; opacity: 0.8; width: 18px; text-align: center; } +.pd-info-label { font-size: 12px; font-weight: 600; opacity: 0.9; } +.pd-info-right { display: flex; align-items: center; gap: 6px; } +.pd-info-value { font-size: 14px; font-weight: 700; } +.pd-info-sub { font-size: 11px; opacity: 0.6; } +.pd-info-arrow { font-size: 10px; opacity: 0.5; margin-left: 2px; } +.pd-progress-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); overflow: hidden; } +.pd-progress-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; } .pd-progress-green { background: #4ade80; } .pd-progress-yellow { background: #fbbf24; } .pd-progress-red { background: #f87171; } +/* 연차 상세 모달 */ +.pd-detail-modal { + position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; + background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s; +} +.pd-detail-modal.active { opacity: 1; pointer-events: auto; } +.pd-detail-sheet { + background: linear-gradient(135deg, #9a3412, #ea580c); color: white; + border-radius: 16px 16px 0 0; width: 100%; max-width: 640px; padding: 20px; + transform: translateY(100%); transition: transform 0.3s ease; +} +.pd-detail-modal.active .pd-detail-sheet { transform: translateY(0); } +.pd-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } +.pd-detail-title { font-size: 16px; font-weight: 700; } +.pd-detail-close { background: none; border: none; color: white; opacity: 0.7; font-size: 18px; cursor: pointer; } +.pd-detail-row { + display: flex; justify-content: space-between; align-items: center; + padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.15); font-size: 13px; +} +.pd-detail-label { font-weight: 600; opacity: 0.9; } +.pd-detail-value { text-align: right; opacity: 0.85; } +.pd-detail-total { + display: flex; justify-content: space-between; align-items: center; + padding: 12px 0 0; font-size: 14px; font-weight: 700; margin-top: 4px; +} + /* 섹션 */ .pd-section { margin-bottom: 20px; } .pd-section-title { diff --git a/system1-factory/web/js/production-dashboard.js b/system1-factory/web/js/production-dashboard.js index 4462df5..3a352ef 100644 --- a/system1-factory/web/js/production-dashboard.js +++ b/system1-factory/web/js/production-dashboard.js @@ -18,7 +18,6 @@ const PAGE_ICONS = { 'inspection.work_status': 'fa-briefcase', 'purchase.request': 'fa-shopping-cart', 'purchase.analysis': 'fa-chart-line', - 'attendance.my_vacation_info': 'fa-info-circle', 'attendance.monthly': 'fa-calendar', 'attendance.vacation_request': 'fa-paper-plane', 'attendance.vacation_management': 'fa-cog', @@ -34,6 +33,9 @@ const PAGE_ICONS = { 'admin.attendance_report': 'fa-clipboard-check', }; +// 내 메뉴에서 제외 (대시보드에서 직접 확인) +const HIDDEN_PAGES = ['dashboard', 'attendance.my_vacation_info']; + const CATEGORY_COLORS = { '작업 관리': '#3b82f6', '공장 관리': '#f59e0b', @@ -43,13 +45,24 @@ const CATEGORY_COLORS = { }; const DEFAULT_COLOR = '#06b6d4'; +function isExpired(expiresAt) { + if (!expiresAt) return false; + const today = new Date(); today.setHours(0,0,0,0); + const exp = new Date(expiresAt); exp.setHours(0,0,0,0); + return today > exp; +} + function escHtml(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; } +function fmtDays(n) { return n % 1 === 0 ? n.toString() : n.toFixed(1); } + +let _dashboardData = null; async function initDashboard() { showSkeleton(); try { const result = await api('/dashboard/my-summary'); if (!result.success) throw new Error(result.message || '데이터 로드 실패'); + _dashboardData = result.data; renderDashboard(result.data); } catch (err) { showError(err.message); @@ -59,13 +72,12 @@ async function initDashboard() { function renderDashboard(data) { const { user, vacation, overtime, quick_access } = data; - // 프로필 카드 const card = document.getElementById('profileCard'); const initial = (user.worker_name || user.name || '?').charAt(0); const vacRemaining = vacation.remaining_days; const vacTotal = vacation.total_days; const vacUsed = vacation.used_days; - const vacPct = vacTotal > 0 ? Math.round((vacUsed / vacTotal) * 100) : 0; + const vacPct = vacTotal > 0 ? Math.round((vacUsed / Math.max(vacTotal, 1)) * 100) : 0; const vacColor = vacRemaining >= 5 ? 'green' : vacRemaining >= 3 ? 'yellow' : 'red'; const otHours = overtime.total_overtime_hours; @@ -82,40 +94,104 @@ function renderDashboard(data) {
${escHtml(user.job_type || '')}${user.job_type ? ' · ' : ''}${escHtml(user.department_name)}
-
-
-
연차
+
+
+
+ + 연차 +
${vacTotal > 0 ? ` -
잔여 ${vacRemaining}일
-
${vacTotal}일 중 ${vacUsed}일 사용
-
- ` : `
연차 정보 미등록
`} +
+ 잔여 ${fmtDays(vacRemaining)}일 + / ${fmtDays(vacTotal)}일 + +
+ ` : ` +
+ 미등록 + +
+ `}
-
-
연장근로
-
${otHours.toFixed(1)}h
-
이번달 ${otDays}일
+ ${vacTotal > 0 ? `
` : ''} +
+
+ + 연장근로 +
+
+ ${otHours.toFixed(1)}h + 이번달 ${otDays}일 +
`; - // 아이콘 그리드 renderGrid('deptPagesGrid', 'deptPagesSection', quick_access.department_pages); renderGrid('personalPagesGrid', 'personalPagesSection', quick_access.personal_pages); renderGrid('adminPagesGrid', 'adminPagesSection', quick_access.admin_pages); } +function openVacDetailModal() { + if (!_dashboardData) return; + const { vacation } = _dashboardData; + const details = vacation.details || []; + + const groups = {}; + details.forEach(d => { + const bt = d.balance_type || 'AUTO'; + if (!groups[bt]) groups[bt] = { total: 0, used: 0, remaining: 0, expires_at: d.expires_at, items: [] }; + groups[bt].total += d.total; + groups[bt].used += d.used; + groups[bt].remaining += d.remaining; + if (d.expires_at) groups[bt].expires_at = d.expires_at; + groups[bt].items.push(d); + }); + + const LABELS = { CARRY_OVER: '이월연차', AUTO: '정기연차', MANUAL: '추가부여', LONG_SERVICE: '장기근속', COMPANY_GRANT: '경조사/특별' }; + const ORDER = ['CARRY_OVER', 'AUTO', 'MANUAL', 'LONG_SERVICE', 'COMPANY_GRANT']; + + let html = ''; + ORDER.forEach(bt => { + const g = groups[bt]; + if (!g || (g.total === 0 && g.used === 0)) return; + const label = LABELS[bt] || bt; + const expired = bt === 'CARRY_OVER' && isExpired(g.expires_at); + const lapsed = expired ? Math.max(0, g.total - g.used) : 0; + + html += `
+ ${label} + + ${g.total !== 0 ? `배정 ${fmtDays(g.total)}` : ''} + ${g.used > 0 ? ` · 사용 ${fmtDays(g.used)}` : ''} + ${expired && lapsed > 0 ? ` · 만료 ${fmtDays(lapsed)}` : ''} + ${!expired && g.remaining !== 0 ? ` · 잔여 ${fmtDays(g.remaining)}` : ''} + +
`; + }); + + if (!html) html = '
연차 정보가 없습니다
'; + + html += `
+ 합계 + 배정 ${fmtDays(vacation.total_days)} · 사용 ${fmtDays(vacation.used_days)} · 잔여 ${fmtDays(vacation.remaining_days)} +
`; + + document.getElementById('vacDetailContent').innerHTML = html; + document.getElementById('vacDetailModal').classList.add('active'); +} + +function closeVacDetail() { + document.getElementById('vacDetailModal').classList.remove('active'); +} + function renderGrid(gridId, sectionId, pages) { const grid = document.getElementById(gridId); const section = document.getElementById(sectionId); - if (!pages || pages.length === 0) { - section.classList.add('hidden'); - return; - } + if (!pages || pages.length === 0) { section.classList.add('hidden'); return; } section.classList.remove('hidden'); - // dashboard 자체 제외 - const filtered = pages.filter(p => p.page_key !== 'dashboard'); + const filtered = pages.filter(p => !HIDDEN_PAGES.includes(p.page_key)); if (filtered.length === 0) { section.classList.add('hidden'); return; } grid.innerHTML = filtered.map(p => { @@ -140,12 +216,9 @@ function showSkeleton() {
-
-
-
-
+
+
`; - // 그리드 스켈레톤 ['deptPagesGrid'].forEach(id => { const g = document.getElementById(id); if (g) g.innerHTML = Array(8).fill('
').join(''); @@ -162,7 +235,6 @@ function showError(msg) { `; } -// tkfb-core.js 인증 완료 후 실행 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => setTimeout(initDashboard, 300)); } else { diff --git a/system1-factory/web/pages/dashboard-new.html b/system1-factory/web/pages/dashboard-new.html index ee8da1c..8c97583 100644 --- a/system1-factory/web/pages/dashboard-new.html +++ b/system1-factory/web/pages/dashboard-new.html @@ -7,7 +7,7 @@ - + @@ -34,7 +34,18 @@ + +
+
+
+ 연차 상세 + +
+
+
+
+ - +