졸업작품 19일차

오늘의 잔디

---

오늘은 졸업작품 1학기 최종발표도 했다.

교수님들이 내가 해온 졸작을 보고 본인이 생각하기에도 장족의 발전이 아니냐고

열심히 해온게 티가 났다고 하시면서 박수를 쳐주셨다.

GPT와 함께 했다고 말을 했지만 그래도 늘었지 않냐면서 칭찬해주셨다.

특히 다음날 일정이 전날 밤 10시에 내 카카오톡으로 알림이 오는 기능에

다들 놀라셨다.

음음 기무성 보고있나?

끝까지 가면 내가 다 이겨

---

📌 [캘린더 웹앱] 날짜별 일정 통계를 카테고리별 누적 막대그래프로 개선하기

✨ 작업 목표

• 기존에는 날짜별 일정 개수만 보여주는 단일 색 막대그래프를 사용하고 있었음

• 하지만 날짜마다 어떤 카테고리(Work, Friend 등) 일정이 있는지 시각적으로 확인하기 어려웠음
  

• → 이를 해결하기 위해 **카테고리별 누적 막대그래프(Stacked Bar Chart)**로 개선

---

🔧 작업 내용 요약

1. 기존 Chart.js 구조 한계

• dailyCounts = { '2025-06-06': 4, ... } → 단일 숫자만 표현 가능
• 색상은 하나, 카테고리 구분 불가

2. Chart.js에 누적 막대그래프 적용

• x축 = 날짜, y축 = 일정 개수, 색상 = 일정 유형
• options.scales.x.stacked = true, y.stacked = true 설정
• 일정 데이터를 카테고리별로 나눠 datasets 생성

3. 백엔드 응답 포맷 수정

• 기존 응답:

  "dailyCounts": {
    "2025-06-06": 4,
    "2025-06-11": 3
  }

• 변경된 응답:

  "dailyCounts": {
    "2025-06-06": { "Work": 2, "Friend": 1, "Sports": 1 },
    "2025-06-11": { "Work": 3 }
  }

• 이를 위해 /api/events/statistics에서 Map<String, Map<String, Integer>> 구조로 통계 리팩터링

4. 프론트엔드 drawDailyChart() 함수 리팩터링

• 날짜별 카테고리 수치를 기반으로 각 색상의 막대를 누적해서 렌더링

---

✅ 결과

• 📊 기존보다 훨씬 직관적인 통계 시각화 완성
• 💡 사용자는 날짜마다 어떤 유형의 일정이 있는지 한눈에 파악 가능
• 💯 팀 과제, 포트폴리오, 발표용 데모에 강력한 시각적 완성도 기여

---

🖼️ 결과 이미지

---

🗂️ 느낀점

• 단순한 수치 표현에서 벗어나 의미 있는 시각화를 위해 백엔드와 프론트가 함께 수정되어야 한다는 걸 배움
• Chart.js, REST API 설계, Java Map 처리 능력이 향상됨

---