From 5c6b0ce1efbc9a2b2217a72361822bf5d4e4173d Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 10 Aug 2026 02:03:30 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20=EB=82=B4=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=20=EB=AA=A9=EB=A1=9D=20useMemo=20=EC=A0=81=EC=9A=A9?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20O(N)=20=EC=9E=AC=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=20=EB=B0=A9=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/bolt.md                          |  3 ++
 frontend/src/components/TasksLayout.tsx | 42 ++++++++++++++-----------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index d0b0a9997..ade2b5813 100644
--- a/.jules/bolt.md
+++ b/.jules/bolt.md
@@ -19,3 +19,6 @@
 
 **Learning:** When using a dictionary purely to track the presence of keys (e.g. `has_sent_message[key] = True`), checking for presence with `.get(key, False)` carries unnecessary semantic and memory overhead. Sets in Python provide a cleaner `key in set_name` syntax for boolean presence checks and slightly reduced memory footprint, while maintaining O(1) time complexity.
 **Action:** When tracking unique occurrences or boolean presence of items where the value itself doesn't carry additional information, use a `set` and its `.add()` and `in` operators instead of a `dict` mapping to `True` or `False`.
+## 2025-02-12 - Memoizing My Tasks view inside JSX
+**Learning:** Inline mapping of arrays inside JSX in large React components causes O(N) recalculation on every render. Although the `kanbanBoard` in `TasksLayout` was properly memoized, the `myTasksBoard` list was still mapped inline in the React return block, causing main thread blocking when other layout state (like search) was updated.
+**Action:** Always verify that *all* conditional array map rendering blocks are properly wrapped in a `useMemo` hook with all necessary external variables and setters in the dependency array (e.g. `[filteredTicketTasks, setSelectedTaskId, setViewMode]`) to prevent state changes in unrelated components from causing a bottleneck.
diff --git a/frontend/src/components/TasksLayout.tsx b/frontend/src/components/TasksLayout.tsx
index 034aa6911..d163b518d 100644
--- a/frontend/src/components/TasksLayout.tsx
+++ b/frontend/src/components/TasksLayout.tsx
@@ -306,6 +306,28 @@ export function TasksLayout() {
     [ticketTasks],
   );
 
+    // ⚡ Bolt: Wrap My Tasks list in useMemo to prevent O(N) re-renders
+  // 🎯 Why: Mapping over potentially large lists of tasks blocks the main thread during unrelated state updates.
+  const myTasksBoard = useMemo(() => (
+    <div className="space-y-4 max-w-4xl mx-auto">
+      <h2 className="font-bold text-lg mb-4">내 작업</h2>
+      {filteredTicketTasks.length > 0 ? filteredTicketTasks.map(task => (
+        <button key={task.id} type="button" className="flex w-full items-center justify-between p-4 rounded-xl border border-border bg-card text-left shadow-sm transition-colors hover:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40" onClick={() => { setSelectedTaskId(task.id); setViewMode('작업 상세'); }}>
+          <div className="flex items-center gap-4">
+            <div className={`size-3 rounded-full ${task.priority === 'urgent' ? 'bg-red-500' : task.priority === 'high' ? 'bg-orange-500' : 'bg-blue-500'}`}></div>
+            <div>
+              <h3 className="font-bold text-sm">{safeTaskTitle(task.title)}</h3>
+              <p className="text-xs text-muted-foreground mt-1">근거: {getTaskEvidenceLabel(task)} | 원본: {getTaskSourceLabel(task.source_type)}</p>
+            </div>
+          </div>
+          <span className={`px-2 py-1 rounded-full text-xs font-bold ${task.status === 'done' ? 'bg-green-100 text-green-700' : 'bg-secondary text-secondary-foreground'}`}>{taskStatusLabels[task.status]}</span>
+        </button>
+      )) : (
+        <p className="rounded-xl border border-dashed border-border bg-card p-4 text-sm font-semibold text-muted-foreground">서명 세션에 연결된 내 작업이 없습니다.</p>
+      )}
+    </div>
+  ), [filteredTicketTasks, setSelectedTaskId, setViewMode]);
+
   // ⚡ Bolt: Wrap Kanban columns in useMemo to prevent O(N) re-renders
   // 🎯 Why: Mapping over potentially large lists of tasks by status blocks the main thread during unrelated state updates.
   const kanbanBoard = useMemo(() => (
@@ -681,25 +703,7 @@ export function TasksLayout() {
         </section>
 
         {viewMode === '칸반' && kanbanBoard}
-        {viewMode === '내 작업' && (
-          <div className="space-y-4 max-w-4xl mx-auto">
-            <h2 className="font-bold text-lg mb-4">내 작업</h2>
-            {filteredTicketTasks.length > 0 ? filteredTicketTasks.map(task => (
-              <button key={task.id} type="button" className="flex w-full items-center justify-between p-4 rounded-xl border border-border bg-card text-left shadow-sm transition-colors hover:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40" onClick={() => { setSelectedTaskId(task.id); setViewMode('작업 상세'); }}>
-                <div className="flex items-center gap-4">
-                  <div className={`size-3 rounded-full ${task.priority === 'urgent' ? 'bg-red-500' : task.priority === 'high' ? 'bg-orange-500' : 'bg-blue-500'}`}></div>
-                  <div>
-                    <h3 className="font-bold text-sm">{safeTaskTitle(task.title)}</h3>
-                    <p className="text-xs text-muted-foreground mt-1">근거: {getTaskEvidenceLabel(task)} | 원본: {getTaskSourceLabel(task.source_type)}</p>
-                  </div>
-                </div>
-                <span className={`px-2 py-1 rounded-full text-xs font-bold ${task.status === 'done' ? 'bg-green-100 text-green-700' : 'bg-secondary text-secondary-foreground'}`}>{taskStatusLabels[task.status]}</span>
-              </button>
-            )) : (
-              <p className="rounded-xl border border-dashed border-border bg-card p-4 text-sm font-semibold text-muted-foreground">서명 세션에 연결된 내 작업이 없습니다.</p>
-            )}
-          </div>
-        )}
+        {viewMode === '내 작업' && myTasksBoard}
 
         {viewMode === '위임한 작업' && (
           <div className="space-y-4 max-w-4xl mx-auto">