feat(subscription): 청약 일정 캘린더 뷰 추가

공고 목록 탭에 📅 캘린더 토글 버튼 추가.
캘린더 모드: 월간 그리드, 접수 시작일 기준 도트 표시 (상태별 색상).
날짜 클릭 시 해당일 공고 목록 패널 표시, 항목 클릭 시 상세 뷰로 전환.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-01 10:35:44 +09:00
parent abd8762b5c
commit d1526af32c
2 changed files with 198 additions and 2 deletions

View File

@@ -1571,3 +1571,86 @@ input.sub-toggle:checked + .sub-toggle__label { color: var(--accent-subscription
.ns-pass-count strong {
font-weight: 700;
}
/* === 캘린더 뷰 ========================================================= */
.sub-calendar {
background: var(--bg-secondary);
border: 1px solid var(--line);
border-radius: var(--radius-md);
overflow: hidden;
}
.sub-calendar__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
font-weight: 600;
font-size: 14px;
color: var(--text-bright);
}
.sub-calendar__weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--bg-tertiary);
border-bottom: 1px solid var(--line);
}
.sub-calendar__weekday {
text-align: center;
padding: 6px 0;
font-size: 10px;
color: var(--text-dim);
font-weight: 600;
}
.sub-calendar__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.sub-calendar__day {
min-height: 58px;
padding: 5px 4px 4px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 3px;
cursor: default;
transition: background 0.1s;
}
.sub-calendar__day:nth-child(7n) { border-right: none; }
.sub-calendar__day.is-empty { background: var(--bg-tertiary); opacity: 0.35; }
.sub-calendar__day.has-items { cursor: pointer; }
.sub-calendar__day.has-items:hover { background: var(--surface-raised); }
.sub-calendar__day.is-today .sub-calendar__day-num {
background: var(--accent-cyan, #00d4ff);
color: var(--bg-primary);
border-radius: 50%;
}
.sub-calendar__day-num {
font-size: 11px;
color: var(--text-muted);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-weight: 500;
}
.sub-calendar__dots {
display: flex;
flex-wrap: wrap;
gap: 2px;
padding: 0 2px;
}
.sub-calendar__dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.sub-calendar__more {
font-size: 9px;
color: var(--text-dim);
line-height: 1.5;
}