오늘의 잔디

---

📅 일정 관리 캘린더 프로젝트 - 통계 모달 기능 구현 (2025-06-02)

✅ 주요 구현 기능

1. 통계 모달 창 UI 구현

• 일정 통계 그래프를, 일정 추가 모달처럼 캘린더 위에 뜨는 모달 형태로 구현
• 통계 보기 버튼 클릭 시, #statsModal 요소를 display: flex로 보이게 처리
• 닫기 버튼(✖️) 클릭 시 모달 닫힘 + 상단 top-bar 복원

2. 차트 표시 영역 사이즈 축소

• 차트가 화면 밖으로 넘치는 현상 방지를 위해 모달 내 차트 크기를 전체적으로 축소

  • 도넛 차트: width: 300px
  • 막대 차트: width: 350px, height: 200px

3. 상단 배너 숨김 처리

• 통계 모달이 뜰 때 top-bar가 가려서 X 버튼이 안 보이는 문제 해결
• 통계 보기 버튼 클릭 시 → top-bar.style.display = 'none'
• 모달 닫기 시 → top-bar.style.display = 'flex' 복구

4. 범례 색상 및 순서 일치

• 통계 그래프 범례와 캘린더 하단 범례의 색상 순서를 통일

• 색상 대응:

  • Friend: #FF6384
  • Work: #36A2EB
  • Sports: #FFCE56
  • Other: #6BCB77

5. 범례 스타일 개선

• 캘린더 하단 범례를 도톰한 네모 배경 안에 텍스트가 들어가는 스타일로 수정
• 모든 범례 항목의 글자색을 검정(black) 으로 통일

---

🔧 수정한 주요 파일 목록

파일명	변경 내용
index.js	통계 모달 열기/닫기, 차트 렌더링 코드 추가 및 수정
style.css	.legend, .entry 클래스에 배경색, 텍스트 색상, 정렬 스타일 추가
index.html	통계 버튼(📊 통계 보기) 위치 수정 및 모달 HTML 구조 삽입

---

💡 느낀 점

• 차트 위치를 달력 위로 띄우는 방식이 UX 면에서 훨씬 보기 좋았음
• CSS만 잘 다듬어도 시각적 완성도가 훨씬 높아짐을 실감함
• 모달이 뜰 때 배너 숨기기 등의 작은 디테일도 사용자 경험에 매우 중요함을 느낌

---