From 9bf5dc8f0f657e0f2341eae55f08938881de116c Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Mon, 3 Nov 2025 12:10:44 +0900 Subject: [PATCH] =?UTF-8?q?improve:=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C?= =?UTF-8?q?=20UI=20=EA=B0=9C=EC=84=A0=20-=20=EC=9E=91=EC=97=85=EC=9E=90=20?= =?UTF-8?q?=ED=98=84=ED=99=A9=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EB=B9=A0?= =?UTF-8?q?=EB=A5=B8=20=EC=9E=91=EC=97=85=20=EC=98=81=EC=97=AD=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit πŸ—‘οΈ λΆˆν•„μš”ν•œ μ„Ήμ…˜ 제거: - μž‘μ—…μžλ³„ ν˜„ν™© μ„Ήμ…˜ μ™„μ „ 제거 - λ·° 컨트둀 λ²„νŠΌ (λͺ©λ‘ν˜•/μΉ΄λ“œν˜•) 제거 - κ΄€λ ¨ JavaScript 둜직 정리 🎨 λΉ λ₯Έ μž‘μ—… μ˜μ—­ λŒ€ν­ κ°œμ„ : 1. λ ˆμ΄μ•„μ›ƒ λ³€κ²½: - 3μ—΄ β†’ 2μ—΄ κ·Έλ¦¬λ“œλ‘œ λ³€κ²½ (더 넓은 곡간 확보) - λΉ λ₯Έ μž‘μ—… μ˜μ—­ ν™•λŒ€ (1/3 β†’ 1/2) 2. μΉ΄λ“œ λ””μžμΈ κ°œμ„ : - 2x2 κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒμœΌλ‘œ 4개 μΉ΄λ“œ 배치 - 큰 μ•„μ΄μ½˜ (64px) 및 쀑앙 μ •λ ¬ - κ·ΈλΌλ°μ΄μ…˜ λ°°κ²½ 및 ν˜Έλ²„ 효과 - 상단 컬러 λ°” 및 ν™”μ‚΄ν‘œ μ• λ‹ˆλ©”μ΄μ…˜ 3. μ‹œκ°μ  κ°œμ„ : - μΉ΄λ“œ 높이 톡일 (160px) - λΆ€λ“œλŸ¬μš΄ ν˜Έλ²„ μ• λ‹ˆλ©”μ΄μ…˜ (translateY, scale) - μ•„μ΄μ½˜ ν™•λŒ€ 효과 및 κ·ΈλΌλ°μ΄μ…˜ - 더 μžμ„Έν•œ μ„€λͺ… ν…μŠ€νŠΈ βœ… μ‚¬μš©μž κ²½ν—˜ κ°œμ„ : - 핡심 κΈ°λŠ₯에 μ§‘μ€‘λœ κΉ”λ”ν•œ λ ˆμ΄μ•„μ›ƒ - 직관적이고 맀λ ₯적인 μΉ΄λ“œ λ””μžμΈ - λ°˜μ‘ν˜• λ””μžμΈ (λͺ¨λ°”일: 1μ—΄, νƒœλΈ”λ¦Ώ: 2μ—΄) - μ ‘κ·Όμ„± ν–₯상 (큰 클릭 μ˜μ—­, λͺ…ν™•ν•œ ν”Όλ“œλ°±) 🎯 κ²°κ³Ό: - λΆˆν•„μš”ν•œ 정보 제거둜 집쀑도 ν–₯상 - μ£Όμš” κΈ°λŠ₯ μ ‘κ·Όμ„± λŒ€ν­ κ°œμ„  - λͺ¨λ˜ν•˜κ³  직관적인 μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€ ν…ŒμŠ€νŠΈ: http://localhost:20000/pages/dashboard/group-leader.html --- web-ui/css/modern-dashboard.css | 131 ++++++++++++++++++----- web-ui/pages/dashboard/group-leader.html | 62 ++++------- 2 files changed, 123 insertions(+), 70 deletions(-) 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 @@
-
+
-
+

πŸ“Š 였늘의 μž‘μ—… ν˜„ν™©

@@ -191,37 +191,41 @@

⚑ λΉ λ₯Έ μž‘μ—…

-
- -
πŸ“
+
+ +
πŸ“

μž‘μ—… λ³΄κ³ μ„œ μž‘μ„±

-

였늘의 μž‘μ—… λ‚΄μš© μž…λ ₯

+

였늘의 μž‘μ—… λ‚΄μš©μ„ μž…λ ₯ν•˜κ³  κ΄€λ¦¬ν•©λ‹ˆλ‹€

+
β†’
 - -
πŸ“‹
+ +
πŸ“‹

μž‘μ—… ν˜„ν™© 확인

-

νŒ€μ›λ“€μ˜ μž‘μ—… ν˜„ν™© 쑰회

+

νŒ€μ›λ“€μ˜ μž‘μ—… ν˜„ν™©μ„ μ‹€μ‹œκ°„μœΌλ‘œ μ‘°νšŒν•©λ‹ˆλ‹€

+
β†’
 - -
πŸ“ˆ
+ +
πŸ“ˆ

μž‘μ—… 뢄석

-

μž‘μ—… νš¨μœ¨μ„± 및 톡계 확인

+

μž‘μ—… νš¨μœ¨μ„± 및 톡계λ₯Ό λΆ„μ„ν•©λ‹ˆλ‹€

+
β†’
 - -
βš™οΈ
+ +
βš™οΈ

μž‘μ—… 관리

-

μž‘μ—…μž 및 ν”„λ‘œμ νŠΈ 관리

+

μž‘μ—…μž 및 ν”„λ‘œμ νŠΈλ₯Ό κ΄€λ¦¬ν•©λ‹ˆλ‹€

+
β†’
@@ -230,34 +234,6 @@
- -
-
-
-
-

πŸ‘₯ μž‘μ—…μžλ³„ ν˜„ν™©

-
- - -
-
-
-
-
-
- -

μž‘μ—…μž 정보λ₯Ό λΆˆλŸ¬μ˜€λŠ” 쀑...

-
-
-
-
-