refactor: 대시보드 레이아웃 대폭 개선 - 요약 카드 제거 및 구조 단순화
🗑️ 불필요한 요소 제거: - 상단 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
This commit is contained in:
Hyungi Ahn
@@ -70,167 +70,77 @@
|
||||
<!-- 메인 콘텐츠 -->
|
||||
<main class="dashboard-main">
|
||||
|
||||
<!-- 상태 요약 카드 -->
|
||||
<section class="summary-section">
|
||||
<div class="grid grid-cols-4">
|
||||
|
||||
<!-- 오늘 작업자 수 -->
|
||||
<div class="card summary-card fade-in">
|
||||
<div class="card-body">
|
||||
<div class="summary-icon success">
|
||||
<span>👥</span>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<h3 class="summary-title">오늘 작업자</h3>
|
||||
<div class="summary-value" id="todayWorkers">
|
||||
<span class="value-number">-</span>
|
||||
<span class="value-unit">명</span>
|
||||
<!-- 빠른 작업 섹션 -->
|
||||
<section class="quick-actions-section">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">⚡ 빠른 작업</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="quick-actions-grid-full">
|
||||
<a href="/pages/common/daily-work-report.html" class="quick-action-card">
|
||||
<div class="action-icon-large">📝</div>
|
||||
<div class="action-content">
|
||||
<h3>작업 보고서 작성</h3>
|
||||
<p>오늘의 작업 내용을 입력하고 관리합니다</p>
|
||||
</div>
|
||||
<p class="summary-change positive" id="workersChange">
|
||||
<span class="change-icon">↗</span>
|
||||
전일 대비 +2명
|
||||
</p>
|
||||
</div>
|
||||
<div class="action-arrow">→</div>
|
||||
</a>
|
||||
|
||||
<a href="/pages/common/daily-work-report-viewer.html" class="quick-action-card">
|
||||
<div class="action-icon-large">📋</div>
|
||||
<div class="action-content">
|
||||
<h3>작업 현황 확인</h3>
|
||||
<p>팀원들의 작업 현황을 실시간으로 조회합니다</p>
|
||||
</div>
|
||||
<div class="action-arrow">→</div>
|
||||
</a>
|
||||
|
||||
<a href="/pages/analysis/daily_work_analysis.html" class="quick-action-card">
|
||||
<div class="action-icon-large">📈</div>
|
||||
<div class="action-content">
|
||||
<h3>작업 분석</h3>
|
||||
<p>작업 효율성 및 통계를 분석합니다</p>
|
||||
</div>
|
||||
<div class="action-arrow">→</div>
|
||||
</a>
|
||||
|
||||
<a href="/pages/admin/manage-daily-work.html" class="quick-action-card admin-only">
|
||||
<div class="action-icon-large">⚙️</div>
|
||||
<div class="action-content">
|
||||
<h3>작업 관리</h3>
|
||||
<p>작업자 및 프로젝트를 관리합니다</p>
|
||||
</div>
|
||||
<div class="action-arrow">→</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 총 작업 시간 -->
|
||||
<div class="card summary-card fade-in">
|
||||
<div class="card-body">
|
||||
<div class="summary-icon primary">
|
||||
<span>⏰</span>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<h3 class="summary-title">총 작업 시간</h3>
|
||||
<div class="summary-value" id="totalHours">
|
||||
<span class="value-number">-</span>
|
||||
<span class="value-unit">시간</span>
|
||||
</div>
|
||||
<p class="summary-change positive" id="hoursChange">
|
||||
<span class="change-icon">↗</span>
|
||||
전일 대비 +4시간
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 진행 중인 프로젝트 -->
|
||||
<div class="card summary-card fade-in">
|
||||
<div class="card-body">
|
||||
<div class="summary-icon warning">
|
||||
<span>📁</span>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<h3 class="summary-title">진행 프로젝트</h3>
|
||||
<div class="summary-value" id="activeProjects">
|
||||
<span class="value-number">-</span>
|
||||
<span class="value-unit">개</span>
|
||||
</div>
|
||||
<p class="summary-change neutral" id="projectsChange">
|
||||
<span class="change-icon">→</span>
|
||||
변동 없음
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 오류 발생 건수 -->
|
||||
<div class="card summary-card fade-in">
|
||||
<div class="card-body">
|
||||
<div class="summary-icon error">
|
||||
<span>⚠️</span>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<h3 class="summary-title">오류 발생</h3>
|
||||
<div class="summary-value" id="errorCount">
|
||||
<span class="value-number">-</span>
|
||||
<span class="value-unit">건</span>
|
||||
</div>
|
||||
<p class="summary-change negative" id="errorsChange">
|
||||
<span class="change-icon">↘</span>
|
||||
전일 대비 -1건
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 메인 콘텐츠 그리드 -->
|
||||
<section class="content-section">
|
||||
<div class="grid grid-cols-2 gap-8">
|
||||
|
||||
<!-- 오늘의 작업 현황 -->
|
||||
<div class="card content-card">
|
||||
<div class="card-header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="card-title">📊 오늘의 작업 현황</h2>
|
||||
<div class="date-selector">
|
||||
<input type="date" id="selectedDate" class="date-input">
|
||||
<button class="btn btn-primary btn-sm" id="refreshBtn">
|
||||
<span>🔄</span>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="work-status-container" id="workStatusContainer">
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>작업 현황을 불러오는 중...</p>
|
||||
</div>
|
||||
<!-- 오늘의 작업 현황 -->
|
||||
<section class="work-status-section">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="card-title">📊 오늘의 작업 현황</h2>
|
||||
<div class="date-selector">
|
||||
<input type="date" id="selectedDate" class="date-input">
|
||||
<button class="btn btn-primary btn-sm" id="refreshBtn">
|
||||
<span>🔄</span>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 빠른 작업 -->
|
||||
<div class="card content-card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">⚡ 빠른 작업</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="quick-actions-grid">
|
||||
<a href="/pages/common/daily-work-report.html" class="quick-action-card">
|
||||
<div class="action-icon-large">📝</div>
|
||||
<div class="action-content">
|
||||
<h3>작업 보고서 작성</h3>
|
||||
<p>오늘의 작업 내용을 입력하고 관리합니다</p>
|
||||
</div>
|
||||
<div class="action-arrow">→</div>
|
||||
</a>
|
||||
|
||||
<a href="/pages/common/daily-work-report-viewer.html" class="quick-action-card">
|
||||
<div class="action-icon-large">📋</div>
|
||||
<div class="action-content">
|
||||
<h3>작업 현황 확인</h3>
|
||||
<p>팀원들의 작업 현황을 실시간으로 조회합니다</p>
|
||||
</div>
|
||||
<div class="action-arrow">→</div>
|
||||
</a>
|
||||
|
||||
<a href="/pages/analysis/daily_work_analysis.html" class="quick-action-card">
|
||||
<div class="action-icon-large">📈</div>
|
||||
<div class="action-content">
|
||||
<h3>작업 분석</h3>
|
||||
<p>작업 효율성 및 통계를 분석합니다</p>
|
||||
</div>
|
||||
<div class="action-arrow">→</div>
|
||||
</a>
|
||||
|
||||
<a href="/pages/admin/manage-daily-work.html" class="quick-action-card admin-only">
|
||||
<div class="action-icon-large">⚙️</div>
|
||||
<div class="action-content">
|
||||
<h3>작업 관리</h3>
|
||||
<p>작업자 및 프로젝트를 관리합니다</p>
|
||||
</div>
|
||||
<div class="action-arrow">→</div>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<div class="work-status-container-enhanced" id="workStatusContainer">
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>작업 현황을 불러오는 중...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user