스타일 가이드에 D-day 배지 스타일 문서화

- D-day 배지 섹션 추가 (8. 배지 섹션 내)
- 5가지 D-day 상태별 배지 스타일 정의
  * .badge-dday (D-Day 오늘 마감)
  * .badge-warning (D-1~3 임박)
  * .badge-primary (D-4~7 여유)
  * .badge-secondary (D-8+ 충분)
  * .badge-overdue (D+N 지연)
- CSS 코드 예시 및 색상 체계 설명 포함

🤖 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:33:11 +09:00
parent 413da331f6
commit 2b081eede7

View File

@ -333,6 +333,58 @@
} }
``` ```
### D-day 배지
Todo 마감일 표시를 위한 D-day 배지 스타일입니다.
```css
/* D-Day (오늘 마감) */
.badge-dday {
background: #E8F5E9;
color: #2E7D32;
border: 1px solid #81C784;
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
}
/* D-1 ~ D-3 (임박) */
.badge-warning {
background: #FFF3E0;
color: #F57C00;
border: 1px solid #FFCC80;
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
}
/* D-4 ~ D-7 (여유) */
.badge-primary {
background: #E3F2FD;
color: #1976D2;
border: 1px solid #90CAF9;
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
}
/* D-8+ (충분) */
.badge-secondary {
background: #F5F5F5;
color: #616161;
border: 1px solid #E0E0E0;
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
}
```
**D-day 배지 색상 체계**
- **지연 (D+N)**: `.badge-overdue` - 빨간색 배경, 흰색 글씨
- **오늘 (D-Day)**: `.badge-dday` - 연한 녹색 배경, 진한 녹색 글씨, 테두리
- **임박 (D-1~3)**: `.badge-warning` - 연한 주황 배경, 진한 주황 글씨, 테두리
- **여유 (D-4~7)**: `.badge-primary` - 연한 파랑 배경, 진한 파랑 글씨, 테두리
- **충분 (D-8+)**: `.badge-secondary` - 연한 회색 배경, 진한 회색 글씨, 테두리
--- ---
## 9. 아이콘 ## 9. 아이콘