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:
@@ -351,14 +351,37 @@
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
/* ========== 작업 현황 ========== */
|
||||
.work-status-container {
|
||||
min-height: 300px;
|
||||
/* ========== 작업 현황 섹션 ========== */
|
||||
.work-status-section {
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.work-status-container,
|
||||
.work-status-container-enhanced {
|
||||
min-height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.work-status-container-enhanced {
|
||||
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-primary) 100%);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-light);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.work-status-container-enhanced::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, var(--primary-500), var(--primary-600), var(--secondary-500));
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -367,7 +390,17 @@
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ========== 빠른 작업 ========== */
|
||||
/* ========== 빠른 작업 섹션 ========== */
|
||||
.quick-actions-section {
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.quick-actions-grid-full {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.quick-actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -485,7 +518,14 @@
|
||||
}
|
||||
|
||||
/* 반응형 빠른 작업 */
|
||||
@media (max-width: 1024px) {
|
||||
.quick-actions-grid-full {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.quick-actions-grid-full,
|
||||
.quick-actions-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -508,6 +548,10 @@
|
||||
.action-content p {
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.work-status-container-enhanced {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 작업자 섹션 ========== */
|
||||
|
||||
Reference in New Issue
Block a user