diff --git a/web-ui/css/modern-dashboard.css b/web-ui/css/modern-dashboard.css index a0ba2af..acf04f3 100644 --- a/web-ui/css/modern-dashboard.css +++ b/web-ui/css/modern-dashboard.css @@ -368,57 +368,112 @@ } /* ========== 빠른 작업 ========== */ -.quick-actions { - display: flex; - flex-direction: column; - gap: var(--space-3); +.quick-actions-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-4); } -.quick-action-btn { +.quick-action-card { display: flex; + flex-direction: column; align-items: center; - gap: var(--space-4); - padding: var(--space-4); - background: var(--bg-tertiary); - border-radius: var(--radius-lg); + gap: var(--space-3); + padding: var(--space-6); + background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-tertiary) 100%); + border-radius: var(--radius-xl); text-decoration: none; color: var(--text-primary); transition: var(--transition-normal); border: 1px solid var(--border-light); + position: relative; + overflow: hidden; + text-align: center; + min-height: 160px; + justify-content: center; } -.quick-action-btn:hover { - background: var(--bg-primary); - box-shadow: var(--shadow-md); - transform: translateY(-2px); +.quick-action-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--primary-500), var(--primary-600)); + opacity: 0; + transition: var(--transition-normal); } -.action-icon { - width: 48px; - height: 48px; - background: var(--primary-100); - border-radius: var(--radius-lg); +.quick-action-card:hover::before { + opacity: 1; +} + +.quick-action-card:hover { + background: linear-gradient(135deg, var(--bg-primary) 0%, var(--primary-50) 100%); + box-shadow: var(--shadow-lg); + transform: translateY(-4px); + border-color: var(--primary-200); +} + +.action-icon-large { + width: 64px; + height: 64px; + background: linear-gradient(135deg, var(--primary-100), var(--primary-200)); + border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; - font-size: var(--text-xl); + font-size: var(--text-3xl); flex-shrink: 0; + transition: var(--transition-normal); + box-shadow: var(--shadow-sm); +} + +.quick-action-card:hover .action-icon-large { + background: linear-gradient(135deg, var(--primary-200), var(--primary-300)); + transform: scale(1.1); + box-shadow: var(--shadow-md); +} + +.action-content { + flex: 1; + display: flex; + flex-direction: column; + gap: var(--space-2); } .action-content h3 { - font-size: var(--text-sm); + font-size: var(--text-base); font-weight: var(--font-semibold); - margin: 0 0 var(--space-1) 0; + margin: 0; color: var(--text-primary); + line-height: 1.3; } .action-content p { - font-size: var(--text-xs); + font-size: var(--text-sm); color: var(--text-secondary); margin: 0; line-height: 1.4; } +.action-arrow { + position: absolute; + top: var(--space-3); + right: var(--space-3); + font-size: var(--text-lg); + color: var(--primary-500); + opacity: 0; + transition: var(--transition-normal); + transform: translateX(-10px); +} + +.quick-action-card:hover .action-arrow { + opacity: 1; + transform: translateX(0); +} + .admin-only { opacity: 0.6; pointer-events: none; @@ -429,6 +484,32 @@ pointer-events: auto; } +/* 반응형 빠른 작업 */ +@media (max-width: 768px) { + .quick-actions-grid { + grid-template-columns: 1fr; + } + + .quick-action-card { + min-height: 120px; + padding: var(--space-4); + } + + .action-icon-large { + width: 48px; + height: 48px; + font-size: var(--text-2xl); + } + + .action-content h3 { + font-size: var(--text-sm); + } + + .action-content p { + font-size: var(--text-xs); + } +} + /* ========== 작업자 섹션 ========== */ .workers-section { margin-bottom: var(--space-8); @@ -788,13 +869,9 @@ grid-template-columns: repeat(2, 1fr); } - .grid-cols-3 { + .grid-cols-2 { grid-template-columns: 1fr; } - - .col-span-2 { - grid-column: span 1; - } } @media (max-width: 768px) { diff --git a/web-ui/pages/dashboard/group-leader.html b/web-ui/pages/dashboard/group-leader.html index 1dfe655..3549994 100644 --- a/web-ui/pages/dashboard/group-leader.html +++ b/web-ui/pages/dashboard/group-leader.html @@ -159,10 +159,10 @@
-
+
- -
-
-
-
-

👥 작업자별 현황

-
- - -
-
-
-
-
-
-
-

작업자 정보를 불러오는 중...

-
-
-
-
-