style: 네비게이션 색상 및 레이아웃 개선

변경사항:
1. navbar 배경색을 하늘색 계열로 변경 (#0ea5e9, #38bdf8, #7dd3fc)
2. 대시보드 버튼을 header에 눈에 띄게 추가
3. work-management.css의 navbar 관련 중복 스타일 제거하여 레이아웃 충돌 해결

수정된 파일:
- web-ui/components/navbar.html
- web-ui/css/work-management.css

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-01-20 08:51:49 +09:00
parent 8a5480177b
commit 4f0af62d8c
2 changed files with 52 additions and 193 deletions

View File

@@ -20,6 +20,11 @@
</div>
<div class="header-right">
<a href="/pages/profile/my-dashboard.html" class="dashboard-btn">
<span class="btn-icon">📊</span>
<span class="btn-text">대시보드</span>
</a>
<div class="user-profile" id="userProfile">
<div class="user-avatar">
<span class="avatar-text" id="userInitial"></span>
@@ -29,10 +34,6 @@
<span class="user-role" id="userRole">작업자</span>
</div>
<div class="profile-menu" id="profileMenu">
<a href="/pages/profile/my-dashboard.html" class="menu-item">
<span class="menu-icon">📊</span>
나의 대시보드
</a>
<a href="/pages/profile/my-profile.html" class="menu-item">
<span class="menu-icon">👤</span>
내 프로필
@@ -58,7 +59,7 @@
<style>
/* 최신 대시보드 헤더 스타일 */
.dashboard-header {
background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #2563eb 100%);
background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%);
color: white;
padding: 1rem 1.5rem;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
@@ -262,6 +263,37 @@
color: #b91c1c !important;
}
/* 대시보드 버튼 */
.dashboard-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: rgba(255, 255, 255, 0.2);
color: white;
text-decoration: none;
border-radius: 0.75rem;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.dashboard-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.dashboard-btn .btn-icon {
font-size: 1.1rem;
}
.dashboard-btn .btn-text {
font-family: inherit;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.dashboard-header {
@@ -283,5 +315,13 @@
.user-info {
display: none;
}
.dashboard-btn .btn-text {
display: none;
}
.dashboard-btn {
padding: 0.5rem 0.75rem;
}
}
</style>