feat: 감정별 기록 도넛 그래프 구현

[1wltn]

개요

• 감정별 기록 탭의 기존 조약돌형 감정 UI를 제거하고, 대표 감정 기록 데이터를 기반으로 한 SVG 도넛 그래프 UI로 변경했습니다. 같은 색상 그룹에 속한 감정은 하나의 그래프 영역에 합쳐서 표시하며, 그래프 영역에 마우스를 올리면 실제로 기록된 감정 이름만 확인할 수 있도록 구현했습니다.

작업 내용

1. 감정별 기록 탭 템플릿 분리

• 'emotion_list.html' 추가
• 'emotion_modal.html' 분리

2. 기존 감정 조약돌 UI 제거
3. 대표 감정 기준 감정 기록 집계

• 'Record.main_emotion'만 집계

4. 감정 색상 그룹 분류 추가

• pink, blue, yellow, purple, red, orange

5. 같은 색상 그룹 감정 기록 수 합산
6. SVG 기반 도넛 그래프 구현

• 기록 비율에 따라 색상 영역 크기 계산
• 그래프 중앙에 전체 기록 수 표시

7. 감정 그래프 hover 툴팁 구현
8. 감정별 기록 화면 CSS를 도넛 그래프 구조에 맞게 수정

주요 변경 파일

• diary/templates/diary/list.html
• diary/templates/diary/partials/emotion_list.html
• diary/templates/diary/partials/emotion_modal.html
• diary/views.py
• diary/static/diary/js/diary.js
• diary/static/diary/css/diary.css

변경 유형

• Bug fix (버그 수정)
• New feature (새로운 기능 추가)
• Style (스타일)
• Refactoring (리팩토링)
• Documentation (문서화)
• Tests (테스트 추가/수정)
• Other (기타)

스크린샷

추가 사항

• 그래프 영역에 마우스를 올리면 나오는 정보, 그래프 중앙에 넣을 내용 상의 필요!!