mirror of
https://github.com/hwanny1128/HGZero.git
synced 2026-01-21 16:06:24 +00:00
Todo 카드 디자인 통일 및 D-day 배지 스타일 개선
- common.css에 D-day 배지 스타일 추가 (.badge-dday, .badge-warning, .badge-primary, .badge-secondary) - common.js의 getTodoStatusInfo 함수 개선 (D-day 색상 체계 통일) - 대시보드: 모바일에서 통계 카드 이모지 숨김 처리 - 회의록상세조회: 중복 Todo 스타일 제거, 배지 클래스 수정 - 모든 화면에서 일관된 D-day 배지 색상 적용 * D+N (지연): 빨간색 * D-Day: 녹색 테두리 * D-1~3: 주황색 테두리 * D-4~7: 파란색 테두리 * D-8+: 회색 테두리 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
a2deb108ac
commit
413da331f6
@ -279,6 +279,13 @@
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
/* 모바일에서 이모지 숨김 */
|
||||
@media (max-width: 767px) {
|
||||
.stat-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-h1);
|
||||
font-weight: var(--font-weight-bold);
|
||||
@ -502,7 +509,7 @@
|
||||
<nav class="sidebar-nav">
|
||||
<a href="12-회의록목록조회.html" class="sidebar-nav-item">
|
||||
<span class="sidebar-nav-icon"><img src="img/edit.png" width="32"></span>
|
||||
<span>회의 목록</span>
|
||||
<span>회의록</span>
|
||||
</a>
|
||||
<a href="09-Todo관리.html" class="sidebar-nav-item">
|
||||
<span class="sidebar-nav-icon"><img src="img/list.png" width="32"></span>
|
||||
@ -749,7 +756,7 @@
|
||||
ddayClass = 'badge-primary';
|
||||
} else {
|
||||
ddayBadge = `D-${dday}`;
|
||||
ddayClass = '';
|
||||
ddayClass = 'badge-secondary';
|
||||
}
|
||||
|
||||
// 우선순위 배지
|
||||
|
||||
@ -475,7 +475,7 @@
|
||||
<nav class="sidebar-nav">
|
||||
<a href="12-회의록목록조회.html" class="sidebar-nav-item">
|
||||
<span class="sidebar-nav-icon"><img src="img/edit.png" width="32"></span>
|
||||
<span>회의 목록</span>
|
||||
<span>회의록</span>
|
||||
</a>
|
||||
<a href="09-Todo관리.html" class="sidebar-nav-item active">
|
||||
<span class="sidebar-nav-icon"><img src="img/list.png" width="32"></span>
|
||||
|
||||
@ -493,40 +493,7 @@
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-md);
|
||||
margin-bottom: var(--space-sm);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.todo-item:hover {
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.todo-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.todo-title {
|
||||
flex: 1;
|
||||
font-size: var(--font-body);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.todo-meta {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-500);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
/* Todo 카드 스타일은 common.css에서 관리 */
|
||||
|
||||
.progress-wrapper {
|
||||
margin-top: var(--space-sm);
|
||||
@ -1204,7 +1171,7 @@
|
||||
</div>
|
||||
<div class="todo-content-wrapper">
|
||||
<div class="todo-badges">
|
||||
<span class="badge badge-primary">D-1</span>
|
||||
<span class="badge badge-warning">D-1</span>
|
||||
<span class="badge badge-high">높음</span>
|
||||
</div>
|
||||
<div class="todo-title">예산 편성안 검토</div>
|
||||
@ -1227,7 +1194,7 @@
|
||||
</div>
|
||||
<div class="todo-content-wrapper">
|
||||
<div class="todo-badges">
|
||||
<span class="badge">D-7</span>
|
||||
<span class="badge badge-primary">D-7</span>
|
||||
<span class="badge badge-medium">보통</span>
|
||||
</div>
|
||||
<div class="todo-title">UI 프로토타입 디자인</div>
|
||||
|
||||
@ -358,7 +358,7 @@
|
||||
<nav class="sidebar-nav">
|
||||
<a href="12-회의록목록조회.html" class="sidebar-nav-item active">
|
||||
<span class="sidebar-nav-icon"><img src="img/edit.png" width="32"></span>
|
||||
<span>회의 목록</span>
|
||||
<span>회의록</span>
|
||||
</a>
|
||||
<a href="09-Todo관리.html" class="sidebar-nav-item">
|
||||
<span class="sidebar-nav-icon"><img src="img/list.png" width="32"></span>
|
||||
|
||||
@ -390,6 +390,31 @@ a:hover {
|
||||
border: 1px solid #A5D6A7;
|
||||
}
|
||||
|
||||
/* D-day Badges */
|
||||
.badge-dday {
|
||||
background: #E8F5E9;
|
||||
color: #2E7D32;
|
||||
border: 1px solid #81C784;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: #FFF3E0;
|
||||
color: #F57C00;
|
||||
border: 1px solid #FFCC80;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background: #E3F2FD;
|
||||
color: #1976D2;
|
||||
border: 1px solid #90CAF9;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background: #F5F5F5;
|
||||
color: #616161;
|
||||
border: 1px solid #E0E0E0;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
8. Form Elements
|
||||
======================================== */
|
||||
|
||||
11
design/uiux/prototype/common.js
vendored
11
design/uiux/prototype/common.js
vendored
@ -509,12 +509,15 @@ function getTodoStatusInfo(todo) {
|
||||
return { badgeType: 'overdue', badgeText: getDdayText(dday) };
|
||||
}
|
||||
if (dday === 0) {
|
||||
return { badgeType: 'ongoing', badgeText: 'D-Day' };
|
||||
return { badgeType: 'dday', badgeText: 'D-Day' };
|
||||
}
|
||||
if (dday <= 2) {
|
||||
return { badgeType: 'scheduled', badgeText: `D-${dday}` };
|
||||
if (dday <= 3) {
|
||||
return { badgeType: 'warning', badgeText: `D-${dday}` };
|
||||
}
|
||||
return { badgeType: 'draft', badgeText: `D-${dday}` };
|
||||
if (dday <= 7) {
|
||||
return { badgeType: 'primary', badgeText: `D-${dday}` };
|
||||
}
|
||||
return { badgeType: 'secondary', badgeText: `D-${dday}` };
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user