feat(subscription): 청약 일정 캘린더 뷰 추가
공고 목록 탭에 📅 캘린더 토글 버튼 추가. 캘린더 모드: 월간 그리드, 접수 시작일 기준 도트 표시 (상태별 색상). 날짜 클릭 시 해당일 공고 목록 패널 표시, 항목 클릭 시 상세 뷰로 전환. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user