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:
yabo0812 2025-10-23 19:32:02 +09:00
parent a2deb108ac
commit 413da331f6
6 changed files with 46 additions and 44 deletions

View File

@ -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';
}
// 우선순위 배지

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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
======================================== */

View File

@ -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}` };
}
/**