Merge pull request #106 from hyeonjiroh/feat/#22/sidebar-pagenation

refactor: #99/할 일 카드 모달 리팩토링

Author: LEEHAEHYUK

src/components/modal/task-detail/TaskContentSection.tsx

@@ -15,12 +15,12 @@ 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]">
+        <div className="flex-grow min-h-0 overflow-x-auto whitespace-nowrap scrollbar-hide">
           <TagList tags={tags} />
         </div>
       </div>

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(() => {
+  const handleLoad = async () => {
     if (!selectedTaskId) return;
+    if (isLoading) return;
+    setIsLoading(true);
 
-    const getData = async () => {
+    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 {