From 35ea079b378926566b0c8fe340c3af23f4fdd54e Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Sun, 30 Mar 2025 17:37:43 +0900
Subject: [PATCH 1/3] refactor: Update tag layout and conditional data loading
 in TaskDetailModal

---
 .../modal/task-detail/TaskContentSection.tsx  | 37 ++++++++++++++++---
 .../modal/task-detail/TaskDetailModal.tsx     | 20 ++++++----
 src/lib/utils/colorUtils.ts                   | 21 -----------
 3 files changed, 45 insertions(+), 33 deletions(-)
 delete mode 100644 src/lib/utils/colorUtils.ts

diff --git a/src/components/modal/task-detail/TaskContentSection.tsx b/src/components/modal/task-detail/TaskContentSection.tsx
index 19fd450..0d50f28 100644
--- a/src/components/modal/task-detail/TaskContentSection.tsx
+++ b/src/components/modal/task-detail/TaskContentSection.tsx
@@ -15,13 +15,13 @@ export default function TaskContentSection({
 }) {
   return (
     <>
-      <div className="flex items-start flex-1 min-w-0 max-h-[26px] tablet:max-h-[28px]">
-        <div className="flex items-center pr-3 tablet:pr-5">
+      <div className="flex items-start w-[290px] tablet:w-[420px] pc:w-[445px] max-h-[26px] tablet:max-h-[28px]">
+        <div className="flex items-center shrink-0">
           <ColumnNameTag />
-          <div className="shrink-0 w-[1px] h-4 bg-gray-400 ml-3 tablet:ml-5" />
+          <div className="shrink-0 w-[1px] h-4 bg-gray-400 mx-3 tablet:mx-5" />
         </div>
-        <div className="flex-nowrap w-full min-w-0 overflow-x-auto scrollbar-hide max-w-[205px] tablet:max-w-[315px] pc:max-w-[340px]">
-          <TagList tags={tags} />
+        <div className="flex-grow min-h-0 overflow-x-auto whitespace-nowrap scrollbar-hide">
+          <TagList tags={mock} />
         </div>
       </div>
       <div className="w-[290px] tablet:w-[420px] pc:w-[445px]">
@@ -43,3 +43,30 @@ export default function TaskContentSection({
     </>
   );
 }
+
+const mock = [
+  "tag",
+  "tag",
+  "tag",
+  "tagtag",
+  "tagtagtag",
+  "tagtagtagtag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+  "tag",
+];
diff --git a/src/components/modal/task-detail/TaskDetailModal.tsx b/src/components/modal/task-detail/TaskDetailModal.tsx
index bfd0f9b..8be9acc 100644
--- a/src/components/modal/task-detail/TaskDetailModal.tsx
+++ b/src/components/modal/task-detail/TaskDetailModal.tsx
@@ -11,22 +11,28 @@ import TaskCommentSection from "./TaskCommentSection";
 export default function TaskDetailModal() {
   const { selectedTaskId } = useTaskStore();
   const [data, setData] = useState<TaskCardDetail | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    if (!selectedTaskId) return;
+  if (!selectedTaskId) return;
 
-    const getData = async () => {
+  const handleLoad = async () => {
+    if (isLoading) return;
+    setIsLoading(true);
+    try {
       const res = await fetchTaskCardDetail({
         token: TOKEN_1,
         id: selectedTaskId,
       });
       setData(res);
-    };
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
-    getData();
-  }, [selectedTaskId]);
+  useEffect(() => {
+    handleLoad();
+  }, []);
 
-  if (!selectedTaskId) return;
   if (!data) return;
 
   const {
diff --git a/src/lib/utils/colorUtils.ts b/src/lib/utils/colorUtils.ts
deleted file mode 100644
index 18b7fd4..0000000
--- a/src/lib/utils/colorUtils.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export function getHEXCode(color: string): string {
-  switch (color) {
-    case "green":
-      return "#7AC555";
-      break;
-    case "purple":
-      return "#760DDE";
-      break;
-    case "orange":
-      return "#FFA500";
-      break;
-    case "blue":
-      return "#76A6EA";
-      break;
-    case "pink":
-      return "#E876EA";
-      break;
-    default:
-      return "";
-  }
-}

From a2a2f2d37f5150483c162da22ec62508f645da5f Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Sun, 30 Mar 2025 17:38:38 +0900
Subject: [PATCH 2/3] chore: Remove mock data from TaskContentSection

---
 .../modal/task-detail/TaskContentSection.tsx  | 29 +------------------
 1 file changed, 1 insertion(+), 28 deletions(-)

diff --git a/src/components/modal/task-detail/TaskContentSection.tsx b/src/components/modal/task-detail/TaskContentSection.tsx
index 0d50f28..0032a09 100644
--- a/src/components/modal/task-detail/TaskContentSection.tsx
+++ b/src/components/modal/task-detail/TaskContentSection.tsx
@@ -21,7 +21,7 @@ export default function TaskContentSection({
           <div className="shrink-0 w-[1px] h-4 bg-gray-400 mx-3 tablet:mx-5" />
         </div>
         <div className="flex-grow min-h-0 overflow-x-auto whitespace-nowrap scrollbar-hide">
-          <TagList tags={mock} />
+          <TagList tags={tags} />
         </div>
       </div>
       <div className="w-[290px] tablet:w-[420px] pc:w-[445px]">
@@ -43,30 +43,3 @@ export default function TaskContentSection({
     </>
   );
 }
-
-const mock = [
-  "tag",
-  "tag",
-  "tag",
-  "tagtag",
-  "tagtagtag",
-  "tagtagtagtag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-  "tag",
-];

From 0a26a26c822304f5af65baa49cc8ef41b7a2500f Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Sun, 30 Mar 2025 17:46:59 +0900
Subject: [PATCH 3/3] refactor: Relocate loading condition inside useEffect in
 TaskDetailModal

---
 src/components/modal/task-detail/TaskDetailModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/modal/task-detail/TaskDetailModal.tsx b/src/components/modal/task-detail/TaskDetailModal.tsx
index 8be9acc..71269de 100644
--- a/src/components/modal/task-detail/TaskDetailModal.tsx
+++ b/src/components/modal/task-detail/TaskDetailModal.tsx
@@ -13,11 +13,11 @@ export default function TaskDetailModal() {
   const [data, setData] = useState<TaskCardDetail | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  if (!selectedTaskId) return;
-
   const handleLoad = async () => {
+    if (!selectedTaskId) return;
     if (isLoading) return;
     setIsLoading(true);
+
     try {
       const res = await fetchTaskCardDetail({
         token: TOKEN_1,