From e61933e673c323ba75f751802e3c27369668bea4 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 31 Jul 2026 14:15:58 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20=EC=BA=98=EB=A6=B0=EB=8D=94?=
 =?UTF-8?q?=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=20?=
 =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CalendarMonthView 내 캘린더 그리드 생성(map) 작업을 useMemo로 래핑하여
O(N) 불필요한 렌더링 오버헤드를 최적화.
---
 .jules/bolt.md                                |  4 +++
 .../components/calendar/CalendarMonthView.tsx | 31 +++++++++++--------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index 231af188b..db4b8caf7 100644
--- a/.jules/bolt.md
+++ b/.jules/bolt.md
@@ -10,3 +10,7 @@
 ## 2024-05-24 - Memoizing inline array maps
 **Learning:** Inline mapping of arrays inside JSX in large React components causes O(N) recalculation on every render.
 **Action:** Wrap inline JSX elements that map over arrays (e.g., lists of tasks) in a `useMemo` hook with specific dependencies.
+
+## 2025-02-13 - Memoizing Calendar Grid Generation
+**Learning:** Inline mapping of arrays inside JSX in large React components, such as a 35-cell calendar grid, causes O(N) recalculation on every render.
+**Action:** Wrap inline JSX elements that map over arrays (e.g., generating calendar cells) in a `useMemo` hook with specific dependencies to prevent rendering bottlenecks when other unrelated state variables are updated.
diff --git a/frontend/src/components/calendar/CalendarMonthView.tsx b/frontend/src/components/calendar/CalendarMonthView.tsx
index ae8b731d6..c7af62aa8 100644
--- a/frontend/src/components/calendar/CalendarMonthView.tsx
+++ b/frontend/src/components/calendar/CalendarMonthView.tsx
@@ -20,6 +20,23 @@ export function CalendarMonthView({ visibleMonthEvents }: Props) {
     return grouped;
   }, [visibleMonthEvents]);
 
+  // ⚡ Bolt: Wrap calendar grid generation in useMemo to prevent O(N) re-renders
+  const calendarCells = useMemo(() => (
+    Array.from({ length: 35 }).map((_, i) => {
+      const dayEvents = monthEventsByDay.get(i) ?? [];
+      return (
+        <div key={i} className="min-h-[84px] p-2 sm:min-h-[100px]">
+          <span className={`text-sm font-semibold ${i % 7 === 0 ? 'text-red-500' : i % 7 === 6 ? 'text-blue-500' : 'text-muted-foreground'}`}>{i < 31 ? i + 1 : ''}</span>
+          {dayEvents.map((event) => (
+            <div key={event.id} className={`mt-1 rounded px-1.5 py-1 text-[10px] font-semibold leading-tight sm:px-2 sm:text-xs ${event.monthClassName}`}>
+              {event.time}<span className="hidden sm:inline"> {event.title}</span>
+            </div>
+          ))}
+        </div>
+      );
+    })
+  ), [monthEventsByDay]);
+
   return (
     <div className="h-full rounded-2xl border border-border bg-card shadow-sm flex flex-col overflow-hidden">
       <div className="grid grid-cols-7 border-b border-border bg-secondary/50 text-center text-sm font-semibold py-3">
@@ -27,19 +44,7 @@ export function CalendarMonthView({ visibleMonthEvents }: Props) {
       </div>
       <div className="grid grid-cols-7 grid-rows-5 flex-1 divide-x divide-y divide-border">
         {/* Simulated Grid Cells */}
-        {Array.from({ length: 35 }).map((_, i) => {
-          const dayEvents = monthEventsByDay.get(i) ?? [];
-          return (
-            <div key={i} className="min-h-[84px] p-2 sm:min-h-[100px]">
-              <span className={`text-sm font-semibold ${i % 7 === 0 ? 'text-red-500' : i % 7 === 6 ? 'text-blue-500' : 'text-muted-foreground'}`}>{i < 31 ? i + 1 : ''}</span>
-              {dayEvents.map((event) => (
-                <div key={event.id} className={`mt-1 rounded px-1.5 py-1 text-[10px] font-semibold leading-tight sm:px-2 sm:text-xs ${event.monthClassName}`}>
-                  {event.time}<span className="hidden sm:inline"> {event.title}</span>
-                </div>
-              ))}
-            </div>
-          );
-        })}
+        {calendarCells}
       </div>
     </div>
   );