From 6be8139964f1969a5a8cfe8a103fbec10ac1ab78 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 11 Aug 2026 01:15:08 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9A=A1=20Bolt:=20[=EC=84=B1=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0]=20=EB=82=B4=20=EC=9E=91=EC=97=85=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=EC=97=90=20useMemo=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

불필요한 리렌더링을 방지하기 위해 내 작업 목록 매핑에 useMemo를 적용했습니다.
---
 frontend/src/components/TasksLayout.tsx | 35 +++++++++++++++----------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/TasksLayout.tsx b/frontend/src/components/TasksLayout.tsx
index 034aa6911..cd98657c0 100644
--- a/frontend/src/components/TasksLayout.tsx
+++ b/frontend/src/components/TasksLayout.tsx
@@ -367,7 +367,27 @@ export function TasksLayout() {
     </div>
   ), [currentColumns, tasksByStatus, taskSearch, priorityFilter, setSelectedTaskId, setViewMode]);
 
+
+  // ⚡ Bolt: Wrap My Tasks list in useMemo to prevent O(N) re-renders
+  // 🎯 Why: Mapping over potentially large lists of filtered tasks blocks the main thread during unrelated state updates.
+  const myTasksList = useMemo(() => (
+    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>
+    )
+  ), [filteredTicketTasks, setSelectedTaskId, setViewMode]);
   const handleViewModeKeyDown = (event: KeyboardEvent<HTMLButtonElement>, mode: TaskViewMode) => {
+
     const currentIndex = TASK_VIEW_MODES.indexOf(mode);
     const lastIndex = TASK_VIEW_MODES.length - 1;
     let nextIndex: number;
@@ -684,20 +704,7 @@ export function TasksLayout() {
         {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>
-            )}
+            {myTasksList}
           </div>
         )}
 

From d3e4cd710f7f118fa8a73d247e29a7dadf8bcb99 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Tue, 11 Aug 2026 17:20:02 +0900
Subject: [PATCH 2/2] fix(tasks): skip hidden task-list materialization

---
 frontend/src/components/TasksLayout.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/TasksLayout.tsx b/frontend/src/components/TasksLayout.tsx
index cd98657c0..e2f94a027 100644
--- a/frontend/src/components/TasksLayout.tsx
+++ b/frontend/src/components/TasksLayout.tsx
@@ -370,8 +370,9 @@ export function TasksLayout() {
 
   // ⚡ Bolt: Wrap My Tasks list in useMemo to prevent O(N) re-renders
   // 🎯 Why: Mapping over potentially large lists of filtered tasks blocks the main thread during unrelated state updates.
-  const myTasksList = useMemo(() => (
-    filteredTicketTasks.length > 0 ? filteredTicketTasks.map(task => (
+  const myTasksList = useMemo(() => {
+    if (viewMode !== '내 작업') return null;
+    return 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>
@@ -384,8 +385,8 @@ export function TasksLayout() {
       </button>
     )) : (
       <p className="rounded-xl border border-dashed border-border bg-card p-4 text-sm font-semibold text-muted-foreground">서명 세션에 연결된 내 작업이 없습니다.</p>
-    )
-  ), [filteredTicketTasks, setSelectedTaskId, setViewMode]);
+    );
+  }, [filteredTicketTasks, setSelectedTaskId, setViewMode, viewMode]);
   const handleViewModeKeyDown = (event: KeyboardEvent<HTMLButtonElement>, mode: TaskViewMode) => {
 
     const currentIndex = TASK_VIEW_MODES.indexOf(mode);