오늘의 잔디
✍️ 오늘의 작업 기록 – 다가오는 일정 위젯 구현 (2025.06.25)
✅ 주요 목표
- 캘린더 좌측 여백에 **"다가오는 일정 미리보기 위젯"**을 추가하여 UX 개선
- 향후 3일 내 일정들을 요약해서 사용자에게 빠르게 보여주는 기능
🛠 작업 내용
1. 프론트엔드 index.js 수정
/api/events로부터 받아온 이벤트 배열을 파싱하여event.date,event.title,event.type등 추출renderUpcomingEvents()함수 생성
→ 오늘부터 3일 이내의 일정을 필터링하고 날짜별로 그룹화하여 DOM 구성- 일정마다 카테고리 색상 표시 (좌측 border color)도 적용
div.style.borderColor = getCssColor(ev.color);2. index.html 구조 개선
<div id="upcomingBox"></div>를<body>아래에 추가- 전체 구조는 바꾸지 않고
upcomingBox를 사이드 위젯 형태로 구성
3. CSS 스타일링 (style.css)
#upcomingBox에 고정 위치 (fixed) 설정- 배경 블러 효과 + 박스 섀도우 + border radius 적용
- 각 일정은
- 일정명 (카테고리)형식으로 표시, 날짜별 그룹화
#upcomingBox {
position: fixed;
top: 120px;
left: 20px;
width: 240px;
max-height: 70vh;
overflow-y: auto;
...
}🎯 결과
- 캘린더 좌측 여백을 활용하여 시각적으로 깔끔하고 의미 있는 정보 제공
- 사용자가 오늘 이후 3일간의 일정을 빠르게 확인할 수 있어 UX 대폭 개선
- 색상도 카테고리 기반으로 통일감 있게 표현됨 (시각적으로 이쁨 💅)
💡 느낀 점
- 단순히 "기능 구현"이 아니라, 어디에 보여줄지(UI), 어떻게 묶어서 보여줄지(UX) 를 함께 고려해야 진짜 사용자 중심 개발이 가능하다는 걸 느낌.
- 앞으로 다른 요소들도 이렇게 공간 배치와 시각 흐름을 고려해서 배치해야겠다.
끝까지 가면 내가 다 이겨