Fix date filtering bug in heatmap/calendar and sync selection state

static/app.js

@@ -22,7 +22,10 @@ document.addEventListener('DOMContentLoaded', async () => {
     // 작성기 초기화 (저장 성공 시 데이터 새로고침 콜백 등록)
     ComposerManager.init(() => AppService.refreshData(updateSidebarCallback));
     
-    HeatmapManager.init('heatmapContainer'); // 히트맵 초기화
+    // 히트맵 초기화
+    HeatmapManager.init('heatmapContainer', (date) => {
+        AppService.setFilter({ date }, updateSidebarCallback);
+    });
     DrawerManager.init();
     Visualizer.init('graphContainer');
     UI.initSidebarToggle();

static/css/components/heatmap.css

@@ -77,6 +77,15 @@
     cursor: pointer;
 }
 
+.heatmap-cell.selected {
+    transform: scale(1.4);
+    z-index: 15;
+    outline: 2px solid white;
+    box-shadow: 0 0 10px var(--accent);
+    filter: brightness(1.5);
+}
+
+
 .heatmap-cell.out {
     opacity: 0;
     pointer-events: none;

static/js/AppService.js

@@ -99,6 +99,12 @@ export const AppService = {
         if (date !== undefined && this.state.currentFilterDate !== date) {
             this.state.currentFilterDate = date;
             changed = true;
+            
+            // UI 동기화
+            CalendarManager.setSelectedDate(date);
+            if (HeatmapManager.setSelectedDate) {
+                HeatmapManager.setSelectedDate(date);
+            }
         }
         if (query !== undefined && this.state.currentSearchQuery !== query) {
             this.state.currentSearchQuery = query;

static/js/api.js

@@ -18,7 +18,8 @@ export const API = {
 
     async fetchMemos(filters = {}) {
         const { limit = 20, offset = 0, group = 'all', query = '' } = filters;
-        const params = new URLSearchParams({ limit, offset, group, query });
+        const date = filters.date || ''; // null이나 undefined를 빈 문자열로 변환
+        const params = new URLSearchParams({ limit, offset, group, query, date });
         return await this.request(`/api/memos?${params.toString()}`);
     },
     async fetchHeatmapData(days = 365) {

static/js/components/CalendarManager.js

@@ -34,6 +34,11 @@ export const CalendarManager = {
         this.render();
     },
 
+    setSelectedDate(date) {
+        this.selectedDate = date;
+        this.render();
+    },
+
     bindEvents() {
         const header = document.getElementById('calendarHeader');
         if (header) {

static/js/components/HeatmapManager.js

@@ -8,9 +8,13 @@ export const HeatmapManager = {
     container: null,
     data: [], // [{date: 'YYYY-MM-DD', count: N}, ...]
     currentRange: 365, // 기본 365일
+    selectedDate: null,
+    onDateSelect: null,
 
-    init(containerId) {
+    init(containerId, onDateSelect) {
         this.container = document.getElementById(containerId);
+        this.onDateSelect = onDateSelect;
+        
         if (!this.container) {
             console.warn('[Heatmap] Container not found:', containerId);
             return;
@@ -23,6 +27,11 @@ export const HeatmapManager = {
         }
     },
 
+    setSelectedDate(date) {
+        this.selectedDate = date;
+        this.render();
+    },
+
     /**
      * 데이터를 서버에서 가져와 렌더링합니다.
      */
@@ -95,13 +104,14 @@ export const HeatmapManager = {
             const level = this.calculateLevel(count);
             
             const isOutOfRange = currentDate < startDate || currentDate > today;
+            const isSelected = this.selectedDate === dateStr;
             
             const tooltip = I18nManager.t('tooltip_heatmap_stat')
                 .replace('{date}', dateStr)
                 .replace('{count}', count);
 
             html += `
-                <div class="heatmap-cell ${isOutOfRange ? 'out' : `lvl-${level}`}" 
+                <div class="heatmap-cell ${isOutOfRange ? 'out' : `lvl-${level}`} ${isSelected ? 'selected' : ''}" 
                      data-date="${dateStr}" 
                      data-count="${count}"
                      title="${tooltip}">
@@ -144,5 +154,19 @@ export const HeatmapManager = {
                 this.refresh();
             };
         }
+
+        // 날짜 셀 클릭 이벤트 추가
+        this.container.querySelectorAll('.heatmap-cell[data-date]').forEach(cell => {
+            cell.onclick = (e) => {
+                const date = cell.dataset.date;
+                if (this.selectedDate === date) {
+                    this.selectedDate = null; // 해제
+                } else {
+                    this.selectedDate = date; // 선택
+                }
+                this.render(); // 다시 그려서 선택 효과 표시
+                if (this.onDateSelect) this.onDateSelect(this.selectedDate);
+            };
+        });
     }
 };