From a1bfef1ea389156ddafc8542fa633315b3be1790 Mon Sep 17 00:00:00 2001
From: Choi Young Sun <sunn7931@naver.com>
Date: Sun, 10 Nov 2024 20:03:17 +0900
Subject: [PATCH] =?UTF-8?q?[Fix]:=20=EC=83=89=EC=83=81=EB=A7=8C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EC=8B=9C=20=EB=B0=94=EB=A1=9C=20=EC=97=85?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=EB=90=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EB=8A=94=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../team/taskList/EditTaskListModal.tsx       |  5 ++++
 src/components/team/taskList/TaskBar.tsx      | 29 ++++++++++++++-----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/team/taskList/EditTaskListModal.tsx b/src/components/team/taskList/EditTaskListModal.tsx
index ebca69f2..cf4e0100 100644
--- a/src/components/team/taskList/EditTaskListModal.tsx
+++ b/src/components/team/taskList/EditTaskListModal.tsx
@@ -102,6 +102,11 @@ export default function EditTaskListModal({
     },
 
     onSettled: () => {
+      // 로컬 스토리지 업데이트
+      localStorage.setItem('taskListUpdated', Date.now().toString());
+
+      // CustomEvent 트리거
+      window.dispatchEvent(new Event('taskListUpdate'));
       // 쿼리 무효화 및 리패치
       queryClient.invalidateQueries({ queryKey: ['group', id] });
     },
diff --git a/src/components/team/taskList/TaskBar.tsx b/src/components/team/taskList/TaskBar.tsx
index f219e0e7..16f85bae 100644
--- a/src/components/team/taskList/TaskBar.tsx
+++ b/src/components/team/taskList/TaskBar.tsx
@@ -45,6 +45,26 @@ export default function TaskBar({
   };
 
   const [currentTagColor, setCurrentTagColor] = useState('');
+  const [storedTaskLists, setStoredTaskLists] = useState(() => {
+    return JSON.parse(localStorage.getItem(`TaskLists_${groupId}`) || '[]');
+  });
+
+  useEffect(() => {
+    const handleTaskListUpdate = () => {
+      const updatedTaskLists = JSON.parse(
+        localStorage.getItem(`TaskLists_${groupId}`) || '[]'
+      );
+      setStoredTaskLists(updatedTaskLists);
+    };
+
+    // 커스텀 이벤트 리스너 추가
+    window.addEventListener('taskListUpdate', handleTaskListUpdate);
+
+    // 컴포넌트 언마운트 시 리스너 제거
+    return () => {
+      window.removeEventListener('taskListUpdate', handleTaskListUpdate);
+    };
+  }, [groupId]);
 
   useEffect(() => {
     const pointColors = [
@@ -56,11 +76,6 @@ export default function TaskBar({
       '#ff9d35', // orange
       '#E6FE0B', // yellow
     ];
-    // 로컬 스토리지에서 taskLists 가져오기
-    const storedTaskLists = JSON.parse(
-      localStorage.getItem(`TaskLists_${groupId}`) || '[]'
-    );
-
     // 기존 taskList에 색상이 없으면 순서에 맞는 색상 할당
     let currentTaskList = storedTaskLists.find(
       (taskList: StoredTaskList) => taskList.name === name
@@ -71,7 +86,7 @@ export default function TaskBar({
       const colorIndex = storedTaskLists.length % pointColors.length;
       const newColor = pointColors[colorIndex];
       currentTaskList = { name, color: newColor };
-
+      setStoredTaskLists([...storedTaskLists, currentTaskList]);
       // taskList 저장
       localStorage.setItem(
         `TaskLists_${groupId}`,
@@ -81,7 +96,7 @@ export default function TaskBar({
 
     // 설정된 색상 사용
     setCurrentTagColor(currentTaskList.color);
-  }, [groupId, name]);
+  }, [groupId, name, storedTaskLists]);
 
   return (
     <CardMotion index={index} className="list-none">